在请求期间使用PHP对关键CSS进行优先级排序

我已经读过，其中谈到了先加载网页的关键CSS，然后在页面呈现后异步加载其他CSS资产

是否可以使用PHP计算出必须放在关键资产文件中的内容？在我看来，输入、文本区域、表单、表格等元素可以稍后加载。它是div、ul、ol、p、hx等通常构成“高于折叠”css的最大部分。也许总是先装这些

除了最重要的元素外，我认为构成网站形状的属性是必须首先加载的内容，然后是背景和其他“绘画”

有什么好主意吗？我想自动生成和缓存网站页面的结果，并得到所有设置。我想在客户端加载性能方面更进一步，但在开发过程中没有太多麻烦和额外的时间，同时为客户制作网站。框架应该做艰苦的工作

---

我考虑了一些智能正则表达式来解决这个问题，但似乎很难的是“优先级排序”。

从您的。您可以将主要样式（div、wrappers、p、图像或折叠上方的任何样式）放入头部，以正常方式加载。一旦页面加载并运行脚本，它就会启动脚本来加载css文件

<?php
  $cssArray = array('file1.css', 'file2.css', 'file3.css');
?>
<script>
  /*!
  Modified for brevity from https://github.com/filamentgroup/loadCSS
  loadCSS: load a CSS file asynchronously.
  [c]2014 @scottjehl, Filament Group, Inc.
  Licensed MIT
  */
  function loadCSS(href){
    var ss = window.document.createElement('link'),
        ref = window.document.getElementsByTagName('head')[0];

    ss.rel = 'stylesheet';
    ss.href = href;

    // temporarily, set media to something non-matching to ensure it'll
    // fetch without blocking render
    ss.media = 'only x';

    ref.parentNode.insertBefore(ss, ref);

    setTimeout( function(){
      // set media back to `all` so that the stylesheet applies once it loads
      ss.media = 'all';
    },0);
  }
  <?php
    foreach($cssArray as $css) {
      print 'loadCss("' . $css . '");'
    }
  ?>
</script>
<noscript>
  <!-- Let's not assume anything -->
  <?php
    foreach($cssArray as $css) {
      print '<link rel="stylesheet" href="' . $css . '">'
    }
  ?>
</noscript>

/*!
为简洁起见，从https://github.com/filamentgroup/loadCSS
loadCSS：异步加载CSS文件。
[c] 2014@scottjehl，灯丝集团有限公司。
麻省理工学院执照
*/
函数loadCSS（href）{
var ss=window.document.createElement（'link'），
ref=window.document.getElementsByTagName（'head'）[0]；
ss.rel=‘样式表’；
ss.href=href；
//暂时将介质设置为不匹配的介质，以确保
//获取而不阻塞渲染
ss.media=‘仅x’；
ref.parentNode.insertBefore（ss，ref）；
setTimeout（函数（）{
//将媒体设置回'all'，以便样式表在加载后应用
ss.media=‘全部’；
},0);
}

---

根据经验和最佳实践，所有css调用都应该位于

中，并且所有脚本调用都应该位于

之前。所有文件都将根据您的web服务器配置文件异步加载到一定数量，通常约为5。一旦这些文件或其中一个文件可用，它将启动下一个文件

---

自动化 这是一系列全新的问题

现在，您必须加载该文件并设置一个停止查找要检查的标记、类或id的点（使用html解析器）

然后，您必须加载并读取css文件，以提取在上一步中找到的类

将文件以多个文件的形式输出到文件系统。

• 第一次装载一个
• 其他用于javascript方法或在页面底部加载的

在创建时检查文件，或进行修改，并根据需要重新制作，或在可用时调用

---

对我来说，这个选项非常耗时，如果操作不当或者您必须处理大型文件，可能会导致问题，并可能导致加载时间缩短。由于大部分工作将在服务器上完成，因此您等待获取第一个字节的数据的时间将比仅以传统方式提供数据的时间更长。

除非一个网站每天至少有数十万访问者，或者由于某种原因它对性能极为敏感，否则我不确定是否会为此而烦恼。只需缩小并加入您的CSS，并通过gzip提供服务。出于兴趣，您的组合CSS文件有多大？@halfer所有网站都“性能敏感”。哪些网站不会？如果网站运行缓慢，用户会离开、感到沮丧等。缩小、压缩更为重要，优先级为1，当然，但这并不意味着内联CSS总计高达14kB时就没有优先级，当你应用缩小、削减未使用的CSS、删除JS框架和简化性能设计时，优先级为3。@FelipeAls，谢谢你的想法，但我不认为所有的网站都对性能敏感。如果OP在少数人使用的站点上节省了几毫秒的加载时间，谁会注意到呢？这是否值得工程上的努力？（+1用于讨论的OP）。