浏览器运行原理与DOM的重绘和回流

从用户在浏览器地址栏输入网址，到看整个页面，中间发生了那些事情？

• HTTP请求阶段
• HTTP响应阶段
• 浏览器渲染阶段

关键词

• 进程(Process):是计算机中的程序关于某数据集合上的一次运行活动,是系统进行资源分配和调度的基本单位,是操作系统结构的基础。
• 线程(Thread):是操作系统能够进行运算调度的最小单位。
• 栈内存(Stack):在函数中定义的一些基本类型的变量和对象的引用变量都在函数的栈内存中分配

运行过程图解：

DOM的重绘和回流Repaint & Reflow

• 重绘：元素样式的改变（但宽高、大小、位置等不变）

  如 outline，visibility，color，background-color等

• 回流：元素的大小或位置发生了变化（当页面布局和几何信息发生变化的时候），触发了重新布局，导致渲染树重新计算布局和渲染

注意：回流一定会触发重绘，而重绘不一定回流

性能优化：

1. 减少HTTP的请求次数和大小

   • 资源合并压缩
   • 图片懒加载
   • 音视频走流文件
   • …

2. 避免DOM的回流

   • 放弃传统操作dom的时代，基于vue/react开始数据影响视图模式

     mvvm/mvc/virtual dom/dom diff …

   • 分离读写操作（现代浏览器都有渲染队列机制）

     offsetTop、offsetLeft、offsetWidth、offsetHeight、clientTop、clientLeft、clientWidth、clientHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、getComputedStyle、currenStyle…会重新渲染队列。

   • 样式集中改变

     div.style.cssText = 'width:20px;height:20px;'
     div.className = 'box';
     

   • 缓存布局信息

     div.style.left = div.offsetLeft + 1 + 'px';
     div.style.Top = div.offsetTop + 1 + 'px';
     //改为
     var curLeft = div.offsetLeft;
     var curTop = div.offserTop;
     div.style.left = curleft + 1 + 'px';
     div.style.top = curTop + 1 + 'px';
     

   • 元素批量修改

     文档碎片：createDocumentFragment

     模板字符串拼接

     let str = ``;
     for(let i=0;i<5;i++){
     	str+=`<li>${i}<\li>`
     }
     box.innerHTML=str;
     

   • 动画效果应用到position属性为absolute或fixed的元素上（脱离文档流）

   • CSS3硬件加速（GPU加速）

     transform、opacity、filters…

   • 牺牲平滑换取速度

   • 避免table布局和使用css的JavaScript表达式