Question

在与同事讨论后，我们需要回答一个问题：页脚中的脚本是否“呈现阻塞”？我的意思是，在脚本完全加载之前是否向用户显示了任何内容？

谢谢

Answer 1

现在已经很晚了，但我找到了答案：不，脚本不是渲染阻止，脚本是解析阻塞的。只有CSS文件是渲染阻止的。

如果脚本在正文中，它将是解析阻塞但是在脚本已经被渲染之前解析的内容（如果它在头部，则不会呈现任何内容，因为还没有解析内容）。所以，是的，可以在脚本完全下载之前显示/呈现内容。

请看这两个例子：

Screenshot Test1: Content rendered before the large JS file finishes downloading

＆＃13;

<!DOCTYPE html>
<html lang="en"> 
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
	<section>
		<h2>testing</h2>
		<h4>Lorem Ipsum has been the industry's standard dummy text printer took a galley of type and scrambled</h4>
		<img src="img/icon_128.png" width="128px" alt="">
		<h3>We are testing</h3>
		<p>Lorem Ipsum is simply dummy text of the printing and typesf own printer.</p>
	</section>
	<script src="js/main.js"></script>
</body>
</html>

＆＃13;

Screenshot Test2: Content before the large JS file is rendered. The rest has to wait until the JS finishes downloading

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
	<section>
		<h2>testing</h2>
		<h4>Lorem Ipsum has been the industry's standard dummy text printer took a galley of type and scrambled</h4>
		<img src="img/icon_128.png" width="128px" alt="">
		<script src="js/main.js"></script>
		<h3>We are testing</h3>
		<p>Lorem Ipsum is simply dummy text of the printing and typesf own printer.</p>
	</section>
</body>
</html>

＆＃13;

Answer 2

通常，每个脚本都是一个阻止程序，但最好在页脚中保存js。

Html页面由浏览器逐行执行，就像您的代码一样。如果您的脚本将位于页脚中 - 这意味着此脚本之前的所有内容都已呈现。

Answer 3

当您将javascript放在页面的页脚中时;即在结束</body>之前没有hte defer / async 属性，那么它就是渲染阻止。

当浏览器构建 DOM 并在页脚中读取脚本标记且没有defer/async属性时，浏览器只能继续构建DOM（如果脚本）已完全下载。

请注意，在浏览器绘制结果之前，浏览器中尚未显示 DOM 构造。

在我们真正看到结果之前，浏览器会执行4个主要步骤。

DOM和CSSOM结构。
渲染树
布局 - 计算每个对象的确切位置和大小。
油漆 - 是最后一步;将结果像素渲染到屏幕上。

Removing Render-Blocking Javascript和Render-tree Construction, Layout, and Paint

页脚中的脚本是“渲染阻止”吗？

3 个答案:

在我们真正看到结果之前，浏览器会执行4个主要步骤。