首頁 > 開發者 > JavaScript
JavaScript
在瀏覽器中的效能，可認為是開發人員所要面對的最重要的可用性問題。此問題因JavaScript的阻塞特徵而複雜，也就是說，當JavaScript
運行時其他的事情不能被瀏覽器處理。事實上，大多數瀏覽器使用單進程處理UI 更新和JavaScript
運行等多個任務，而同一時間只能有一個任務被執行。JavaScript運行了多長時間，那麼在瀏覽器空閑下來響應使用者輸入之前的等待時間就有多長。
從基本層面說，這意味著<script>標籤的出現使整個頁面因指令碼解析、運行而出現等待。不論實際的JavaScript
代碼是內聯的還是包含在一個不相干的外部檔案中，頁面下載和解析過程必須停下，等待指令碼完成這些處理，然後才能繼續。這是頁面生命週期必不可少的部分，因
為指令碼可能在運行過程中修改頁面內容。典型的例子是document.write()函數，例如：
<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
的過程中。瀏覽器必須首先下載外部檔案的代碼，這要佔用一些時間，然後解析並運行此代碼。此過程中，頁面解析和使用者互動是被完全阻塞的。
HTML 4 文檔指出，一個<script>標籤可以放在HTML
文檔的<head>或<body>標籤中，可以在其中多次出現。傳統上，<script>標籤用於載入外部
JavaScript 檔案。<head>部分除此類代碼外，還包含<link>標籤用於載入外部CSS
檔案和其他頁面中介軟體。也就是說，最好把風格和行為所依賴的部分放在一起，首先載入他們，使得頁面可以得到正確的外觀和行為。例如：
<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>
雖然這些代碼看起來是無害的，但它們確實存在效能問題：在<head>部分載入了三個JavaScript
檔案。因為每個<script>標籤阻塞了頁面的解析過程，直到它完整地下載並運行了外部JavaScript
代碼之後，頁面處理才能繼續進行。使用者必須忍受這種可以察覺的延遲。請記住，瀏覽器在遇到<body>標籤之前，不會渲染頁面的任何部分。用
這種方法把指令碼放在頁面的頂端，將導致一個可以察覺的延遲，通常表現為：頁面開啟時，首先顯示為一幅空白的頁面，而此時使用者即不能閱讀，也不能與頁面進行
互動操作。
Internet Explorer 8, Firefox 3.5, Safari 4, 和Chrome 2
允許並行下載JavaScript
檔案。這個好訊息表明，當一個<script>標籤正在下載外部資源時，不必阻塞其他<script>標籤。不幸的
是，JavaScript
的下載仍然要阻塞其他資源的下載過程，例片。即使指令碼之間的下載過程互不阻塞，頁面仍舊要等待所有JavaScript代碼下載並執行完成之後才能繼
續。所以，當瀏覽器通過允許並行下載提高效能之後，該問題並沒有完全
解決。指令碼阻塞仍舊是一個問題。
因為指令碼阻塞其他頁面資源的下載過程，所以推薦的辦法是：將所有<script>標籤放在儘可能接近<body>標籤底部的位置，盡量減少對整個頁面下載的影響。例如：
<html>
<head>
<title>Script Example</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<p>Hello world!</p>
<– Example of recommended 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>
</body>
</html>
此代碼展示了所推薦的<script>標籤在HTML 檔案中的位置。儘管指令碼下載之間互相阻塞，但頁面已經下載完成並且顯示在使用者面前了，進入頁面的速度不會顯得太慢。盡量將指令碼放在底部。
由於每個<script>標籤下載時阻塞頁面解析過程，所以限制頁面的<script>總數也可以改善效能。這個規則對內聯指令碼
和外部指令碼同樣適用。每當頁面解析碰到一個<script>標籤時，緊接著有一段時間用於代碼執行。最小化這些延遲時間可以改善頁面的整體性
能。
這個問題與外部JavaScript 檔案處理過程略有不同。每個HTTP 要求都會產生額外的效能負擔，下載一個100KB
的檔案比下載四個25KB 的檔案要快。總之，減少引用外部指令檔的數量。典型的，一個大型網站或網頁應用需要多次請求JavaScript
檔案。你可以將這些檔案整合成一個檔案，只需要一個<script>標籤引用，就可以減少效能損失。
轉載自http://www.yiiyaa.net/
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
