講解JS和CSS資源加載標簽的放置位置

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

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

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

廣告

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