JS代碼引用位置問題-轉

 

看到不少JS代碼所有放在head中的狀況，其實這是個細節問題。轉載一個知乎用戶於江水的答案：

做者：於江水
連接：https://www.zhihu.com/question/34147508/answer/63469443
來源：知乎

瀏覽器加載頁面是按從上到下順序加載的。加載 JS 並執行的時候，會阻塞其餘資源的加載。這是由於 JS 可能會有 DOM 、樣式等等操做，因此瀏覽器要先加載這段 JS 並執行，再加載放在它後面的 HTML、CSS。

所以，加入一段巨大的 JS 放在最上面，瀏覽器首先要下載並執行，這段時間裏面，頁面是空白的。相比於加載了部分 HTML 和 樣式 可是沒有 JS 交互功能，顯然是後者對於瀏覽者體驗要好。

然而，是否全部 JS 都要放在最下面呢？並非。

舉實際的例子：

html5shiv是一段 JS 腳本，用來是早期 IE 兼容 HTML5 新增標籤的支持。

這個 JS 腳本，必需要放在上面 head 部分，爲何呢？由於在老 IE 瀏覽器下面，不支持 <section> 這樣的標籤，因此用 JS 來兼容。若是放在底部，等 IE 瀏覽器先報錯了，纔會執行這塊 JS 沒多大用。

jQuery 這類的庫，也是建議放在最上面的。首先最大的疑問多是 jQuery 這麼大，放在上面豈不是阻塞的很厲害？

不過 jQuery 一般引用的是 CDN 地址，並且通過 gzip 壓縮以後並非很大，並且引用公共 CDN 上面的 jQuery 話，很大概率早已被用戶緩存下來了。因此能夠不須要考慮阻塞產生的性能問題。

而咱們都知道，JS 是按順序執行下來的。也就是你沒運行 jQuery 以前，先運行了調用 jQuery 函數的代碼，就會報錯。你能夠控制你本身寫的 JS 放在頁面最下面，放在 jQuery 下面，可是你沒法保證頁面上其餘地方會不會有人圖省事直接在 HTML 代碼裏面輸出 JS。若是有，那麼就會報錯。

因此我建議， 類庫放在上面加載，其他代碼儘量放在最底下加載。