提高网页打开速度的方法_5.doc

提高网页打开速度的方法_5（按需加载Javascript & css)如果一次载入所有需要的JavaScript代码会造成初始网页打开速度变慢，而且很多载入的代码并不需要使用，这种无谓的性能浪费应该 避免。如果要动态载入JavaScript代码,可以利用DOM模型在HTML文档中添加结点，并将此结点的src属性（即 外联 Javascript文件）设置为需要动态载入的JavaScript代码。)r t$I&Kb|0%a1Oo&I7AT:i(Zr051Testing软件测试网R+qaZZo X下面是一个完成这样功能的例子。51Testing软件测试网4o krd dLIjYr+m0(1)、新建JsLoaderTest.html文件51Testing软件测试网jq2PU6-Io K!U*LL+r(xj#x3V:X0 Java代码1. 2. 3. 4. 按需载入JavaScript代码的例子 5. 6. functionJsLoader() 7. 8. this.load=function(url) 9. /获取所有的标记 10. varss=document.getElementsByTagName(script); 11. /判断指定的文件是否已经包含，如果已包含则触发onsuccess事件并返回 12. for(i=0;iss.length;i+) 13. if(ssi.src&ssi.src.indexOf(url)!=-1) 14. this.onsuccess(); 15. return; 16. 17. 18. /创建script结点,并将其属性设为外联JavaScript文件 19. s=document.createElement(script); 20. s.type=text/javascript; 21. s.src=url; 22. /获取head结点，并将插入到其中 23. varhead=document.getElementsByTagName(head)0; 24. head.appendChild(s); 25. 26. /获取自身的引用 27. varself=this; 28. /对于IE浏览器，使用readystatechange事件判断是否载入成功 29. /对于其他浏览器，使用onload事件判断载入是否成功 30. /s.onload=s.onreadystatechange=function() 31. s.onload=s.onreadystatechange=function() 32. /在此函数中this指针指的是s结点对象，而不是JsLoader实例, 33. /所以必须用self来调用onsuccess事件，下同。 34. if(this.readyState&this.readyState=loading)return; 35. self.onsuccess(); 36. 37. s.onerror=function() 38. head.removeChild(s); 39. self.onfailure(); 40. 41. ; 42. /定义载入成功事件 43. this.onsuccess=function(); 44. /定义失败事件 45. this.onfailure=function(); 46. 47. 48. functionbtnClick() 49. /创建对象 50. varjsLoader=newJsLoader(); 51. 52. /定义载入成功处理程序 53. jsLoader.onsuccess=function() 54. sayHello(); 55. 56. 57. /定义载入失败处理程序 58. jsLoader.onfailure=function() 59. alert(文件载入失败！); 60. 61. 62. /开始载入 63. jsLoader.load(hello.js); 64. 65. 66. 67. 68. 69. 70. 71. 72. 73. 74. 按需载入JavaScript代码的例子 function JsLoader() this.load=function(url) /获取所有的标记 var ss=document.getElementsByTagName(script); /判断指定的文件是否已经包含，如果已包含则触发onsuccess事件并返回 for (i=0;iss.length;i+) if (ssi.src & ssi.src.indexOf(url)!=-1) this.onsuccess(); return; /创建script结点,并将其属性设为外联JavaScript文件 s=document.createElement(script); s.type=text/javascript; s.src=url; /获取head结点，并将插入到其中 var head=document.getElementsByTagName(head)0; head.appendChild(s); /获取自身的引用 var self=this; /对于IE浏览器，使用readystatechange事件判断是否载入成功 /对于其他浏览器，使用onload事件判断载入是否成功 /s.onload=s.onreadystatechange=function() s.onload=s.onreadystatechange=function() /在此函数中this指针指的是s结点对象，而不是JsLoader实例, /所以必须用self来调用onsuccess事件，下同。 if (this.readyState & this.readyState=loading) return; self.onsuccess(); s.onerror=function() head.removeChild(s); self.onfailure(); ; /定义载入成功事件 this.onsuccess=function(); /定义失败事件 this.onfailure=function(); function btnClick() /创建对象 var jsLoader=new JsLoader(); /定义载入成功处理程序 jsLoader.onsuccess=function() sayHello(); /定义载入失败处理程序 jsLoader.onfailure=function() alert(文件载入失败！); /开始载入 jsLoader.load(hello.js); 51Testing软件测试网,W/hvt O