js是否阻止页面渲染？
[英]is js blocking for page render or not?
问题描述
我读到有关“关键渲染路径”的文章，而js被显示为阻塞，但是我的经验几乎没有什么不同。
关键渲染路径图片http://i59.tinypic.com/29qnq88.jpg
1，如果我将外部javascript放在页头并重新加载页面，则看到空白页面，直到脚本被解析为止，依此类推。 （这正是图片）
2，如果我在body元素的末尾放置了相同的javascript，我看到呈现的页面和脚本仍从服务器加载。
为什么不同将相同的外部js放在头部和正文中？ 关键渲染路径不一样吗？
2 个解决方案
解决方案1
4 已采纳 2014-08-10 15:02:18
HTML解析器在文档中遇到<script>块时会对其进行评估。 当<script>块位于<body>的末尾时，解析器已经构建了大部分DOM，并且可以开始将其呈现到屏幕上。 （它可能仍在等待图像或字体，因此布局可能会更改，但可以开始使用。）
但是，当<script>放在头部时，浏览器不知道文档主体中的内容，因此没有要渲染的内容。
我想，要理解这一点，就需要您至少对浏览器收到HTML页面内容时的情况有一个基本的了解。 页面内容是逐元素“消化”的，这是递归完成的。 容器元素的内容从上到下进行处理。
在此过程中，当完全看到<script>标记时（也就是说，浏览器已使用了从开头<script>到结尾</script>的HTML内容的一部分），则在解析之前评估JavaScript代码。流程继续到页面内容的其余部分。 （我在这里忽略了<script>标记上新出现的可选“ async”属性。）
解决方案2
0 2018-02-01 06:18:17
由于javascript可以同时更改DOM和CSSOM，因此它会停止任何CRP阶段并处于阻塞状态，除非异步！
“尽管所有JS都位于页面的底部，但是在首映内容中消除了渲染阻止JavaScript”
[英]“Eliminate render-blocking JavaScript in above-the-fold content” even though all JS is at the bottom of the page?
在重新加载期间，Javascript Retina / HD显示检测和阻止页面呈现
[英]Javascript Retina / HD display detection and blocking page render during reload
Google PageSpeed Insights说“删除阻止渲染的js文件”
[英]Google PageSpeed Insights says 'remove render blocking js file'
避免同时具有css和js依赖关系的插件进行渲染阻止
[英]Avoid Render Blocking by plugins which have both css and js dependencies
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.