css為什么要放在head標簽中

思考: css
為什么要放在head
標簽中, 而不能像javascript
一樣置于body
標簽尾部?
Talk is cheap, show me the code.
OK, 那我們通過寫一些代碼來得出結(jié)果
在這里先說chrome
控制臺的一個小技巧:
限制download
速度對我們的測試很有幫助! 可以讓我們看清一些細節(jié)
我們先把download
速度限制為40kb/s, 開始測試:
當css
引入位置放于body
標簽尾部
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <h1>Hello world</h1> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css"> </body> </html>
在瀏覽器中查看效果:
當bootstrap.min.css
文件未加載完成時, 網(wǎng)頁中已經(jīng)出現(xiàn)了"Hello world", 但樣式為默認樣式, 說明網(wǎng)頁已經(jīng)渲染過一遍了
當bootstrap.min.css
文件加載完成之后, 網(wǎng)頁中的"Hello world"樣式發(fā)生改變, font-size發(fā)生明顯變化, 因此可以判斷: 網(wǎng)頁出現(xiàn)reflow
當css引入位置放于head標簽中時:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css"> </head> <body> <h1>Hello world</h1> </body> </html>
在瀏覽器中打開查看效果:
當bootstrap.min.css
未加載完成時, 網(wǎng)頁中并未出現(xiàn)任何內(nèi)容, 說明此時網(wǎng)頁并未發(fā)生渲染
當bootstarp.min.css
加載完成后, 網(wǎng)頁中出現(xiàn)帶有bootstrap
樣式的"Hello world", 說明此時網(wǎng)頁發(fā)生渲染
從上面兩個例子可以看出:
css放在body標簽尾部時, DOMTree
構(gòu)建完成之后便開始構(gòu)建RenderTree
, 并計算布局渲染網(wǎng)頁, 等加載解析完css之后, 開始構(gòu)建CSSOMTree
, 并和DOMTree
重新構(gòu)建RenderTree
, 重新計算布局渲染網(wǎng)頁
css放在head
標簽中時, 先加載css, 之后解析css構(gòu)建CSSOMTree
, 于此同時構(gòu)建DOMTree
, CSSOMTree
和DOMTree
都構(gòu)建完畢之后開始構(gòu)建RenderTree
, 計算布局渲染網(wǎng)頁
對比兩者, css
放在head
標簽中比css
放在body
標簽尾部少了一次構(gòu)建RenderTree
, 一次計算布局和一次渲染網(wǎng)頁, 因此性能會更好; 并且css放在body標簽尾部時會在網(wǎng)頁中短暫出現(xiàn)"裸奔"的HTML, 這不利于用戶體驗
再講一個小技巧:
通過以上操作可以查看網(wǎng)頁解析渲染全過程, 所以用來解決"css文件放置在head中有什么優(yōu)點?"這個疑惑也是極好~
到此這篇關(guān)于css為什么要放在head標簽中的文章就介紹到這了,更多相關(guān)css head標簽內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
相關(guān)文章
- 本文主要記錄了使用CSS3的float布局制作header的過程,從最初的結(jié)構(gòu)到最后的定稿的全部記錄以及修改過程,十分的詳細,給需要的小伙伴參考下2020-12-21
html5+css3之CSS中的布局與Header的實現(xiàn)
本文從CSS3的布局(CSS的布局的演化、CSS3盒模型-box-sizing、float布局中的bfc、Flexbox簡介)Header布局的實現(xiàn)(float實現(xiàn)布局、Header js的實現(xiàn))向我們展示了HTML5與CS2014-11-21