2020-01-30 前端性能优化

减少资源体积

gzip

gzip 使用了 LZ77 算法与 Huffman 编码来压缩文件，重复度越高的文件可压缩的空间就越大

request headers
Accept-Encoding带上自己支持的内容编码格式列表
response headers
Content-Encoding：内容编码格式gzip 和 deflate

nginx 配置

gzip on;
gzip_min_length 1k; //不压缩临界值，大于1K的才压缩，一般不用改
gzip_comp_level 2; //压缩级别，1-10，数字越大压缩的越细，时间也越长
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; //进行压缩的文件类型
gzip_disable "MSIE [1-6]\.";//ie兼容性不好所以放弃

webpack配置
compression-webpack-plugin 这个插件可以提供功能，伸手党福利

const CompressionWebpackPlugin = require('compression-webpack-plugin');
plugins.push(   
 new CompressionWebpackPlugin({
        asset: '[path].gz[query]',// 目标文件名
        algorithm: 'gzip',// 使用gzip压缩
        test: new RegExp(
           '\\.(js|css)$' // 压缩 js 与 css        ),
        threshold: 10240,// 资源文件大于10240B=10kB时会被压缩        
        minRatio: 0.8 // 最小压缩比达到0.8时才会被压缩    
}));

源文件控制

图片
webp，是一种同时提供了有损压缩与无损压缩（可逆压缩）的图片文件格式，无损压缩后的WebP比PNG文件少了26％的体积，有损压缩后的WebP图片相比于等效质量指标的JPEG图片减少了25％~34%的体积。
唯一的问题可能就是兼容性了
http2——头部压缩
HTTP 请求和响应都是由「状态行、请求 / 响应头部、消息主体」三部分组成。一般而言，消息主体都会经过 gzip 压缩，或者本身传输的就是压缩过后的二进制文件（例如图片、音频），但状态行和头部却没有经过任何压缩，直接以纯文本传输。
方式：使用动态字典

减少资源请求

DNS

运作：
1.浏览器是否有缓存
2.操作系统是否缓存，常见的如hosts文件
3.路由器是否有缓存
4.域名服务器是否有缓存：根域服务器（.） -> 顶级域名服务器（com）->主域名服务器（baidu.com
优化

<link rel="dns-prefetch" href="//baidu.com">

禁止
禁用DNS 预读取能节省每月100亿的DNS查询

<meta http-equiv="x-dns-prefetch-control" content="off">

http协议

核心二进制分层
多路复用

当一个tcp建立连接之后，http2将多个请求重复利用这个tcp，并且分成多个stream交错传输，慢的请求或者先发送的请求不会阻塞其他请求的返回，最终根据stream的标识再重组返回，类似并发的感觉非并行。
Header 帧必须在 data 帧前面，data 帧依赖 header 帧的信息解析

深入
http2多路复用和http1.x的keep-alive有什么区别？

乍一看好像都是复用了TCP连接，但俩这是截然不同的。
http1.x：
    它是遵循先进先出，服务端只能按顺序响应请求，所以如果前面的请求没有响应完变灰发生 队头阻塞，造成延迟，同时保持不必要的连接会影响服务器性能，同时浏览器限制了http同时并发的上限。
http2：   
   多个请求可以同时发送（不分先后），按序响应，解决1.x的一些问题。

缓存

强缓存： Expires、Cache-Control
协商缓存： Last-Modified、ETag
localStorage、sessionStorage
CDN
原理:

基于智能DNS对用户的IP地址综合参考规则和数值指标的解析，将用户调度到择最快的Cache服务器

图片

区别于减少图片体积，减少图片资源请求的方案有哪些？

1.雪碧图
2.图片转base64

异步加载

defer、async、module

预加载

preload
prefetch

笔记来源：掘金网
链接： https://juejin.im/post/5defb2866fb9a01631780d29#heading-30