gpt4 book ai didi

javascript - js 是否会阻塞页面渲染?

转载 作者:行者123 更新时间:2023-11-28 15:37:15 34 4
gpt4 key购买 nike

我读到了“关键渲染路径”,并且 js 显示为阻塞,但我的体验略有不同。

关键渲染路径图 http://i59.tinypic.com/29qnq88.jpg

1,如果我将外部 JavaScript 放在头部并重新加载页面,我会看到空白页面,直到脚本加载解析等等。 (这正是图片中的内容)

2,如果我在 body 元素末尾放置相同的 JavaScript,我会看到渲染的页面和脚本仍在从服务器加载。

为什么在 head 和 body 中放置相同的外部 js 是不同的?关键渲染路径不一样?

最佳答案

<script>当 HTML 解析器在文档中遇到 block 时,就会对 block 进行评估。当 <script> block 位于 <body> 的末尾,解析器已经构建了大部分 DOM,并且可以开始将其渲染到屏幕上。 (它可能仍在等待图像或字体,因此布局可能会改变,但它可以开始。)

<script>位于头部,但是,浏览器不知道文档正文中的内容,因此没有任何内容可渲染。

我想,要理解这一点,您至少需要对浏览器接收 HTML 页面内容时发生的情况有一个基本的了解。页面内容被逐个元素地“消化”,并且这是递归完成的。容器元素的内容是从上到下处理的。

在此过程中,当 <script>标签被完全看到(也就是说,浏览器已经消耗了从开始 <script> 到结束 </script> 的 HTML 内容部分),然后在解析过程继续之前评估 JavaScript 代码到页面的其余内容。 (我在这里忽略 <script> 标签上新的可选“async”属性。)

关于javascript - js 是否会阻塞页面渲染?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25229841/

34 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com