消除渲染阻塞的JavaScript和CSS

本文介绍了消除渲染阻塞的JavaScript和CSS的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个麻烦，弄清楚Google PageSpeed Test中的这个spsefic结果实际上意味着什么。

我正在测试此网站：www.loaistudio.com -

解决方案

您的浏览器在加载JavaScript时冻结网页呈现

快速回答：您只需将JavaScript src置于内容下方即可。

为什么？因为当你的浏览器开始加载JavaScript时，它冻结其余的，直到它完成。

加载页面的内容首先允许它显示，然后JavaScript

这样做：

 < html> 
< head> 
< / head> 
< body> 
我的伟大的身体内容！ 
< script type =text / javascriptsrc =my / js / files.js> 
< script type =text / javascriptsrc =http://www.googleapi.com/my/external/scripts.js> 
< / body> 
< / html>

而不是这个（不幸的是还是很常见）：

 < html> 
< head> 
< script type =text / javascriptsrc =my / js / files.js> 
< script type =text / javascriptsrc =http://www.googleapi.com/my/external/scripts.js> 
< / head> 
< body> 
我的伟大的身体内容！ 
< / body> 
< / html>

I am having a trouble with figuring out what "this spsefic outcome" in Google PageSpeed Test actually mean.

I am testing this website: 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?!

解决方案

`Your browser freezes page rendering while loading JavaScript`

Quick answer: you just have to put your JavaScript src below your content.

Why? Because when your browser begins loading JavaScript, it freezes the rest until it's done with that.

Loading the content of your page first allows it to be displayed, and then JavaScript has all the time it needs to load.

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>

这篇关于消除渲染阻塞的JavaScript和CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！