前端性能优化-页面渲染架构设计与性能优化6-页面加载策略与优化

本文地址：https://www.cnblogs.com/veinyin/p/14380929.html

 

1 懒加载

懒加载也叫延迟加载，在长页面中延迟加载特定元素（图片、CSS/JS 文件、JS 特性函数或方法 等等）

优点：可以减少当前屏无效资源的加载

如：把图片 src 设置为空，真实 url 写在 data-lazy 属性中，页面滚动时监听 scroll 事件，如果该元素在可视范围内，就把 src 属性的值设为 data-lazy 属性值

2 预加载

使用预加载让浏览器预先加载某些资源（如图片、JS/CSS 文件等），这些资源是将来才会用到的。

也就是先将所需资源加载到本地，后面再需要的时候就可以直接从浏览器缓存中取了，而不用重新加载

优点：减少用户后续等待资源加载的时间

实现方案：preload、prefetch、preconnect、dns-prefetch

<link rel="preload" href="xxx/xxx" />

 

3 预渲染

大型项目在懒加载组件被加载之前，可能还有其他懒加载的代码或数据，用户还是需要等待组件加载完成

可以提前渲染，在页面中渲染组件，但是并不展示，渲染好之后隐藏起来，用的时候直接展示

<link rel="prerender" href="" />

　　

4 按需加载

1. 常规按需加载（如 JS 原生、jQuery）

2. 不同 APP 环境按需加载（如 JS-SDK）

3. 不同设备按需加载（如 PC 端和 H5 端样式文件）

4. 不同分辨率按需加载（ CSS media query）

5 楼层式加载

楼层数据异步加载和本地缓存相结合，本地存在 localStorage 里，MD5 值判断是否更新