十五年测试老手，长期负责WEB\APP 项目测试，目前主要负责团队管理工作。

前端性能优化之文件按需异步加载

上一篇 / 下一篇  2011-02-08 19:20:25 / 个人分类：网速优化

查看( 888 ) / 评论( 0 ) / 评分( 0 / 0 )
页面把需要的css js文件一起加载，对速度是有影响了，文件的请求排队会影响到主体dom的加载，而且暂时用不到的文件被加载也增加文件的字节。
E3j3b%Saz0能否把部分css和js文件的加载放到需要用到的时候在加载呢？51Testing软件测试网'W5\`/~(@3F s D E
这是一个demo
Y"xLbw C*~0http://www.greengnn.org/lab/load/test.html
,gS E-E/Nv F%O+`051Testing软件测试网9ndX5s&Z Oft
假定页面必须用到的文件为51Testing软件测试网r_A1~7@y X
file.css51Testing软件测试网5s^;ua U$g2Z
file.js51Testing软件测试网0^ _ve}k
在加载过程中或者触发某个条件才需要用到的文件
;N1w{)F'Mku u1@0dom-min.js
z`]p\]#u0box.css51Testing软件测试网*x9gYPG5Y.Vs

6l#]gZ d0那么就可以分批异步加载剩下这两个文件51Testing软件测试网`,}0{!Um3?QQ
51Testing软件测试网)R;ue"W/|R^] ?
异步加载函数

:d P5GWMr3wsU0
代码:
function loadScript(url, callback){
&h*A@,eP%Z X0
C C"JC%XR~A0    var script. = document.createElement("script")51Testing软件测试网bDG_`M.a
    script.type = "text/javascript";
m)i C ji)Jv0
9E-^'@ ]N(U0    if (script.readyState){  //IE
WJ4e9A*s0        script.onreadystatechange = function(){
pBI},g @;x}(Nsu0            if (script.readyState == "loaded" ||
7wb,oc/}!`$T9j\0                    script.readyState == "complete"){51Testing软件测试网{)^d~ m&r
                script.onreadystatechange = null;
*Nphd'Y8HA0                callback();51Testing软件测试网8i%[Nv`"P;Y;y!d)h
            }51Testing软件测试网.@*m` U q)P
        };
| [3n:g$T*P@X1e C3X0    } else {  //Others51Testing软件测试网3w&a3N&y'LJ*i,Z-b&h7Q
        script.onload = function(){
F*P5BwX0            callback();
7x#j n;Q(j$V!HV0        };51Testing软件测试网(v%T2M&p,d0G4`
    }51Testing软件测试网pU3}:R!h0?

)Zyv#Y'dNHn#\d%Fl0    script.src = url;
8y4b!WF0~eQ2t^0    document.getElementsByTagName("head")[0].appendChild(script);51Testing软件测试网X%S,k1_f5R5VL%G8k
}
$q7N3eLF|L0function loadCSS(url){51Testing软件测试网7~%S h6u$H6Z$l*v
        var cssLink = document.createElement("link");51Testing软件测试网*THKqV,K
        cssLink.rel = "stylesheet";51Testing软件测试网)i$?V(X+i+V
        cssLink.rev = "stylesheet";51Testing软件测试网$pCo%AH!mB
        cssLink.type = "text/css";
tb%?o#B0        cssLink.media = "screen";
nGhnK1j ^0        cssLink.href = url;
6Q k |$?(wB#L9Jh0        document.getElementsByTagName("head")[0].appendChild(cssLink);
I#ytV*GUPi;j7ty0}
在页面中异步加载这两个文件
8vh+HHN"]:t0加载css和css作用到的dom

.CF![i!U*R9{,Z~+]0
代码:
function loadCssCon(){51Testing软件测试网}*D9l8T7x)K\YU%n
    loadCSS("box.css");
V }9_ a/r$n8y f0    var box = document.createElement("div");51Testing软件测试网 Ys{!~k/z z,T A~
    box.innerHTML =  '<div class="tips_bg"></div><div class="box"><h2 class="tit">Title</h2><div class="con">他此行的首要任务无疑是寻求两名“非法入境”美国女记者的获释，但他此行是否会面见朝鲜最高领导人金正日，能否为朝美关系打开僵局创造契机，令国际社会广泛关注这棵“秋天的菠菜”。 新华社驻 ...</div></div>';51Testing软件测试网 h$Qc{a0{ \
    document.getElementsByTagName("body")[0].appendChild(box);51Testing软件测试网%N;Pqd;I2@,]F
}
加载js并应用js中的函数等

({{@0a+RIA-Z0
代码:
loadScript("dom-min.js", function(){51Testing软件测试网0Rj%e8}d:zV
    $('foo').innerHTML = 'dom-min.js js loaded,$("foo")可以使用了!';
"F&S;wM8b:mx0});
有个缺点就是，异步加载css和js，文件加载有个延迟，主页面加载速度快了，随后的会出现css，js的暂时不可用

收藏 举报

TAG: 网速优化

 

评分：0

我来说两句

Open Toolbar