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>