深入浏览器的渲染原理
输入URL后资源的加载过程
输入域名后该域名由DNS服务器解析为ip地址，该ip地址对应的是要查找的静态资源服务器。浏览器向该服务器请求静态资源，该服务器一般情况下返回HTML文件，在解析HTML文件时遇到有引入CSS文件资源和有引入JS文件资源时再向该服务器发起请求获取资源
浏览器渲染页面的流程
浏览器内核
- 常见的浏览器内核有
-
Trident（三叉戟)︰IE、360安全浏览器、搜狗高速浏览器、百度浏览器、UC浏览器;
-
Gecko（壁虎):Mozilla Firefox;
-
Presto(急板乐曲)-> Blink(眨眼): Opera
-
Webkit : Safari、360极速浏览器、搜狗高速浏览器、移动端浏览器(Android、iOS)
-
Webkit -> Blink : Google Chrome，Edge
-
渲染页面的详细过程
- 解析CSS文件的过程中是不会阻塞HTML文件的解析的
- 遇到JavaScript代码时，浏览器会停止对HTML文件的解析
回流和重绘的解析以及注意事项
理解回流reflow:(也可以称之为重排)
- 第一次确定节点的大小和位置，称之为布局(layout)。
- 之后对节点的大小、位置修改重新计算称之为回流。
什么情况下引起回流呢?
- 比如DoM结构发生改变（添加新的节点或者移除节点);
- 比如改变了布局(修改了width、height、padding、font-size等值)
- 比如窗口resize（修改了窗口的尺寸等)
- 比如调用getComputedStyle方法获取尺寸、位置信息;
理解重绘repaint
- 第一次渲染内容称之为绘制(paint) 。
- 之后重新渲染称之为重绘。
什么情况下会引起重绘呢?
- 比如修改背景色、文字颜色、边框颜色、样式等;
回流一定会引起重绘，所以回流是一件很消耗性能的事情。
所以在开发中要尽量避免发生回流
- 修改样式时尽量一次性修改
- 比如通过cssText修改
- 比如通过添加class修改
- 尽量避免频繁的操作DOM
- 我们可以在一个DocumentFragment或者父元素中将要操作的DOM操作完成，再一次性的操作
- 尽量避免通过getComputedStyle获取尺寸、位置等信息;
- 对某些元素使用position的absolute或者fixed
- 并不是不会引起回流，而是开销相对较小，不会对其他元素造成影响。
合成图层以及优化手段
绘制的过程，可以将布局后的元素绘制到多个合成图层中。
- 这是浏览器的一种优化手段;
默认情况下，标准流中的内容都是被绘制在同一个图层(Layer)中的
而一些特殊的属性，会创建一个新的合成层（CompositingLayer)，并且新的图层可以利用GPU来加速绘制
- 因为每个合成层都是单独渲染的
那么哪些属性可以形成新的合成层呢?常见的一些属性：
- 3D transforms
- video、canvas、iframe
- opacity动画转换时
- position: fixed
- will-change:一个实验性的属性，提前告诉浏览器元素可能发生哪些变化
- animation或 transition设置了opacity.transform
分层确实可以提高性能，但是它以内存管理为代价，因此不应作为web性能优化策略的一部分过度使用
script和页面解析的关系
- 遇到有引入JavaScript文件时，浏览器会停止对HTML文件的解析。进而下载JS文件并且执行完JS代码后再继续对剩余的HTML元素进行解析。
script元素defer属性的使用
defer属性告诉浏览器不要等待脚本下载，而继续解析HTML，构建DOM Tree。
- 脚本会由浏览器来进行下载，但是不会阻塞DOM Tree的构建过程
- 如果脚本提前下载好了，它会等待DOM Tree构建完成，在DOMContentLoaded事件之前先执行defer中的代码
另外多个带defer的脚本是可以保持正确的顺序执行的。
从某种角度来说，defer可以提高页面的性能，并且推荐放到head元素中
注意:defer仅适用于外部脚本，对于script默认内容会被忽略。
script元素async属性的使用
async是让一个脚本完全独立的
- 浏览器不会因async 脚本而阻塞(与defer类似)
- async脚本不能保证顺序，它是独立下载、独立运行，不会等待其他脚本
- async不会能保证在DOMContentLoaded之前或者之后执行
