十五年测试老手,长期负责WEB\APP 项目测试,目前主要负责团队管理工作。
(转)提高网页打开速度的方法_5(按需加载Javascript & css)
上一篇 /
下一篇 2011-02-08 19:16:55
/ 个人分类:网速优化
如果一次载入所有需要的JavaScript代码会造成初始网页打开速度变慢,而且很多载入的代码并不需要使用,这种无谓的性能浪费应该
避免。如果要动态载入JavaScript代码,可以利用DOM模型在HTML文档中添加<script>结点,并将此结点的src属性(即 外联
Javascript文件)设置为需要动态载入的JavaScript代码。TJe0Q,X X}z07DU_!Z2z;M%w0"n/ZlQ,b:uV0下面是一个完成这样功能的例子。
51Testing软件测试网_YFCIx51Testing软件测试网n wFCk6S+P?(1)、新建JsLoaderTest.html文件51Testing软件测试网q _FS+Lb
{51Testing软件测试网
rYUfy6{)P
l- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>按需载入JavaScript代码的例子</title>
- <script type="text/javascript">
- function JsLoader(){
-
- this.load=function(url){
-
- var ss=document.getElementsByTagName("script");
-
- for (i=0;i<ss.length;i++){
- if (ss[i].src && ss[i].src.indexOf(url)!=-1){
- this.onsuccess();
- return;
- }
- }
-
- s=document.createElement("script");
- s.type="text/javascript";
- s.src=url;
-
- var head=document.getElementsByTagName("head")[0];
- head.appendChild(s);
-
-
- var self=this;
-
-
-
- s.onload=s.onreadystatechange=function(){
-
-
- 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");
- }
-
- </script>
- </head>
-
- <body>
- <label>
- <input type="submit" name="Submit" onClick="javascript.:btnClick()" value="载入JavaScript文件">
- </label>
- </body>
- </html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta. http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>按需载入JavaScript代码的例子</title>
<script. type="text/javascript">
function JsLoader(){
this.load=function(url){
//获取所有的<script>标记
var ss=document.getElementsByTagName("script");
//判断指定的文件是否已经包含,如果已包含则触发onsuccess事件并返回
for (i=0;i<ss.length;i++){
if (ss[i].src && ss[i].src.indexOf(url)!=-1){
this.onsuccess();
return;
}
}
//创建script结点,并将其属性设为外联JavaScript文件
s=document.createElement("script");
s.type="text/javascript";
s.src=url;
//获取head结点,并将<script>插入到其中
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");
}
</script>
</head>
<body>
<label>
<input type="submit" name="Submit" nClick="javascript.:btnClick()" value="载入JavaScript文件">
</label>
</body>
</html>
]{8u!rzh^.i0}0(2)、新建hello.js文件,包含如下代码:e+ewOG#A0-
- function sayHello(){
- alert("Hello World!成功载入JavaScript文件");
- }
收藏
举报
TAG:
网速优化