ct.css - 单独通过注入样式表的性能提示这是来自Harry的一些真正的CSS技巧，它根据它在你的<head> 元素

这是来自Harry的一些真正的CSS技巧，它根据它在你的<head> 元素中看到的东西给你一些通用的性能建议。

首先，通过改变display ，而不是默认的none ，可以使<style> 块像其他元素一样可见。这是一个不错的小技巧。你甚至可以对<head> 中的东西这样做，例如...

head,
head style,
head script {
  display: block;
}

从这里开始，Harry对选择器变得非常聪明，从某些标签的使用和位置来确定问题的情况。例如，假设有一个<script> ，放在一些样式之后...

<head>
  <link rel="stylesheet" href="...">
  <script src="..."></script>
  <title>Page Title</title>
  <!-- ...  -->

好吧，这很糟糕，因为脚本被CSS挡住了，这很可能是不必要的。也许一些复杂的性能工具软件可以告诉你这些。但你知道还有什么可以？一个CSS选择器!

head [rel="stylesheet"]:not([media="print"]):not(.ct) ~ script,
head style:not(:empty) ~ script {

}

这有点像说head link ~ script ，但更高级一点，因为它只选择真正阻塞的实际样式表或样式块（而不是它自己）。Harry然后将样式和伪内容应用于这些块，这样你就可以将样式表作为一个视觉性能调试工具。

这真是太聪明了。样式表有很多你可以测试的小东西，比如你不需要的属性，阻塞的资源，以及不符合顺序的元素。