加载Javascript最佳实践

我相信许多处理过该页面的学生都熟悉雅虎网站的最佳实践。在这35个最佳实践中，Javascript加载顺序的要求是：将脚本放在底部。按照HTTP/1.1规范，同时加载两个文件比较理想，Javascript脚本会阻碍并行下载。史蒂夫说它在2008-2009年被使用。现在，加载Javascript已经发生了革命性的变化。

讲课之前，有一个必须解决的问题：为什么要把JS文件放在/body的最下面？根本原因是不能并行下载。事实上，并不是所有的浏览器都支持它。目前除了老的IE67、火狐23.0、Safari 3、Chrome 1外，大部分浏览器都支持脚本并行下载。但是我们最熟悉的老同学IE6(或者那些以IE为核心的外壳)仍然是国内(甚至全球)占用率最高的浏览器，所以我们需要一个折中。

一、分析

我们有六种方法可以实现NON-Blocking下载：XHReeval用xhr和eval()下载执行responseText。xh injection与XHR一起下载，并在页面中动态创建一个脚本元素，以responseText作为其文本。iframe中的脚本将脚本放在HTML中，并使用ifame下载它。script element动态创建一个脚本元素，并将src指向脚本URL。script defer添加defer属性document .将scripttag写入script tag使用document。编写将脚本src='http: '添加到HTML。但这只适用于IE。兼容性见下图：技术并行下载sdiffexisting scripts busy indicators保证顺序大小(字节)xhrevalie，ff，saf，chr，opnonosaf，Chr-~500XHR InjectionIE，FF，Saf，Chr-~ 500 Script in iframie，FF，Saf，Chr，OpnonoIE，FF，Saf，Chr-~50Script DOM ElementIE，FF，Saf，Chr，OpyesyesFF，SAF，ChrFF，Op ~ 200Script DeferIE，这完全取决于你自己的需要。这张图描述了什么时候用什么方法：。

一般来说，脚本DOM元素是更好的解决方案。根据NCZ的博客，目前最好的技术是创建两个JavaScript文件。第一个文件只提供动态下载Javascript的代码，第二个文件包含所有其他页面需要的脚本文件。像脚本一样，第一个文件在页面(在/body之前)引入。创建第二个脚本来执行下载第二个Javascript文件和其他初始化代码的功能。00-1010根据上述技术。NCZ建议第一个文件只包含相应的代码，实现第二个文件的动态加载：复制代码如下：函数loadscript (URL，callback){ var script=document . createelement(' script ')script . type=' text/JavaScript '；if(script . readystate){//IE script . onreadystatechange=function(){ if(script . readystate==' loaded ' | | script . readystate==' complete '){ script . onreadystatechange=null；回调()；} };} else {//Others script . onload=function(){ callback()；};} script.src=urldocument . getelementsbytagname(' head ')[0]。appendChild(脚本)；}然后，我们可以在页面中这样做：复制代码如下： script type=' text/JavaScript ' src=' http:http://your.cdn.com/first.js'/scriptscripttype=' text/JavaScript ' load script(' http://your . cdn.com/second . js '，function(){//初始化您的代码})；/脚本在HTML5上，我们可以使用async属性。这个HTML属性的功能正是我们需要的无阻塞下载技术。虽然目前支持的浏览器不多(好像只有Firefox 3.6？)，但是将这个属性添加到需要并行下载的Javascript中(根据方案通常是第一个JS文件)不会影响其他不支持的浏览器，所以推荐使用。复制的代码如下：脚本类型=' text/JavaScript ' async src=' http 3360 foo . js '/脚本IV。练习YUI3的加载器使用NCZ的这种方法。而在支付宝。我们也用了类似的方法。在这里简单说一下。复制代码如下： script type=' text/JAVAScript ' charset=' utf-8 '//configure pathaleconfig={ combo _ host : ' http://domain.com ' of combo service。combo _ path : '/path/to/the/compressed/file ' }/script script type=' text/JavaScript ' src=' http : core . js '/script，然后用Loader.use()实现代码的动态加载。当然这里不仅仅是动态加载，还有一定的缓存机制。建议你去查一下相关的组合服务技术。目前支付宝前端架构团队的工作人员在这方面已经取得了一些不错的进展(根据测试报告，速度非常不错，可能会在适当的时候开通)。5.总结前端性能优化。还有很多事要做。而且，随着HTML5技术的出现和Javascript技术的不断创新，相信还有更多值得期待的地方。来吧，前端，未来有很多事情应该由你来主导。Reference:Loading加载脚本而不阻塞加载外部JavaScript的最佳方式脚本加载的演进什么是无阻塞脚本？html 5描述：异步属性