如何推迟加载JS

  • 时间:2018-06-06 01:49 作者:自导自演x 来源:自导自演x 阅读:92
  • 扫一扫,手机访问
摘要:JavaScript的推迟加载是那些在web上,可以让你想抓狂地去寻觅处理方案的问题之一。很多人说那就使用”defer”或者”async”,甚至有些人说“那就将你的javascript代码放在页面代码底部”。上述方法都不可以处理在web页面完全加载后,再加载外部js的问题。上述方法也会偶尔让你收到G

JavaScript的推迟加载是那些在web上,可以让你想抓狂地去寻觅处理方案的问题之一。

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

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

如何推迟加载JavaScript

下面是Google推荐的代码。这些代码应被放置在标签前(接近HTML文件底部)。

1234567891011121314

这里做了什么?

这段代码意思是等到整个文档加载完后,再加载外部文件“defer.js”。

具体说明

  1. 复制上面代码

  2. 粘贴代码到HTML的标签前 (靠近HTML文件底部)

  3. 修改“defer.js”为你的外部JS文件名

  4. 确保你文件路径是正确的。例如:假如你仅输入“defer.js”,那么“defer.js”文件肯定与HTML文件在同一文件夹下。

这段代码可以使用在哪里(和哪里不可以使用)

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

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

为什么不用其它方法呢?

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

它为什么重要?

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

关键点

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

  • 全部评论(0)
最新发布的资讯信息
【系统环境|软件环境】如何成为一名大数据工程师?(2019-05-20 12:11)
【系统环境|Linux】大数据四大常识,不会你敢说自己在做大数据?(2019-05-19 11:39)
【系统环境|】需要同时掌握AVA和Linux,才可以继续大数据课程的学习(2019-05-18 10:28)
【系统环境|软件环境】学习大数据,一定要了解大数据的这些用途(2019-05-16 10:49)
【系统环境|Linux】bt宝塔控制面板mysql频繁自动停止详细解决办法(2019-05-16 08:52)
【系统环境|】大数据零基础学习路线,新人记得保存收藏哦(2019-05-15 10:54)
【系统环境|】全网最全最新的大数据系统学习路径(2019-05-14 15:38)
【系统环境|Linux】毕业设计:音乐分享系统(2019-05-14 07:48)
【系统环境|】教你零基础如何快速入门大数据技巧(2019-05-12 11:25)
【系统环境|】想学习大数据?这才是完整的大数据学习体系(2019-05-11 11:33)
手机二维码手机访问领取大礼包
返回顶部