一浏览器的渲染分为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树再渲染么?