一浏览器的渲染分为5个步骤
1.处理HTML标记并构建DOM树
2.处理CSS标记并构建CSSOM树
3将上述2者合并成渲染树
4 计算每个节点的几何信息
5 绘制在屏幕上
CSSOM加载完成后才会渲染,遇到Script会先执行,DOM构建会暂停(css和JavaScript阻塞渲染)
我理解的把script标签放在</body>上原因:
1.脚本会阻塞页面渲染(不能快速出现脚本没有执行的页面)
2.DOM没有构建完成,操作DOM可能会出错
CSS阻塞优化
<link href="css/other.css" rel="stylesheet" media="(min-width:30em )"Javascript
<script src="js/a.js" defer><script>
<script src="js/a.js" async><script>defer document和javascript加载并行,都加载完后再执行
async 加载并行,JavaScript加载完开始执行,createElement async默认为true
疑问:如果用Javascript在dom中增加节点是先渲染一次然后重构DOM树再渲染么?
本文详细介绍了网页渲染的五个步骤,包括处理HTML和CSS构建DOM和CSSOM树、合并渲染树、计算几何信息及最终绘制过程。同时探讨了CSS和JavaScript如何阻塞渲染,以及如何通过调整脚本位置和使用async/defer属性来优化加载性能。

被折叠的 条评论
为什么被折叠?



