乐趣区

关于前端:CSS为什么要放在head标签中

jiezi

写于 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”, 阐明此时网页产生渲染

从下面两个例子能够看出:

  1. css 放在 body 标签尾部时, DOMTree 构建实现之后便开始构建 RenderTree, 并计算布局渲染网页, 等加载解析完 css 之后, 开始构建 CSSOMTree, 并和 DOMTree 从新构建 RenderTree, 从新计算布局渲染网页
  2. css 放在 head 标签中时, 先加载 css, 之后解析 css 构建 CSSOMTree, 于此同时构建 DOMTree, CSSOMTree 和 DOMTree 都构建结束之后开始构建 RenderTree, 计算布局渲染网页

论断

  1. 比照两者, css 放在 head 标签中比 css 放在 body 标签尾部少了一次构建 RenderTree, 一次计算布局和一次渲染网页, 因而性能会更好;
  2. css 放在 body 标签尾部时会在网页中短暂呈现 ” 裸奔 ” 的 HTML, 若是网速不好, “ 裸奔 ” 的工夫便会大大加长, 这不利于用户体验

最初

再讲一个小技巧:

通过以上操作能够查看网页解析渲染全过程, 所以用来解决 ”css 文件搁置在 head 中有什么长处?” 这个纳闷也是极好~

此处再分享一下 vue 的筛选框组件: https://segmentfault.com/a/11…

退出移动版