Ct.css — 通过注入样式表提升性能

这是 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 将样式和伪内容应用于块，以便您可以使用样式表作为可视化性能调试工具。

这真是太聪明了。该样式表有很多您可以测试的小东西，例如您不需要的属性、阻塞资源以及顺序错误的元素。

评论