javascript载入研究

为啥要研究javascript的载入呢，原因很简单，因为他影响页面载入速度，特别是第一次的载入速度。（如果考虑同域的其他页面可以使用预先载入的方法：几种Preload javascript,CSS, image的方法）。

一个页面载入除了html，剩下的就是javascript，css和image了。css可以使用sprite。image在以后会讨论(Preload image 网页图片预载入)，今天先看javascript。

问题：这个连接里很清晰的介绍了原因，基本思想就是对于较老版本的浏览器，资源的载入是单线程的，页面的渲染就要等到javascript都载入完成才能执行，对于用户来说就是非常明显的延迟。

解决办法在我的另一篇文章中：7种延迟加载javascript方法。

前四种方法速度快的原因在于动态加载script tag会让浏览器异步执行下载，也就是说多线程同时下载。

第五六种方法使用ajax，这不用说肯定是异步的。

如果借鉴preload的思想，浏览器对image,object也会多线程下载，我们也可以使用这两个来延迟执行javascript。

新的问题产生了，异步加载代表顺序不能保持，也就是说有可能导致代码出错。如何解决呢？

方法一：可以使用<script @async=false />，但是这样就不是异步了。

方法二：嵌套callback，比如

	
require('a.js',function(){
require('b.js',function(){
require('c.js',function(){
alert('finally');
})
})
})





方法三：queue，自己定义一个队列记录那些文件已经被加载了，那些还没有
方法四：event，定义事件，如果文件被加载了，激发一个事件，让监听该事件的程序执行。






headjs使用appendChild script的方法，如果浏览器支持async，async=false，让浏览器解决加载顺序问题；如果是老浏览器，使用text/cache方法预先载入，然后调用appendChild script，顺序的控制是由queue完成的。



controljs使用image/object预先载入代码，等到需要的时候调用appendChild script，顺序问题使用queue完成。



Turinghttp://dailyjs.com/2011/11/03/framework-86/介绍如何使用event处理顺序问题。