前端布置时，需将 html/css/js/img 等静态资本宣布至服务器/CDNs，通例优化点以下：
基于 express server 的例子
1 兼并、紧缩、殽杂
文件兼并，削减 http 请求次数
紧缩、殽杂，削减静态资本大小
完成上，可运用 webpack 合营系列插件，打包过程当中可紧缩源代码（去空格、换行、解释，JS殽杂代码等等），webpack 设置庞杂，不过量赘述
2 http gzip 紧缩
削减 http 传输过程当中文件大小
2.1 紧缩前后对照
2.2 HTTP 请求头 Accept-Encoding
HTTP 请求头 Accept-Encoding 会将客户端能够明白的内容编码体式格局——通常是某种紧缩算法——举行关照。经由过程内容协商的体式格局，服务端会挑选一个客户端发起的体式格局，运用并在相应报文首部 Content-Encoding 中关照客户端该挑选。
2.3 HTTP 相应头 Content-Encoding
Content-Encoding 是一个实体音讯首部，用于对特定媒体范例的数据举行紧缩。当这个首部涌现的时刻，它的值示意音讯主体举行了何种体式格局的内容编码转换。这个音讯首部用来示知客户端应当如何解码才猎取在 Content-Type 中标示的媒体范例内容。
3 Not Modified 304
削减传输内容提拔机能。
客户端有缓冲的文档并发出了一个前提性的请求。服务器通知客户端，本来缓冲的文档还能够继承运用，触及以下两种 HTTP Header。
3.1 Last-modified / If-Modified-Since
1）浏览器第一次请求某个URL时，服务器端的返回状况会是200，内容是你请求的资本，同时有一个Last-Modified的属性标记此文件在服务期端末了被修正的时候
2）客户端第二次请求此URL时，HTTP 协定的划定，浏览器会向服务器传送 If-Modified-Since 报头，讯问该时候以后文件是不是有被修正过。
3）假如服务器端的资本没有变化，则自动返回 HTTP 304 Not Modified 状况码，内容为空，如许就节省了传输数据量。当服务器端代码发作转变或许重启服务器时，则从新发出资本，返回和第一次请求时相似。从而保证不向客户端反复发出资本，也保证当服务器有变化时，客户端能够获得最新的资本。
3.2 Etag / If-None-Match
Etag 相似于 hash 值，用来推断请求的文件是不是被修正，其 http 缓存步骤与 Last-Modified 雷同。
HTTP 协定规格申明定义ETag为“被请求变量的实体值”。 另一种说法是，ETag是一个能够与Web资本关联的暗号（token）。
3.3 Etag 重要为了处理 Last-Modified 没法处理的一些题目
1）一些文件或许会周期性的变动，但内容并未转变（仅仅转变的修正时候），这个时刻我们并不愿望客户端以为这个文件被修正了，而从新 GET
2）某些文件修正异常频仍，比方在秒以下的时候内举行修正（比方说1s内修正了N次），If-Modified-Since能检查到的粒度是s级的，这类修正没法推断(或许说UNIX纪录MTIME只能准确到秒)
3）某些服务器不能准确的获得文件的末了修正时候
4 浏览器缓存
Last-Modified 和 Etag 标识资本变化状况，服务器返回 304 Not Modified 下降收集传输大小，提拔机能。然则关于如图片、react/vue这类库资本、通用css这些不常常变化的静态资本，应运用浏览器缓存功用，连304此次请求都优化掉。
4.1 Pragma
HTTP1.0 范例，表明禁用缓存，因为 Pragma 在 HTTP 相应中的行动没有确实范例，所以不能牢靠替换 HTTP/1.1 中通用首部 Cache-Control。看了下腾讯视频、京东商城等页面，用在html的请求头中。
4.2 Expires
HTTP1.0 范例，表明逾期时候，注重此处的时候都是指的是服务器的时候。（无效的日期，比方 0, 代表着过去的日期，即该资本已逾期）
**存在题目**：客户端与服务器时候不一致，能够致使缓存失效。
4.3 Cache-Control
HTTP 1.1 范例，是 expires 的补充，运用的是相对时候的观点。
Cache-Control 属性以下：
1）max-age: 设置缓存的最大的有用时候，单元为秒（s）。max-age会掩盖掉Expires
2）s-maxage: 只用于同享缓存，比方CDN缓存（s -> share）。与 max-age 的区别是：max-age 用于一般缓存，而 s-maxage 用于代办缓存。假如存在 s-maxage，则会掩盖 max-age 和 Expires
3）public：相应会被缓存，并且在多用户间同享。默许是public。
3）private: 相应只作为私有的缓存，不能在用户间同享。假如请求HTTP认证，相应会自动设置为private。
4）no-cache: 指定不缓存相应，表明资本不举行缓存。然则设置了no-cache以后并不代表浏览器不缓存，而是在缓存前要向服务器确认资本是不是被变动。因而有的时刻只设置no-cache防备缓存照样不够保险，还能够加上private指令，将逾期时候设为过去的时候。
5）no-store: 相对制止缓存。
6）must-revalidate: 假如页面逾期，则去服务器举行猎取。
更多属性请参考 MDN：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Cache-Control
运用浏览器缓存后，chrome 中收集请求以下：
1）from memery cache 从内存中读取
2）from disk cache 从浏览器缓存中读取
5 HTTP2
这篇笔墨引见的很周全
协定递进递次 HTTP1.0 -> HTTP1.1 -> spdy（谷歌） -> HTTP2
1）
多路复用 + 二进制分帧：运用 HTTP1.1，浏览器在统一时候，针对统一域名下的请求有肯定的数量限定，凌驾限定数量的请求会被壅塞（差别浏览器差别），HTTP2 引入二进制数据帧和流的观点，而非 HTTP1.1 的文本情势，完成在统一 TCP 连接下的多并发请求（固然 HTTP1.1 优化的 keep-alive 也不须要了）2）
头部紧缩：HTTP1.1 Header 中有很多无意义的反复的头部，HTTP2 运用 HPACK 算法举行头部紧缩3）
服务端推送：比方，在浏览器请求 html 时，服务端展望性的将 js、css 等文件推送返来，但在现实运用中有很多题目须要处理
