共计 1783 个字符，预计需要花费 5 分钟才能阅读完成。
写于 2018/10/10, 忽然想起来就搬运到思否, 次要目标是分享给刚入门糊涂的前端
问题
从刚入门前端的时候就始终被人告知: “css 要在 head 标签中引入 ”, 但对此的解释却寥寥无几, 那么 css 为什么要放在 head 标签中, 而不能像 javascript 一样置于 body 标签尾部呢?
解答过程
Talk is cheap, show me the code.
OK, 那咱们通过写一些代码来得出后果
在这里先说 chrome 控制台的一个小技巧:
限度 download 速度 对咱们的测试很有帮忙! 能够让咱们看清一些细节
, 咱们先把 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 文件未加载实现时, 网页中曾经呈现了 ”Hello world”, 但款式为默认款式, 阐明网页曾经渲染过一遍了
- 当 bootstrap.min.css 文件加载实现之后, 网页中的 ”Hello world” 款式产生扭转, font-size 产生显著变动, 因而能够判断: 网页呈现 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 未加载实现时, 网页中并未呈现任何内容, 阐明此时网页并未产生渲染
- 当 bootstarp.min.css 加载实现后, 网页中呈现带有 bootstrap 款式的 ”Hello world”, 阐明此时网页产生渲染
从下面两个例子能够看出:
- css 放在 body 标签尾部时, DOMTree 构建实现之后便开始构建 RenderTree, 并计算布局渲染网页, 等加载解析完 css 之后, 开始构建 CSSOMTree, 并和 DOMTree 从新构建 RenderTree, 从新计算布局渲染网页
- css 放在 head 标签中时, 先加载 css, 之后解析 css 构建 CSSOMTree, 于此同时构建 DOMTree, CSSOMTree 和 DOMTree 都构建结束之后开始构建 RenderTree, 计算布局渲染网页
论断
- 比照两者, css 放在 head 标签中比 css 放在 body 标签尾部少了一次构建 RenderTree, 一次计算布局和一次渲染网页, 因而性能会更好;
- css 放在 body 标签尾部时会在网页中短暂呈现 ” 裸奔 ” 的 HTML, 若是网速不好, “ 裸奔 ” 的工夫便会大大加长, 这不利于用户体验
最初
再讲一个小技巧:
通过以上操作能够查看网页解析渲染全过程, 所以用来解决 ”css 文件搁置在 head 中有什么长处?” 这个纳闷也是极好~
此处再分享一下 vue 的筛选框组件: https://segmentfault.com/a/11…
正文完
