一、前言
突然想起来，有学生问我说“老师，我的CSS和JS放在哪里都能执行，为什么大多数我们书写要有固定的位置，为什么不能乱放？明明可以执行呀”。
那我今天就解释一下吧~
二、加载和渲染
页面的的加载和渲染也是一个非常复杂的过程
这个文章里需要你知道，页面能成功显示在你的电脑上，其实是至少要经历先 加载 后 渲染 的两个步骤
加载暂时可以理解为 先把页面下载下来，然后开始读一下
渲染就是，把你读到的内容 在浏览器窗口展示出来
三、css阻塞
其实,正常情况下css是阻塞html的DOM树渲染的
为什么呢？
正常我们的代码执行顺序是这样的：
<style>
.......
</style>
<div>
......
</div>
- 测试发现：当css没有加载完成的时候，html其实已经加载解析完成了,我们在控制台是可以打印出来html标签的
- 但是你会发现html并没有展现在浏览器上，因为它要等着css加载完成，然后在把样式给添加上以后才会进行渲染展示给用户。
如果css加载的时候不阻塞DOM树渲染，那么等html展示给用户的时候，然后css加载完成添加样式，这时候html就会被重新渲染（也叫做重绘或者回流）。这样肯定是影响性能的。
四、重绘与回流
页面重绘：当render tree（渲染树）中的一些元素需要更新属性，但这些属性只会影响元素的外观、风格，而不会影响到元素的布局，此类的页面渲染叫作页面重绘。
页面回流：当render tree（渲染树）中的一部分（或全部）因为元素的规模尺寸、布局、隐藏等改变而引起的页面重新渲染（或者叫作重新构建绘制）
五、css的书写位置
- 首先要明白，无论css写在哪里，这个css都能生效。（css阻塞）
- 那我就能随便乱写了？？？
- 由于网页文档是自上而下加载并解析的，假设将style标签书写在了</body>的后面，在读取到style标签之前，整个网页文档已经渲染得差不多了
- 这时候突然发现存在一个style标签，并且style标签中的内容针对网页中某些元素的样式进行了设置，于是浏览器只好重新为每个元素计算样式，再加载出来(重绘与回流)。
- 所以不建议这样写，否则会导致网页的加载速度的变慢。
网友评论