随着公司业务迭代，网站页面会越来越多，功能会越来越强大复杂，这就会使网站的访问速度受到影响。然而对于用户而言，却希望网站的速度越来越快，因此对于前端工程师来说，性能优化的挑战越来越大，只有不断地对网站持续的优化，才能符合用户体验需求。因此，我们首先对浏览器网页渲染原理有了充分对认识，才可以在持续优化的过程中少走弯路。
现代浏览器网页渲染原理：
构建DOM -> 构建CSSOM -> 构建渲染树 -> 布局 -> 绘制
(Javascript -> style -> Layout -> Paint -> Composite)
1.解析HTML，根据标签渲染成DOM结构，构建DOM对象
2.将DOM 中引用的css 样式表引用过来，将css的标记识别出来，构建CSSOM
DOM，CSSOM ，解析完成后，浏览器引擎会通过DOM Tree 和 CSS Rule Tree 来构造 Rendering Tree渲染树
3.布局(回流)与绘制
当浏览器生成渲染树以后，就会根据渲染树来进行布局，渲染树只包含网页需要的节点，布局计算每个节点精确的位置和大小，绘制是像素化每个节点的过程。回流必定会发生重绘，重绘不一定会引发回流。重绘和回流会在我们设置节点样式时频繁出现，同时也会很大程度上影响性能。回流所需的成本比重绘高的多，改变父节点里的子节点很可能会导致父节点的一系列回流。
因此在开发网页时应尽量少触发布局影响回流的操作。
4.常见引起回流属性和方法
任何会改变元素的位置和尺寸大小的操作，都会触发回流，
添加或者删除可见的DOM元素；
元素尺寸改变： 边距、填充、边框、宽度和高度
计算 offsetWidth 和 offsetHeight 属性
设置 style 属性的值
修改浏览器大小，字体大小
5.如何减少回流、重绘
(1) 避免回流，使用transform触发复合，例如
position transform: translate(...)
scale transform: scale(n)
rotaion transform: rotate(*deg)
opacity: 1
(2) css 中应该先设置元素的位置和尺寸大小，再重绘属性
.demo{
width: 100px;
height: 200px;
font-size: 14px;
color: #333;
background: #fff;
}
(3) 高频事件使用防抖函数处理
高频事件例如： input框keyup,鼠标move事件等
常见的防抖函数可用lodash.js中封装好的工具函数或者简单的手写一个
let ticking = false
window.addEventListener('keyup', (e) => {
******do something
if (ticking) return;
ticking = true;
window.requestAnimationFram(() => {
******do something
ticking = false;
})
})
网友评论