高性能JavaScript （笔记一：加载和执行）
Posted W-road
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了高性能JavaScript （笔记一：加载和执行）相关的知识，希望对你有一定的参考价值。
1、JavaScript的阻塞特性：
当浏览器执行javascript代码时，不能同时做其他任何事情；
IE8、Firefox3.5、Safari4和Chrome2都允许并行下载JavaScript文件，这样<script>标签在加载外部资源的时候，不会阻塞其他<script>标签的加载，但还是会阻塞其他资源的加载；
推荐将所有<script>标签尽可能放到<body>标签的底部，尽量减少对整个页面加载的影响。
减少外链脚本的数量将会改善性能，加载单个100KB的文件比下载4个25KB的文件更快；
把内嵌脚本房子啊应用外链样式表的<link>标签之后会导致页面阻塞去等待样式表的下载，这样做是为了确保内嵌脚本在执行时能获得最准确的样式信息，因此建议永远不要将内嵌脚本紧跟在<link>标签后面；
若需要依赖多个js文件，可以吧多个文件合并成一个，就需要引用一个<script>标签，减少性能消耗，合并文件的工作可通过离线打包工具执行；
创建响应迅速的web应用：减少JavaScript文件的大小，限制HTTP请求次数。。。
2、无阻塞的脚本:
(1)延迟的脚本：
html4为<script>标签定义了一个扩展属性：defer，指明本元素所含的脚本不会修改dom，因此代码能够安全的延迟执行；
目前defer属性已经被主流浏览器支持，根据W3C的HTML5规定：defer属性仅当src属性声明时才生效；
<script type="text/javascript" src="file1.js" defer></script>
HTML5中引入了async属性，用于异步加载脚本，async与defer的相同点是采用并行加载，在下载过程中不会产生阻塞，区别在于：async是加载完成后自动执行，而defer需要等待页面完成后执行。
(2)动态脚本元素：
动态穿件<script>标签到页面中，加载的js文件，在被添加到页面时开始下载，这样无论在何时启动下载，文件的下载和执行过程不会阻塞页面其他进程
以下是兼容IE的动态加载JavaScript文件的的方法：
function loadScript(url,callback){ var script = document.createElement(‘script‘); if(script.redayState){ //IE script.onreadystatechange = function(){ if(script.readyState == "load" || script.readyState == "complete"){ script.onreadystatechange = null; callback(); } }; }else{ script.onload = function(){ callback(); } } script.src = url; document.getElementByTagName("head")[0].appendChild(script); }
(3)XMLHttpRequest脚本注入
该方法是创建一个XHR对象，然后用它下载JavaScript文件，最后通过创建<script>元素将代码注入页面中。
优点是：可以下载JavaScript代码但不是立即执行，主流浏览器都支持
局限性：JavaScript文件必须与所请求的页面处于相同的域，因此单行的WEB应用通常不会采用XHR脚本注入技术。
(4)YUI3的方式
(5)LazyLoad类库：这是延迟加载工具
<script type="text/javascript" src="lazyload-min.js"></script>
<script type="text/javascript">
LazyLoad.js("the-rest.js",function(){
Application.init();
});
</script>
LazyLoad同样支持多个JavaScript文件，并能保持所有浏览器中都能正确执行，要加载多个JavaScript文件，只需给LazyLoad.js()方法传入一个URL数组：
<script type="text/javascript" src="lazyload-min.js"></script>
<script type="text/javascript">
LazyLoad.js(["the-rest.js","the-rest1.js"],function(){
Application.init();
});
</script>
(5)LABjs
<script type="text/javascript" src="lab.js"></script>
<script type="text/javascript">
$LAB.script("first-file.js")
.script("the-rest.js")
.wait(function(){ //文件下载并执行完毕后所调用的函数
Application.init();
})
</script>
以上是关于高性能JavaScript （笔记一：加载和执行）的主要内容，如果未能解决你的问题，请参考以下文章