前端性能优化

我们常提到性能好坏是由什么来衡量呢？访问页面地址 --> 页面首次加载数据 --> 渲染出完整页面的时长，非首次情况下，命中缓存的加载缓存数据 --> 渲染出完整页面的时长。一般我从下面几个方面着手去做，一般问题都不大。

1、减小资源（静态资源，后端加载的数据）大小（webpack都可以搞定）

• 压缩代码HTML/CSS/JS
• 压缩图片、音视频大小
• Tree-Sharking 消除无用代码

2、避免同一时间的过多次数请求

• CSS 实现雪碧图：使用background-position共享一张图
• 图片懒加载：监听滚动后offsetTop,  使用src 替换 src（真实路径）
• 列表懒加载（分批加载）：监听滚动后offsetTop， 发送请求加载下一页的数据
• 路由懒加载
• 代码分包分块加载（webpack）
• 预加载技术
• 小程序分包、预下载等。

3、缓存（空间换时间）

• CDN 内容分发：获取更近网络节点缓存下来的静态资源
• 浏览器缓存（自带）
• 部分资源保存在LocalStorage或者APP缓存中（手动操作）

4、代码

HTML优化：

• 使用语义化标签
• 减少iframe：iframe是SEO的大忌，iframe有好处也有弊端
• 避免重定向

CSS优化：

• 删除空样式
• 不滥用浮动，字体，需要加载的网络字体根据网站需求再添加
• 选择器性能优化
• 避免使用表达式，避免用id写样式

js优化：

• 压缩
• 减少重复代码

5、其他

• SSR 服务端渲染：解决SPA框架带来JS动态渲染页面带来的延迟和白屏问题