全部加载完毕再执行_js中延迟加载和预加载

延迟加载(懒加载)和预加载是常用的 web 优化的手段。。

一、延迟加载(懒加载)

原理： 当在真正需要数据的时候，才真正执行数据加载操作。

目的： 延迟加载机制是为了避免一些无谓的性能开销而提出来的

实现延迟加载的几种方法

1. 让 js 最后加载

使用方法： 把 js 外部引入的文件放到页面底部

用途: 让 js 最后引入，从而加快页面加载速度

说明:

流览器之所以会采用同步模式，通常加载 js 文件或者放标签都在结构最后面，也是因为它会阻止浏览器后续操作的原因，所以放在后面，当页面结构和样式全部渲染完成再执行 js，提升用户体验

2. defer 属性

使用方法： 为 标签定义了 defer属性。

用途: 让脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕之后再执行

复制代码

说明：

1. 虽然元素放在了元素中，但包含的脚本将延迟浏览器遇到标签后再执行。

2. 当浏览器解析到 script 脚本，有 defer 时,浏览器会并行下载有 defer 属性的 script，而不会阻塞页面后续处理。

3. 所有的 defer 脚本保证是按顺序依次执行的。(但实际上延迟脚本并不一定会按照顺序执行，因此最好只包含一个延迟脚本)

4. defer 属性只适用于外部脚本文件。

3. async 属性

使用方法： 为 标签定义了 async属性。

用途: 不让页面等待脚本下载和执行，从而异步加载页面其他内容。

复制代码

浏览器会立即下载脚本，但不妨碍页面中的其他操作，比如下载其他资源或等待加载其他脚本。加载和渲染后续文档元素的过程和 main.js 的加载与执行并行进行，这个过程是异步的。它们将在 onload 事件之前完成。

说明：

1. 浏览器会立即下载脚本，但不妨碍页面中的其他操作，加载和渲染后续文档元素的过程和脚本的加载与执行并行进行。

2. 这个过程是异步的，它们将在 onload 事件之前完成。

3. 所有的 defer 脚本不能控制加载的顺序。。

4. asyncr 属性只适用于外部脚本文件。

4. 动态创建 DOM 方式

//这些代码应被放置在