浏览器性能相关

阮一峰写的一篇网页性能管理详解，文章中解释了浏览器重排、重绘的概念，比较清晰易懂。

总结点：

• 网页的生成过程主要是：1）dom解析 2）css解析 3）整合dom树和cssom（css对象模型）生成最终的渲染树 4）layout布局排列【reflow】 5）渲染绘制【repaint】。
• 写操作之后紧跟一个读操作，就会立刻引发重新渲染。
• 重排是layout部分，重绘是painting部分；重排会导致重绘，重绘不一定导致重排。
• 重排和重绘很耗费资源，这是导致网页性能低下的重要原因。
• window.requestAnimationFrame() 可以将多个改动集中到一次渲染中完成，提供网页性能
• window.requestIdleCallback()也是提供网页性能的一个API

讲浏览器渲染机制的一篇文章

文档样式闪烁FOUC：flash of unstyled content
上面提到的网页生成的5个过程，实际中并不是严格按照这个顺序来的，实际是边下载边解析边渲染，这就可能产生由于使用的样式文件由于网络延迟等原因导致的样式缺失，从而产生样式闪烁。

注意区分：阻塞渲染 和 阻塞解析

• 阻塞解析：后面的标签等都不在解析，不会生成到dom树中。
• 阻塞渲染：标签仍然继续解析，dom继续生成，但是最后的渲染树不会进行整合生成或者最后的渲染不会执行。
• 不同浏览器 阻塞渲染和阻塞解析的规则也不尽相同。

提高网页性能的方法

1. 减少浏览器重排和重绘的次数：尽量使用类名、不要一个一个的去修改样式等；
2. 尽量减少http请求，文件请求多时，可以将文件放到不同的域名下（同一域名下 同一时间可以并行发起的请求数是有限制的）；
3. 写css选择器时 尽量采用 #id .className的格式 而不是 #id tag的格式：因为选择器是从右往左匹配，最右边直接是tag的话，可能会匹配出很多不应该被匹配的项，在从中筛选的话 很耗费资源；
4. 尽量先指明img的宽高，预留出足够的位置来防止后续加载成功的图片，防止

链接