我试图通过对我的网页的本地回退支持来实现CDN资源。 但是现在我无法摆脱“首屏”内容中 jquery 和 Bootstrap 的渲染阻塞 JavaScript 和 CSS CDN 资源。
我尝试遵守 Google 指南，但它并没有解决我的问题:
<html>
<head>
</head>
<body>
<div id="wrapper">...</div>
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
<!-- jQuery local fallback -->
<script>
window.jQuery || document.write('<script src="./assets/scripts/jquery-2.2.2.min.js"><\/script>')
</script>
<!-- Bootstrap JS CDN -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js</script>
<!-- Bootstrap JS local fallback -->
<script>if(typeof($.fn.modal) === 'undefined') {document.write('<script src="./assets/scripts/bootstrap.min.js"><\/script>')}</script>
<!-- Bootstrap CSS local fallback -->
<div id="bootstrapCssTest " class="hide "></div>
<script>
$(document).ready(function() {
if ($('#bootstrapCssTest').is(':visible') === true) {
$("head ").append('<link rel="stylesheet " href="./assets/styles/bootstrap.min.css">');
}
});
</script>
</body>
</html>
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet " href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css ">更新:我尝试使用“async/defer”属性加载我的 .js CDN 脚本。但它没有工作，因为我的本地后备脚本给我 "Uncaught ReferenceError: $ is not defined" 错误，因为它们是在 jquery 异步加载完成之前执行的。
最佳答案
- 使用 jQuery 库包括页 footer 分和下面的自定义代码开始 jquery 代码
- 首屏内容中有 40% 的 CSS 代码(头部部分使用内部样式表)
<style type="text/css">...</style>
<html>
<head>
</head>
<body>
<div id="wrapper">...</div>
<div id="bootstrapCssTest" class="hide"></div>
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
<!-- jQuery local fallback -->
<script src="../scripts/jquery-2.2.2.min.js"></script>
<!-- Bootstrap JS CDN -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>
<!-- Bootstrap JS local fallback -->
<script src="../scripts/bootstrap.min.js"></script>
<!-- Bootstrap CSS local fallback -->
<script>
$(document).ready(function() {
if ($('#bootstrapCssTest').is(':visible') === true) {
$("head ").append('<link rel="stylesheet " href="./assets/styles/bootstrap.min.css">');
}
});
</script>
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet " href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css ">
</body>
</html>关于javascript - 使用 CDN 的 Google PageSpeed Insight CSS Javascript "above the fold"问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36408959/