最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

关于延迟加载JavaScript_javascript技巧

来源:懂视网 责编:小采 时间:2020-11-27 21:37:54
文档

关于延迟加载JavaScript_javascript技巧

关于延迟加载JavaScript_javascript技巧:JavaScript的延迟加载是那些在web上,能让你想抓狂地去寻找解决方案的问题之一。 很多人说那就用defer或async,甚至有些人说那就将你的javascript代码放在页面代码底部。 上述方法都不能解决在web页面完全加载后,再加载外部js的问题。上述方法
推荐度:
导读关于延迟加载JavaScript_javascript技巧:JavaScript的延迟加载是那些在web上,能让你想抓狂地去寻找解决方案的问题之一。 很多人说那就用defer或async,甚至有些人说那就将你的javascript代码放在页面代码底部。 上述方法都不能解决在web页面完全加载后,再加载外部js的问题。上述方法

JavaScript的延迟加载是那些在web上,能让你想抓狂地去寻找解决方案的问题之一。

很多人说“那就用defer”或“async”,甚至有些人说“那就将你的javascript代码放在页面代码底部”。

上述方法都不能解决在web页面完全加载后,再加载外部js的问题。上述方法也会偶尔让你收到Google页面速度测试工具的“延迟加载javascript”警告。所以这里的解决方案将是来自Google帮助页面的推荐方案。

如何延迟加载JavaScript

下面是Google推荐的代码。这些代码应被放置在标签前(接近HTML文件底部)。另外,我将外部JS文件名突出显示。


这段代码直到文档加载完才会加载指定的外部JS文件。因此,不应该把那些页面正常加载需要依赖的javascript代码放在这里。而应该将JavaScript代码分成两组。一组是因页面需要而立即加载的javascript代码,另外一组是在页面加载后进行操作的javascript代码(例如添加click事件或其他东西)。这些需等到页面加载后再执行的JavaScript代码,应放在一个外部文件,然后再引进来。

例如,在这页面我使用上述文件进行延迟加载 - Google analytics,Viglink (我怎么赚钱),和显示在底部的Google+徽章(我的社交媒体)。这对于我来说,没有理由在初始页面加载时加载这些文件,因为初始阶段都没必要加载上述无关紧要的内容。也许在你的页面中也有同样性质的文件。那你难道想让用户在看到网页内容之前,还要等待这些文件加载吗?

为什么不使用其它方法呢?

直接插入代码、将脚本放置在底部和使用“defer”或“async”,这几种方法都不能达到先加载页面后加载JS的目的,而且它们肯定不能在各个浏览器上表现一致。

它为什么重要?

它的重要性是由于Google将页面速度作为排名因素之一而且用户也希望能快速加载页面。另外对于移动搜索引擎优化也是非常重要的。Google根据页面最初加载时间来衡量页面速度。这意味着你必须尽可能快地得到页面的load事件。页面最初加载时间是Google用来评价你的web页面质量(而且别忘记用户在等待页面的加载)。Google积极推进和推荐将上述的无关紧要的内容按重要性排列,让所有资源(js,css,images等)脱离关键的渲染路径,而且这样做是值得去努力的。如果这样能取悦用户,且让Google开心,你很应该这样做。

用法示例

我已创建一个页面,在这个页面你可看到这段代码的使用。

让你测试的示例文件

好的,为了说明,我已制作几个示例页面让你进行测试。每个页面都做同一样的事情。这是一个普通的HTML页面,含有一个等待2秒然后

输出“hello world”的javascript脚本。你可以测试这些文件,然后你会看到只有一种方法,它的加载时间是不包括2秒的等待时间。

直接插入脚本的页面 – 点击这里

带有使用“defer”外部脚本的页面 – 点击这里
使用上述推荐代码的页面 – 点击这里

关键点

压倒一切的首要任务应该是尽可能快地交付内容给用户。而我们一直没想着如何对待我们的javascript代码。但用户不应该为一些无关紧要的脚本,而被迫地为内容而作出等待。无论你的页脚多酷,都没理由让一个可能从不滚动到页脚的用户,去加载那些让页脚变酷的javascript文件。

以上所述就是本文的全部内容了,希望大家能够喜欢。

文档

关于延迟加载JavaScript_javascript技巧

关于延迟加载JavaScript_javascript技巧:JavaScript的延迟加载是那些在web上,能让你想抓狂地去寻找解决方案的问题之一。 很多人说那就用defer或async,甚至有些人说那就将你的javascript代码放在页面代码底部。 上述方法都不能解决在web页面完全加载后,再加载外部js的问题。上述方法
推荐度:
标签: 加载 js 延迟
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top