web性能优化之浏览器网页渲染原理

随着公司业务迭代，网站页面会越来越多，功能会越来越强大复杂，这就会使网站的访问速度受到影响。然而对于用户而言，却希望网站的速度越来越快，因此对于前端工程师来说，性能优化的挑战越来越大，只有不断地对网站持续的优化，才能符合用户体验需求。因此，我们首先对浏览器网页渲染原理有了充分对认识，才可以在持续优化的过程中少走弯路。

现代浏览器网页渲染原理：
构建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;
  })
})