浏览器在执行JavaScript代码时会停止处理页面,当页面中有很多JavaScript文件或代码要加载时,将导致严重的延迟。尽管可以使用defer、异步或将JavaScript代码放到页面底部来延迟JavaScript的加载,但这些都不是一个好的解决方案。

下面是Google的建议。

<script>
function downloadJSAtOnload(){
var elem = document.createElement("script");
elem.src="defer.js";
document.body.appendChild(elem);
};
if(window.addEventListener){
window.addEventListener("load",downloadJSAtOnload,false);
}else if(window.attachEvent){
window.attachEvent("onload",downloadJSAtOnload);
}else{
window.onload = downloadJSAtOnload;
};
</script>

测试结果:  

google对js延迟加载方案的建议的更多相关文章

  1. 关于js延迟加载(异步操作)的方式

    一.概述 最近重新开始学习js,在第一章的一个小节里写到了“脚本调用策略”,书上写的这部分不多,但是发现在我之前的(笔)面试中,问到的频率还是比较高的.自己一直习惯于直接把所有js文件写在head里, ...

  2. Lazyr.js – 延迟加载图片(Lazy Loading)

    Lazyr.js 是一个小的.快速的.现代的.相互间无依赖的图片延迟加载库.通过延迟加载图片,让图片出现在(或接近))视窗才加载来提高页面打开速度.这个库通过保持最少选项并最大化速度. 在线演示    ...

  3. 用NAN简化Google V8 JS引擎的扩展

    通过C++扩展Google V8 JS引擎的文章很多,Google V8 JS带的例子也容易明白.但是大部分文章都是Hello World型的,真正使用时发现处处是坑.扩展V8最经典的例子就是node ...

  4. 在Android上使用Google V8 JS 引擎

    在cantk-runtime中直接使用的webview,通过JAVA扩展接口把Canvas的2d Context的API定向到JNI,通过OpenGL来图形加速,渲染速度大大提高.后来测试发现在大部分 ...

  5. js延迟加载,提升网页加载速度

    JS延迟加载,简单例子,不多说: 代码如下: 程序代码 <script language="JavaScript" src="" id="my& ...

  6. js延迟加载优化页面响应速度

    网页打开速度是衡量网站性能的一个极为重要的指标,今天就来说说如何通过JS延迟加载的方式提高页面响应速度: JS延迟加载的 含义:即等页面加载完成之后再加载 JavaScript 文件.作用:JS延迟加 ...

  7. 13. js延迟加载的方式有哪些

    JS延迟加载,也就是等页面加载完成之后再加载 JavaScript 文件. JS延迟加载有助于提高页面加载速度.   一般有以下几种方式:   1)defer 属性 <script src=&q ...

  8. JS --- 延迟加载的几种方式

    标题:JS延迟加载,也就是等页面加载完成之后再加载 JavaScript 文件.  JS延迟加载有助于提高页面加载速度. 1. defer 属性 HTML 4.01 为 <script>标 ...

  9. angularJS使用ocLazyLoad实现js延迟加载

    最近开发一个系统遇到了一个问题,用angular路由一个html片段,该片段需要使用一个js插件来实现一个富文本编辑器.关键问题在于必须要在片段加载后通过js与dom元素进行绑定.一开始想当然以为直接 ...

随机推荐

  1. hadoop是什么?

    在如今这个信息高速发展的今天,hadoop也越来越火了,那么到底是什么原因让hadoop如此的火,接下来新霸哥将详细的为了介绍,并让你快速的任何hadoop是什么? hadoop思想起源:Google ...

  2. effective c++:资源管理

    对象管理资源 createInvestment 函数作用时创建一个invest对象: void f() { Investment *pInv = createInvestment(); // call ...

  3. jQuery hover demo

    先放效果图: 百度云下载地址:http://pan.baidu.com/s/1dDpn1Sl 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM ...

  4. Hbase学习记录(2)| Shell操作

    查看表结构 describe '表名' 查看版本 get '表名','zhangsan'{COLUMN=>'info:age',VERSIONS=>3} 删除整行 deleteall '表 ...

  5. 【数据结构与算法分析——C语言描述】第一章总结 引论

    这一章主要复习了一些数学知识,像指数.对数.模运算.级数公式:还有2种证明方法,归纳假设法和反证法.所幸以前学过,重新拾捡起来也比较轻松. 简要地复习了递归,提出了编写递归例程的四条基本法则: 基准情 ...

  6. Spark相比Hadoop MapReduce的特点

    (1)中间结果输出     基于MapReduce的计算引擎通常会将中间结果输出到磁盘上,进行存储和容错. 出于任务管道承接的考虑,当一些查询翻译到MapReduce任务时,往往会产生多个Stage, ...

  7. 对pymysql的简单封装

    #coding=utf-8 #!/usr/bin/python import pymysql class MYSQL: """ 对pymysql的简单封装 "& ...

  8. Cisco SDM

    SDM连接方式:http+telnet / https+ssh   要使用SDM对CISCO设备实现集中式管理,必须在设备上键入如下命令:   步骤1: 要启用路由器的HTTP/HTTPS 服务器,请 ...

  9. datagridview自动填充列头

    //填充datagridview dgv.AutoSizeColumnsMode = DataGridViewAutoSizeColumnsMode.Fill;

  10. 手把手教你玩转SOCKET模型之重叠I/O篇(下)

    四.     实现重叠模型的步骤 作 了这么多的准备工作,费了这么多的笔墨,我们终于可以开始着手编码了.其实慢慢的你就会明白,要想透析重叠结构的内部原理也许是要费点功夫,但是只是学会 如何来使用它,却 ...