網頁 head 標籤中的 JS 和 CSS,哪種檔案放在前面,哪種放在後面比較好?

時間 2021-05-08 19:46:25

1樓:Morning

不同意因為js指令碼會阻塞dom構建的原因,而將js指令碼放在末尾。

Edit fiddle - JSFiddle

就算放在末尾了,也一樣會阻塞dom的構建。

2樓:

@吳釗 說的是對的,以色列的開發人員加希尓在翻閱了現代瀏覽器核心原始碼以後,寫了一文《現代瀏覽器工作原理》。瀏覽器中分主副解析引擎。head中引入的指令碼可以直接柱塞主解析引擎的解析工作(比如某個瞬間我們發現網頁後面一片空白),如果這些指令碼中有操作dom的函式,那麼這些函式不會執行,會被標識為延時狀態,等dom載入完後才會追趕執行。

如果指令碼中有可執行的函式,那麼dom的解析也會被柱塞,瀏覽器轉而要先去執行指令碼。指令碼執行完畢後,dom解析才繼續。

為了避免head引入的指令碼柱塞主解析引擎對dom的解析工作,更快的載入dom並渲染出來,一般的原則是,樣式放在前面,指令碼放在最後面。遵從先解析再渲染再執行script這個順序。yahoo21條中也有提及。

3樓:賀師俊

玉伯和克軍的文章主要說了資源載入順序的問題,我補充一下針對問題的回答。順序一般是:

1. 個別特殊JS,比如用於除錯的基礎指令碼(部署時未必有)、效能日誌之類,必須放在盡量最前的位置。

2. 外部樣式表(link[rel=stylesheet])

3. 本頁樣式(style)

4. 基礎庫,比如loader,各種shim/polyfill,jQuery之類的

注意,有些開發者從效能優化的角度傾向於加defer或者放到頁面的最底部。不過不是所有的指令碼都能這樣做。比如html5-shim指令碼必須在body之前載入。

再如history api的相容實現等都不應defer,因為你不能確保使用者在頁面ready之前沒有back/forward動作。再如jQuery,defer是可以,但也意味著你所有依賴jQuery的功能都需要defer,考慮到這些靜態檔案通常都是有快取的,所以不defer也未必不是乙個可以接受的折衷。

5. 少量本頁script以上。

4樓:Kate Cui

參考:http://

網頁中怎樣實現折線圖和餅狀圖?是用JS還是?類似於下面的這種效果。

周中原 lang en charset UTF 8 title pieChart style head pieChart width 400px height 300px 您的瀏覽器不支援此屬性,請使用更高階的瀏覽器canvas varpieChart document getElementById...

目前有什麼好的js和css版本控制程式?

寸志 遊志軍 寫的很全了 補充下 推薦使用gulp外掛程式 gulp clean gulp rev gulp rev collector gulp sequence 基於gulp的自動化工具,自動增量式新增檔案指紋 https github.com front end build cache han...

看完w3c的css和js基礎後該幹什麼

Echo ShenYiFan js功力紮實的話多看一些框架吧。工作之後才覺得自己入門前端。一入前端深似海,需要學的東西很多。很快你就會發現活到老,學到老 小炮去 可以學習一下jquery 1 jQuery簡介 2 使用方式 3 函式 4 jQuery物件 5 選擇器 6 jQuery函式 7 常見方...