首页 > 代码库 > 高性能JavaScript （笔记一：加载和执行）

高性能JavaScript （笔记一：加载和执行）

2024-09-12 21:03:29   216人阅读

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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/lab.js"></script>
    <script type="text/javascript">
        $LAB.script("first-file.js")
            .script("the-rest.js")
            .wait(function(){ //文件下载并执行完毕后所调用的函数
                Application.init();
            })
    </script>

 

　　

　　

 

高性能JavaScript （笔记一：加载和执行）


联系
我们