web常见性能优化总结（浏览器渲染过程详解）
文章目录
-
-
-
- 一、什么是web的性能优化
- 二、web性能优化的目的
- 三、web性能优化的原理
-
- 3.1 加载文档
- 3.2 生成dom树
- 3.3 加载css 和js
- 3.4 生成CSS OM
- 3.5 rending tree
- 3.6 layout（flow 、reflow）
- 3.7 paint（repaint）
- 3.8 composite （合并）
- 四、性能优化
-
- 4.1 html的语义化编程
- 4.2 资源的加速
- 4.3 js的优化
- 4.4 CSSOM 优化
- 4.5 dom操作节流
- 4.6 加载渲染分流
- 4.7 避免repaint和reflow
-
-
一、什么是web的性能优化
web的性能指标有很多，大致可以分为三类：
- 首次访问速度。首次访问速度主要指首页的加载速度，这个在移动端显得尤为可贵，对于大厂的h5 app，这一块的优化一直都是头疼的问题，例如淘宝首页，手百首页等等，让用户多看几百毫秒的白屏，都会让pm逼死一帮程序猿。
- 持续访问速度。持续访问速度更多指对于CPU，GPU，内存等资源的使用，使用过程中的是否有卡顿，是否保持流畅等等。
- web的健壮性。健壮是指，对于对于并发，大量请求和访问，web安全等等极端情况下web的可用性。
这次我们要讲的是主要是第一点，首次加载时，web性能的优化，这也是一版前端面试会的常考点。之后的web 性能优化均指的是第一点。
二、web性能优化的目的
- 优化用户体验，提升用户留存率。有人研究过：2秒之内，95%以上的实验者保持良好的注意力，3秒之后注意力开始分散；当等待时间超过5秒，70%的实验者能保持良好的注意力；当等待时间超过9秒，仅剩下20%能保持良好的注意力，对于不同首屏加载等待时间对于用户的留存，每个大厂不尽相同，但是大家都不知觉的精确到毫秒级，重要性可想而知。
- 提升web的SEO排名。在17年10月，百度就推出了对于首评加载时长超过3秒的web，降低其权重的“闪电算法”
三、web性能优化的原理
web性能的优化的原理，不得不提到浏览器在加载web首页时做的工作了，我们搞清楚了他的工作步骤，才能知道优化的点在哪里。下图是浏览器渲染的几个步骤：
上图中有几点需要我们注意一下：
3. DOM和CSS OM是有先后开始，但是在过程中是可以(注意是可以，不是一定，也不是不行)同步进行的
4. DOM和CSSOM 都和js的解析是互斥的，这个很好理解，js可以修改dom节点或者css样式，所以js会阻塞其他两个的进程，直至js执行完毕
那么他的执行顺序大致可以这么看
下面我们结合chorme的新增功能performance(控制台>performance)来对于每一个步骤的工作进行分析：
3.1 加载文档
常见的浏览器文档类型有，HTML、XHTML、SVG，XML，在用户打开浏览器的时候，首先要做的是解析域名和dns，找到对应的IP，然后通过校验之后，像服务器发起请求，服务器相应的内容就是要加载的文档。
3.2 生成dom树
这个过程主要是把文档解析成DOCUMENT OBJECT，例如html的
，这个结构的解析，浏览器内置的都可以直接解析这些文档，不用依赖任何其他的文件，所以这个过程会很快，最终生成表示能够表示整个文档和每个节点的类型，数据和节点关系的树形结构，简称dom树。
需要注意一点：这里是全部的node节点，即使
