文件加载与渲染问题

最新推荐文章于 2023-07-22 22:21:30 发布

Aviator_huahua

最新推荐文章于 2023-07-22 22:21:30 发布

阅读量236

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_59785331/article/details/130069893

版权

script标签引入文件时加载、解析和执行都会阻塞DOM的解析和渲染，即解析器在遇到<script> 标记时会立即解析并执行（或请求）脚本。文档的解析将停止，直到脚本执行完毕后才会继续。

阻塞渲染并不是页面不渲染，如果页面非要等到js加载执行完毕之后再渲染，那用户等待时间也太长了。浏览器的设计肯定会尽早让用户看到页面，因此遇到<script>标签时，会触发一次Paint，浏览器会将<script>标签之前的元素渲染出来。

但也并不是所有的<script>标签都会触发Paint。

因此，建议<script>标签放在</body>结束标签之前，这样不会不会阻塞页面整体内容的DOM解析和渲染。但如果页面中只有inline的<script>标签，那么放在任何位置对页面的渲染影响都是一样的。

DOM的解析和CSSOM的解析是一个并行的过程。两者互不影响。两者解析完成之后，会合并生成render tree，之后就是layout和paint阶段，渲染到页面中。

<link>标签并不会像带scr属性的<script>标签一样会触发页面paint。浏览器并行解析生成DOM Tree 和 CSSOM Tree，当两者都解析完毕，才会生成render tree，页面才会渲染。所以应尽量减小引入样式文件的大小，提高首屏展示速度。

js运行时，有可能会请求样式信息，如果此时还没有加载和解析样式，js就有可能会得到错误的回复，产生很多问题。因此浏览器在<link>标签的加载和解析过程中，会禁止脚本运行。

<script>标签会阻塞DOM的解析和渲染；
带src属性的<script>标签会触发页面paint，渲染此<script>标签之前的元素，但也有一定的条件：
- 此<script>标签是在<body>中的，<head>中的不会触发paint；
- 此<script>标签之前的<link>标签需加载完毕。
inline的<script>标签不会触发页面paint，页面必须等到脚本执行完毕，且DOM Tree和CSSOM Tree解析完毕后才会渲染；
<link>标签不会阻塞DOM的解析；
<link>标签会阻塞DOM的渲染；
<link>标签同时还会阻塞其之后的<script>标签的执行。

关注