JavaScript 延迟加载

本文转载自:http://blog.csdn.net/m13666368773/article/details/7586106


一、延迟加载(lazy loading)

延迟加载:有些 js 代码并不是页面初始化的时候就立刻需要的,而稍后的某些情况才需要的。延迟加载就是一开始并不加载这些暂时不用的js,而是在需要的时候或稍后再通过js 的控制来异步加载。

也就是将 js 切分成许多模块,页面初始化时只加载需要立即执行的 js ,然后其它 js 的加载延迟到第一次需要用到的时候再加载。

特别是页面有大量不同的模块组成,很多可能暂时不用或根本就没用到。

就像图片的延迟加载,在图片出现在可视区域内时(在滚动条下拉)才加载显示图片。

二、script 的两阶段加载 与 延迟执行(lazy execution)

JS的加载其实是由两阶段组成:下载内容(download bytes)和执行(parse and execute)。

浏览器在下载完 js 的内容后就会立即对其解析和执行,不管是同步加载还是异步加载。

前面说的异步加载,解决的只是下载阶段的问题,但代码在下载后会立即执行。

而浏览器在解析执行 JS 阶段是阻塞任何操作的,这时的浏览器处于无响应状态。

我们都知道通过网络下载 script 需要明显的时间,但容易忽略了第二阶段,解析和执行也是需要时间的。script的解析和执行所花的时间比我们想象的要多,尤其是script 很多很大的时候。有些是需要立刻执行,而有些则不需要(比如只是在展示某个界面或执行某个操作时才需要)。

这些script 可以延迟执行,先异步下载缓存起来,但不立即执行,而是在第一次需要的时候执行一次。

利用特殊的技巧可以做到 下载 与 执行的分离 (再次感谢 javascript 的动态特性)。比如将 JS 的内容作为 Image或 object 对象加载缓存起来,所以就不会立即执行了,然后在第一次需要的时候再执行。

此部分的更多解释 请查看末尾参考资料中 ControlJS 的相关链接。

小技巧:

1. 模拟较长的下载时间

写个后端脚本,让其 sleep 一定时间。如在 jsp 中 Thread.sleep(5000); ,这样5秒后才能收到内容。

2. 模拟较长的 js 代码执行时间(因为这步一般比较快不容易观察到):

var t_start = Number(new Date());

while ( t_start + 5000 > Number(new Date()) ) {}

这个代码将使 js 执行5秒才能完成!

时间: 2024-11-13 04:18:39

JavaScript 延迟加载的相关文章

关于javascript延迟加载图片

今天在技术群中,有位童鞋问起了javascript延迟加载图片的问题,我在这就给大家说明下原理和实现方法. 延迟加载是通过自定义属性,把真实的img地址存到自定义属性中,如data-url=”img”,而图片真正的src存的是loading的图片,如src=”loading.gif”,通过JS来获取窗口的偏移量,当图片在窗口中的时候,再动态将data-url的值赋给src; 延迟加载的原理其实很简单的,因为浏览器解析html的时候,会把img中所有的src都加载,但是自定义属性中的图片是不会加载

javascript延迟加载及异步(defer和async)

一直以来写代码的时候的常用习惯就是吧所有的js文件直接加载在文档的head标签里面,在写js文件的时候有时候获取一些文件对象的时候为空对象,这是由于文档结构还没有加载完,但是js文件已经加载完.也就是说虽然写了js语句来获取对象,但是由于dom结构还没有加载完成,因此获取到的是空对象,进一步测试发现在firebug的控制台下把赋值语句执行之后可以获得对象,同理是因为在文档已经得到显示之后文档结构已经处于加载完成的状态,所以可以直接获取到对应的文档对象. 解决方法用两种:defer和async.

移除阻止呈现的JavaScript

个人原创网址:  http://www.phpthinking.com/archives/443 浏览器必须先解析网页,然后才能将其呈现给用户.如果浏览器在解析过程中遇到系统阻止的外部脚本,必须停止解析并且下载该JavaScript.每次遇到这种情况时,浏览器都会增加一个网络往返过程,这样就会导致首次呈现网页的时间延迟. 建议 建议您以内嵌方式处理呈现首屏区域所需的JavaScript,并让为网页添加其他功能所需的JavaScript延迟加载,直到首屏内容发送完毕为止.请注意,要通过这种方式缩短

JavaScript -- Interview

(1)JavaScript包括哪些数据类型? 1.未定义(undefined) 2.空(null) 3.布尔(boolean) 4.字符串(string) 5.数字(number) 6.对象(object) 7.引用(reference) 8.列表(list) 9.完成(completion) reference,list,completion这3种类型是做为JavaScript运行时中间结果的数据类型 在代码中不能使用. (2)border-color-left.marin-left.-moz

15个提高编程技巧的JavaScript工具

原文地址:http://www.imooc.com/wenda/detail/243523 JavaScript脚本库是一个预先用JavaScript语言写好的库,它方便了我们开发基于JavaScript的应用程序,特别适合AJAX和其他一些以Web为中心的技术.JavaScript主要用于编写嵌入或者包含在HTML页面的函数,从而实现DOM之间的交互. 这篇文章收集了15个可用于提高编程技巧的JavaScript工具,助你轻松快速完成工作.下面的这些JavaScript工具能让你管理Javas

javascript - 简单实现一个图片延迟加载的jQuery插件

最近在看一本书<Third-Party Javascript>很不错,推荐给大家,下载地址各位自己搜索了. 步骤: 1.打开google,鉴于google基本打不开,那么就打开这个网址吧.http://www.aol.com 2.搜索third party javascript filetype:pdf 一般都可以下载到电子书了.目前只有英文版. 这书中有一章讲到了提高app的效率,其中有一点就是延迟加载初始化不需要的资源,结合书中给出的部分代码,我这里简单的弄了一个jQuery的插件. 首先

前端学习 第七弹: Javascript实现图片的延迟加载

前端学习 第七弹: Javascript实现图片的延迟加载 为了实现图片进入视野范围才开始加载首先: <img    src="" x-src="/acsascasc.jpg"> 这时src是空的没有加载图片 $(window).scroll(function (){ $("img").each(function(){ if ($(this).src == ""){ if ( ($(this).offset().t

JavaScript:100%原生js实现左右切换的轮播图(有延迟加载)

<!--说明:此.html文件必需有:(1)同级文件夹json,json文件夹下必需有文件data.txt,文件data.txt的内容为: [{"imgSrc":"img/banner1.jpg"}, {"imgSrc":"img/banner2.jpg"}, {"imgSrc":"img/banner3.jpg"}, {"imgSrc":"img/b

setTimeout延迟加载javascript

应用场景:当需要延迟加载该数据时,则可以使用setTimeout(). 意思:用于在指定的毫秒数后调用函数或计算表达式. 示例1: var t=setTimeout("alert('5 seconds!')",5000); 示例2:一个简单的计时操作: <head> <script type="text/javascript"> var c=0 var t function timedCount() { document.getElement