css为何●▂●要放到head标识中

日期：2021-03-24 类型：科技新闻 

关键词：如何创建网站，免费网站建站，网站建设文章，网站建设7个基本流程，自动建站

思索: css为何要放到head标识中, 而不可以像javascript一样放置body标识尾部?

Talk is cheap, show me the code.

OK, 那么我们根据写一些编码到来出結果

在这里里先说chrome操纵台的一个小窍门:

限定download速率一件事们的检测很有协助! 可让大家认清一些关键点

大家先把download速率限定为45kb/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", 但款式为默认设置款式, 表明网页页面早已3D渲染过一遍了

当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未载入进行时, 网页页面中仍未出現一切內容, 表明这时网页页面仍未产生3D渲染

当bootstarp.min.css载入进行后, 网页页面抽出现含有bootstrap款式的"Hello world", 表明这时网页页面产生3D渲染

从上边2个事例能看出:

css放到body标识尾部时, DOMTree搭建进行以后便刚开始搭建RenderTree, 并测算合理布局3D渲染网页页面, 等载入分析完css以后, 刚开始搭建CSSOMTree, 并和DOMTree再次搭建RenderTree, 再次测算合理布局3D渲染网页页面
css放到head标识中时, 先载入css, 以后分析css搭建CSSOMTree, 在此同时搭建DOMTree, CSSOMTree和DOMTree都搭建结束以后刚开始搭建RenderTree, 测算合理布局3D渲染网页页面
比照二者, css放到head标识中比css放到body标识尾部少了一次搭建RenderTree, 一次测算合理布局和一次3D渲染网页页面, 因而特性会更强; 而且css放到body标识尾部时候在网页页面中短暂性出現"裸跑"的HTML, 我觉得有利于客户感受

再讲一个小窍门:


根据之上实际操作能够查询网页页面分析3D渲染整个过程, 因此用于处理"css文档置放在head中有哪些优势?"这一疑虑也是很好~

到此这篇有关css为何要放到head标识中的文章内容就详细介绍到这了,大量有关css head标识內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容，期待大伙儿之后多多的适用脚本制作之家！

上一篇：⊙ω⊙CSS 表明横着进展条最终显示信息文本的完 返回下一篇：没有了