浏览器的渲染

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

猜你喜欢

转载自blog.csdn.net/yichen_adf/article/details/78408481