資訊專欄INFORMATION COLUMN
摘要：我們可以看到，百度也在頭部引入了一些文件，這些文件引入的方式與的做法差不多，都在引入外部資源的標(biāo)簽上添加了屬性，除了第一個(gè)文件沒(méi)有那樣做。
更好閱讀體驗(yàn)，請(qǐng)?jiān)L問(wèn)dreamapple.me
我們今天來(lái)聊一聊關(guān)于JavaScript文件的引入位置的問(wèn)題；大家在平時(shí)的Web開(kāi)發(fā)中有沒(méi)有想過(guò)這樣一個(gè)問(wèn)題，那就是我應(yīng)該在文檔的頭部（也就是標(biāo)簽內(nèi)部里面）引入所需要的JavaScript文件還是應(yīng)該在尾部（也就是之前）引入所需要的JavaScript文件呢？今天我們就來(lái)深入的探究一下這個(gè)問(wèn)題。
首先我們需要了解的一點(diǎn)就是，在瀏覽器渲染頁(yè)面之前，它需要通過(guò)解析HTML標(biāo)記然后構(gòu)建DOM樹(shù)。在這個(gè)過(guò)程中，如果解析器遇到了一個(gè)腳本(script)，它就會(huì)停下來(lái)，并且執(zhí)行這個(gè)腳本，然后才會(huì)繼續(xù)解析HTML。如果遇到了一個(gè)引用外部資源的腳本(script)，它就必須停下來(lái)等待這個(gè)腳本資源的下載，而這個(gè)行為會(huì)導(dǎo)致一個(gè)或者多個(gè)的網(wǎng)絡(luò)往返，并且會(huì)延遲頁(yè)面的首次渲染時(shí)間。
還有一點(diǎn)是需要我們注意的，那就是外部引入的腳本(script)會(huì)阻塞瀏覽器的并行下載，HTTP/1.1規(guī)范表明，瀏覽器在每個(gè)主機(jī)下并行下載的組件不超過(guò)兩個(gè)(也就是說(shuō)，瀏覽器一次只能夠同時(shí)從同一個(gè)服務(wù)器加載兩個(gè)腳本)；如果你網(wǎng)站的圖片是通過(guò)多個(gè)服務(wù)器提供的，那么按道理來(lái)說(shuō)，你的網(wǎng)站可以一次并行下載多張圖片。但是，當(dāng)我們網(wǎng)站在加載腳本的時(shí)候；瀏覽器不會(huì)再啟動(dòng)任何其它的下載，即使這些組件來(lái)自不同的服務(wù)器。
看到這里，也許很多開(kāi)發(fā)者都會(huì)想：既然把腳本(script)資源放在head里面是個(gè)不好的主意，并且可能會(huì)阻塞瀏覽器渲染頁(yè)面；那我們是不是要把所有的JavaScript文件都放置到文檔的底部呢？這個(gè)當(dāng)然也是太過(guò)極端了，因?yàn)檫€是有一些情況需要我們?cè)陬^部引用腳本的；到底是哪些情況需要我們這么做呢，下面我們來(lái)看看一些大公司的做法：
我們可以看到，這個(gè)搜索頁(yè)面在頭部加載了5個(gè)JavaScript文件(箭頭標(biāo)注的地方)，其中兩個(gè)JavaScript文件是內(nèi)聯(lián)的(inline)，另外三個(gè)大家可以看到script標(biāo)簽上都添加了async屬性，那這個(gè)屬性是干嘛的呢？我們會(huì)在下面解釋。
我們可以看到，百度也在頭部引入了一些JavaScript文件，這些文件引入的方式與Google的做法差不多，都在引入外部資源的script標(biāo)簽上添加了async屬性，除了第一個(gè)JavaScript文件沒(méi)有那樣做。
最后一個(gè)是facebook的首頁(yè)，令我比較出乎意料的是，facebook的首頁(yè)的頭部引入了大量的腳本(script)，大家可以看一下截圖
不過(guò)基本上facebook的script標(biāo)簽上面都添加了async屬性，下面我們先來(lái)來(lái)說(shuō)一下script標(biāo)簽上面這個(gè)async屬性的作用。
這個(gè)屬性是HTML5給script新添加的屬性，而且只適用于外部的JavaScript文件，如果在script標(biāo)簽上添加了這個(gè)屬性，那么表明這個(gè)腳本資源就不再是同步加載的了，而是異步加載的，所以不會(huì)阻塞瀏覽器對(duì)頁(yè)面的渲染。當(dāng)然這個(gè)屬性會(huì)存在一些兼容性問(wèn)題，一些瀏覽器還未實(shí)現(xiàn)對(duì)這個(gè)屬性的支持。
我們可以看到，雖然這些網(wǎng)站大部分的script標(biāo)簽(針對(duì)引入的外部文件)都添加了async屬性，但是還是有一些script標(biāo)簽沒(méi)有添加async屬性，那就表示這些資源是同步加載執(zhí)行的，在這里你可能會(huì)問(wèn)，那這些資源為什么不使用異步加載呢？原因很大程度上是因?yàn)?，這些腳本需要在瀏覽器渲染頁(yè)面之前就執(zhí)行的；比如Yahoo在Best Practices for Speeding Up Your Web Site中就指出，如果你的腳本中使用了document.write在頁(yè)面中插入內(nèi)容的話，那就不能夠?qū)⑦@條腳本放置到文檔的底部了。類似的還有weibo，weibo的head中也使用了一個(gè)要在頁(yè)面渲染之前就執(zhí)行的腳本，如下：
還有百度首頁(yè)的head中也有兩條需要在頁(yè)面渲染之前就執(zhí)行的JavaScript文件：
還有一些比如Google和Baidu他們搜索頁(yè)面同步加載的那些JavaScrip文件一些是為了在頁(yè)面渲染之前做一些全局的處理(比如Google)添加了全局變量google。
還有的就是單純的滿足自己業(yè)務(wù)上的一些需求了，比如百度同步加載的那個(gè)JavaScript文件：
所以說(shuō)，除了上面這些情況外，其它的情況下我們的腳本資源都需要放在文檔的底部；當(dāng)然這里還有一些需要我們注意的問(wèn)題，首先，腳本加載的順序很重要，比如如果你的腳本需要使用jQuery庫(kù)，那么你就應(yīng)該在加載你的腳本之前先加載jQuery庫(kù)。其次，有些腳本是需要等到某些元素加載完成之后才可以執(zhí)行的，那么你可以將你的腳本緊挨在那個(gè)元素的后面；還有一些元素是通過(guò)腳本動(dòng)態(tài)創(chuàng)建的，所以它們也需要放在合適的位置。比如微博的：
如果使用過(guò)一些框架的腳手架你就會(huì)發(fā)現(xiàn)，這些框架打包后的那個(gè)index.html里面引入的外部JavaScript資源都是放在文檔的底部的，并且它們也是按照順序來(lái)的，vendor.js文件(項(xiàng)目使用的框架，庫(kù)打包形成的文件)先引入，然后才是app.js文件(我們寫(xiě)的代碼文件打包形成的)，這就說(shuō)明了引入腳本文件的順序也是很重要的。
到現(xiàn)在為止，我們已經(jīng)討論了很多關(guān)于把JavaScript文件放在文檔的頭部還是尾部的原因，那么下面我們可以總結(jié)出一些加載JavaScript文件的最佳實(shí)踐；
對(duì)于必須要在DOM加載之前運(yùn)行的JavaScript腳本，我們需要把這些腳本放置在頁(yè)面的head中，而不是通過(guò)外部引用的方式，因?yàn)橥獠康囊迷黾恿司W(wǎng)絡(luò)的請(qǐng)求次數(shù)；并且我們要確保內(nèi)斂的這些JavaScript腳本是很小的，最好是壓縮過(guò)的，并且執(zhí)行的速度很快，不會(huì)造成瀏覽器渲染的阻塞。
對(duì)于支持使用script標(biāo)簽的async和defer屬性的瀏覽器，我們可以使用這兩個(gè)屬性；其中需要注意的點(diǎn)就是，async表示的意思是異步加載JavaScript文件，它的下載過(guò)程可以在HTML的解析過(guò)程中進(jìn)行，加載完成之后立即執(zhí)行這個(gè)文件的代碼，執(zhí)行文件代碼的過(guò)程中會(huì)阻塞HTML的解析，它不保證文件加載的順序。defer表示的意思是在HTML文檔解析之后在執(zhí)行加載完成的JavaScript文件，JavaScript文件的下載過(guò)程可以在HTML的解析過(guò)程中進(jìn)行，它是按照script標(biāo)簽的先后順序來(lái)加載文件的。更多詳細(xì)的解釋可以參考async vs defer attributes
到這里為止，整篇文章就算是結(jié)束了，如果你還想進(jìn)一步的了解關(guān)于JavaScript文件加載的一些知識(shí)，可以看看這篇文章
參考的一些資料：
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
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/88247.html
摘要：二模塊化誤區(qū)加快加載和執(zhí)行的速度，一直是前端優(yōu)化的一個(gè)熱點(diǎn)。結(jié)果文件減少，也達(dá)到了預(yù)期的效果。避免不必要的延遲。最后再根據(jù)文件的功能類型，來(lái)決定是放在頁(yè)面的頭部還是尾部。 注：本文是純技術(shù)探討文，無(wú)圖無(wú)笑點(diǎn)，希望您喜歡 一.前言 軟件行業(yè)極其缺乏前端人才這是圈內(nèi)的共識(shí)了，某種程度上講，同等水平前端的工資都要比后端高上不少，而圈內(nèi)的另一項(xiàng)共識(shí)則是——網(wǎng)頁(yè)是公司的臉面！ 幾年前，谷歌的一項(xiàng)...
摘要：不過(guò)讓流行起來(lái)的原因應(yīng)該是是目前所有主流瀏覽器上唯一支持的腳本語(yǔ)言。經(jīng)過(guò)測(cè)試，數(shù)字字符串布爾日期可以直接賦值，修改不會(huì)產(chǎn)生影響。再考慮對(duì)象類型為或者的情況。對(duì)于結(jié)果聲明其類型。判斷對(duì)象的類型是還是，結(jié)果類型更改。 轉(zhuǎn)載自我的個(gè)人博客 歡迎大家批評(píng)指正 1. 第一個(gè)頁(yè)面交互 這里最需要學(xué)習(xí)的老師的代碼中，每一部分功能都由函數(shù)控制，沒(méi)有創(chuàng)建一個(gè)全部變量。且最后有一個(gè)函數(shù)來(lái)控制執(zhí)行代碼...
摘要：在此基礎(chǔ)上加入了回調(diào)函數(shù)，加載完之后會(huì)執(zhí)行中定義的函數(shù)，所需要的數(shù)據(jù)會(huì)以參數(shù)的形式傳遞給該函數(shù)。通常的做法是，為它們指定回調(diào)函數(shù)。 前端面試題總結(jié)——JS（持續(xù)更新中） 1.javascript的typeof返回哪些數(shù)據(jù)類型 Object number function boolean underfind string 2.例舉3種強(qiáng)制類型轉(zhuǎn)換和2種隱式類型轉(zhuǎn)換？ 強(qiáng)制（parseIn...
摘要：避免重定向重定向用和狀態(tài)碼，下面是一個(gè)有狀態(tài)碼的頭瀏覽器會(huì)自動(dòng)跳轉(zhuǎn)到域指明的。除此之外還有別的跳轉(zhuǎn)方式元標(biāo)簽和，但如果你必須得做重定向，最好用標(biāo)準(zhǔn)的狀態(tài)碼，主要是為了讓返回按鈕能正常使用。要提高性能，優(yōu)化這些響應(yīng)至關(guān)重要。 showImg(https://segmentfault.com/img/bVbmMsz?w=652&h=367);一直以來(lái)，性能優(yōu)化是開(kāi)發(fā)的重中之中，而提及 前端...
摘要：避免重定向重定向用和狀態(tài)碼，下面是一個(gè)有狀態(tài)碼的頭瀏覽器會(huì)自動(dòng)跳轉(zhuǎn)到域指明的。除此之外還有別的跳轉(zhuǎn)方式元標(biāo)簽和，但如果你必須得做重定向，最好用標(biāo)準(zhǔn)的狀態(tài)碼，主要是為了讓返回按鈕能正常使用。要提高性能，優(yōu)化這些響應(yīng)至關(guān)重要。 showImg(https://segmentfault.com/img/bVbmMsz?w=652&h=367);一直以來(lái)，性能優(yōu)化是開(kāi)發(fā)的重中之中，而提及 前端...
閱讀 705·2023-04-25 15:49
閱讀 3150·2021-09-22 15:13
閱讀 1316·2021-09-07 10:13
閱讀 3501·2019-08-29 18:34
閱讀 2582·2019-08-29 15:22
閱讀 531·2019-08-27 10:52
閱讀 721·2019-08-26 18:27
閱讀 3048·2019-08-26 13:44
