JavaScript 高性能笔记

时间 2019-11-19

标签 javascript 高性能笔记栏目 JavaScript 繁體版

原文原文链接

浏览器解析 JavaScript 、CSS 、DOM 时，通常都是单线程解析，因此，引用外部文件时的位置不一样，UE体验也不一样。javascript

下面是 Yahoo 大牛 Nicholas C. Zakas 的《High Performance JavaScript》书中的总结。html

一、把不影响DOM布局的 JS 文件引用放到 </body> 以前，这样浏览器可先加载HTML页面，解析DOM，给人相对快的感受。java

　　<html>jquery

　　<head>git

　　　　<title></title>github

　　</head>chrome

　　<body>数组

　　　　...浏览器

　　　　<script src="jquery.js"></script>app

　　</body>

　　</html>

二、动态加载 JS，意思是动态生成<script>标签，加载外部 JS 文件，利用了浏览器解析 DOM 元素的 src 时不阻塞的特性。

　　通常可在<head></head>标签中动态生成<script>标签，以下，

<head>
    <script>
        // 加载 JS 的封装函数
        function loadScript(url, callback) {
            var script = document.createElement("script");
            script.type = "text/javascript";
            
            if(script.readyState) { // IE
                script.onreadystatechange = function() {
                    if(script.readyState == "loaded" || script.readState == "complete") {
                        script.onreadystatechange = null;
                        // JS 文件加载完以后，能够处理一些事情
                        callback();
                    }
                }
            }
            else { // firefox\ chrome \opera
                script.onload = function() {
                    // JS 文件加载完以后，能够处理一些事情
                    callback();
                };
            }
            
            script.src = url;
            document.getElementsByTagName("head")[0].appendChild(script);            
        }
    
        // 
        loadScript("http://xxx.com/jquery.com", function() { ... });
        
    </script>
</head>

　　经过以上方法，也可按照顺序加载多个 JS 文件，

loadScript("file1.js", function() {
    loadScript("file2.js", function() {
        loadScript("file3.js", function() {
            // 加载完毕
            ......
        });
    });
});

三、使用 LazyLoad.js 开源库以非阻塞方式加载外部 JS 文件，从 github : LazyLoad.js 下载，　　

　　　　<script src="js/lazyload-min.js"></script>
　　　　<script>
　　　　　　LazyLoad.js("the-rest.js", function() {
　　　　　　　　// 加载完以后，作一些逻辑操做
　　　　　　　　......
　　　　　　});
　　　　</script>

　　也能够同时加载多个 JS 文件，写成数组的形式，

　　　　LazyLoad.js(["the-rest.js", "file2.js", "file3.js"], function() {
　　　　　　// 加载完以后，作一些逻辑操做
　　　　　　......
　　　　});

　　注意，LazyLoad 会保证在全部的浏览器中按照顺序加载全部 JS 文件，每个 JS 文件都是一个单独的 HTTP 请求，

　　而且所有加载完以后才会执行回调函数 callback。

　　LazyLoad 也能够用来动态加载 CSS 文件，CSS文件的下载以并行的方式完成，而且不会阻塞其余页面。

四、使用 LAB.js 开源库以非阻塞方式加载外部 JS 文件，从 lab.js 下载，　　

　　　　<script src="js/LAB.min.js"></script>
　　　　<script>
　　　　　　$LAB.script("the-rest.js").wait(function() {
　　　　　　　　// 加载完以后，作一些逻辑操做
　　　　　　　　......
　　　　　　});
　　　　</script>

　　$LAB 的方法都返回一个 $LAB 对象，因此能够进行链式调用。

　　$LAB.wait() 方法保证只有等 JS 文件下载并执行完以后，才会执行最终的回调函数。

　　也能够同时加载多个 JS 文件，　　

　　　　$LAB.script("first.js").script("the-rest.js").wait(function() {
　　　　　　// 加载完以后，作一些逻辑操做
　　　　　　......
　　　　});

　　通常状况下，LAB 会按照顺序执行多个JS 文件，但并不保证，因此，若是你要保证运行的先后顺序，

　　那么请使用 wait() 方法，以下，

　　　　$LAB.script("first.js").wait().script("the-rest.js").wait(function() {
　　　　　　// 加载完以后，作一些逻辑操做
　　　　　　......
　　　　});

　　这样，就可保证 first.js 在 the-rest.js 以前运行。下载的顺序能够并行。