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结构,用户体验不好。