国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

把JavaScript文件放在文檔的頭部還是尾部

TerryCai / 3273人閱讀

摘要：我們可以看到，百度也在頭部引入了一些文件，這些文件引入的方式與的做法差不多，都在引入外部資源的標(biāo)簽上添加了屬性，除了第一個文件沒有那樣做。

更好閱讀體驗(yàn)，請?jiān)L問dreamapple.me

我們今天來聊一聊關(guān)于JavaScript文件的引入位置的問題；大家在平時的Web開發(fā)中有沒有想過這樣一個問題，那就是我應(yīng)該在文檔的頭部（也就是標(biāo)簽內(nèi)部里面）引入所需要的JavaScript文件還是應(yīng)該在尾部（也就是之前）引入所需要的JavaScript文件呢？今天我們就來深入的探究一下這個問題。

首先我們需要了解的一點(diǎn)就是，在瀏覽器渲染頁面之前，它需要通過解析HTML標(biāo)記然后構(gòu)建DOM樹。在這個過程中，如果解析器遇到了一個腳本(script)，它就會停下來，并且執(zhí)行這個腳本，然后才會繼續(xù)解析HTML。如果遇到了一個引用外部資源的腳本(script)，它就必須停下來等待這個腳本資源的下載，而這個行為會導(dǎo)致一個或者多個的網(wǎng)絡(luò)往返，并且會延遲頁面的首次渲染時間。

還有一點(diǎn)是需要我們注意的，那就是外部引入的腳本(script)會阻塞瀏覽器的并行下載，HTTP/1.1規(guī)范表明，瀏覽器在每個主機(jī)下并行下載的組件不超過兩個(也就是說，瀏覽器一次只能夠同時從同一個服務(wù)器加載兩個腳本)；如果你網(wǎng)站的圖片是通過多個服務(wù)器提供的，那么按道理來說，你的網(wǎng)站可以一次并行下載多張圖片。但是，當(dāng)我們網(wǎng)站在加載腳本的時候；瀏覽器不會再啟動任何其它的下載，即使這些組件來自不同的服務(wù)器。

看到這里，也許很多開發(fā)者都會想：既然把腳本(script)資源放在head里面是個不好的主意，并且可能會阻塞瀏覽器渲染頁面；那我們是不是要把所有的JavaScript文件都放置到文檔的底部呢？這個當(dāng)然也是太過極端了，因?yàn)檫€是有一些情況需要我們在頭部引用腳本的；到底是哪些情況需要我們這么做呢，下面我們來看看一些大公司的做法：


我們可以看到，這個搜索頁面在頭部加載了5個JavaScript文件(箭頭標(biāo)注的地方)，其中兩個JavaScript文件是內(nèi)聯(lián)的(inline)，另外三個大家可以看到script標(biāo)簽上都添加了async屬性，那這個屬性是干嘛的呢？我們會在下面解釋。


我們可以看到，百度也在頭部引入了一些JavaScript文件，這些文件引入的方式與Google的做法差不多，都在引入外部資源的script標(biāo)簽上添加了async屬性，除了第一個JavaScript文件沒有那樣做。


最后一個是facebook的首頁，令我比較出乎意料的是，facebook的首頁的頭部引入了大量的腳本(script)，大家可以看一下截圖



不過基本上facebook的script標(biāo)簽上面都添加了async屬性，下面我們先來來說一下script標(biāo)簽上面這個async屬性的作用。

這個屬性是HTML5給script新添加的屬性，而且只適用于外部的JavaScript文件，如果在script標(biāo)簽上添加了這個屬性，那么表明這個腳本資源就不再是同步加載的了，而是異步加載的，所以不會阻塞瀏覽器對頁面的渲染。當(dāng)然這個屬性會存在一些兼容性問題，一些瀏覽器還未實(shí)現(xiàn)對這個屬性的支持。

我們可以看到，雖然這些網(wǎng)站大部分的script標(biāo)簽(針對引入的外部文件)都添加了async屬性，但是還是有一些script標(biāo)簽沒有添加async屬性，那就表示這些資源是同步加載執(zhí)行的，在這里你可能會問，那這些資源為什么不使用異步加載呢？原因很大程度上是因?yàn)?，這些腳本需要在瀏覽器渲染頁面之前就執(zhí)行的；比如Yahoo在Best Practices for Speeding Up Your Web Site中就指出，如果你的腳本中使用了document.write在頁面中插入內(nèi)容的話，那就不能夠?qū)⑦@條腳本放置到文檔的底部了。類似的還有weibo，weibo的head中也使用了一個要在頁面渲染之前就執(zhí)行的腳本，如下：

還有百度首頁的head中也有兩條需要在頁面渲染之前就執(zhí)行的JavaScript文件：

還有一些比如Google和Baidu他們搜索頁面同步加載的那些JavaScrip文件一些是為了在頁面渲染之前做一些全局的處理(比如Google)添加了全局變量google。


還有的就是單純的滿足自己業(yè)務(wù)上的一些需求了，比如百度同步加載的那個JavaScript文件：

所以說，除了上面這些情況外，其它的情況下我們的腳本資源都需要放在文檔的底部；當(dāng)然這里還有一些需要我們注意的問題，首先，腳本加載的順序很重要，比如如果你的腳本需要使用jQuery庫，那么你就應(yīng)該在加載你的腳本之前先加載jQuery庫。其次，有些腳本是需要等到某些元素加載完成之后才可以執(zhí)行的，那么你可以將你的腳本緊挨在那個元素的后面；還有一些元素是通過腳本動態(tài)創(chuàng)建的，所以它們也需要放在合適的位置。比如微博的：

如果使用過一些框架的腳手架你就會發(fā)現(xiàn)，這些框架打包后的那個index.html里面引入的外部JavaScript資源都是放在文檔的底部的，并且它們也是按照順序來的，vendor.js文件(項(xiàng)目使用的框架，庫打包形成的文件)先引入，然后才是app.js文件(我們寫的代碼文件打包形成的)，這就說明了引入腳本文件的順序也是很重要的。

到現(xiàn)在為止，我們已經(jīng)討論了很多關(guān)于把JavaScript文件放在文檔的頭部還是尾部的原因，那么下面我們可以總結(jié)出一些加載JavaScript文件的最佳實(shí)踐；

對于必須要在DOM加載之前運(yùn)行的JavaScript腳本，我們需要把這些腳本放置在頁面的head中，而不是通過外部引用的方式，因?yàn)橥獠康囊迷黾恿司W(wǎng)絡(luò)的請求次數(shù)；并且我們要確保內(nèi)斂的這些JavaScript腳本是很小的，最好是壓縮過的，并且執(zhí)行的速度很快，不會造成瀏覽器渲染的阻塞。

對于支持使用script標(biāo)簽的async和defer屬性的瀏覽器，我們可以使用這兩個屬性；其中需要注意的點(diǎn)就是，async表示的意思是異步加載JavaScript文件，它的下載過程可以在HTML的解析過程中進(jìn)行，加載完成之后立即執(zhí)行這個文件的代碼，執(zhí)行文件代碼的過程中會阻塞HTML的解析，它不保證文件加載的順序。defer表示的意思是在HTML文檔解析之后在執(zhí)行加載完成的JavaScript文件，JavaScript文件的下載過程可以在HTML的解析過程中進(jìn)行，它是按照script標(biāo)簽的先后順序來加載文件的。更多詳細(xì)的解釋可以參考async vs defer attributes

到這里為止，整篇文章就算是結(jié)束了，如果你還想進(jìn)一步的了解關(guān)于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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/88247.html

相關(guān)文章

  • 前端性能優(yōu)化（三）——傳統(tǒng) JavaScript 優(yōu)化的誤區(qū)

    摘要：二模塊化誤區(qū)加快加載和執(zhí)行的速度，一直是前端優(yōu)化的一個熱點(diǎn)。結(jié)果文件減少，也達(dá)到了預(yù)期的效果。避免不必要的延遲。最后再根據(jù)文件的功能類型，來決定是放在頁面的頭部還是尾部。 注：本文是純技術(shù)探討文，無圖無笑點(diǎn)，希望您喜歡 一.前言 軟件行業(yè)極其缺乏前端人才這是圈內(nèi)的共識了，某種程度上講，同等水平前端的工資都要比后端高上不少，而圈內(nèi)的另一項(xiàng)共識則是——網(wǎng)頁是公司的臉面！ 幾年前，谷歌的一項(xiàng)...

    UsherChen 評論0 收藏0

  • task0002（一）- JavaScript數(shù)據(jù)類型及語言基礎(chǔ)

    摘要：不過讓流行起來的原因應(yīng)該是是目前所有主流瀏覽器上唯一支持的腳本語言。經(jīng)過測試，數(shù)字字符串布爾日期可以直接賦值，修改不會產(chǎn)生影響。再考慮對象類型為或者的情況。對于結(jié)果聲明其類型。判斷對象的類型是還是，結(jié)果類型更改。 轉(zhuǎn)載自我的個人博客 歡迎大家批評指正 1. 第一個頁面交互 這里最需要學(xué)習(xí)的老師的代碼中，每一部分功能都由函數(shù)控制，沒有創(chuàng)建一個全部變量。且最后有一個函數(shù)來控制執(zhí)行代碼...

    elarity 評論0 收藏0

  • 前端面試題總結(jié)——JS（持續(xù)更新中）

    摘要：在此基礎(chǔ)上加入了回調(diào)函數(shù)，加載完之后會執(zhí)行中定義的函數(shù)，所需要的數(shù)據(jù)會以參數(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...

    shery 評論0 收藏0

  • 從“雅虎軍規(guī)”看性能優(yōu)化

    摘要：避免重定向重定向用和狀態(tài)碼，下面是一個有狀態(tài)碼的頭瀏覽器會自動跳轉(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);一直以來，性能優(yōu)化是開發(fā)的重中之中，而提及 前端...

    BlackMass 評論0 收藏0

  • 從“雅虎軍規(guī)”看性能優(yōu)化

    摘要：避免重定向重定向用和狀態(tài)碼，下面是一個有狀態(tài)碼的頭瀏覽器會自動跳轉(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);一直以來，性能優(yōu)化是開發(fā)的重中之中，而提及 前端...

    Kyxy 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<