本文由 伯乐在线 - J.c 翻译,sunbiaobiao 校稿。未经许可,禁止转载!
英文出处:www.feedthebot.com。欢迎加入翻译小组

延迟加载JavaScript

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

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

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

如何延迟加载JavaScript

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

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "defer.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>

这里做了什么?

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

具体说明

1.复制上面代码

2.粘贴代码到HTML的</body>标签前 (靠近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开心,你很应该这样做。

用法示例

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

让你测试的示例文件

好的,为了说明,我已制作几个示例页面让你进行测试。每个页面都做同一样的事情。这是一个普通的HTML页面,含有一个等待2秒然后输出“hello world”的javascript脚本。你可以测试这些文件,然后你会看到只有一种方法,它的加载时间是不包括2秒的等待时间。

关键点

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

关于作者: J.c

Web性能优化系列(3):如何延迟加载JS的更多相关文章

  1. Web性能优化系列

    web性能优化之重要,这里并不打算赘述.本系列课程将带领大家认识.熟悉.深刻体会并且懂得如果去为不同的站点做性能优化 同时,本系列将还会穿插浏览器兼容性相关问题的解决方案,因为在我看来,兼容性同样属于 ...

  2. web性能优化系列之网站瓶颈识别

    最近,公司网站的的访问量日益增大,PV马上过百万了.前期网站一到访问高峰,马上会变得很卡甚至打不开,后来做了很多优化后现在访问比较顺畅了.经过此事明白了一个道理,在遇到这类问题要做到两点,第一要相信自 ...

  3. Web性能优化系列:10个JavaScript性能提升的技巧

    由 伯乐在线 - Delostik 翻译,黄利民 校稿.未经许可,禁止转载!英文出处:jonraasch.com.欢迎加入翻译小组. Nicholas Zakas是一位 JS 大师,Yahoo! 首页 ...

  4. Web性能优化系列(1):Web性能优化分析

    本文由 伯乐在线 - 鸭梨山大 翻译,sunbiaobiao 校稿.未经许可,禁止转载!英文出处:gokulkrishh.github.io.欢迎加入翻译小组. 如果你的网站在1000ms内加载完成, ...

  5. Web性能优化系列(2):剖析页面绘制时间

    本文由 伯乐在线 - J.c 翻译,sunbiaobiao 校稿.未经许可,禁止转载!英文出处:www.deanhume.com.欢迎加入翻译小组. 最近,我参加了在伦敦举办的Facebook移动开发 ...

  6. Web前端性能优化教程07:精简JS 移除重复脚本

    本文是Web前端性能优化系列文章中的第七篇,主要讲述内容:精简Javascript代码,以及移出重复脚本.完整教程可查看:  一.精简javascript 基础知识 精简:从javascript代码中 ...

  7. Web性能优化-合并js与css,减少请求

    Web性能优化已经是老生常谈的话题了, 不过笔者也一直没放在心上,主要的原因还是项目的用户量以及页面中的js,css文件就那几个,感觉没什么优化的.人总要进步的嘛,最近在被angularjs吸引着,也 ...

  8. web性能优化——浏览器相关

    简介 优化是一个持续的过程.所以尽可能的不要有人为的参与.所以能自动化的或者能从架构.框架级别解决的就最更高级别解决. 这样即能实现面对开发人员是透明的.不响应,又能确保所有资源都是被优化过的. 场景 ...

  9. Web性能优化:雅虎35条

    对web性能优化,一直知道是个很重要的方面,平时有注意到,但是对于雅虎35条是第一次听说,查了一下,发现平时都有用过,只是没有总结到一块,今天就总结一下吧. 雅虎35条: 1.[内容]尽量减少HTTP ...

随机推荐

  1. NX 栈不可执行的绕过方式--ROP链

    目标程序下载 提取码:5o0a 环境:Ubuntu linux 工具 pwn-gdb pwntools python库 ROPgadget ( 这些工具可以到github官网找) 1.检查程序开了哪些 ...

  2. 公钥与私钥的理解,以及https的应用原理

    1.公钥与私钥原理1)鲍勃有两把钥匙,一把是公钥,另一把是私钥2)鲍勃把公钥送给他的朋友们----帕蒂.道格.苏珊----每人一把.3)苏珊要给鲍勃写一封保密的信.她写完后用鲍勃的公钥加密,就可以达到 ...

  3. PAT甲题题解-1107. Social Clusters (30)-PAT甲级真题(并查集)

    题意:有n个人,每个人有k个爱好,如果两个人有某个爱好相同,他们就处于同一个集合.问总共有多少个集合,以及每个集合有多少人,并按从大到小输出. 很明显,采用并查集.vis[k]标记爱好k第一次出现的人 ...

  4. 20135202闫佳歆--week3 跟踪分析Linux内核的启动过程--实验及总结

    实验三:跟踪分析Linux内核的启动过程 一.调试步骤如下: 使用gdb跟踪调试内核 qemu -kernel linux-3.18.6/arch/x86/boot/bzImage -initrd r ...

  5. classpath与clsspath*

    classpath是指 WEB-INF文件夹下的classes目录 classes含义: 1.存放各种资源配置文件 eg.init.properties log4j.properties struts ...

  6. Map Wiki -- proposed by Shuo Ren

    Map Wiki —— 基于Bing地图的生活百科 在旅游.逛街或是闲逛的时,很多时候,我们往往想要对于身边的美食.医院.旅馆.购物.学习.景点等信息有进一步认识.在这时,我们大多会再打开百度或者大众 ...

  7. 正则的replace函数传参使用

    <script> var str = "a1ba2b"; var reg = /a.b/g; str = str.replace(reg,function(a,b){ ...

  8. vue-resource和axios区别

    vue-resource Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没有必要引入jQuery.vue-resource是Vue.js的 ...

  9. vue中npm run dev运行项目不能自动打开浏览器! 以及 webstorm跑vue项目jshint一直提示错误问题的解决方法!

    vue中npm run dev运行项目不能自动打开浏览器!以及 webstorm跑vue项目jshint一直提示错误问题的解决方法! 1.上个项目结束就很久没有使用vue了,最近打算用vue搭建自己的 ...

  10. js css样式操作代码(批量操作)

    js css样式操作代码(批量操作) 作者: 字体:[增加 减小] 类型:转载 时间:2009-10-09   用js控制css样式,能让网页达到良好的的用户体验甚至是动画的效果.并且考虑到效率.   ...