HTML 的解析过程

js 的下载和执行会阻塞 HTML 的解析，等 js 执行完继续去解析 HTML

问题1：为什么执行 js 会阻塞 HTML 的解析（HTML 的解析为什么要等到 js 执行完才能继续解析）？
答：因为执行 js 的过程可能会修改到 dom 树，比如 document.write('<div>aaa</div>)`

问题2：js 的下载为什么会阻塞 HTML 的解析？
答：因为浏览器解析是一行一行的只有解析到对应的script标签才会去下载，所以一旦下载就必须等它执行完毕，由于浏览器没有做特殊的优化所以会阻塞 HTML 的解析

在 script 标签上加 async 和 defer 的区别

defer

1). 让 js 的下载 和 HTML 的解析可以同时进行
2). 保证 js 的执行是在 HTML 的解析之后，DOM ready 之前
3). 页面中有多个 defer 它们执行的顺序是按照你写的顺序，只有它们都执行完了才会触发 dom ready

async

让 js 的下载和 HTML 的渲染完全没有关系
使用场景用到的 js 与页面完全没有关系，只是单纯的计算的时候

css 的下载和解析也会阻塞 js 的执行

答：js 需要读取 css 的结果
比如：我们在js里获取一个元素css样式里的高度，那么这时候只有等到 css解析完成才能获取到，所以 js的执行需要等 css下载解析完成；

页面渲染

页面渲染过程拿到DOM树和 CSS树后合成一个渲染树（原因浏览器拿到DOM树不知道它的样式，拿到CSS树不知道它的HTML结构，所以必须合成一个渲染树）->布局（获取到每个div以及页面的大小高度和尺寸）-> 绘制（给 div 加样式）->合成（把处于同一位置的 div 进行拍平合并）

重点：当我们改变了一个元素的高度的时候，因为它的大小尺寸变了，所以就需要重新布局也就是 reflow，当我们改变一个元素的背景色的时候它就会重新绘制 repaint，正常情况下只要重新布局了就肯定会重新绘制，而不管是重新布局还会重新绘制大都会重新合成
reflow 属性：height, font-style,left,line-height,margin-bottom
repaint：text-decoration, visiblity,background-color