前端性能优化

本文总结了几种常用的前端性能优化方法，参考前端性能优化9大策略（面试一网打尽）！

1. Loading 加载

加载数据时显示动效。

2. 骨架屏

在需要等待加载内容的位置设置一个骨架屏，某些场景下比 Loading 的视觉效果更好。

3.懒加载

应用示例：

Element的Tree 树形控件可以动态加载节点数据，在点击节点时才进行该层数据的获取。

虚拟列表，只渲染可见区域附近的列表元素。

图片懒加载

4.节流与防抖

5. 压缩 CSS

使用webpack的插件CssMinimizerWebpackPlugin优化和压缩 CSS，从而降低浏览器的加载时间。

6. 路由懒加载

const routes = [
  { // 未使用懒加载
    path: '/index',
    name: 'index,
    component: index
  },
  {
    path: '/detail',
    name: 'detail',
    // 启用懒加载
    component: () => import('../views/detail/detail.vue'),
  }
];

webpack会把每一个路由都打包为一个js文件，在请求到该页面时，才去加载这个页面的js。这样做的好处是不需要在打开首页的时候就把所有的页面内容全部加载进来。

7. 使用HTTP 缓存

响应指定 Cache-Control 标头，设置 Last-Modified 和 ETag 标头。

HTTP 缓存会存储与请求关联的响应，并将存储的响应复用于后续请求。

首先，由于不需要将请求传递到源服务器，因此客户端和缓存越近，响应速度就越快。

此外，当响应可复用时，源服务器不需要处理请求。这减少了服务器上的负载。

8. 压缩图片

webp 是一种新的图像格式，同样的分辨率，大小比 jpg、png 小 25% 以上，可以大大提高网站访问速度。