图片懒加载

组件通信方式（事件总线）- 观察者模式

1. 提供监听某个事件的接口
2. 提供取消监听的接口
3. 触发事件的接口（可传递数据）
4. 触发事件后自动通知监听者

自定义指令

1. 自定义指令钩子函数

监听滚动条

1. 判断图片元素是否在用户的可见范围内
2. 处理图片img元素的加载

图片懒加载详情

长列表优化

可以使用第三方库vue-virtual-scroller

也可以访问我的github手写的长列表优化

首页面延迟装载

首页白屏时间主要受到两个因素的影响：

• 打包体积过大

  巨型包需要消耗大量的传输时间，导致JS传输完成前页面只有一个<div>，没有可显示的内容

• 需要立即渲染的内容太多

  JS传输完成后，浏览器开始执行JS构造页面。

  但可能一开始要渲染的组件太多，不仅JS执行的时间很长，而且执行完后浏览器要渲染的元素过多，从而导致页面白屏

打包体积过大需要自行优化打包体积，本节不予讨论

本节仅讨论渲染内容太多的问题。

一个可行的办法就是延迟装载组件，让组件按照指定的先后顺序依次一个一个渲染出来

延迟装载是一个思路，本质上就是利用requestAnimationFrame事件分批渲染内容，它的具体实现多种多样

keep-alive

keep-alive组件是vue的内置组件，用于缓存内部组件实例。

🔚 结束语

直接上代码链接 github.com/zzz999902

后续会持续更新这类的组件库