解決加載WEB頁面時，因爲JS文件引用過多影響頁面打開速度的問題

時間 2019-12-10

標籤解決加載 web 頁面因爲文件引用過多影響打開速度問題欄目 HTML 简体版

原文原文鏈接

一、通常作法

通常咱們會把全部的<script>元素都應該放在頁面的<head>標籤裏，但因爲是順序加載，所以只有當全部JavaScript代碼都被依次下載、解析和執行完以後，纔開始加載<body>標籤裏面的內容。瀏覽器

二、把`<script>`標籤放在`<body>`標籤最後面

這樣會先加載、解析頁面元素，然後再加載JS代碼，直觀表現上就是頁面打開速度有所提高。固然須要注意的是，若是頁面須要用到某個JavaScript文件，那這個JS文件的引用仍是須要放在頁面元素以前，如放在<head>標籤裏。網絡

三、加defer屬性

在<script>標籤中加入defer屬性，該defer屬性至關於告訴瀏覽器當即下載腳本，但延遲執行。腳本會在整個頁面元素解析完成後再運行。異步

四、加async屬性

在<script>標籤中加入async屬性，該屬性與defer屬性相似，至關於告訴瀏覽器當即下載腳本，可是是異步下載，下載順序不肯定，執行速度也不肯定。
這個屬性可用於在網絡不通的環境下，須要引入某個互聯網腳本資源的時候，依然能夠快速打開頁面，這樣不至於由於個別腳本訪問不到而阻塞後面資源的請求。async