这是今天我一个同事问我的问题，我凭着印象中关于浏览器的js载入特性敷衍了 他一下，我说现在的浏览器是多个js同时载入，我印象中有篇文章介绍chrome 好像是一次载入5个js 文件依次这样，我都是印象，或者看书上网上的一些文章，为何不自己验证一下，那就试试吧，
1：环境Chrome 浏览器，
2：若干js文件，其中一个特别大js文件大概10M，主要问了验证js 的阻塞效果
浏览器一次载入多少个JS文件？
下边是使用一个10M的大js文件造成加载的是阻塞，后边是跟30个非常小的js 看一下效果
<HEAD>
<TITLE> history </TITLE>
<script src="res/10M.js.js"></script>
<script src="res/test.js"></script>
<script src="res/test1.js"></script>
<script src="res/test2.js"></script>
<script src="res/test3.js"></script>
<script src="res/test4.js"></script>
<script src="res/test5.js"></script>
<script src="res/test6.js"></script>
<script src="res/test7.js"></script>
<script src="res/test8.js"></script>
<script src="res/test9.js"></script>
<script src="res/test10.js"></script>
<script src="res/test11.js"></script>
<script src="res/test12.js"></script>
<script src="res/test13.js"></script>
<script src="res/test14.js"></script>
<script src="res/test15.js"></script>
</HEAD>下图是测试结果
很明显看到10M.js 还在pending 但是下边的所有test1-20.js 都已经Finished， 说明了现代浏览器确实是一次载入多个js，是同时加载而且不会产生阻塞，那么是不是加载5个js，肯定不是了，我最多加到了30个js文件，也是同时一次载入的，起码在chrome 浏览器中所有的js 文件是一次载入的。
js载入后立即行吗？
如果让我回答，我看到几乎所有的资料介绍js 的加载机制都是载入既执行，因为js是脚本语言，是没有编译过程的，但是如果看到上一个实验，会发现这种说法跟浏览器载入js的机制是有悖论的，还是实践出真知吧， 这次我在第一个10m.js 文件的最后加了一句console,其他的小文件也都加入console，下边看看结果
明显最后载入完成的10m.js 如果按照以前网上的一些说法，应该是10m.js 是最后打印console。
这里是执行结果
this is 10m.js....... test1.js test2.js test3.js test4.js test5.js
10m.js 中的console确实第一个打印，
所以以上证明了一个问题，js 真正载入逻辑是“并行载入，顺序执行”，所以js 载入后是不是直接执行的，而在浏览器的内存中等待其他所有js 成功载入后在顺序执行，所以也就保证了我们js前后依赖是没有问题的。这里问题又来，如果有js 载入失败怎么办？通过其他的js 失败加载的实验，这里就不贴出了，如果你写的js无法加载浏览器不会一直等待，所以你的个别js 不能加载并不能影响整个网页中js 加载执行的顺序，可以说是毫无影响的
JS载入到底会不会阻塞DOM渲染
我从所有的资料中看到都是js加载和执行过程都会阻塞dom 的渲染，那就试试吧，下边我在测试的网页上随便写了几个按钮的dom节点
当在51m的时候10m.js 还没有加载完成，当然你可以看到页面还是处于空白，所以证明一个问题
js 的加载是会阻塞DOM渲染的
面试经常问到问题，如何加快页面响应，其中就有一个回到是使用async属性
async到底能不能？我很好奇
来吧还是上例子，我把10m.js 的属性修改为async，如果按照很多人的说法，那么在10m.js 没有加载完成的时候dom应该已经渲染完了，看看结果吧骚年
扫一扫
278
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
