高性能JavaScript之加載和運行

時間 2020-01-14

原文原文鏈接

JavaScript 在瀏覽器中的性能，可認爲是開發者所要面對的最重要的可用性問題。此問題因JavaScript的阻塞特徵而複雜，也就是說，當JavaScript 運行時其餘的事情不能被瀏覽器處理。事實上，大多數瀏覽器使用單進程處理UI 更新和JavaScript 運行等多個任務，而同一時間只能有一個任務被執行。JavaScript運行了多長時間，那麼在瀏覽器空閒下來響應用戶輸入以前的等待時間就有多長。javascript

從基本層面說，這意味着<script>標籤的出現使整個頁面因腳本解析、運行而出現等待。不論實際的JavaScript 代碼是內聯的仍是包含在一個不相干的外部文件中，頁面下載和解析過程必須停下，等待腳本完成這些處理，而後才能繼續。這是頁面生命週期必不可少的部分，由於腳本可能在運行過程當中修改頁面內容。典型的例子是document.write()函數，例如：css

<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 的過程當中。瀏覽器必須首先下載外部文件的代碼，這要佔用一些時間，而後解析並運行此代碼。此過程當中，頁面解析和用戶交互是被徹底阻塞的。html

一個<script>標籤能夠放在HTML 文檔的<head>或<body>標籤中，能夠在其中屢次java

出現。傳統上，<script>標籤用於加載外部JavaScript 文件。<head>部分除此類代碼外，還包含<link>標籤用於加載外部CSS 文件和其餘頁面中間件。也就是說，最好把風格和行爲所依賴的部分放在一塊兒，首先加載他們，使得頁面能夠獲得正確的外觀和行爲瀏覽器

由於腳本阻塞其餘頁面資源的下載過程，因此推薦的辦法是：將全部<script>標籤放在儘量接近<body>ide

標籤底部的位置，儘可能減小對整個頁面下載的影響。例如：函數

<html>
<head>
<title>Script Example</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <p>Hello world!</p>
    <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>標籤下載時阻塞頁面解析過程，因此限制頁面的<script>總數也能夠改善性能。這個規則對內聯腳本和外部腳本一樣適用。每當頁面解析碰到一個<script>標籤時，緊接着有一段時間用於代碼執行。最小化這些延遲時間能夠改善頁面的總體性能。性能

這個問題與外部JavaScript 文件處理過程略有不一樣。每一個HTTP 請求都會產生額外的性能負擔，下載一個100KB 的文件比下載四個25KB 的文件要快。總之，減小引用外部腳本文件的數量。典型的，一個大型網站或網頁應用須要屢次請求JavaScript 文件。你能夠將這些文件整合成一個文件，只須要一個<script>標籤引用，就能夠減小性能損失。網站

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。