首頁  >  文章  >  web前端  >  JavaScript優化專題之Loading and Execution載入與運行_javascript技巧

JavaScript優化專題之Loading and Execution載入與運行_javascript技巧

WBOY
WBOY原創
2016-05-16 15:19:101003瀏覽

JavaScript 在瀏覽器中的效能,可認為是開發者所要面對的最重要的可用性問題。此問題因JavaScript的阻塞特徵而複雜,也就是說,當JavaScript 執行時其他的事情不能被瀏覽器處理。事實上,大多數瀏覽器使用單一進程處理UI 更新和JavaScript 運行等多個任務,而同一時間只能有一個任務被執行。

JavaScript運行了多長時間,那麼在瀏覽器空閒下來響應用戶輸入之前的等待時間就有多長。

從基本層面說,這意味著<script>標籤的出現使整個頁面因腳本解析、運行而出現等待。不論實際的JavaScript 程式碼是內聯的還是包含在一個不相干的外部檔案中,頁面下載和解析過程必須停下,等待腳本完成這些處理,然後才能繼續。這是頁面生命週期必不可少的部分,因為腳本可能在運行過程中修改頁面內容。 </script>

典型的例子是document.write()函數,例如:

<html>

<head>

<title>Script Example</title>

</head>

<body>

<p>

<script type=”text/javascript”>

document.write(“The date is ” + (new Date()).toDateString());

</script>

</p>

</body>

</html>

當瀏覽器遇到一個<script>標籤時,正如上面HTML 頁面中那樣,無法預知JavaScript 是否在<p>標籤中添加內容。因此,瀏覽器停下來,執行此JavaScript 程式碼,然後再繼續解析、翻譯頁面。同樣的事情發生在使用src 屬性載入JavaScript 的過程中。瀏覽器必須先下載外部文件的程式碼,這要佔用一些時間,然後解析並執行此程式碼。此過程中,頁面解析和使用者互動是被完全阻塞的。 </script>

HTML 4 文件指出,一個<script>標籤可以放在HTML 文件的<head>或<body>標籤中,可以在其中多次出現。傳統上,<script>標籤用於載入外部JavaScript 檔案。 <head>部分除此類程式碼外,還包含<link>標籤用於載入外部CSS 檔案和其他頁面中間件。也就是說,最好把風格和行為所依賴的部分放在一起,首先加載他們,使得頁面可以得到正確的外觀和行為。例如:</script>

<html>

<head>

<title>Script Example</title>

<– Example of inefficient script positioning –>

<script type=”text/javascript” src=”file1.js”></script>

<script type=”text/javascript” src=”file2.js”></script>

<script type=”text/javascript” src=”file3.js”></script>

<link rel=”stylesheet” type=”text/css” href=”styles.css”>

</head>

<body>

<p>Hello world!</p>

</body>

</html>

雖然這些程式碼看起來是無害的,但它們確實存在效能問題:在

部分載入了三個JavaScript 檔案。因為每個<script>標籤阻塞了頁面的解析過程,直到它完整地下載並執行了外部JavaScript 程式碼之後,頁面處理才能繼續進行。使用者必須忍受這種可以察覺的延遲。 <p>請記住,瀏覽器在遇到<body>標籤之前,不會渲染頁面的任何部分。用這種方法把腳本放在頁面的頂端,將導致一個可以察覺的延遲,通常表現為:頁面打開時,首先顯示為一幅空白的頁面,而此時用戶即不能閱讀,也不能與頁面進行交互操作 <p>Internet Explorer 8, Firefox 3.5, Safari 4, 和Chrome 2 允許並行下載JavaScript 檔案。這個好消息表明,當一個<script>標籤正在下載外部資源時,不必阻塞其他<script>標籤。不幸的是,JavaScript 的下載仍然要阻塞其他資源的下載過程,即使腳本之間的下載過程互不阻塞,頁面仍舊要等待所有JavaScript程式碼下載並執行完成之後才能繼續。所以,當瀏覽器透過允許並行下載提高效能之後,該問題並沒有完全解決,腳本阻塞仍舊是一個問題。 <p>因為腳本阻塞其他頁面資源的下載過程,所以建議的辦法​​是:將所有<script>標籤放在盡可能接近<body>標籤底部的位置,盡量減少對整個頁面下載的影響。例如: <div class="jb51code"> <pre class="brush:php;toolbar:false"> &lt;html&gt; &lt;head&gt; &lt;title&gt;Script Example&lt;/title&gt; &lt;link rel=”stylesheet” type=”text/css” href=”styles.css”&gt; &lt;/head&gt; &lt;body&gt; &lt;p&gt;Hello world!&lt;/p&gt; &lt;– Example of recommended script positioning –&gt; &lt;script type=”text/javascript” src=”file1.js”&gt;&lt;/script&gt; &lt;script type=”text/javascript” src=”file2.js”&gt;&lt;/script&gt; &lt;script type=”text/javascript” src=”file3.js”&gt;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </pre> <p>此程式碼展示了所建議的<script>標籤在HTML 檔案中的位置。儘管腳本下載之間互相阻塞,但頁面已經下載完成並且顯示在用戶面前了,進入頁面的速度不會顯得太慢。 <p>以上就是關於javascript優化內容中的Loading and Execution載入和運行的相關介紹,希望對大家的學習有所幫助。 </script>
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn