JS引发页面重排重绘的代价
时间:2022-05-06
本文章向大家介绍JS引发页面重排重绘的代价,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
示例
目标是修改div内容,3种实现方式,看下每种方式的执行时间
<html>
<body>
<div id="myDiv1"></div>
<div id="myDiv2"></div>
<div id="myDiv3"></div>
<script>
var times = 10000;
// 方式1
console.time(1);
for(var i = 0; i < times; i++) {
document.getElementById('myDiv1').innerHTML += 'a';
}
console.timeEnd(1);
// 方式2
console.time(2);
var str = '';
for(var i = 0; i < times; i++) {
var tmp = document.getElementById('myDiv2').innerHTML;
str += 'a';
}
document.getElementById('myDiv2').innerHTML = str;
console.timeEnd(2);
// 方式3
console.time(3);
var _str = '';
for(var i = 0; i < times; i++) {
_str += 'a';
}
document.getElementById('myDiv3').innerHTML = _str;
console.timeEnd(3);
</script>
</body>
</html>
结果
1: 318.88ms
2: 1.80ms
3: 0.97ms
方式1 最糟糕,每次循环都修改节点内容,引发重绘重排
方式2 只修改一次节点内容,比方式1好太多
方式3 也是修改一次节点内容,与方式2的时间差距是在获取节点操作上
可以看到,糟糕的JS代码代价很高,所以开发时一定要注意代码写法的不同对性能的影响
最基本的原则
尽量减少对节点几何元素的改变(例如宽和高),因为浏览器需要重新计算元素的几何属性,同样其他元素的几何属性和位置也会因此受到影响,引发重排,重排后比如会引发重绘
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- RPC详解
- 轻松学Pytorch – 行人检测Mask-RCNN模型训练与使用
- Linux的文本处理工具浅谈-awk sed grep
- 这样Review代码牛逼啦!
- FinDOM-XSS:一款针对DOM型XSS漏洞的快速扫描工具
- 使用Pycharm和跳板机 连接内网服务器
- CVE-2020-1313漏洞分析与利用PoC
- Linux用户登录日志查询 # 1 utmp、wtmp、btmp文件
- 浏览器同域名请求的最大并发数限制
- HTTP Strict Transport Security实战详解
- 深夜学算法之SkipList:让链表飞
- 自研安全工具之网页全链接爬取
- 实战远程文件同步(Remote File Sync)
- nginx cache的玩法
- PHP共享内存详解 前言