Question

我试图通过Google的pagespeed测试，并且renderblocking是一个问题（这是客户端请求，因此必须完成）。谷歌推荐的解决方案是内联关键CSS（不是一个选项），然后动态地将css文件附加到页面底部的javascript中的head标签：

<html>
<head>
<style>
  .blue{color:blue;}
</style>
</head>
<body>
<div class="blue">
  Hello, world!
</div>
<script>
  var cb = function() {
    var l = document.createElement('link'); l.rel = 'stylesheet';
    l.href = 'small.css';
    var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
  };
  var raf = requestAnimationFrame || mozRequestAnimationFrame ||
      webkitRequestAnimationFrame || msRequestAnimationFrame;
  if (raf) raf(cb);
  else window.addEventListener('load', cb);
</script>
</body>
</html>

所以a）当我完全删除css（删除标题中的链接标记，而不是使用任何其他方法）时，html文件底部的所有js文件都不会使renderblocking测试失败。一切都很好，但我当然希望将css包括在内。

b）当我使用上述方法时，每个js文件都无法进行renderblocking测试。

c）如果我将动态附加的CSS移动到我的一个js文件中，则所有js文件都无法通过renderblocking测试。

d）如果我将附加的CSS移动到jquery的文档就绪函数，则所有js文件都无法进行renderblocking测试。

鉴于此方法是Google自己建议的解决方案，至少可以说这有点令人沮丧。这只是我的CSS的大小（49kb和缩小）？有哪些潜在的解决方案？

Google推荐的优化CSS以避免渲染阻止的方法无效

0 个答案: