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秒的等待时间。
关键点
压倒一切的首要任务应该是尽可能快地交付内容给用户。而我们一直没想着如何对待我们的javascript代码。但用户不应该为一些无关紧要的脚本,而被迫地为内容而作出等待。无论你的页脚多酷,都没理由让一个可能从不滚动到页脚的用户,去加载那些让页脚变酷的javascript文件。
参考:http://www.chinaz.com/web/2015/0629/417766.shtml
相关推荐
页面延迟加载JS包 lazyload.js scrollloading.js
页面延迟加载源码下载,图片延迟加载源码下载,jquery页面延迟加载,页面延迟加载技术实现分析
html延迟加载JS和CSS 支持ie6和ie6以上任何浏览器
Echo.js 也是一个用于图像延迟加载 JavaScript
js设置延迟加载、
通过延迟加载来实现按需加载,达到节省资源,加快浏览速度的目的。
延时加载JS和CSS文件来实现按需加载,以保证在页面刚刚开始呈现的时候提高速度,提高用户体验
很多网站首页打开比较慢,图片多,可以用这个延迟加载,图片会随滚动条,加载图片
原生js面向对象写的延迟加载效果,自动播放轮播图,无缝滚动三个效果页面。
利用 data-* 属性延迟加载图片的JavaScript微型库
和 Lazy Load 一样,这个插件也是一个用于图像延迟加载 JavaScript。不同的是 Lazy Load 是基于 jQuery 的插件,而它不依赖于 jQuery 或其他 JavaScript 库,可独立使用。并且 它 非常小巧,压缩后不足 1KB,兼容ie8...
JavaScript 封装的延迟加载技术示例 JavaScript 封装的延迟加载技术示例,可以用于加载容器、加载DIV以及加载图片等,可有效降低浏览器损耗,有兴趣可以尝试一番。
一个简单的懒加载样例代码,可以根据滚动窗口在加载相关程序,可以降低页面压力,加快打开速度
js页面图片延迟加载特效是一款仿淘宝商城商品页面图片延迟加载效果,滚动条滚动到图片时再执行加载,添加了一个渐现效果 js页面图片延迟加载特效图:
延时加载js代码提高速度,具体内容如下所示: 如果网页中存在大量的javascript代码会极大的影响网页的访问速度,下面就简单介绍一下如何处理此问题。 一.延时加载js文件: 可以使用定时器函数setTimeout()让外部的js...
类似校内网,微博 js延时加载,滚动条,随滚动条逐渐显示信息
JavaScript的延迟加载是那些在web上,能让你想抓狂地去寻找解决方案的问题之一。 很多人说“那就用defer”或“async”,甚至有些人说“那就将你的javascript代码放在页面代码底部”。 上述方法都不能解决在web页面...
js文件 合并 压缩 缓存 延迟加载 的一个demo mvc中js文件 合并 压缩 缓存 延迟加载
通用的延迟加载工具LazyLoad,支持下载多个JavaScript文件,并能保证在所有浏览器中都以正确的顺序执行,同时还能加载CSS文件
自己写的图片延迟加载.在IE6、7、8和火狐下测试过。单机tomcat6环境下压力测试通过。 使用说明: 1 引入js文件。 2 在需要做图片延迟加载的页面把img 的src属性换成 hsrc 3 在页面加载前执行 hiddenImge(myImages, ...