解析HTML

浏览器从网络或本地文件中获取到HTML源代码，然后从上到下的解析源代码,如果遇到css或js文件会停止解析(阻塞)，反而解析css和js,img等不会停止解析接下来的带代码

css放在body的上面,js放在body下面的原因的是为了尽快解析css,使用户不会看到一个丑陋的页面,也是为了避免页面闪烁

生成DOM树

浏览器会一边解析HTML,一边生成DOM树,与js中获取的dom相同
DOM树生成完成会执行DOMContentLoaded

document.addEventListener("DOMContentLoaded", function() {
   console.log("DOM树已全部生成完毕");
});

这种方法只能使用addEventListener绑定
如果有两张图片,DOMContentLoaded可以绑定一张图片,这张图片dom加载完成后执行：

var img = document.querySelector('.img1')
img.addEventListener("DOMContentLoaded", function() {
   console.log("图片加载完成")
});

所有资源加载完成会执行load函数

window.onload = function(){
  console.log("所有资源已加载完成");
}

load事件也可以针对单个外部资源使用，资源加载完成后触发

生成渲染树

浏览器一边生成DOM树，一边计算DOM树中每个节点的样式规则，最终形成渲染树。

布局layout/重排reflow

又被称为reflow(回流,重排),指浏览器一边生成渲染树,一边计算DOM元素的位置与样式,完成后,页面的dom的位置与样式就确定下来了,即将渲染给页面

这个过程会在页面的运行中不断重复,获取dom的尺寸和位置和直接或间接改变dom的尺寸和位置会导致reflow
reflow非常耗时，浏览器为了提升性能，对JS中连续导致reflow的代码，把reflow的时间点延迟到结束后进行，但在此过程中，如果遇到了获取尺寸和位置的代码，浏览器会迫不得已立即reflow

dom.style.width = '100px'
dom.style.height = '200px'
dom.style.left = '10px'
dom.style.top = '10px'

只执行一次reflow

dom.style.width = '100px'
dom.style.height = '200px'
dom.clientHeight; // 读取高度，导致强行reflow
dom.style.left = '10px'
dom.style.top = '10px'

执行两次reflow

重绘 repaint

浏览器一边reflow,一边生成对应的图形生成到页面叫重绘 导致reflow的代码都会导致重绘

不会改变盒子位置和尺寸的代码不会到子reflow,仅会导致重绘,背景颜色,文字颜色,圆角等