面试题答案
一键面试设计思路
- 自定义触发时机:
- 传统懒加载通常基于元素进入视口触发。对于特定业务场景,可能需要根据元素与视口的相对位置、用户操作(如滚动到某个区域、点击特定按钮等)来触发懒加载。例如,在一个长列表中,当用户滚动到距离下一个元素还有一定距离(如100px)时就开始加载,通过监听
scroll
事件,计算目标元素与视口的距离来实现。 - 对于一些需要在特定条件下懒加载的元素,如根据用户权限、页面状态等,在组件内通过
watch
监听相关状态变化来触发懒加载。
- 传统懒加载通常基于元素进入视口触发。对于特定业务场景,可能需要根据元素与视口的相对位置、用户操作(如滚动到某个区域、点击特定按钮等)来触发懒加载。例如,在一个长列表中,当用户滚动到距离下一个元素还有一定距离(如100px)时就开始加载,通过监听
- 资源管理:
- 创建一个懒加载资源管理器。在组件创建时,将需要懒加载的资源(如图片、脚本、子组件等)信息(如路径、加载优先级等)注册到管理器中。
- 对于图片懒加载,可以采用
IntersectionObserver
API(在不支持的浏览器中使用polyfill
)来优化性能,当目标元素进入视口(或满足自定义的视口相关条件)时,从资源管理器中获取对应的图片路径并设置到img
标签的src
属性。 - 对于脚本和子组件的懒加载,使用
import()
动态导入。在懒加载触发时,通过import()
加载脚本或子组件,并进行相应的初始化操作。
- 缓存机制:
- 建立缓存机制,避免重复加载相同资源。当一个资源被成功加载后,将其存储在缓存中。在后续的懒加载触发中,如果该资源在缓存中,直接使用缓存中的资源,而不再发起新的请求。
- 可以使用
Map
数据结构来实现简单的缓存,键为资源的唯一标识(如图片路径、组件名称等),值为加载后的资源对象。
与服务器端渲染(SSR)融合
- 服务端渲染时的懒加载:
- 在服务端渲染过程中,由于没有浏览器环境,无法使用
IntersectionObserver
等基于浏览器的API。可以在服务端根据页面结构和配置,预先计算哪些元素需要在服务端进行初始加载,哪些可以在客户端懒加载。 - 对于需要在服务端加载的资源,直接进行加载并渲染到HTML中。例如,对于一些首屏关键图片,可以在服务端获取并将其
<img>
标签渲染完整。 - 对于客户端懒加载的资源,在服务端渲染的HTML中,使用占位符标记这些资源的位置。例如,对于懒加载的图片,可以使用
<img data - lazy - src="实际图片路径" src="占位符图片路径">
,在客户端通过脚本将data - lazy - src
的值替换到src
属性实现懒加载。
- 在服务端渲染过程中,由于没有浏览器环境,无法使用
- 客户端激活时的懒加载:
- 在客户端激活阶段(即Vue应用挂载到DOM后),重新初始化懒加载机制。由于服务端已经渲染了部分内容,客户端需要识别哪些资源已经在服务端加载,哪些还需要进行懒加载。
- 对于之前在服务端标记为懒加载的资源,客户端按照自定义的懒加载策略进行加载。例如,重新监听
scroll
事件,根据自定义的触发条件,对标记为懒加载的图片或组件进行加载。 - 确保服务端和客户端的懒加载逻辑一致,特别是在缓存机制上。在客户端激活时,检查服务端是否已经填充了缓存(例如通过在服务端渲染的HTML中添加缓存相关的元数据),如果已填充,则直接使用服务端的缓存,避免重复加载。