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

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

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

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(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í)需注明來(lái)源： 創(chuàng)新互聯(lián)