動態(tài)載入js提高網(wǎng)頁打開速度的方法
一般來說如果一次性的載入所有需要的JavaScript代碼,就會造成初始網(wǎng)頁打開速度變慢,但是很多載入的代碼又并不需要使用,這種無謂的性能浪費應(yīng)該予以避免。如果要動態(tài)載入JavaScript代碼,可以利用DOM模型在HTML文檔中添加<script>結(jié)點,并將此結(jié)點的src屬性(即 外聯(lián) Javascript文件)設(shè)置為需要動態(tài)載入的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"); //判斷指定的文件是否已經(jīng)包含,如果已包含則觸發(fā)onsuccess事件并返回 for (i=0;i<ss.length;i++){ if (ss[i].src && ss[i].src.indexOf(url)!=-1){ this.onsuccess(); return; } } //創(chuàng)建script結(jié)點,并將其屬性設(shè)為外聯(lián)JavaScript文件 s=document.createElement("script"); s.type="text/javascript"; s.src=url; //獲取head結(jié)點,并將<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(){ //在此函數(shù)中this指針指的是s結(jié)點對象,而不是JsLoader實例, //所以必須用self來調(diào)用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(){ //創(chuàng)建對象 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文件"); }
相關(guān)文章
微信小程序搭建(mpvue+mpvue-weui+fly.js)的詳細步驟
這篇文章主要介紹了微信小程序搭建(mpvue+mpvue-weui+fly.js)的詳細步驟,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-09-09Javascript循環(huán)刪除數(shù)組中元素的幾種方法示例
這篇文章主要給大家介紹了關(guān)于Javascript循環(huán)刪除數(shù)組中元素的幾種方法,文中給出了詳細的示例代碼供大家參考學習,對大家具有一定的參考學習價值,需要的朋友們下面來一起看看吧。2017-05-05基于BootstrapValidator的Form表單驗證(24)
這篇文章主要為大家詳細介紹了基于BootstrapValidator的Form表驗證,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-12-12將Datatable轉(zhuǎn)化成json發(fā)送前臺實現(xiàn)思路
將Datatable轉(zhuǎn)化成json可以將dt序列化成json,放到前臺的隱藏控件hidBoundary中,具體的實現(xiàn)如下,有類似需求的朋有可以參考下2013-09-09