首頁  >  文章  >  web前端  >  為什麼css放上面js放下面

為什麼css放上面js放下面

藏色散人
藏色散人原創
2021-01-27 09:12:283716瀏覽

css放上面js放下面的原因:1、在載入html產生DOM tree的時候,可以同時對DOM tree進行渲染,這樣可以防止閃跳,白屏或者佈局混亂;2、javascript加載後會立即執行,同時會阻塞後面的資源載入。

為什麼css放上面js放下面

本文操作環境:Windows7系統、HTML5&&CSS3版,DELL G3電腦。

推薦:css影片教學

href和src的區別

一般載入CSS用href,並放在頭部;載入script用src,放在body內的下方。

href

是hypertext reference的縮寫,表示超文本引用,用來建立目前元素和文件間的連結。常用的有link,a。

當CSS使用href引用,瀏覽器會辨識該文件問CSS,並行下載,不會停止目前文件的載入。

src

是source的縮寫,是資源,頁面不可或缺的一部分,src指向的內容會嵌入到文件中目前標籤的位置。常用的有img, script, iframe。

當script使用src引用,瀏覽器解析到該元素時會停止對文件的渲染,直到該資源載入完成。這也是將script放底部而不是頭部的原因。

把CSS放頭部,script放下方的原因

1、CSS放頭部

#在載入html產生DOM tree的時候,就可以同時對DOM tree進行渲染。

這樣可以防止閃跳,白色螢幕或佈局混亂。

2、javascript放在後面

javascript可能會改變DOM tree的結構,所以需要一個穩定的DOM tree。

javascript載入後會立即執行,同時會阻塞後面的資源載入。 (javascript載入與執行的特點)

拓展知識:

1、首先讓我們先認識幾個常見的問題:

1.在進行頁面優化的時候,需要將css放在頭部,將js檔案放在尾部,這樣做為什麼能夠實現頁面的最佳化?

2.在使用jquery的時候,為什麼把函數寫在$(document).ready ()事件中?

3.javascript會阻塞dom的解析。

當解析過程中遇到