博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JavaScript 延迟加载
阅读量:7031 次
发布时间:2019-06-28

本文共 1079 字,大约阅读时间需要 3 分钟。

hot3.png

本文转载自:

一、延迟加载(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秒才能完成!

转载于:https://my.oschina.net/heweipo/blog/508724

你可能感兴趣的文章
js正则表达式学习
查看>>
C++ 开发 PHP 7 扩展之定义常量
查看>>
windows 命令行禁用密码策略,创建用户
查看>>
游戏小学生01-egret环境搭建
查看>>
从零开始写爬虫
查看>>
微信小程序,个人开发者创业新平台
查看>>
Chrome vim插件vimium快捷键学习
查看>>
【Redis】Redis常用命令
查看>>
node跨域方法
查看>>
JavaScript笔记——常见DOM知识
查看>>
Angular2、AngularJS、React、vue.js过去一年的Google趋势分析
查看>>
3D轮播图
查看>>
同源策略和跨域方法
查看>>
JavaScript中的delete操作符
查看>>
es7与es8其他知识
查看>>
使用 Hexo 创建项目文档网站
查看>>
typeof和instanceof的区别
查看>>
XAMPP Windows 安装中报错解决方法备忘
查看>>
sublime之利器使用篇
查看>>
每个类都应将所有能力以最小粒度提供给外部可配置,每个业务所需要的功能是这些能力的组合...
查看>>