0%

懒加载

发表于 2023-10-07 分类于学习笔记阅读次数： Valine：

懒加载（延迟加载）

https://developer.mozilla.org/zh-CN/docs/Web/Performance/Lazy_loading#javascript

图片懒加载

监听 scroll 事件时判断元素当前相对视图的位置
通过 IntersectionObserver（重叠观察者，用于判断两个元素是否重叠，不用进行事件的监听，兼容性）。现有的方案：
lazysizes ：https://github.com/aFarkas/lazysizes
vue-lazyload ：https://github.com/hilongjw/vue-lazyload
Lozad.js：https://github.com/ApoorvSaxena/lozad.js

代码拆分

JavaScript、CSS 和 HTML 可以被分割成较小的代码块。这样就可以在前期发送所需的最小代码，改善页面加载时间。其余的可以按需加载。

入口点分离：通过应用的入口点分离代码
动态分离：通过动态 import() 语句分离代码

JS

脚本类型模块：任何类型为 type=”module” 的脚本标签都被视为一个 JavaScript 模块，并且默认情况下会被延迟。