堆栈内存溢出
  简体   繁体   English

消除渲染阻止JavaScript和CSS

[英]Eliminate render-blocking JavaScript and CSS

 原文  2014-02-03 23:51:21  1   2    javascript/ html/ css

问题描述

I am having a trouble with figuring out what "this spsefic outcome" in Google PageSpeed Test actually mean. 我在弄清楚Google PageSpeed Test中的“这个spsefic结果”实际意味着什么时遇到了麻烦。

I am testing this website: www.loaistudio.com - https://developers.google.com/speed/pagespeed/insights/?url=www.loaistudio.com 我正在测试这个网站：www.loaistudio.com - https://developers.google.com/speed/pagespeed/insights/?url=www.loaistudio.com

测试结果的截图

Can anyone advice me please? 有人可以建议我吗？ I have managed to fix all of the other errors - but I am completely stuck at this one, I understand that CSS has to be in the head of the page, is this telling not to place it in the head but at the end of the page?! 我已经设法修复了所有其他错误 - 但我完全陷入了这个错误，我明白CSS必须在页面的头部，这是告诉不要把它放在头部但是在结束时页？！

2 个解决方案

解决方案1
 4 已采纳  2014-02-04 00:05:16

Your browser freezes page rendering while loading JavaScript 您的浏览器在加载JavaScript时会冻结页面呈现

Quick answer: you just have to put your JavaScript src below your content. 快速回答：您只需将JavaScript src放在内容之下即可。

Why? 为什么？ Because when your browser begins loading JavaScript, it freezes the rest until it's done with that. 因为当您的浏览器开始加载JavaScript时，它会冻结其余部分直到它完成。

Loading the content of your page first allows it to be displayed, and then JavaScript has all the time it needs to load. 首先加载页面内容可以显示它，然后JavaScript会一直加载它。

So do like this: 所以这样做： 

<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>

Instead of this (which is unfortunately still really common): 而不是这（不幸的是仍然很常见）： 

<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>

解决方案2
 0  

或者，只需在脚本标记的末尾添加异步。 

<script src='' async></script>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 消除渲染阻止的JavaScript和CSS-需要建议 - Eliminate render-blocking JavaScript and CSS - advice needed 渲染阻止的Javascript和CSS - Render-blocking Javascript and CSS 如何消除渲染阻塞JavaScript - How to eliminate render-blocking JavaScript 在不影响响应性和性能的情况下，消除即时内容解决方案中阻止渲染的JavaScript和CSS - Eliminate render-blocking JavaScript and CSS in above-the-fold content solution without affecting responsiveness and performance 如何“消除首屏内容中的阻止渲染的JavaScript和CSS” - How to “Eliminate render-blocking JavaScript and CSS in above-the-fold content” 如何修复 joomla 中的“在首屏内容中消除阻止渲染的 JavaScript 和 CSS” - How to fix “Eliminate render-blocking JavaScript and CSS in above-the-fold content” in joomla OpenCart PageSpeed-在首屏内容中消除渲染阻止的JavaScript和CSS - OpenCart PageSpeed - Eliminate render-blocking JavaScript and CSS in above-the-fold content 在首屏内容中消除阻止渲染的JavaScript和CSS-Wordpress - Eliminate render-blocking JavaScript and CSS in above-the-fold content - Wordpress 阻止渲染的JavaScript和CSS-Google PageSpeed - Render-blocking JavaScript & CSS - Google PageSpeed 异步加载以消除渲染阻塞js和css？ - Asynchronously load to eliminate render-blocking js & css?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM