logo标签列表

消除阻止渲染的 JavaScript 和 CSS

javascripthtmlcss
6
我在 Google PageSpeed 测试中遇到了一个问题，不知道 "this specific outcome" 的含义是什么。
我正在测试这个网站: www.loaistudio.com - https://developers.google.com/speed/pagespeed/insights/?url=www.loaistudio.com

screenshot of test result

有人可以给我建议吗？我已经修复了所有其他错误 - 但是我在这个问题上完全卡住了，我知道CSS必须放在页面的头部，这是在告诉我不要把它放在头部而是放在页面末尾吗？！

有些人建议将JavaScript资源（如jQuery等）放在页面末尾，紧靠着闭合的</body>标签前面，这也是Bootstrap框架的做法，虽然优势微乎其微。 - adaam
1
那些蓝色的标题不是指向帮助网站的链接吗？ - Bergi
2个回答
4

当加载JavaScript时，您的浏览器会冻结页面渲染

快速解答：只需将JavaScript src放在内容下方即可。

为什么？因为当您的浏览器开始加载JavaScript时，它会冻结剩余的内容，直到加载完成为止。

首先加载页面内容可以使其显示出来，然后JavaScript有足够的时间来加载。

所以，请按照以下方式操作：

<html>
    <head>
    </head>
    <body>
        My great body content!
        <script type="text/javascript" src="my/js/files.js">
        <script type="text/javascript" src="http://www.googleapi.com/my/external/scripts.js">
    </body>
</html>

不要再使用这种（很不幸还很常见）的方式：

<html>
    <head>
        <script type="text/javascript" src="my/js/files.js">
        <script type="text/javascript" src="http://www.googleapi.com/my/external/scripts.js">
    </head>
    <body>
        My great body content!
    </body>
</html>
这个可以用，但是CSS呢？为什么它也告诉我要把它放在最后面！？那不可能吧？CSS总是要放在顶部的吧？ - user2756554
0

或者，只需在您的脚本标签末尾添加async即可。

<script src='' async></script>
2
如果生活真的那么简单就好了！这是一种危险的方法，因为它假设两件事情：1）浏览器支持异步；2）使用异步加载的脚本之间没有依赖关系。例如，如果你使用异步加载jQuery，并且你自己的脚本（使用jQuery）在它之前加载，会发生什么？答案是：错误。 - BigBadMe
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接