我只是花了很长时间谷歌搜索...到处找到半答案。 我正在使用谷歌页面速度见解来改进我的网站,它告诉我异步加载我的JavaScript。 我找到了几个代码,但他们没有解释如何加载多个js文件以及如何加载css。 我也找不到它告诉我加载它的顺序的任何地方。 有人可以帮忙吗?

注意:我DID尝试将js移动到页脚,但我的移动菜单不再有效(使用expand.js文件)

我需要异步加载的Javascript文件是:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script language="javascript" type="text/javascript" src="js/h5.js"></script>
    <script language="javascript" type="text/javascript" src="js/expand.js"></script>

我的CSS:

    <link rel="stylesheet" type="text/css" href="style.css">

===============>>#1 票数:1

脚本的异步加载可能变得非常复杂。 您是否尝试过使用async属性? 例如:

<script async src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script async language="javascript" type="text/javascript" src="js/h5.js"></script>
<script async language="javascript" type="text/javascript" src="js/expand.js"></script>

但是,这会导致不希望的竞争条件 所有这些意味着您的网站的其余部分不会等到加载其他资源之前加载这三个JavaScript文件。 这可能会也可能不会提高您网站的速度,具体取决于所包含的内容,并且在依赖关系管理方面会产生一些不可思议的结果,您必须在脚本中考虑这些结果。

大G通常建议创建两个小文件:一个CSS和一个JavaScript文件,包含在<head/> ,其中包含上述内容的所有样式和逻辑(或更好的内联:内联)他们,即使这增加了DOM的大小)。 来源

===============>>#2 票数:0

如何异步加载Javascript文件?
好吧加载javascript文件你只需要在<script>标签中包含“async”属性即

<script src="your path" async></script>

现在这个脚本将在后台下载,但不会导致JS渲染问题。
注意:如果你正在使用一些jquery插件,即图像缩放或任何其他东西,它将需要一个额外的时间来加载,但之后它将正常工作。

为什么要在“ASYNC”中使用“DEFER”关键字?

您还可以将defer属性与async属性一起使用。 带有异步属性的<script>标记强制文件在后台下载,并在下载后立即执行。 但是,与defer属性异步会强制<script>标记在加载整个站点后执行。

<script src="" async defer></script>

如何异步加载CSS文件? 如果要首先异步加载CSS文件,则必须在头文件中放置提供的<script> ,然后可以使用loadCSS()函数异步加载CSS文件。

<script>
// https://github.com/filamentgroup/loadCSS
!function(e){"use strict"
var n=function(n,t,o){function i(e){return f.body?e():void setTimeout(function(){i(e)})}var d,r,a,l,f=e.document,s=f.createElement("link"),u=o||"all"
return t?d=t:(r=(f.body||f.getElementsByTagName("head")[0]).childNodes,d=r[r.length-1]),a=f.styleSheets,s.rel="stylesheet",s.href=n,s.media="only x",i(function(){d.parentNode.insertBefore(s,t?d:d.nextSibling)}),l=function(e){for(var n=s.href,t=a.length;t--;)if(a[t].href===n)return e()
setTimeout(function(){l(e)})},s.addEventListener&&s.addEventListener("load",function(){this.media=u}),s.onloadcssdefined=l,l(function(){s.media!==u&&(s.media=u)}),s}
"undefined"!=typeof exports?exports.loadCSS=n:e.loadCSS=n}("undefined"!=typeof global?global:this)
</script>

现在你只需要使用loadCSS功能。

<script>
 loadCSS("https://www.yourCSSLinkHere.com");
</script>

通过这种方式,您可以异步加载CSS和JS文件。


您可以使用HTTP / 2.0来克服速度问题,因为HTTP / 2.0允许您的文件并行下载,但HTTP / 1.0不允许您的文件并行下载,否则HTTP / 1.0遵循FIFO(先进先出)规则。

  ask by Shtarley translate from so

未解决问题?本站智能推荐:

2回复

渲染阻止CSS-延迟加载CSS文件

我正在尝试为我的网站解决渲染过大的问题,但是它们有问题。 我用以下代码加载css文件: 但在“ Google页面速​​度工具>洞察”中,渲染阻止了CSS文件。 帮我解决它^ _ ^
6回复

CSS传递优化:如何推迟CSS加载?

我正在尝试根据Google文档为开发人员优化CSS交付 https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery#example 在内联一个小的CSS文件的示例中可以看到,关键的CSS内联在头部, 原始的sm
3回复

字体真棒的CDN JS在Pagespeed Insights上显示为渲染阻止

我没有直接链接到Font Awesome CSS,而是使用Font Awesome CDN中的js来允许在主页上异步加载图标,但Google的Pagespeed Insights仍然将其标记为渲染阻止js。 我正在使用Font Awesome CDN提供的自定义js链接并将其放在<h
1回复

为Google Insights加载Google字体的非阻塞方式

我正在尝试传递Google页面速​​度方面的见解,但由于“正在加载Google字体”,因此无法“消除在首屏内容中出现渲染阻止的JavaScript和CSS”。 Google Insights的建议似乎都不适用于这种情况:内联css,使用媒体查询等。我什至尝试使用WebFontLoader异步加
2回复

Google PageSpeed得分 - 1渲染阻止CSS文件

我有一个Wordpress网站。 尝试使用Google PageSpeed Insights工具获得100/100分,并且卡在1'错误'上。 谷歌说; 在上层内容中消除渲染阻止JavaScript和CSS您的页面有1个阻止CSS资源。 这会导致呈现页面的延迟。 在不等待加载以下
1回复

为什么最小化js / css页面速度和yslow不同?

II在pagespeed标签上检查我的效果网页,结果如下: 如果我检查yslow选项卡,则结果如下: 为什么最小化js / css页面速度和yslow不同? 像这样的消息: 以及如何找出需要缩小的CSS和JS? 注意:我使用gtmetrix进行检查
1回复

延迟折叠的CSS渲染器突然无法通过Google Pagespeed Insight Test

有人可以告诉我为什么以下工作的渲染延迟脚本突然无法通过Google Pagespeed Insight Test吗? 该页面是http://www.landshoppe.com/ 我在用 在页脚
1回复

渲染阻止Javascript和CSS MVC4

我正在MVC 4 Web应用程序上进行最佳优化。 现在只有最后一件事困扰我。 问题:消除渲染阻止的JavaScript和CSS 我知道的: 1)在_Layout.cshtml中,@ Styles.Render(“〜/ Content / css”)和@ Scripts.R
1回复

使用CDN的Google PageSpeed Insight CSS Javascript问题

我试图通过对我的网页的本地后备支持来实现CDN资源。 但是现在,我无法摆脱“折叠式”内容中用于jquery和Bootstrap的渲染阻止JavaScript和CSS CDN资源。 我试图遵守Google指南,但未能解决我的问题: 删除阻止渲染的JavaScript 优化
1回复

使用head.js优化CSS交付以实现Google Page Speed失败

我的页面模板具有assets javascript数组,其中包含要在该页面中使用的CSS,JS资产列表,例如: 使用head.js (异步加载),加载页面的资产列表: 现在,“移动设备”标签(而非桌面设备)上的Google Page Speed表示“ 优化 my.css CSS投