关于延迟加载JavaScript


Posted in Javascript onMay 05, 2015

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

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

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

如何延迟加载JavaScript

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

<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秒的等待时间。

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

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

关键点

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

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

Javascript 相关文章推荐
ajax无刷新动态调用股票信息(改良版)
Nov 01 Javascript
Jquery实现自定义窗口随意的拖拽
Mar 12 Javascript
探寻Javascript执行效率问题
Nov 12 Javascript
深入解析JavaScript编程中的this关键字使用
Nov 09 Javascript
详解js中构造流程图的核心技术JsPlumb
Dec 08 Javascript
jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)
Jan 21 Javascript
jQuery EasyUI 入门必看
Jun 03 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
Aug 29 Javascript
Thinkjs3新手入门之添加一个新的页面
Dec 06 Javascript
20个最常见的jQuery面试问题及答案
May 23 jQuery
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
Oct 26 Javascript
详解基于Vue/React项目的移动端适配方案
Aug 23 Javascript
Javascript闭包(Closure)详解
May 05 #Javascript
javascript实现仿IE顶部的可关闭警告条
May 05 #Javascript
JS实现点击按钮后框架内载入不同网页的方法
May 05 #Javascript
JS实现随机乱撞彩色圆球特效的方法
May 05 #Javascript
jquery实现图片随机排列的方法
May 04 #Javascript
jquery实现的美女拼图游戏实例
May 04 #Javascript
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
May 04 #Javascript
You might like
用PHP调用Oracle存储过程
2006/10/09 PHP
php MYSQL 数据备份类
2009/06/19 PHP
PHP仿盗链代码
2012/06/03 PHP
深入apache host的配置详解
2013/06/09 PHP
destoon实现底部添加你是第几位访问者的方法
2014/07/15 PHP
PHP获取音频文件的相关信息
2015/06/22 PHP
文件上传之SWFUpload插件(代码)
2015/07/30 PHP
Zend Framework教程之连接数据库并执行增删查的方法(附demo源码下载)
2016/03/21 PHP
PHP jpgraph库的配置及生成统计图表:折线图、柱状图、饼状图
2017/05/15 PHP
javascript 事件查询综合 推荐收藏
2010/03/10 Javascript
JQuery动态创建DOM、表单元素的实现代码
2011/08/09 Javascript
JS中不为人知的五种声明Number的方式简要概述
2013/02/22 Javascript
jquery实现点击页面计算点击次数
2015/01/23 Javascript
四种参数传递的形式——URL,超链接,js,form表单
2015/07/24 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
2015/09/14 Javascript
JavaScript图像延迟加载库Echo.js
2016/04/05 Javascript
Jquery UI实现一次拖拽多个选中的元素操作
2020/12/01 Javascript
JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
2016/11/29 Javascript
angular基于ng-alain定义自己的select组件示例
2018/02/23 Javascript
vue2.0项目实现路由跳转的方法详解
2018/06/21 Javascript
vue中keep-alive组件的入门使用教程
2019/06/06 Javascript
[56:46]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 VP vs Effect
2018/04/01 DOTA
[28:57]EG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/16 DOTA
Python 备份程序代码实现
2017/03/06 Python
Python基于QRCode实现生成二维码的方法【下载,安装,调用等】
2017/07/11 Python
Python+tkinter模拟“记住我”自动登录实例代码
2018/01/16 Python
解决Pyinstaller 打包exe文件 取消dos窗口(黑框框)的问题
2019/06/21 Python
解决django中ModelForm多表单组合的问题
2019/07/18 Python
django的分页器Paginator 从django中导入类
2019/07/25 Python
Django中reverse反转并且传递参数的方法
2019/08/06 Python
英国汽车零件购物网站:GSF Car Parts
2019/05/23 全球购物
音乐学院硕士生的自我评价分享
2013/11/01 职场文书
教师自我评价范文
2013/12/16 职场文书
疾病防治方案
2014/05/31 职场文书
总结Java对象被序列化的两种方法
2021/06/30 Java/Android
SpringBoot 整合mongoDB并自定义连接池的示例代码
2022/02/28 MongoDB