说到这里相信大家应该听到过一句话，什么呢？
css代码放在<head>里；javascript要写在<body>中。这是为何呢？思考一下
不知道读者有没有听说过js阻塞，这个问题可以说是js阻塞引起的。首先我们先来举一个例子：
<html>
<script src="1.js" type="text/javascript">
<script src="2.js" type="text/javascript">
<script src="3.js" type="text/javascript">
<script src="4.js" type="text/javascript">
<link rel="stylesheet" href="1.css">
<body>
<p>js阻塞</p>
</body>
</html>
以上代码未经实验，只是用来说明问题。
这段代码在运行过程中遇到<script>在一些浏览器中是逐个下载解释的，当然了有的浏览器例如chrome就可以支持多个并行下载解释。对于‘逐个下载解释’意味着1.js没有解释完成就不能往下解释2.js，以此类推……这对加载网页过程中时间的损耗是很大的。就算有的浏览器支持并行下载js，逐个下载的问题得到了解决，但是js的下载仍会阻止页面中图片和样式文件的下载，不仅如此，HTML是从上往下按着顺序加载的，如果遇到未加载完的脚本时，DOM树是会被阻塞的。DOM树被阻塞，渲染树也被阻塞（读者如果对渲染树不了解那么不必在意渲染树，但是私下要了解一下哦），一个网页基本上可以说是体无完肤了。
上面的例子是一个很浅显的关于js阻塞的例子。但是对于l理解js阻塞是会很有帮助的。
扫一扫
5483
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
