JavaScript中的無阻塞載入效能優化方案_javascript技巧
- WBOY原創
- 2016-05-16 16:34:371317瀏覽
Javascript在瀏覽器中的效能，可以說是前端開發者所要面對的最重要的可用性問題。
在Yahoo的Yslow23條規則當中，其中一條是將JS放在底部 。原因是，事實上，大多數瀏覽器使用單一進程處理UI和更新Javascript運行等多個任務，而同一時間只能有一個任務被執行。 Javascript運行了多長時間，那麼在瀏覽器空閒下來響應用戶互動之前的等待時間就有多長。
從基本層面說,這意味著<script>標籤的出現使整個頁面因腳本解析、運行而出現等待。不論實際的 JavaScript 程式碼是內聯的還是包含在一個不相干的外部文件中,頁面下載和解析過程必須停下,等待腳本 完成這些處理,然後才能繼續。這是頁面生命週期必不可少的部分,因為腳本可能在運行過程中修改頁面 內容。典型的例子是 document.write()函數,例如:<br />
<div class="codetitle"><span><a style="CURSOR: pointer" data="5199" class="copybut" id="copybut5199" onclick="doCopy('code5199')"><U>複製程式碼 程式碼如下:<div class="codebody" id="code5199"><br />
<html><br />
<head><br />
<title>Script Example<br />
<br />
<br />
<body><br />
<p><br />
<script type="text/javascript"><br />
document.write("The date is " (new Date()).toDateString());<br />
</script>