前端性能优化总结

下面是我们自己项目用过的一些优化策略，进行总结：

图片优化

优先选择webp格式

WebP 的优势体现在它具有更优的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量；同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性，在 JPEG 和 PNG 上的转化效果都相当优秀、稳定和统一。无损webp相比png减少26%大小。
比如有这么一张图片用于学生的头像
https://img.zuoyebang.cc/zyb_d5302679abe24c3a8aa1a11e8862fd5b.jpg
我们不进行任何操作的时候，这张图片的大小是46kb

但是如果使用在这个地址后加上表示将其转换为webp(我们使用的是百度云)
https://img.zuoyebang.cc/zyb_d5302679abe24c3a8aa1a11e8862fd5b.jpg@f_webp
这里表示将这张图片转换为webp格式，然后在看图片大小:

从46kb减少到了31kb，减少了32%。使用这项技术能够大大的提高页面的加载速度，为公司节省带宽。在相关业务上，可能需要其他的手段，例如头像是不需要这个高的的图片质量的，后端返回的图片可能是400*400的，但是头像可能只需要100*100，例如上面给出的这个地址可以转换为:
https://img.zuoyebang.cc/zyb_d5302679abe24c3a8aa1a11e8862fd5b.jpg@f_webp,q_75,w_100

• q: 代表图片质量
• w: 表示图片最大宽度

可以图片从46kb降到了2kb，图片大小得到了惊人的改善，并且不会产生肉眼可见的视觉影响，所以使用webp是非常有必要的。

图片懒加载

图片作为一种网络资源，在被请求时也和普通静态资源一样，将占用网络资源，而一次性将整个页面的所有图片加载完，会造成大大增加页面的首屏加载时间。为了解决这种问题，让图片仅在浏览器当前视窗内出现时才加载该图片，达到减少首屏图片请求数。
所幸的是已经有了成熟的库供我们使用，只需要使用

<img v-lazy="src">

就能够达到懒加载的效果，在页面初始化后，只会加载页面视口内的图片，当我们滚动相应的位置才会加载对应的图片

合理利用缓存

使用service worker

pwa中其他的功能感觉用不上，这里只介绍service worker。一般都有成熟的插件可以使用pwa，主要用它来缓存文件，如分析一个网站

在第一次访问的时候，需要下载整个文件大小约97kb，但是当我们第二次进入该文件的时候，这个chunk-vendor不需要重新下载，直接从缓存中获取

大大的提高了性能。

webpack优化

打包公共代码

将公共的模块拆出来，最终合成的文件能够在最开始的时候加载一次，便存到缓存中供后续使用，这会带来速度上的提升，因为浏览器会迅速将公共的代码从缓存中取出来，而不是每次访问一个新页面时，再去加载一个更大的文件。在webpack的splitChunks就能够把多次引入的包，都打包到一个文件中。
这部分的的代码不会频繁更改，下次请求会从缓存中获取，而不是通过网络请求获取

按需加载

在单页面中，有多个路由，使用webpack的按需加载就能达到单独访问某个页面的时候单独某个的页面代码，如import(/*webpackChunkName: 'xx'* 'yourpath'/)

优化网络链接

使用CDN

　　CDN全称是Content Delivery Network，即内容分发网络，它能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。其目的是使用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度

使用DNS预解析

　　当浏览器访问一个域名的时候，需要解析一次DNS，获得对应域名的ip地址。在解析过程中，按照浏览器缓存、系统缓存、路由器缓存、ISP(运营商)DNS缓存、根域名服务器、顶级域名服务器、主域名服务器的顺序，逐步读取缓存，直到拿到IP地址
　　DNS Prefetch，即DNS预解析就是根据浏览器定义的规则，提前解析之后可能会用到的域名，使解析结果缓存到系统缓存中，缩短DNS解析时间，来提高网站的访问速度
　　方法是在head标签里面写上几个link标签

<link rel="dns-prefetch" href="yy-s.zuoyebang.cc">
 <link rel="dns-prefetch" href="img.zuoyebang.cc">

preload/prefetch

preload主要目的都是为了提前加载浏览器之后需要的资源，一般用于加载css文件引用的字体。
prefetch的作用是告诉浏览器加载下一页面会用到的资源，这种方式的作用是加速下一个页面的加载速度。

defer/async

当DOM解析遇到js的脚本时，会停止解析，开始下载脚本并执行，再恢复解析，相当于阻塞了DOM构建。具体的原理可以参照下图

根据他的特点，可以在一些和主业务无关的js脚本上使用defer，例如监控，统计脚本.

体验优化

使用骨架屏

一些项目，可能大部分数据都是从后端获取，网络请求是需要占用一定的时间的，所以用户一进来发现是空页面，所以这个时候可以使用骨架屏先加载一个轮廓，而不是让用户觉得这个页面挂了。

服务端渲染

一是业务需求：通过ajax请求容易数据被抓，所以返回给前端的数据是加密的。
二是体验: 服务端在返回html之前，在特定的区域，符号里用数据填充，在给客户端，这样首屏渲染就非常快
这时候就可以采用服务端渲染来解决这些问题，提高用户体验。