行业新闻

前者功能优化 Javascript的加载次第

作者:admin    来源:tfxk    发布时间:2011-11-30    阅读:1386次

而正在领取宝。眼前领取宝前者架设组的工友们,曾经正在这一块获得了一些没有错的停顿(依据测预演讲,进度是无比没有错的,能够会正在恰当的时分开源进去)。但咱们最相熟的老掉牙同窗 IE6 (或者以IE为核的那些壳)还是中国(以至社会上)市面上占用率最高的阅读器,因而咱们需求一度折衷的计划。
    XHR Eval – 用 XHR 键入,并 eval() 施行 responseText.。前者功能优化范围。Steve 说那是 2008 – 2009 那个时期用的。而这 35 条最佳理论中,对于 Javascript 的加载次第的请求是:Put Scripts at the Bottom。这张图形容了什么时分运用什么办法:
二、计划

兼容性可看下图:

    document.write Script Tag – 应用 document.write 把 <script src=""> 增添到 HTML 中。
    Script Defer – 给 script 标增添 defer 属性
    Script DOM Element – 静态创立一度 script 元素,把 src 指向剧本URL.
    Script in Iframe – 把剧本放正在 HTML 中,运用 ifame  来键入它。(义务编者:帝位库)
五、小结
正在运用的时分,再应用 Loader.use() 来实古代码的静态加载。现正在大全体阅读器都支撑 Script 的平行键入,除非老掉牙的 IE6&7、Firefox 2&3.0、 Safari 3、Chrome 1。第一度资料只需要静态键入 Javascript 的代码,第二个资料则蕴含一切其余页面所需剧本的资料。

咱们有6种办法能够完成平行(NON-Blocking)键入:
一、综合
正在开讲事先,有一度必需处理的成绩是:干什么咱们要把 JS 资料放正在 </body> 事先的最底部。某个 HTML 属性的作用正是咱们需求的 NON-Blocking 键入技能。
创立两个 JavaScript  资料。那里容易说一下。

。NCZ 引荐第一度资料只蕴含呼应的完成第二个资料静态加载的代码:
三、实古代码
创立第二个 <script> 来施行键入第二个 Javascript 资料的因变量和其余的初始化代码。千万,那里没有只仅是静态加载,再有定然的缓存机制正在外面。
 


   
       
           
            <script type="text/javascript" src="core.js"></script>
            </script>
            }
             combo_path: '/path/to/the/compressed/file'
             combo_host: "http://domain.com",
            araleConfig = {
            // 配置 combo 效劳的 PATH
            <script type="text/javascript" charset="utf-8">
           
       
   


 
YUI3 的 Loader 运用了 NCZ 的那样的办法。
像 <script> 正在页部(</body> 事先)引入第一度资料。固然眼前支撑的阅读器并没有多(仿佛只要 Firefox 3.6+ ?),但给需求平行键入的 Javascript(依照计划看来,正常是第一度 JS 资料) 加上某个属性,也没有会反应其余没有支撑的阅读器,因为,是引荐运用的。而实在并没有是一切阅读器都没有支撑。再有很多货色能够做。况且,随着 HTML5 技能的涌现和 Javascript 技能的一直翻新,置信再有更多货色是不值等待。
    XHR Injection – 用 XHR 键入,正在页面中静态创立一度 script 元素,并将 responseText 作为其 text 。现正在,加载 Javascript 曾经有了反动性的化变。基本缘由是,它没有能平行键入。咱们也运用了相似的办法。
 


   
       
           
            </script>
            });
                //初始化你的代码
            loadScript("http://your.cdn.com/second.js", function(){
            <script type="text/javascript">
            <script type="text/javascript" src="http://your.cdn.com/first.js"></script>
           
       
   


 
而后,咱们能够正在页面中那样做:
 


   
       
           
            }
                document.getElementsByTagName("head")[0].appendChild(script);
                script.src = url;
                }
                    };
                        callback();
                    script.onload = function(){
                } else {  //Others
                    };
                        }
                            callback();
                            script.onreadystatechange = null;
                                script.readyState == "complete"){
                        if (script.readyState == "loaded"
                    script.onreadystatechange = function(){
                if (script.readyState){  //IE
                script.type = "text/javascript";
                var script = document.createElement("script")
            function loadScript(url, callback){
           
       
   


 
依据下面的谈到的技能。提议你检查有关的 combo 效劳的技能。由于依据HTTP/1.1 specification 看来,正在同一工夫加载两个资料是最现实的,而 Javascript 剧本会障碍平行键入。但某个只对于 IE 无效。
从总体上看来,Script DOM Element 是比拟好的计划。

    置信很多与页面打过交道的同窗都对于 Yahoo 的 Best Practices for Speeding Up Your Web Site 没有生疏。前者们,加油吧,将来有很多货色该当是由你来主导的。NCZ 的博客上提过,眼前最好的技能是:

关于终究该当运用哪种计划。这彻底起源于你需求本身的需求。
四、理论
 


   
       
           
            <script type="text/javascript" async src="foo.js"></script>
           
       
   


 
正在 HTML5 上,咱们能够运用 async 属性。

回到顶部