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

页面把需要的css js文件一起加载，对速度是有影响了，文件的请求排队会影响到主体dom的加载，而且暂时用不到的文件被加载也增加文件的字节。 能否把部分css和js文件的加载放到需要用到的时候在加载呢？ 这是一个demo http://www.greengnn.org/lab/load/test.html
假定页面必须用到的文件为 file.css file.js 在加载过程中或者触发某个条件才需要用到的文件 dom-min.js box.css
那么就可以分批异步加载剩下这两个文件
异步加载函数

1. function loadScript(url, callback){
2.     var script = document.createElement("script")
3.     script.type = "text/javascript";
4.     if (script.readyState){  //IE
5.         script.onreadystatechange = function(){
6.             if (script.readyState == "loaded" ||
7.                     script.readyState == "complete"){
8.                 script.onreadystatechange = null;
9.                 callback();
10.             }
11.         };
12.     } else {  //Others
13.         script.onload = function(){
14.             callback();
15.         };
16.     }
17.     script.src = url;
18.     document.getElementsByTagName("head")[0].appendChild(script);
19. }
20. function loadCSS(url){
21.                 var cssLink = document.createElement("link");
22.                 cssLink.rel = "stylesheet";
23.                 cssLink.rev = "stylesheet";
24.                 cssLink.type = "text/css";
25.                 cssLink.media = "screen";
26.                 cssLink.href = url;
27.                 document.getElementsByTagName("head")[0].appendChild(cssLink);
28. }

在页面中异步加载这两个文件 加载css和css作用到的dom

1. function loadCssCon(){
2.         loadCSS("box.css");
3.         var box = document.createElement("div");
4.         box.innerHTML =  '<div class="tips_bg"></div><div class="box"><h2 class="tit">Title</h2><div class="con">他此行的首要任务无疑是寻求两名“非法入境”美国女记者的获释，但他此行是否会面见朝鲜最高领导人金正日，能否为朝美关系打开僵局创造契机，令国际社会广泛关注这棵“秋天的菠菜”。 新华社驻 ...</div></div>';
5.         document.getElementsByTagName("body")[0].appendChild(box);
6. }

加载js并应用js中的函数等

1. loadScript("dom-min.js", function(){
2.         $('foo').innerHTML = 'dom-min.js js loaded,$("foo")可以使用了!';
3. });

复制代码