CSS样式为什么放在head中，而不放在body底部
生活随笔
收集整理的這篇文章主要介紹了
CSS样式为什么放在head中，而不放在body底部
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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底部，瀏覽器會快速閃一下"css樣式加載順序"， 這時的樣式是瀏覽器默認樣式，說明了瀏覽器已經渲染過一次；
等底部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文件，這時渲染一次就OK了
下面是在chrome的渲染效果：
結論：
放在body底部，在DOM Tree構建完成之后開始構建render Tree，計算布局然后繪制網頁，等css文件加載后，開始構建CSSOM Tree，并和DOM Tree一起構建render Tree，再次計算布局重新繪制；
放在head中，先加載css，構建CSSOM，同時構建DOM Tree，CSSOM和DOM Tree構建完成后，構建render Tree，進行計算布局繪制網頁。
總體來看，放在body底部要比放在head中多一次構建render Tree，多一次計算布局，多一次繪制，從性能方面來看，不如放在head中。再次，放在body底部網頁會閃現默認樣式的DOM結構，用戶體驗不好。
總結
以上是生活随笔為你收集整理的CSS样式为什么放在head中，而不放在body底部的全部內容，希望文章能夠幫你解決所遇到的問題。
