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底部相关推荐

vue项目中css样式如何使用data中定义的动态变量
vue项目中css样式如何使用data中定义的动态变量直接上代码: 在这里是因为需要根据接口返回的数据控制对应父级盒子的高度以及子级盒子的宽度,所以需要用到动态样式.具体代码如下: <temp ...
webpack 打包html中css样式如果处理,webpack中单独打包css样式
这次给大家带来webpack中单独打包css样式,webpack中单独打包css样式的注意事项有哪些,下面就是实战案例,一起来看一下. 零.介绍以下是个人项目中总结出来的一些基本知识,记录在这里,加 ...
微信小程序开发常用CSS样式实例（更新中）
/**index.wxss**/ .Style01{color: red;word-spacing: 20px;/*设置段落间的字间距*/text-align: left;/* 设置文本对齐方式左对齐 ...
html加css绘制oprea的logo,css – 在Opera和webkit中自定义字体的底部
虽然这不是我正在寻找的解决方案,但我已经找到了可能适用于其他解决方案的解决方案: 在我的原始样式表中,我已经指定了如下的字体: @font-face { font-family: 'DroidSans ...
如何通过jQuery动态设置元素CSS的样式，以及HTML中CSS “内联式”、“嵌套式”、“外联式”使用方法
html元素使用CSS渲染标签的样式,可以通过内联式.嵌套式.外联式来将CSS样式添加到html中.有时候涉及到动态的参数,或者在事件中需要修改不同元素的CSS样式时,可以通过js获取目标元素,再其修 ...
html5中插入样式表方法,如何插入css样式？
如何插入css样式?下面本篇文章就来给大家介绍一下插入css样式的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 准备 1.首先准备一个html文件:test.html,不建议 ...
设计程序，从键盘输入十进制数，结果存放在BUFFER中（无符号数，16位），再把结果以十六进制方式在屏幕输出。
只为记录汇编作业题目:设计程序,从键盘输入十进制数,结果存放在BUFFER中(无符号数,16位),再把结果以十六进制方式在屏幕输出. 例如:若键盘输入: 65534:则转换完,屏幕输出:FFFE 代 ...
php中的css样式怎么写,css样式怎么写在jsp中
css样式写在jsp中的方法:1.通过内联样式写在jsp中:2.使用" 本教程操作环境:windows7系统.css3版,该方法适用于所有品牌电脑. css样式写在jsp中: 1.内联样式 ...
如何在AngularJS中有条件地应用CSS样式？
本文翻译自:How do I conditionally apply CSS styles in AngularJS? Q1. Q1. Suppose I want to alter the look ...
require.js引入css文件,[DikeJS]RequireJS引入CSS样式文件（五）
在实际开发组件时,我们常常需要关注组件的样式,样式如何定义,以及样式如何引用,我关注此问题时也纠结了一小下,不过还好,RequireJS周边给我们提供了丰富的插件,我们可以直接使用css.js,具体的 ...

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

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

1. 放在body底部

2. 放在head中

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

最新文章

热门文章