总览

前言

其实网络速度加的很快，然后 V8 引擎(实时编译引擎，转化为机器码来执行)的出现。但是我们对于运行时间，下载，DOM 操作，页面生存周期，还有 DOM 交互，网络延迟，JS 的阻塞，并发下载等等，还是需要研究。

加载与执行

JS 阻塞的：也就是时候大多数浏览器使用的是同一进程来处理用户界面刷新和 Javascript 脚本执行。

原因在于脚本的执行过程很有可能会修改页面的内容。

这种情况也发生在 src 的 script，浏览器必须先花时间下载文件的代码，然后解析执行，所以页面的渲染和交互是完全被阻塞的。

脚本位置

html4 里面规定 script 可以放在 head 里面或者 body 里面。并允许出现多次。

但是页面在解析到 body 之前，不会渲染页面的任何部分。所以脚本放到页面顶部会导致页面的卡顿。

高版本浏览器现在允许并行下载 Javascript 文件了，但是 js 任然会阻塞其他资源，比如图片。而且页面仍然要等 JS 都下载执行完才能继续。

所以尽量放到底部。

阻止脚本

HTTP 的额外开销，我们可以合并 JS，将他们 Combo。

无阻塞的脚本

虽然将 JS 合并了之后减少了额外的 HTTP 的开销，但是仍然需要锁住页面很久，所以我们可以将脚本延迟执行。

Html4 的 defer 属性和 Html5 的 async 属性是会开另外的线程下载，然后 defer 是 Dom 加载完之后执行，async 是在下载完了就立刻执行。但是他们都在 onload 之前。

注意：规范里 defer 是 src 的才有效。

动态的脚本元素

就是说使用 createElement(‘script’)来创建。文件在该元素被添加到页面的时候被下载。而且下载和执行过程不会阻塞页面的其他线程。如果是在加载过程中最好放到 head 里。不然 IE 会有操作终止的问题。

我们可能需要监听下 script 的 load 事件，ie 下(if(script.readyState))就写 script.onreadstatechange，然后判断他的 readyState 来执行他的 callback。

XMLHttpRequest 脚本注入

这个有些傻，就是 ajax 来请求 js 文件，然后在 append 进 body 里面..好处是可以下载且不执行，并且适用性好。

但是因为 ajax 的同源策略，所以 CDN 就不能用了。

推荐的无阻塞模式

就是放在末尾(保证整个 DOM 树的结构 load 好了)直接把加载器下下来(当然要压缩好)，然后用这个加载器来 append，然后加载完了就执行 callback 就好了。

YUI 的包括雅虎的都是这样一种加载方式。

还有一种 LABjs 是加强版，对于加载过程有了更精细的控制，他可以很好的管理依赖关系，在加载了某个 script 之后可以调用 wait 来等待执行完毕再执行接下来的代码。就是说并行下载，但是我们可以控制执行的顺序。

---

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 981909093@qq.com