一般情况下服务器会给浏览器返回 xx.html 文件 解析html 其实就是 Dom 树的构建过程
我们可以根据以下html 结构 来简单的分析出 html 的解析过程
在解析的过程中,如果遇到CSS的link元素,那么会由浏览器负责下载对应的CSS文件: PS: 这里下载 CSS 是不会影响到 DOM树的解析的
下载完成后 就会对CSS 文件解析出对应的 规则树 , 案例如下图 :
body{font-size: 16px}
p{font-weight: bold}
span{color: red}
p span{display:none}
img{float: right}
当有了DOM Tree和 CSSOM Tree后,就可以两个结合来构建Render Tree了
需要注意的是:
渲染的流程可以参考下图 :
完成以上五步 成功在浏览器渲染出 对应的 xx.html 文件
reflow
:
回流在什么时候会出现 :
重绘怎么出现 :
绘制的过程,可以将布局后的元素绘制到多个合成图层中。
会形成新的合成层的属性:
PS:分层确实可以提高性能,但是它以内存管理为代价,所以不作为性能优化策略来使用
JS 在我们渲染过程中的那一步呢?
这么做有什么好处?
代码案例
index.html
<script src="./js/test.js">script>
<body>
<div class="box">div>
body>
<script>
var boxel = document.getElementsByClassName("box")
console.log(boxel);
script>
test.js
debugger
console.log("hello")
新的问题:
这里 js 给我们提供了两个属性 来解决这个问题
defer 属性告诉浏览器不要等待脚本下载,而继续解析HTML,构建DOM Tree,如果脚本提前下载好就等待加载,等DOM完成 在触发DOMContentLoaded之前执行defer中的代码
PS: defer 按照默认顺序执行 不会影响顺序 且可以操作DOM
<script>
window.addEventListener("DOMContentLoaded", () => {
console.log("DOMContentLoaded");
})
</script>
<script>
var boxel = document.getElementsByClassName("box")
console.log(boxel);
</script>
<script defer>
console.log("defer-demo")
</script>
<script>
debugger
console.log("hello")
</script>
建议:
async 特性与 defer 有些类似,它也能够让脚本不阻塞页面。
它的特性:
<script>
window.addEventListener("DOMContentLoaded", () => {
console.log("DOMContentLoaded");
})
</script>
<script async>
console.log("defer-demo")
</script>
总结