前端性能优化

  1. 减少http请求

  2. 使用http2.0

  3. 使用ssr服务端渲染

    SSR 可以让首屏加载更快，带来更好的 SEO

    前端基本上现在都是 SPA 单页应用，单页应用的缺陷就是首屏加载很慢。使用 SSR 服务端渲染可以带来更好的 SEO ，SEO 就是搜索引擎优化，搜索引擎就是爬虫，可以更好的爬数据

    1. vue官网ssr
    2. Nuxt.js

  4. 合理使用cdn

  5. 将css放在文件头部，将js放在文件底部

  6. 使用精灵图/ 雪碧图, 减少请求次数

  7. 善用http缓存：强缓存&协商缓存

    二者都是后端控制的东西，强缓存是响应头添加 'Cache-Control': 'max-age=xxx' 字段， max-age 是过期时间，强缓存后无法缓存输入 url 后的 get 请求，想要缓存这个请求需要靠协商缓存来实现，协商缓存的实现是在强缓存的基础上添加一个 'Last-Modified': stats.mtimeMs 或者 etag 字段，若检查到前端返回的 If-Modified-Since 时间一致，后端就返回 304 状态码给前端，浏览器就从缓存中读取静态资源

  8. 其他

    • 首屏速度优化(SPA)——静态资源体积(tree-shaking、gzip)、异步引入、延迟加载
    • 大量数据 渲染优化——一次渲染一部分；分页处理
    • 用户体验优化——骨架屏、loading、页面状态缓存；搭配首屏加载
    • 组件可扩展性和易用性能优化
    • 错误处理 - 优化接口的出错处理，并发处理。让页面响应更快，体验更加

  9. 压缩文件

  10. 懒加载

懒加载的实现需要获取到可视区范围的高度，以及每张图片的高度，监听用户滚动的过程中图片是否进入范围内，进入时才赋值 src ， src 只要有值就一定会发送 http 请求，此前存放 src 的属性可以任意取名，当然一般我们取名为 data- 前缀，比如下面这样

  1. 尽量使用css，字体来代表图片

  2. 使用webp格式的图片

webp 格式的图片是谷歌推出的，这种格式的图像压缩算法能力要优于传统的 jpg ， png 等格式，在相同图片质量的情况下，空间大小会优化 30% 左右的样子

关于图片的性能优化就是小图用雪碧图，大图用 webp 格式

  1. webpack：tree-shaking | 打包文件名 + hash

tree-shaking 的作用就是帮我们把项目中无用的代码给找出来，比如我们调试用的 console.log ，其实 console.log 对浏览器的开销还是蛮大的

  1. 尽量减少回流重绘

输入url到页面渲染后半段：回流，重绘，优化

回流（重排）就是计算布局，重绘就是给页面上色

  • 尽量不用 js 去直接修改 css
1
2
3
4
5
6
7
8
9
10
// 案例一
box.style.width = '200px'

// 案例二
.more{
 width: '200px'
}
box.classList.add('more')
// 一种方案就是直接修改 css ，第二种是添加类名。方案一会导致回流，方案二不会导致回流，因为添加类名并没有修改几何属性，它是间接交给了 css

  1. 合理使用事件委托

事件委托的机制是借助冒泡机制，把原本需要批量操作子组件的操作代理到一个父组件上

  1. if-else & switch

if-else 有个判断顺序的，一定是从上往下走逐个走到目标，每次都判断一下，浪费性能。而 switch 不然， switch 是直接命中目标，只有一次判断

if-else 会更加灵活，但是性能又没有 switch 来得好

  1. 动画效果: requestAnimationFrame避免页面卡顿

  2. Web Worker 开启多线程

js默认情况下是单线程，但是v8引擎执行js的时候是可以多开辟线程，像页面上的图片有水印一般都是页面加载的时候实现，而非图片就有水印，像这种操作就是交给另一个线程来实现的(postMessge和onmessge )

  1. css选择器复杂性要低

浏览器读取css是从右往左读，尽量给每个标签打上类名，不要通过多层父容器

  1. 尽量使用弹性布局

flexbox性能会比较好

  • 首屏加载速度

    • 首屏速度

      • 白屏时间
        • 资源加载时间(占比最大)
        • 首屏js执行
      • 渲染页面 (SSR 项目发生在服务器端，可以提升页面加载速度和用户体验，同时也有利于SEO)
        • 首屏数据请求
        • Dom渲染

      解决：最大效果就是 减少首屏资源体积(打包工具压缩，异步加载，懒加载)

      打包 工具压缩：tree-shaking，按需引入，按需打包，减少打包体积

  • 操作速度以及渲染速度

    造成操作卡顿渲染慢 原因：

    1. 一次性操作大量的dom (例如页面操作大量数据表格tr)

    解决：长列表渲染和异步渲染

    1. 进行了复杂度很高的运算 (常见于循环)

    2. vue或react项目中，渲染太多不必要的元素

    解决：Vue中有依赖手机，配合vue3的静态节点标记，已经基本避免了因为数据改变引起的无意义渲染

    • 频繁切换使用v-show ,否则使用v-if
    • 循环，动态切换内容可以加key值
    • keep-alive缓存
    • 区分请求颗粒度，减少请求范围
    1. 不变数据，定期失效可以缓存在cookies或者localstorage中，比如token，用户名
    2. 可以考虑做一个缓存队列，存于内存中(全局对象，vuex)。这样能保证刷新就更新数据，也能一定程度上缓存数据