浏览器在执行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. activity切换时的overridePendingTransition动画效

      注意,切换方法overridePendingTransition只能在startActivity和finish方法之后调用.第一个参数为第一个Activity离开时的动画,第二参数为所进入的Act ...

  2. [转]32位和64位系统区别及int字节数

    一)64位系统和32位有什么区别? 1.64bit CPU拥有更大的寻址能力,最大支持到16GB内存,而32bit只支持4G内存 2.64位CPU一次可提取64位数据,比32位提高了一倍,理论上性能会 ...

  3. WebSocket with Flask

    转自:https://blog.shonenada.com/post/websocket-with-flask/ WebSocket with Flask HTML5 以前,HTML 还不支持 Web ...

  4. php--opp--1.什么是面向对象?

    面向对象编程(Object Oriented Programming, OOP, 面向对象程序设计)是一种计算机编程架构,OOP的一条基本原则是计算机程序是由单个能够起到子程序作用的单元或对象组合而成 ...

  5. IdTCPServer

    IdTCPServer1 Server本身就支持多线程,一个服务端连接多个客户端. IdTCPServer1.Bindings.Add.IP := '127.0.0.1';IdTCPServer1.B ...

  6. cocos2d-x 2.2.5 安卓工程编译的问题

    原址:http://www.cocoachina.com/bbs/read.php?tid=217124 新的cocos2d-x 2.2.5 在使用Eclipse的安卓NDK 9 的编译器进行编译的时 ...

  7. MYSQL数据库重点:事务与锁机制

    一.事务 一组连续的数据库操作,每一次操作都成功,整个事务就成功,只要有一步出错,整个事务就失败: MySQL事务与存储引擎相关 1.MyISAM:不支持事务,用于只读程序提高性能 2.InnoDB: ...

  8. Ubuntu之系统交换分区Swap增加与优化

    http://os.51cto.com/art/201212/372860.htm   http://blog.csdn.net/xingyu15/article/details/5570225   ...

  9. 20140102-lua binder另一只轮子的雏形

    书接上一回,说到要继续丰富对类型的处理.那么如何才能做到呢,应该是要支持自定义的,所以这一回要讲的就是在前面的基础上,增加支持自定义部分,其中包含以下几个部分 函数的默认参数设置,包括有几个默认参数和 ...

  10. Head First设计模式-单例模式

    一.整体代码 Singleton.java public class Singleton { private static Singleton uniqueInstance; // other use ...