HTML文件末尾的CSS

Question

我想知道浏览器如何处理大多数（如果不是全部）HTML之后的CSS规则。是否由于新规则需要重新整理整个页面，还是使用其他一些技术来处理这种情况？谢谢。

Answer 1

在很多情况下必须进行重新绘制，并且在页面生命周期中的许多情况下，DOM都会发生变化。

但是一旦解析了页面，就没有理由再次解析它，所有的更改都在内存DOM中进行。

这就是说，你应该把CSS链接放在HEAD中，因为

• 它可让浏览器更快地开始下载
• 它complies with HTML4 norm（“它可能只出现在文档的HEAD部分”）
• lets the browser start the rendering sooner
• 它可以让您的同事和您的未来在维护代码时不会感到惊讶

Answer 2

重新布局和重画，也许吧。 （也就是说，如果它已经开始渲染它并且加载的样式需要不同的显示。）

重新解析，没有。样式表纯粹是表现形式;它们不会影响解析。

Answer 3

假设浏览器在看到额外的CSS时已经开始渲染页面（这个行为有很多特定于浏览器的触发器）并且假设新规则导致至少一个元素的CSS属性更改，浏览器只会将该元素标记为需要重绘的元素。

这将导致下次浏览器重新绘制部分窗口时显示的页面发生任何可见的更改。

重要的是要记住，现代浏览器异步执行所有这些操作并安排事件，例如应用新CSS，重新计算布局和绘制到屏幕上（但不是完全）彼此独立。