一直以來，我很喜歡在文檔頭部放置 SCRIPT 標(biāo)簽和 LINK 標(biāo)簽來一起加載這些外部資源，覺得這樣統(tǒng)一起來加載會(huì)比較方便。甚至還強(qiáng)迫性地把 CSS 放在 JS 之前加載，因?yàn)槲矣X得寧愿讓用戶看到空白的頁面也不想讓用戶看到?jīng)]有 CSS 的亂頁面。但這個(gè)加載順序問題可遠(yuǎn)比這復(fù)雜。 瀏覽器自帶優(yōu)化 記得之前有寫過一篇「SCRIPT標(biāo)簽已經(jīng)無法阻止瀏覽器地貪婪了」就是說這個(gè)問題的?，F(xiàn)代瀏覽器雖然會(huì)規(guī)規(guī)矩矩地按順序處理內(nèi)容，但加載順序可不會(huì)按順序。不過這屬于瀏覽器的優(yōu)化部分，沒有在規(guī)范定義的范疇，所以不能以某些瀏覽器具有這樣的特性來說事。 如果沒有優(yōu)化呢？ 假如沒有這個(gè)優(yōu)化，那么瀏覽器就必須等到這些外部資源加載并解析完之后才會(huì)繼續(xù)處理文檔。不僅是 JS，CSS 也是如此，不過我們確實(shí)應(yīng)該讓 CSS 這么做，否則用戶可能看到亂的頁面。但對(duì)于 JS 部分，也許放在頭部確實(shí)有點(diǎn)浪費(fèi)（這是對(duì)于傳統(tǒng) Web 而言，現(xiàn)代 Web 構(gòu)架經(jīng)常會(huì)有完全依賴 JS 的情況）。 defer 和 async SCRIPT 標(biāo)簽帶有defer和async屬性（一些細(xì)節(jié)問題可以看這里），使用它們可以讓SCRIPT標(biāo)簽即使在頭部也不影響文檔加載。但是它們也有自己的問題，因?yàn)榧虞d方式變成了異步，會(huì)導(dǎo)致同步代碼無法執(zhí)行，甚至 JS 的依賴關(guān)系無法生效。所以這種方式只適用于異步模塊的加載。 不過我自己的異步模塊加載全部都已經(jīng)使用 predeclare.js 了，或者其它大項(xiàng)目喜歡把 JS 打包并壓縮在一起，實(shí)際上前端很少有直接加載異步模塊的情況。 說得這么凌亂，到底怎么加載才好嘛？ 我的建議是，CSS 始終放頭部。對(duì)于一些必不可少的 JS（沒有這些 JS 頁面就無法正常顯示）也放在頭部。業(yè)務(wù) JS（如果沒有這些 JS 會(huì)導(dǎo)致按鈕無法點(diǎn)擊）酌情放置，主要是看業(yè)務(wù)的重要性，我不希望在頁面上出現(xiàn)有按鈕，但是無法點(diǎn)擊的情況。其它有同步需求的 JS（比如統(tǒng)計(jì)、廣告）放到末尾（</body> 的前面），異步模塊要么打包后隨便放，要么用個(gè) AMD 庫(kù)去管理依賴關(guān)系。

網(wǎng)頁題目：講解JS和CSS資源加載標(biāo)簽的放置位置
當(dāng)前路徑：http://www.rwnh.cn/news16/317066.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機(jī)網(wǎng)站建設(shè)、、App開發(fā)、網(wǎng)站導(dǎo)航、外貿(mào)建站、網(wǎng)站排名

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)