前言，加载与执行.md

layout	title
default	{"site.name" => nil}

前言，加载与执行

前言

其实网络速度加的很快，然后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来等待执行完毕再执行接下来的代码。就是说并行下载，但是我们可以控制执行的顺序。