页脚中的脚本是“渲染阻止”吗？(Is a script in the footer “render-blocking”?)

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

谢谢

After discussing it with a colleague, we need an answer to the question: Is a script in the footer "render-blocking"? I mean, is any content showed to the user before the script is completely loaded?

Thank you

最满意答案

当您将javascript放在页面的页脚中时; 即在关闭</body>没有hte defer / async属性然后它是渲染阻塞。

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

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

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

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

用于删除渲染阻止Javascript和渲染树构造，布局和绘制的链接

It is coming late but I found the answer: No, a script is not render-blocking, a script is parse-blocking. Only CSS files are render-blocking.

If the script is inside the body, it will be parse-blocking but the content parsed before the script can already be rendered (if it is in the head nothing will be rendered because no content has been parsed yet). So, yes, content can be showed/rendered before the script is completely downloaded.

Please, see these two examples:

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

<!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> 
  
 

 

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

 
 
  
  
<!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> 
  
 

页脚中的脚本是“渲染阻止”吗？(Is a script in the footer “render-blocking”?)

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

 谢谢 
After discussing it with a colleague, we need an answer to the question: Is a script in the footer "render-blocking"? I mean, is any content showed to the user before the script is completely loaded?
 

Thank you

                
最满意答案

                
                    
                        
 当您将javascript放在页面的页脚中时; 即在关闭</body>没有hte defer / async属性然后它是渲染阻塞。 
 

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

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

 在我们真正看到结果之前，浏览器会执行4个主要步骤。 
 
 
  DOM和CSSOM结构。  
  渲染树  
  布局 - 计算每个对象的确切位置和大小。  
  油漆 - 是最后一步; 将结果像素渲染到屏幕上。  
 

 用于删除渲染阻止Javascript和渲染树构造，布局和绘制的链接 
It is coming late but I found the answer: No, a script is not render-blocking, a script is parse-blocking. Only CSS files are render-blocking.
 

If the script is inside the body, it will be parse-blocking but the content parsed before the script can already be rendered (if it is in the head nothing will be rendered because no content has been parsed yet). So, yes, content can be showed/rendered before the script is completely downloaded.
 

Please, see these two examples:
 

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

 
 
  
  
<!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> 
  
 

 

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

 
 
  
  
<!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>