整合營(yíng)銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          前端:JS延長(zhǎng)加載的方式有哪些?

          么是JS延遲加載?

          JS延遲加載,也就是等頁(yè)面加載完成之后再加載JavaScript文件

          為什么讓JS實(shí)現(xiàn)延遲加載?

          js的延遲加載有助于提高頁(yè)面的加載速度。

          Js延遲加載的方式有哪些?一般有以下幾種方式:

          ·defer屬性

          ·async屬性

          ·動(dòng)態(tài)創(chuàng)建DOM方式

          ·使用jQuery的getScript方法

          ·使用setTimeout延遲方法

          ·讓JS最后加載

          1、defer屬性

          HTML 4.01為<script>標(biāo)簽定義了defer屬性。標(biāo)簽定義了defer屬性元素中設(shè)置defer屬性,等于告訴瀏覽器立即下載,但延遲執(zhí)行標(biāo)簽定義了defer屬性。

          用途:表明腳本在執(zhí)行時(shí)不會(huì)影響頁(yè)面的構(gòu)造。也就是說(shuō),腳本會(huì)被延遲到整個(gè)頁(yè)面都解析完畢之后再執(zhí)行在<script>元素中設(shè)置defer屬性,等于告訴瀏覽器立即下載,但延遲執(zhí)行

          <!DOCTYPE html>
          <html>
          <head>
          	<script src="test1.js" defer="defer"></script>
          	<script src="test2.js" defer="defer"></script>
          </head>
          <body>
          <!--這里放內(nèi)容-->
          </body>
          </html>

          說(shuō)明:雖然<script>元素放在了<head>元素中,但包含的腳本將延遲瀏覽器遇到</html>標(biāo)簽后再執(zhí)行HTML5規(guī)范要求腳本按照它們出現(xiàn)的先后順序執(zhí)行。在現(xiàn)實(shí)當(dāng)中,延遲腳本并不一定會(huì)按照順序執(zhí)行defer屬性只適用于外部腳本文件。支持HTML5的實(shí)現(xiàn)會(huì)忽略嵌入腳本設(shè)置的defer屬性

          2、async屬性

          HTML5 為<script>標(biāo)簽定義了async屬性。與defer屬性類似,都用于改變處理腳本的行為。同樣,只適用于外部腳本文件。標(biāo)簽定義了async屬性。與defer屬性類似,都用于改變處理腳本的行為。同樣,只適用于外部腳本文件。

          目的:不讓頁(yè)面等待腳本下載和執(zhí)行,從而異步加載頁(yè)面其他內(nèi)容。異步腳本一定會(huì)在頁(yè)面 load 事件前執(zhí)行。不能保證腳本會(huì)按順序執(zhí)行

          <!DOCTYPE html>
          <html>
          	<head>
          		<script src="test1.js" async></script>
          		<script src="test2.js" async></script>
          	</head>
          <body>
          <!--這里放內(nèi)容-->
          </body>
          </html>

          async和defer一樣,都不會(huì)阻塞其他資源下載,所以不會(huì)影響頁(yè)面的加載。

          缺點(diǎn):不能控制加載的順序

          3、動(dòng)態(tài)創(chuàng)建DOM方式

          //這些代碼應(yīng)被放置在</ body>標(biāo)簽前(接近HTML文件底部)
          <script type="text/javascript">
          	function downloadJSAtOnload() {
          		varelement = document .createElement("script");
          		element.src = "defer.js";
          		document.body.appendChild(element);
          	}
          	if (window. addEventListener)
          		window.addEventListener("load" ,downloadJSAtOnload, false);
          	else if (window.attachEvent)
          		window.attachEvent("onload", downloadJSAtOnload) ;
          	else
          		window. onload =downloadJSAtOnload;
          </script>

          4、使用jQuery的getScript()方法

          $.getScript("outer.js" , function(){	//回調(diào)函數(shù),成功獲取文件后執(zhí)行的函數(shù)
          	console.log(“腳本加載完成")
          });

          5、使用setTimeout延遲方法的加載時(shí)間延遲加載js代碼,給網(wǎng)頁(yè)加載留出更多時(shí)間

          <script type="text/javascript" >
          	function A(){
          		$.post("/1ord/1ogin" ,{name:username,pwd:password},function(){
          			alert("Hello");
          		});
          	}
          	$(function (){
          		setTimeout('A()', 1000);	//延遲1秒
          	})
          </script>

          6、讓JS最后加載

          把js外部引入的文件放到頁(yè)面底部,來(lái)讓js最后引入,從而加快頁(yè)面加載速度例如引入外部js腳本文件時(shí),如果放入html的head中,則頁(yè)面加載前該js腳本就會(huì)被加載入頁(yè)面,而放入body中,則會(huì)按照頁(yè)面從上倒下的加載順序來(lái)運(yùn)行JavaScript的代碼。所以我們可以把js外部引入的文件放到頁(yè)面底部,來(lái)讓js最后引入,從而加快頁(yè)面加載速度。

          上述方法2也會(huì)偶爾讓你收到Google頁(yè)面速度測(cè)試工具的“延遲加載javascript”警告。所以這里的解決方案將是來(lái)自Google幫助頁(yè)面的推薦方案。

          //這些代碼應(yīng)被放置在</body>標(biāo)簽前(接近HTML文件底部)
          
          <script type= "text/javascript">
          	function downloadJSAtonload() {
          		var element = document.createElement("script");
          		element.src = "defer.js";
          		document.body.appendChild(element);
          	}
          	if (window.addEventListener)
          		window.addEventListener("load", downloadJSAtOnload, false);
          	else if (window.attachEvent )
          		window.attachEvent("onload", downloadJSAtonload);
          	else window.onload = downloadJSAtOnload;
          </script>

          這段代碼意思等到整個(gè)文檔加載完后,再加載外部文件“defer.js”。

          使用此段代碼的步驟:

          6.1)復(fù)制上面代碼

          6.2)粘貼代碼到HTML的標(biāo)簽前 (靠近HTML文件底部)

          6.3)修改“defer.js”為你的外部JS文件名

          6.4)確保文件路徑是正確的。例如:如果你僅輸入“defer.js”,那么“defer.js”文件一定與HTML文件在同一文件夾下。

          注意:

          這段代碼直到文檔加載完才會(huì)加載指定的外部js文件。因此,不應(yīng)該把那些頁(yè)面正常加載需要依賴的javascript代碼放在這里。而應(yīng)該將JavaScript代碼分成兩組。一組是因頁(yè)面需要而立即加載的javascript代碼,另外一組是在頁(yè)面加載后進(jìn)行操作的javascript代碼(例如添加click事件。

          、獲取和設(shè)置元素內(nèi)容

          1. html方法的使用

          jquery中的html方法可以獲取和設(shè)置標(biāo)簽的html內(nèi)容

          示例代碼:

          <script>
              $(function(){
          
                  var $div = $("#div1");
                  //  獲取標(biāo)簽的html內(nèi)容
                  var result = $div.html();
                  alert(result);
                  //  設(shè)置標(biāo)簽的html內(nèi)容,之前的內(nèi)容會(huì)清除
                  $div.html("<span style='color:red'>你好</span>");
                  //  追加html內(nèi)容
                  $div.append("<span style='color:red'>你好</span>");
          
              });
          </script>
          
          <div id="div1">
              <p>hello</p>
          </div>

          說(shuō)明:

          給指定標(biāo)簽追加html內(nèi)容使用append方法

          七、獲取和設(shè)置元素屬性

          1. prop方法的使用

          之前使用css方法可以給標(biāo)簽設(shè)置樣式屬性,那么設(shè)置標(biāo)簽的其它屬性可以使用prop方法了。

          示例代碼:

          <style>
              .a01{
                  color:red;
              }
          </style>
          
          <script>
              $(function(){
                  var $a = $("#link01");
                  var $input = $('#input01')
          
                  // 獲取元素屬性
                  var sId = $a.prop("id");
                  alert(sId);
          
                  // 設(shè)置元素屬性
                  $a.prop({"href":"http://www.baidu.com","title":'這是去到百度的鏈接',"class":"a01"});
          
                  //  獲取value屬性
                  // var sValue = $input.prop("value");
                  // alert(sValue);
          
                  // 獲取value屬性使用val()方法的簡(jiǎn)寫(xiě)方式
                  var sValue = $input.val();
                  alert(sValue);
                  // 設(shè)置value值
                  $input.val("222222");
              })
          </script>
          
          <a id="link01">這是一個(gè)鏈接</a>
          <input type="text" id="input01" value="111111">

          說(shuō)明: 獲取value屬性和設(shè)置value屬性還可以通過(guò)val方法來(lái)完成。

          說(shuō)到讀取文件,很多小伙伴第一時(shí)間想到的是php,asp.net這些后臺(tái)語(yǔ)言來(lái)實(shí)現(xiàn)。

          javascript一直都沒(méi)有提供相關(guān)的文件讀取接口,但有時(shí)我們確實(shí)需要讀取本地文件內(nèi)容,下面是兩種可能的讀取方法。

          使用 HTML5 中的FileReader對(duì)象

          HTML5 引入的 FileReader 可以幫助我們讀取本地文件,但是有一個(gè)限制,就是我們不能直接使用文件路徑的方式來(lái)訪問(wèn)文件,而是首先需要用戶選擇文件(通過(guò)input標(biāo)簽)。

          首先你需要在 html 文件中添加文件選擇表單,如下:

          <input type="file" id="file-input" />
          <div id="file-content"></div>
          

          接著就可以在 JavaScript 中進(jìn)行(用戶選擇的)文件讀取了:

          function readSingleFile(e) {
           //獲取選擇的文件對(duì)象
           var file = e.target.files[0];
           if (!file) {
          return;
           }
           // 創(chuàng)建FileReader對(duì)象
           var reader = new FileReader();
           // load 回調(diào)
           reader.onload = function(e) {
           var contents = e.target.result;
           alert(contents) // 內(nèi)容處理
          
           };
           // 讀取文件
           reader.readAsText(file,"utf-8");
          }
          // 添加監(jiān)聽(tīng)事件
          var fileInput = document.getElementById("file-input");
          fileInput.addEventListener("change", readSingleFile, false);
          

          運(yùn)行結(jié)果如下:


          主站蜘蛛池模板: 无码毛片一区二区三区中文字幕| 精品无码国产AV一区二区三区| 亚洲一区二区三区在线视频| 无码AV一区二区三区无码| 国产一区二区三区免费在线观看 | 熟女大屁股白浆一区二区| 精品一区二区三区免费观看| 亚洲AV色香蕉一区二区| 亚洲Av高清一区二区三区| 武侠古典一区二区三区中文| 中文字幕一区二区三区乱码| 国产精品福利一区二区| 日韩动漫av在线播放一区| 精品人妻码一区二区三区| 精品乱码一区二区三区在线| 亚洲AV无码一区二区三区系列| 亲子乱av一区区三区40岁| 亚洲一区二区三区香蕉| 日本精品一区二区三区视频| 亚洲一区二区电影| 国产一区二区高清在线播放 | 久久亚洲AV午夜福利精品一区| 国产乱码一区二区三区| 亚洲午夜福利AV一区二区无码| 国产精品久久久久久一区二区三区| 精品久久国产一区二区三区香蕉| 成人精品一区二区三区电影| 国产激情无码一区二区app| 一区二区三区在线|日本| 动漫精品一区二区三区3d| 色综合视频一区二区三区44| 中文激情在线一区二区| 精品人无码一区二区三区| 亚洲国产高清在线精品一区| 亚洲午夜精品一区二区公牛电影院 | 免费无码AV一区二区| 国产日韩精品一区二区三区| 中文精品一区二区三区四区| 成人一区专区在线观看| 精品一区二区ww| 无码人妻精品一区二|