當(dāng)前位置：首頁(yè) > 前端技术 > CSS >内容正文

CSS

CSS样式为什么放在head中，而不放在body底部

發(fā)布時(shí)間：2024/8/1 CSS 48 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS样式为什么放在head中，而不放在body底部小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

CSS樣式為什么放在head中，而不放在body底部

1. 放在body底部

代碼：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><div class="text-center">css樣式加載順序</div><link rel="stylesheet" href="./bootstrap.min.css"> </body> </html>

放在body底部，瀏覽器會(huì)快速閃一下"css樣式加載順序"，這時(shí)的樣式是瀏覽器默認(rèn)樣式，說(shuō)明了瀏覽器已經(jīng)渲染過(guò)一次；
等底部css文件加載完，又重新渲染一遍；
下面是在chrome的渲染效果：

2. 放在head中

代碼：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./bootstrap.min.css"> </head> <body><div class="text-center">css樣式加載順序</div> </body> </html>

放在head中，在加載html前，加載完了css文件，這時(shí)渲染一次就OK了
下面是在chrome的渲染效果：

結(jié)論：
放在body底部，在DOM Tree構(gòu)建完成之后開始構(gòu)建render Tree，計(jì)算布局然后繪制網(wǎng)頁(yè)，等css文件加載后，開始構(gòu)建CSSOM Tree，并和DOM Tree一起構(gòu)建render Tree，再次計(jì)算布局重新繪制；
放在head中，先加載css，構(gòu)建CSSOM，同時(shí)構(gòu)建DOM Tree，CSSOM和DOM Tree構(gòu)建完成后，構(gòu)建render Tree，進(jìn)行計(jì)算布局繪制網(wǎng)頁(yè)。
總體來(lái)看，放在body底部要比放在head中多一次構(gòu)建render Tree，多一次計(jì)算布局，多一次繪制，從性能方面來(lái)看，不如放在head中。再次，放在body底部網(wǎng)頁(yè)會(huì)閃現(xiàn)默認(rèn)樣式的DOM結(jié)構(gòu)，用戶體驗(yàn)不好。

與50位技術(shù)專家面對(duì)面20年技術(shù)見(jiàn)證，附贈(zèng)技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的CSS样式为什么放在head中，而不放在body底部的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。