玄幻小说改编的电视剧,完美世界txt全集下载,欢乐颂小说结局是什么

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

Javascript裝載和執(zhí)行

兩個月前在淘寶內(nèi)網(wǎng)里看到一個優(yōu)化Javascript代碼的競賽，發(fā)現(xiàn)有不少的人對Javascript的執(zhí)行和裝載的基礎(chǔ)并不懂，所以，從那天起我就想寫一篇文章，但一直耽擱了。自上篇《瀏覽器渲染原理簡介》，正好也可以承前啟后。

專注于為中小企業(yè)提供做網(wǎng)站、成都做網(wǎng)站服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)東湖免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了上1000家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

首先，我想說一下Javascript的裝載和執(zhí)行。通常來說，瀏覽器對于Javascript的運(yùn)行有兩大特性：1）載入后馬上執(zhí)行，2）執(zhí)行時會阻塞頁面后續(xù)的內(nèi)容（包括頁面的渲染、其它資源的下載）。于是，如果有多個js文件被引入，那么對于瀏覽器來說，這些js文件被被串行地載入，并依次執(zhí)行。

因?yàn)閖avascript可能會來操作HTML文檔的DOM樹，所以，瀏覽器一般都不會像并行下載css文件并行下載js文件，因?yàn)檫@是js文件的特殊性造成的。所以，如果你的javascript想操作后面的DOM元素，基本上來說，瀏覽器都會報(bào)錯說對象找不到。因?yàn)镴avascript執(zhí)行時，后面的HTML被阻塞住了，DOM樹時還沒有后面的DOM結(jié)點(diǎn)。所以程序也就報(bào)錯了。

傳統(tǒng)的方式

所以，當(dāng)你寫在代碼中寫下如下的代碼：

 
 
 
  
  
    
  
  
        src="http://coolshell.cn/asyncjs/alert.js">

基本上來說，head里的

alert("another block");

你覺得alert的順序是什么？你可以在不同的瀏覽器里試一試。這里的想關(guān)的測試頁面：示例二。

script的defer和async屬性

IE自從IE6就支持defer標(biāo)簽，如：

對于IE來說，這個標(biāo)簽會讓IE并行下載js文件，并且把其執(zhí)行hold到了整個DOM裝載完畢（DOMContentLoaded），多個 defer的

因?yàn)椤眂ache/script”，這個東西根本就不能被瀏覽器解析，所以瀏覽器也就不能把a(bǔ)lert.js當(dāng)javascript去執(zhí)行，但是他又要去下載js文件，所以就可以搞定了?？上У氖?，webkit嚴(yán)格符從了HTML的標(biāo)準(zhǔn)——對于這種不認(rèn)識的東西，直接刪除，什么也不干。于是，我們的夢又破了。

所以，我們需要再hack一下，就像N多年前玩preload圖片那樣，我們可以動用object標(biāo)簽（也可以動用iframe標(biāo)簽），于是我們有下面這樣的代碼：

 
 
 
  
  
  function cachejs(script_filename){   
  
      var cache = document.createElement('object');   
  
      cache.data = script_filename;   
  
      cache.id = "coolshell_script_cache_id";   
  
      cache.width = 0;   
  
      cache.height = 0;   
  
      document.body.appendChild(cache);   
  
  }

然后，我們在的最后調(diào)用一下這個函數(shù)。請參看一下相關(guān)的示例：示例六

在Chrome下按 Ctrl+Shit+I，切換到network頁，你就可以看到下載了alert.js但是沒有執(zhí)行，然后我們再用示例五的方式，因?yàn)闉g覽器端有緩存了，不會再從服務(wù)器上下載alert.js了。所以，就能保證執(zhí)行速度了。

關(guān)于這種preload這種東西你應(yīng)該不會陌生了。你還可以使用Ajax的方式，如：

 
 
 
  
  
  var xhr = new XMLHttpRequest();   
  
  xhr.open('GET', 'new.js');   
  
  xhr.send('');

到這里我就不再多說了，也不給示例了，大家可以自己試試去。

最后再提兩個js，一個是ControlJS，一個叫HeadJS，專門用來做異步load javascript文件的。

好了，這是所有的內(nèi)容了，希望大家看過后能對Javascript的載入和執(zhí)行，以及相關(guān)的技術(shù)有個了解。同時，也希望各前端高手不吝賜教！

?原文鏈接：http://coolshell.cn/articles/9749.html

網(wǎng)頁標(biāo)題：Javascript裝載和執(zhí)行
當(dāng)前地址：http://m.fisionsoft.com.cn/article/ccdseip.html

新聞中心

傳統(tǒng)的方式

script的defer和async屬性

其他資訊