引言

不知道大家有没有这样的烦恼经历。

打开一个网页，加载了半天也没有出来，你问页面小页，ta说ta慢热，要稍微等一等😅。

你眉头紧皱，认为ta故作矜持，一气之下说给我gun😡，最后气的直接关闭了整个页面。

原理

事后，你反思🤔~

「问： 那么为什么，我们会生气呢？」

「答： ta回应的慢，会让我们产生患得患失的感觉，我们原则上抗拒，😧厌恶这种感觉。」

所以从用户上考虑，避免页面响应时长过长，就有了页面性能优化，以此提高用户的体验和留存率

万物皆有法则，性能优化，也不例外：

页面响应时长 = 页面资源 / 页面速度

从这个公式上看，我们可以优化2个地方，资源大小与请求速度。

资源大小

• 压缩整体资源，使其变小
  • webpack打包压缩（JS、CSS）
  • TinyPNG压缩图片
• 只加载当前可用资源
  • 图片、视频、iframe懒加载
  • 页面结构及渲染优化
    • 延迟加载内容
    • 按需导入，按需加载，分布加载
• 预加载后续资源
  • 在不影响当前页面的使用，提前获取资源，减少后续加载资源的大小

响应速度

• CDN加速
  • 静态资源部署到内容分发网络，减少延迟
• 浏览器缓存
  • LocalStorage、SessionStorage、Cookie
    • 前端常用缓存三剑客
  • CacheStorage
    • 由Service Worker规定的
    • 可以保存Service Worker声明的cache对象
    • 10分钟带你初步了解 Service Worker
  • http缓存
    • 基于HTTP协议的浏览器文件缓存机制
  • indexDB
    • 客户端存储的数据库
  • application cache
    • 大部分图片、js、css等静态资源放在manifest文件配置中
• 代码优化，同样的写法，最佳响应
  • 减少dom操作
    • 使用c3代替js动画
  • 异步加载
    • 使用async语法或defer属性
  • 避免重复代码
    • 删除合并重复的CSS和JS代码，减少体积

反馈优化

• 性能分析工具
  • Chrome 开发工具、Lighthouse
  • 监测并分析页面性能指标，发现潜在的优化点
• 错误监控
  • Sentry、Bugsnag
  • 捕捉页面上的错误，并处理

总结

以上，简略地总结了页面性能优化的几点：

• 减少资源大小：资源压缩，按需引入、懒加载、预加载
• 提升响应速度：CDN加速、浏览器缓存、代码写法优化
• 后续反馈优化：利用好性能分析工具、错误监控工具

后续

你总结了以上优化点，并选择性的对你🥰心爱的页面进行调教优化。

某天，你心血来潮，想ta了😘，点开了页面。

这次你又满脸期盼😌地守在网页面前，“小页” 。

“嗯，我在”，这次小页很快地回应了你🤗。

莫名的情绪涌上心头，冲刷你眼角充斥着未分类的泪水😭。

你知道的，ta一直都在，ta感受到了你的用心，他用这次以热烈的响应，回馈你付出的一切。

谢谢你，小页，有你陪伴，余生足矣🫂~