首頁 > 開發者 > JavaScript
標籤：var 下載 代碼 span 其他 javascrip 開始 載入 read
1、JavaScript的阻塞特性：
當瀏覽器執行JavaScript代碼時，不能同時做其他任何事情；
IE8、Firefox3.5、Safari4和Chrome2都允許並行下載JavaScript檔案，這樣<script>標籤在載入外部資源的時候，不會阻塞其他<script>標籤的載入，但還是會阻塞其他資源的載入；
推薦將所有<script>標籤儘可能放到<body>標籤的底部，盡量減少對整個頁面載入的影響。
減少外鏈指令碼的數量將會改善效能，載入單個100KB的檔案比下載4個25KB的檔案更快；
把內嵌指令碼房子啊應用外鏈樣式表的<link>標籤之後會導致頁面阻塞去等待樣式表的下載，這樣做是為了確保內嵌指令碼在執行時能獲得最準確的樣式資訊，因此建議永遠不要將內嵌指令碼緊跟在<link>標籤後面；
若需要依賴多個js檔案，可以吧多個檔案合并成一個，就需要引用一個<script>標籤，減少效能消耗，合并檔案的工作可通過離線打包工具執行；
建立響應迅速的web應用：減少JavaScript檔案的大小，限制HTTP請求次數。。。
2、無阻塞的指令碼:
(1)延遲的指令碼：
HTML4為<script>標籤定義了一個擴充屬性：defer，指明本元素所含的指令碼不會修改dom，因此代碼能夠安全的順延強制；
目前defer屬性已經被主流瀏覽器支援，根據W3C的HTML5規定：defer屬性僅當src屬性聲明時才生效；
<script type="text/javascript" src="file1.js" defer></script>
HTML5中引入了async屬性，用於非同步載入指令碼，async與defer的相同點是採用並行載入，在下載過程中不會產生阻塞，區別在於：async是載入完成後自動執行，而defer需要等待頁面完成後執行。
(2)動態指令碼元素：
動態穿件<script>標籤到頁面中，載入的js檔案，在被添加到頁面時開始下載，這樣無論在何時啟動下載，檔案的下載和執行過程不會阻塞頁面其他進程
以下是相容IE的動態載入JavaScript檔案的的方法：
function loadScript(url,callback){ var script = document.createElement(‘script‘); if(script.redayState){ //IE script.onreadystatechange = function(){ if(script.readyState == "load" || script.readyState == "complete"){ script.onreadystatechange = null; callback(); } }; }else{ script.onload = function(){ callback(); } } script.src = url; document.getElementByTagName("head")[0].appendChild(script);}
(3)XMLHttpRequest指令碼注入
該方法是建立一個XHR對象，然後用它下載JavaScript檔案，最後通過建立<script>元素將代碼注入頁面中。
優點是：可以下載JavaScript代碼但不是立即執行，主流瀏覽器都支援
局限性：JavaScript檔案必須與所請求的頁面處於相同的域，因此單行的WEB應用通常不會採用XHR指令碼注入技術。
(4)YUI3的方式
(5)LazyLoad類庫：這是消極式載入工具
<script type="text/javascript" src="lazyload-min.js"></script> <script type="text/javascript"> LazyLoad.js("the-rest.js",function(){ Application.init(); }); </script>
LazyLoad同樣支援多個JavaScript檔案，並能保持所有瀏覽器中都能正確執行，要載入多個JavaScript檔案，只需給LazyLoad.js()方法傳入一個URL數組：
<script type="text/javascript" src="lazyload-min.js"></script> <script type="text/javascript"> LazyLoad.js(["the-rest.js","the-rest1.js"],function(){ Application.init(); }); </script>
(5)LABjs
<script type="text/javascript" src="lab.js"></script> <script type="text/javascript"> $LAB.script("first-file.js") .script("the-rest.js") .wait(function(){ //檔案下載並執行完畢後所調用的函數 Application.init(); }) </script>
高效能JavaScript （筆記一：載入和執行）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
