我最近进行了一些优化，以提高正在从Google网站管理员工具的PagesPeed工具中正在处理的应用程序的分数。
特别是，Google要求"消除折叠内容中的渲染障碍JavaScript和CSS"。因此，我删除了声明，然后将它们移至页面完成加载后加载的脚本中，因此我从：
中转到：<link rel="stylesheet" href="/bundles/vendor.css"/>
<link rel="stylesheet" href="/bundles/common.css"/>
<script src="/bundles/vendor.bundle.js"></script>
：
<script type="text/javascript">
function downloadJSAtOnload() {
var stylesheet1 = document.createElement('link');
stylesheet1.href = "https://fonts.googleapis.com/css?family=Poppins";
stylesheet1.rel = 'stylesheet';
stylesheet1.type = 'text/css';
document.getElementsByTagName('head')[0].appendChild(stylesheet1);
var stylesheet2 = document.createElement('link');
stylesheet2.href = "/bundles/vendor.css";
stylesheet2.rel = 'stylesheet';
stylesheet2.type = 'text/css';
document.getElementsByTagName('head')[0].appendChild(stylesheet2);
var stylesheet3 = document.createElement('link');
stylesheet3.href = "/bundles/common.css";
stylesheet3.rel = 'stylesheet';
stylesheet3.type = 'text/css';
document.getElementsByTagName('head')[0].appendChild(stylesheet3);
var element1 = document.createElement("script");
element1.src = "/bundles/common.bundle.js";
document.body.appendChild(element1);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
在身体元素的底部。
它效果很好，并提高了我的分数很多，但是它引起了分销问题。
我们使用grunt来构建资产，进行通常的uglify，kinify等。我们称 filerev grunt任务以生成资产文件中的缓存buster版本，然后我们调用 USEMIN 替换具有版本编号的原始资产文件的参考，以破坏缓存。
问题在于，usemin仅对 src 元素的元素作用，并且由于我现在加载这些资产的方式，它将引用对原始资产名称。这意味着我必须在发行期间构建后手动更改它，这是不可接受的。
所以我正在寻找使它起作用或替代方案的方法，但到目前为止没有运气。
我认为，您不应该首先这样做。
在页面上加载HTML并渲染后，您正在加载所有CSS。这意味着您几乎可以肯定会有一系列未风格的内容。为了防止这种情况发生，您的样式应在<head>
请注意，window.onload等待文档的窗口准备就绪，这意味着所有外部资源都已加载。例如，如果页面上有图像，则在加载所有图像之前，您的CSS和JS不会加载。这很可能比您应该等待加载JS的时间更长。
由于 <script> tags阻止了DOM的构建(由于它需要执行该JS(，因此可以使用ASYNC或DEFER属性更好的方法，因此您仍然可以将<script>标记添加到<body>的末端，但是不会阻止您的页面渲染。
有一个过度优化的事情。值得降低您的用户体验的更好的页面得分吗？这取决于您的决定，但是我倾向于学习"否"：(
好吧，最后我能够解决这个问题。我使用了应用于所有字符串的filerev-apply grunt插件，而不仅仅是带有src属性的内部脚本元素，因为usemin 似乎正在执行。
它运作良好
我将咕unt与别名一起使用，所以这是filerev_apply.js任务文件：
module.exports = function(grunt, options) {
return {
dist: {
files: [{
'<%= dist %>/index.html': '<%= dist %>/index.html',
}]
}
};
};
在Filerev之后打电话给它。