前端项目之--提升用户体验，提升前端性能

提升用户体验

影响用户体验主要有两个方面，接口数据返回慢、渲染慢

性能监控

performance API

控制台输入window.performance查看

✨针对数据返回慢的解决方案

数据过大

1 资源压缩、整合

• 通过 webpack 处理文件压缩

• js/css压缩

• 图片优化

  • 精灵图/字体图标
  • 长列表图片懒加载
  • 小图片使用 base64格式
  • 移动端用CDN 去加载图片
  • 选择正确图片格式
    • 尽量用 webp格式
    • 小图用 png格式
    • 图标类用 svg 代替
    • 照片用 jpeg 格式

• 开启 Gzip 压缩

2 分段请求

3 使用 JSON 格式进行数据交换

• Json 数据是一种轻量级的数据交换格式

• 序列化后体积小

接口返回时间长

1 服务器距离远

• CDN

  • 其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。

2 浏览器同时处理上限、损耗

• 接口合并

• 减少 http 请求

  • 合并 JavaScript 和 CSS 文件、合并图片 CSS Sprites、图像映射（ImageMap）和使用 Data URI 来编码图片，图片较多的页面也可以使用 lazyLoad 等技术进行优化。

3 首屏请求过多

• 首屏SSR渲染

• 骨架屏

相同数据重复请求

缓存

临时数据

• vuex、sessionStorage、pinia

常用数据

• localStorage

大数据

• 写入硬盘

JavaScript 优化

防抖

• 就是指触发事件后在n秒内函数只能执行一次，如果在n秒内又触发了事件，则会重新计算函数执行时间。(回城)

节流

• 就是指连续触发事件但是在设定的一段时间内中只执行一次函数。(CD刷新)

✨放到外部文件中引用，JS 放尾

✨针对渲染慢的解决方案

1 渲染页面过长，GPU渲染不过来

分段渲染

2 页面重排重绘过多

DOM 操作频繁

• vue监听数据一次渲染

• 减少 DOM 操作

  • 合理的使用 JavaScript 变量储存内容，考虑大量 DOM 元素中循环的性能开销，在循环结束时一次性写入。
  • 减少对 DOM 元素的查询和修改，查询时可将其赋值给局部变量

• 高效使用 HTML 标签和 CSS 样式

  • HTML
    • 块级元素和内联元素、盒模型、SEO 方面
    • 配置 optimization 把公共的 js 代码抽离出来
  • CSS
    • ✨放到外部文件中引用，CSS 放头
    • CSS 选择符是从右向左进行匹配的，要高效使用选择器
    • 使用 mini-css-extract-plugin 插件抽离 css

3 DOM 渲染相互影响

• vue、React的diff算法

4 相同页面重复渲染

缓存

• 缓存页面/组件