延迟加载(懒加载)和预加载是常用的 web 优化的手段。。
一、延迟加载(懒加载)
原理: 当在真正需要数据的时候,才真正执行数据加载操作。
目的: 延迟加载机制是为了避免一些无谓的性能开销而提出来的
实现延迟加载的几种方法
1. 让 js 最后加载
使用方法: 把 js 外部引入的文件放到页面底部
用途: 让 js 最后引入,从而加快页面加载速度
说明:
流览器之所以会采用同步模式,通常加载 js 文件或者放标签都在结构最后面,也是因为它会阻止浏览器后续操作的原因,所以放在后面,当页面结构和样式全部渲染完成再执行 js,提升用户体验
2. defer 属性
使用方法: 为 标签定义了
defer属性
。
用途: 让脚本在执行时不会影响页面的构造。也就是说,脚本会被延迟到整个页面都解析完毕之后再执行
复制代码
说明:
虽然
元素放在了
元素中,但包含的脚本将延迟浏览器遇到
标签后再执行。
当浏览器解析到 script 脚本,有 defer 时,浏览器会并行下载有 defer 属性的 script,而不会阻塞页面后续处理。
所有的 defer 脚本保证是按顺序依次执行的。(但实际上延迟脚本并不一定会按照顺序执行,因此最好只包含一个延迟脚本)
defer 属性只适用于外部脚本文件。
3. async 属性
使用方法: 为 标签定义了
async属性
。
用途: 不让页面等待脚本下载和执行,从而异步加载页面其他内容。
复制代码
浏览器会立即下载脚本,但不妨碍页面中的其他操作,比如下载其他资源或等待加载其他脚本。加载和渲染后续文档元素的过程和 main.js 的加载与执行并行进行,这个过程是异步的。它们将在 onload 事件之前完成。
说明:
浏览器会立即下载脚本,但不妨碍页面中的其他操作,加载和渲染后续文档元素的过程和脚本的加载与执行并行进行。
这个过程是异步的,它们将在 onload 事件之前完成。
所有的 defer 脚本不能控制加载的顺序。。
asyncr 属性只适用于外部脚本文件。
4. 动态创建 DOM 方式
//这些代码应被放置在