資訊專欄INFORMATION COLUMN
摘要：我們可以看到，百度也在頭部引入了一些文件，這些文件引入的方式與的做法差不多，都在引入外部資源的標簽上添加了屬性，除了第一個文件沒有那樣做。
更好閱讀體驗，請訪問dreamapple.me
我們今天來聊一聊關于JavaScript文件的引入位置的問題；大家在平時的Web開發中有沒有想過這樣一個問題，那就是我應該在文檔的頭部（也就是標簽內部里面）引入所需要的JavaScript文件還是應該在尾部（也就是之前）引入所需要的JavaScript文件呢？今天我們就來深入的探究一下這個問題。
首先我們需要了解的一點就是，在瀏覽器渲染頁面之前，它需要通過解析HTML標記然后構建DOM樹。在這個過程中，如果解析器遇到了一個腳本(script)，它就會停下來，并且執行這個腳本，然后才會繼續解析HTML。如果遇到了一個引用外部資源的腳本(script)，它就必須停下來等待這個腳本資源的下載，而這個行為會導致一個或者多個的網絡往返，并且會延遲頁面的首次渲染時間。
還有一點是需要我們注意的，那就是外部引入的腳本(script)會阻塞瀏覽器的并行下載，HTTP/1.1規范表明，瀏覽器在每個主機下并行下載的組件不超過兩個(也就是說，瀏覽器一次只能夠同時從同一個服務器加載兩個腳本)；如果你網站的圖片是通過多個服務器提供的，那么按道理來說，你的網站可以一次并行下載多張圖片。但是，當我們網站在加載腳本的時候；瀏覽器不會再啟動任何其它的下載，即使這些組件來自不同的服務器。
看到這里，也許很多開發者都會想：既然把腳本(script)資源放在head里面是個不好的主意，并且可能會阻塞瀏覽器渲染頁面；那我們是不是要把所有的JavaScript文件都放置到文檔的底部呢？這個當然也是太過極端了，因為還是有一些情況需要我們在頭部引用腳本的；到底是哪些情況需要我們這么做呢，下面我們來看看一些大公司的做法：
我們可以看到，這個搜索頁面在頭部加載了5個JavaScript文件(箭頭標注的地方)，其中兩個JavaScript文件是內聯的(inline)，另外三個大家可以看到script標簽上都添加了async屬性，那這個屬性是干嘛的呢？我們會在下面解釋。
我們可以看到，百度也在頭部引入了一些JavaScript文件，這些文件引入的方式與Google的做法差不多，都在引入外部資源的script標簽上添加了async屬性，除了第一個JavaScript文件沒有那樣做。
最后一個是facebook的首頁，令我比較出乎意料的是，facebook的首頁的頭部引入了大量的腳本(script)，大家可以看一下截圖
不過基本上facebook的script標簽上面都添加了async屬性，下面我們先來來說一下script標簽上面這個async屬性的作用。
這個屬性是HTML5給script新添加的屬性，而且只適用于外部的JavaScript文件，如果在script標簽上添加了這個屬性，那么表明這個腳本資源就不再是同步加載的了，而是異步加載的，所以不會阻塞瀏覽器對頁面的渲染。當然這個屬性會存在一些兼容性問題，一些瀏覽器還未實現對這個屬性的支持。
我們可以看到，雖然這些網站大部分的script標簽(針對引入的外部文件)都添加了async屬性，但是還是有一些script標簽沒有添加async屬性，那就表示這些資源是同步加載執行的，在這里你可能會問，那這些資源為什么不使用異步加載呢？原因很大程度上是因為，這些腳本需要在瀏覽器渲染頁面之前就執行的；比如Yahoo在Best Practices for Speeding Up Your Web Site中就指出，如果你的腳本中使用了document.write在頁面中插入內容的話，那就不能夠將這條腳本放置到文檔的底部了。類似的還有weibo，weibo的head中也使用了一個要在頁面渲染之前就執行的腳本，如下：
還有百度首頁的head中也有兩條需要在頁面渲染之前就執行的JavaScript文件：
還有一些比如Google和Baidu他們搜索頁面同步加載的那些JavaScrip文件一些是為了在頁面渲染之前做一些全局的處理(比如Google)添加了全局變量google。
還有的就是單純的滿足自己業務上的一些需求了，比如百度同步加載的那個JavaScript文件：
所以說，除了上面這些情況外，其它的情況下我們的腳本資源都需要放在文檔的底部；當然這里還有一些需要我們注意的問題，首先，腳本加載的順序很重要，比如如果你的腳本需要使用jQuery庫，那么你就應該在加載你的腳本之前先加載jQuery庫。其次，有些腳本是需要等到某些元素加載完成之后才可以執行的，那么你可以將你的腳本緊挨在那個元素的后面；還有一些元素是通過腳本動態創建的，所以它們也需要放在合適的位置。比如微博的：
如果使用過一些框架的腳手架你就會發現，這些框架打包后的那個index.html里面引入的外部JavaScript資源都是放在文檔的底部的，并且它們也是按照順序來的，vendor.js文件(項目使用的框架，庫打包形成的文件)先引入，然后才是app.js文件(我們寫的代碼文件打包形成的)，這就說明了引入腳本文件的順序也是很重要的。
到現在為止，我們已經討論了很多關于把JavaScript文件放在文檔的頭部還是尾部的原因，那么下面我們可以總結出一些加載JavaScript文件的最佳實踐；
對于必須要在DOM加載之前運行的JavaScript腳本，我們需要把這些腳本放置在頁面的head中，而不是通過外部引用的方式，因為外部的引用增加了網絡的請求次數；并且我們要確保內斂的這些JavaScript腳本是很小的，最好是壓縮過的，并且執行的速度很快，不會造成瀏覽器渲染的阻塞。
對于支持使用script標簽的async和defer屬性的瀏覽器，我們可以使用這兩個屬性；其中需要注意的點就是，async表示的意思是異步加載JavaScript文件，它的下載過程可以在HTML的解析過程中進行，加載完成之后立即執行這個文件的代碼，執行文件代碼的過程中會阻塞HTML的解析，它不保證文件加載的順序。defer表示的意思是在HTML文檔解析之后在執行加載完成的JavaScript文件，JavaScript文件的下載過程可以在HTML的解析過程中進行，它是按照script標簽的先后順序來加載文件的。更多詳細的解釋可以參考async vs defer attributes
到這里為止，整篇文章就算是結束了，如果你還想進一步的了解關于JavaScript文件加載的一些知識，可以看看這篇文章
參考的一些資料：
Remove Render-Blocking JavaScript
Put Scripts at the Bottom
Best Practice: Where to include your script tags
Script Element
execCommand
What is difference between using JavaScript in head and body?
Where To Include JavaScript Files In A Document
Should I always put my JavaScript file in the head tag of my HTML file so that the code is loaded at the start?
Why put JavaScript in head
Deep dive into the murky waters of script loading
Asynchronous and deferred JavaScript execution explained
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88247.html
摘要：二模塊化誤區加快加載和執行的速度，一直是前端優化的一個熱點。結果文件減少，也達到了預期的效果。避免不必要的延遲。最后再根據文件的功能類型，來決定是放在頁面的頭部還是尾部。 注：本文是純技術探討文，無圖無笑點，希望您喜歡 一.前言 軟件行業極其缺乏前端人才這是圈內的共識了，某種程度上講，同等水平前端的工資都要比后端高上不少，而圈內的另一項共識則是——網頁是公司的臉面！ 幾年前，谷歌的一項...
摘要：不過讓流行起來的原因應該是是目前所有主流瀏覽器上唯一支持的腳本語言。經過測試，數字字符串布爾日期可以直接賦值，修改不會產生影響。再考慮對象類型為或者的情況。對于結果聲明其類型。判斷對象的類型是還是，結果類型更改。 轉載自我的個人博客 歡迎大家批評指正 1. 第一個頁面交互 這里最需要學習的老師的代碼中，每一部分功能都由函數控制，沒有創建一個全部變量。且最后有一個函數來控制執行代碼...
摘要：在此基礎上加入了回調函數，加載完之后會執行中定義的函數，所需要的數據會以參數的形式傳遞給該函數。通常的做法是，為它們指定回調函數。 前端面試題總結——JS（持續更新中） 1.javascript的typeof返回哪些數據類型 Object number function boolean underfind string 2.例舉3種強制類型轉換和2種隱式類型轉換？ 強制（parseIn...
摘要：避免重定向重定向用和狀態碼，下面是一個有狀態碼的頭瀏覽器會自動跳轉到域指明的。除此之外還有別的跳轉方式元標簽和，但如果你必須得做重定向，最好用標準的狀態碼，主要是為了讓返回按鈕能正常使用。要提高性能，優化這些響應至關重要。 showImg(https://segmentfault.com/img/bVbmMsz?w=652&h=367);一直以來，性能優化是開發的重中之中，而提及 前端...
摘要：避免重定向重定向用和狀態碼，下面是一個有狀態碼的頭瀏覽器會自動跳轉到域指明的。除此之外還有別的跳轉方式元標簽和，但如果你必須得做重定向，最好用標準的狀態碼，主要是為了讓返回按鈕能正常使用。要提高性能，優化這些響應至關重要。 showImg(https://segmentfault.com/img/bVbmMsz?w=652&h=367);一直以來，性能優化是開發的重中之中，而提及 前端...
閱讀 654·2023-04-25 15:49
閱讀 3110·2021-09-22 15:13
閱讀 1247·2021-09-07 10:13
閱讀 3472·2019-08-29 18:34
閱讀 2557·2019-08-29 15:22
閱讀 506·2019-08-27 10:52
閱讀 684·2019-08-26 18:27
閱讀 3016·2019-08-26 13:44
