ホームページ > 記事 > ウェブフロントエンド > Web ページを開く速度を向上させるために js を動的にロードする方法_JavaScript スキル

Web ページを開く速度を向上させるために js を動的にロードする方法_JavaScript スキル

WBOYオリジナル: 2016-05-16 16:42:311044ブラウズ

一般に、必要な JavaScript コードをすべて一度にロードすると、最初の Web ページを開くのが遅くなりますが、ロードされたコードの多くは使用する必要がありません。このような不必要なパフォーマンスの浪費は避けるべきです。。 JavaScript コードを動的にロードする場合は、DOM モデルを使用して HTML ドキュメントに 3f1c4e4b6b16bbbd69b2ee476dc4f83a ノードを追加し、このノード (つまり、外部 Javascript ファイル) の src 属性を必要な JavaScript コードに設定します。動的にロードされる。

以下はそのような関数を完成させる例です:

(1)、新しい JsLoaderTest.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" onClick="javascript:btnClick()" value="载入JavaScript文件"> 
</label> 
</body> 
</html>

(2). 次のコードを含む新しい hello.js ファイルを作成します:

// JavaScript Document 
function sayHello(){ 
  alert("Hello World!成功载入JavaScript文件");   
} 
// JavaScript Document
function sayHello(){
  alert("Hello World!成功载入JavaScript文件");  
}

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：renderings_jquery を使用した jQuery 模倣 Baidu 入力タグプラグイン次の記事：renderings_jquery を使用した jQuery 模倣 Baidu 入力タグプラグイン

続きを見る

Web ページを開く速度を向上させるために js を動的にロードする方法_JavaScript スキル

関連記事