前端性能优化

一、图片优化

当下较为广泛的web图片格式有JPEG/JPG,PNG,WebP,Base64,SVG

在计算机中，像素用二进制表示，一个像素对应的二进制位数越多，可以显示的颜色种类就越多，呈现的效果就越细腻。

JPEG/JPG

1. 有损压缩，体积小，不支持透明度
2. 以24位存储单个图，可呈现1600万种颜色
3. 使用场景：
   * 适用于呈现色彩丰富的图片，日常中经常作为大背景图，轮播图，banner图出现
4. 缺陷：在处理矢量图形和logo等线条感较强，颜色对比强烈的图像时失真严重。

PNG

1. png8,png24
2. 无损压缩，质量高体积大，支持透明度
3. 应用场景：
   * 在处理线条和颜色对比度方面有优势，主要用来呈现小的logo，颜色简单且对比强烈的图片或背景。

SVG

1. 文本文件，体积小，兼容性好，不失真
2. 是一种基于XML语法的图像格式，SVG对图像的处理不是基于像素点，而是基于对图像的形状描述。
3. 图片无限放大也不失真。
4. SVG的渲染成本高

Base64

1. 文本文件，依赖编码，小图标解决方案
2. 为了减小加载网页图片时对服务器的请求次数，提升网页性能
3. Base64 是一种用于传输 8Bit 字节码的编码方式，通过对图片进行 Base64 编码，我们可以直接将编码结果写入 HTML 或者写入 CSS
4. 缺点：图片大小会膨胀为原文件的4/3
5. webpack中的url-loader会结合文件的大小，判断图片是否有必要进行Base64编码。

WebP

1. 年轻的全能型选手
2. 支持有损压缩和无损压缩
3. 像 JPEG 一样对细节丰富的图片信手拈来，像 PNG 一样支持透明，像 GIF 一样可以显示动态图片。
4. 缺点：兼容性差
5. 应用：使用兼容性查询，在支持webp的浏览器中，使用webp，当浏览器不兼容中，将图片后缀改为png,jpg

雪碧图

解决小图标，将小图标和背景图像合并到一张图片上，然后利用css定位来显示其中的每一部分的图片。

二、浏览器缓存

强缓存

1. expires

   • 一个时间戳(绝对的时间戳）
   • 缺点：会有时间差

2. cache-control：max-age/s-maxage

   • 时间长度
   • 优先级比expires高
   • 考虑代理服务器的缓存问题。s-maxage 就是用于表示 cache 服务器上（比如 cache CDN）的缓存的有效时间的，并只对 public 缓存有效。

3. no-store

   • 不使用任何的缓存策略

4. no-cache

   • 绕开浏览器，不询问浏览器的缓存情况，直接向服务端访问是否过期（协商缓存）

协商缓存

浏览器和服务器合作

1. Last-Modified

   • 一个时间戳
   • 如果我们启用了协商缓存，它会在首次请求时随着 Response Headers 返回

   Last-Modified: Fri, 27 Oct 2017 06:35:57 GMT

   • 之后的每次请求会带上If-Modified-Since,其值为上一次的last-modified
   • 缺点：
     • 编辑文件，但是文件内容没有改变的话，服务器也会认为已经改变了
     • 如果修改文件的速度过快，100ms，由于 If-Modified-Since 只能检查到以秒为最小计量单位的时间差，所以它是感知不到这个改动的

2. Etag

   • 唯一的标识字符串
   • 在响应头中返回（ETag:W/“xxxxxx”）
   • 下一次请求携带If-None-Match
   • 缺点：生成过程需要服务器额外付出开销，会影响服务端性能

本地存储

cookie

1. 只有4KB

session storage&&location storage

1. 区别：

   • 生命周期：location storage持久化存储在本地，除非手动删除；session storage是临时性的本地存储，当会话结束（页面被关闭）时，存储内容也随之被释放。
   • 作用域：localstorage、sessionstorage、cookie都遵循同源策略。但 Session Storage 特别的一点在于，即便是相同域名下的两个页面，只要它们不在同一个浏览器窗口中打开，那么它们的 Session Storage 内容便无法共享

2. 存储容量5-10M

3. 仅位于浏览器端，不与服务端发生通信。

indexedDB

一个运行在浏览器上的非关系型数据库
在 IndexedDB 中，我们可以创建多个数据库，一个数据库中创建多张表，一张表中存储多条数据——这足以 hold 住复杂的结构性数据。

CDN

Content Delivery Network 内容分发网络。
指的是一组分布在各个地区的服务器。这些服务器存储着数据的副本，当请求数据是，会先检查离用户最近的服务器上是否有请求数据的副本，有则提高请求的速度，没有则到根服务器请求。

CDN的核心点：

1. 缓存
   将根服务器的资源copy一份到CDN服务器上

2. 回源
   CDN发现自己没有这个资源，或者数据过期时，转头向根服务器（或者上层服务器）去要这个资源。

CDN的前端性能优化
CDN往往被用来存放静态资源，就像JS,CSS，图片等不需要业务服务器进行计算得到的资源。
CDN是静态资源提速的重要手段