文档章节

JavaScript 延迟加载

learn_more
 learn_more
发布于 2015/09/20 13:55
字数 745
阅读 317
收藏 13


本文转载自: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秒才能完成!




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

learn_more
粉丝 93
博文 240
码字总数 210196
作品 0
深圳
程序员
私信 提问
js的阻塞加载、延迟加载、异步加载

阻塞加载 也称同步加载,会阻止浏览器的后续处理。通常把js文件放在body结束标签之前,使得DOM加载完后再加载js。 延迟加载 页面初始化时只加载需要立即执行的 js ,然后其它 js 的加载延迟到...

祖达
2018/12/24
96
0
移除阻止呈现的JavaScript

个人原创网址: http://www.phpthinking.com/archives/443 浏览器必须先解析网页,然后才能将其呈现给用户。如果浏览器在解析过程中遇到系统阻止的外部脚本,必须停止解析并且下载该JavaScr...

PHP开发学习门户
2014/09/25
286
0
5种你未必知道的JavaScript和CSS交互的方法

随着浏览器不断的升级改进,CSS和JavaScript之间 的界限越来越模糊。本来它们是负责着完全不同的功能,但最终,它们都属于网页前端技术,它们需要相互密切的合作。我们的网页中都有.js文件和...

oschina
2014/04/03
5.6K
20
Javascript 异步加载详解

一、同步加载与异步加载的形式 1. 同步加载 我们平时最常使用的就是这种同步加载形式: <script src="http://yourdomain.com/script.js"></script> 同步模式,又称阻塞模式,会阻止浏览器的后...

Carl_
2014/09/15
44
0
Javascript 异步加载详解

一、同步加载与异步加载的形式 1. 同步加载 我们平时最常使用的就是这种同步加载形式: <script src="http://yourdomain.com/script.js"></script> 同步模式,又称阻塞模式,会阻止浏览器的后...

张悟空
2014/08/18
90
0

没有更多内容

加载失败,请刷新页面

加载更多

采坑指南——k8s域名解析coredns问题排查过程

正文 前几天,在ucloud上搭建的k8s集群(搭建教程后续会发出)。今天发现域名解析不了。 组件版本:k8s 1.15.0,coredns:1.3.1 过程是这样的: 首先用以下yaml文件创建了一个nginx服务 apiV...

码农实战
22分钟前
2
0
【2019年8月版本】OCP 071认证考试最新版本的考试原题-第6题

choose three Which three statements are true about indexes and their administration in an Orade database? A) An INVISIBLE index is not maintained when Data Manipulation Language......

oschina_5359
25分钟前
2
0
阿里巴巴开源 Dragonwell JDK 最新版本 8.1.1-GA 发布

导读:新版本主要有三大变化:同步了 OpenJDK 上游社区 jdk8u222-ga 的最新更新;带来了正式的 feature:G1ElasticHeap;发布了用户期待的 Windows 实验版本 Experimental Windows version。...

阿里巴巴云原生
30分钟前
2
0
教你玩转Linux—磁盘管理

Linux磁盘管理好坏直接关系到整个系统的性能问题,Linux磁盘管理常用三个命令为df、du和fdisk。 df df命令参数功能:检查文件系统的磁盘空间占用情况。可以利用该命令来获取硬盘被占用了多少...

xiangyunyan
33分钟前
5
0
js 让textarea的高度自适应父元素的高度

textarea按照普通元素设置height是没有作用的,可以这么来设置, 下面给上一段项目代码 JS代码: $.fn.extend({ txtaAutoHeight: function () { return this.each(function () {...

文文1
33分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部