HTTP 优化有两个大的方向：
减少要求次数减少单次要求所花费的韶光浏览器缓存策略浏览器缓存机制有四个方面，它们按照获取资源时要求的优先级依次排列如下：
Memory CacheService Worker CacheHTTP CachePush CacheMemoryCache
MemoryCache，是指存在内存中的缓存。从优先级上来说，它是浏览器最先考试测验去命中的一种缓存。从效率上来说，它是相应速率最快的一种缓存。浏览器秉承的是“节约原则”，我们创造，Base64 格式的图片，险些永久可以被塞进 memory cache，这可以视作浏览器为节省渲染开销的“自保行为”；此外，体积不大的 JS、CSS 文件，也有较大地被写入内存的几率——比较之下，较大的 JS、CSS 文件就没有这个报酬了，内存资源是有限的，它们每每被直接甩进磁盘。
Service Worker Cache
Service Worker 是一种独立于主线程之外的 Javascript 线程。它分开于浏览器窗体，因此无法直接访问 DOM。这样独立的个性使得 Service Worker 的“个人行为”无法滋扰页面的性能，这个“幕后事情者”可以帮我们实现离线缓存、推送和网络代理等功能。我们借助 Service worker 实现的离线缓存就称为 Service Worker Cache。
HTTP Cache
它又分为强缓存和协商缓存。优先级较高的是强缓存，在命中强缓存失落败的情形下，才会走协商缓存。
对一条http get 报文的基本缓存处理过程包括7个步骤：
吸收解析查询，缓存查看是否有本地副本可用，如果没有，就获取一份副本新鲜度检测， 缓存查看已缓存副本是否足够新鲜，如果不是，就讯问做事器是否有任何更新。创建相应，缓存会用新的首部和已缓存的主体来构建一条相应报文。发送，缓存通过网络将相应发回给客服端。日志强缓存强缓存是利用 http 头中的 Expires 和 Cache-Control 两个字段来掌握的。强缓存中，当要求再次发出时，浏览器会根据个中的 expires 和 cache-control 判断目标资源是否“命中”强缓存，若命中则直接从缓存中获取资源，不会再与做事端发生通信。
是否足够新鲜期间：
通过 Expires: XXXX XXX XXX GMT （绝对日期韶光，http/1.0） 或者 Cache-Control:max-age=XXXX （相对日期韶光，http/1.1）在文档标明过期日期。
Cache-Control 相对付 expires 更加准确，它的优先级也更高。当 Cache-Control 与 expires 同时涌现时，我们以 Cache-Control 为准。
关键字理解
public 与 private 是针对资源是否能够被代理做事缓存而存在的一组对立观点。如果我们为资源设置了 public，那么它既可以被浏览器缓存，也可以被代理做事器缓存；如果我们设置了 private，则该资源只能被浏览器缓存。private 为默认值。
no-store与no-cache，no-cache 绕开了浏览器：我们为资源设置了 no-cache 后，每一次发起要求都不会再去讯问浏览器的缓存情形，而是直接向做事端去确认该资源是否过期（即走我们下文即将讲解的协商缓存的路线）。no-store 比较绝情，顾名思义便是不该用任何缓存策略。在 no-cache 的根本上，它连做事真个缓存确认也绕开了，只许可你直接向做事端发送要求、并下载完全的相应。
协商缓存
协商缓存依赖于做事端与浏览器之间的通信。协商缓存机制下，浏览器须要向做事器去讯问缓存的干系信息，进而判断是重新发起要求、下载完全的相应，还是从本地获取缓存的资源。如果做事端提示缓存资源未改动（Not Modified），资源会被重定向到浏览器缓存，这种情形下网络要求对应的状态码是 304。
协商缓存的实现：从 Last-Modified 到 Etag，详细自己百度，这里不再详细展开。
HTTP 缓存决策
当我们的资源内容不可复用时，直接为 Cache-Control 设置 no-store，谢绝统统形式的缓存；否则考虑是否每次都须要向做事器进行缓存有效确认，如果须要，那么设 Cache-Control 的值为 no-cache；否则考虑该资源是否可以被代理做事器缓存，根据其结果决定是设置为 private 还是 public；然后考虑该资源的过期韶光，设置对应的 max-age 和 s-maxage 值；末了，配置协商缓存须要用到的 Etag、Last-Modified 等参数。
Push Cache
Push Cache 是指 HTTP2 在 server push 阶段存在的缓存。
Push Cache 是缓存的末了一道防线。浏览器只有在 Memory Cache、HTTP Cache 和 Service Worker Cache 均未命中的情形下才会去讯问 Push Cache。Push Cache 是一种存在于会话阶段的缓存，当 session 终止时，缓存也随之开释。不同的页面只要共享了同一个 HTTP2 连接，那么它们就可以共享同一个 Push Cache。CDNCDN 的核心点有两个，一个是缓存，一个是回源。
“缓存”便是说我们把资源 copy 一份到 CDN 做事器上这个过程，“回源”便是说 CDN 创造自己没有这个资源（一样平常是缓存的数据过期了），转头向根做事器（或者它的上层做事器）去要这个资源的过程。
CDN 每每被用来存放静态资源。所谓“静态资源”，便是像 JS、CSS、图片等不须要业务做事器进行打算即得的资源。而“动态资源”，顾名思义是须要后端实时动态天生的资源，较为常见的便是 JSP、ASP 或者依赖做事端渲染得到的 HTML 页面。
那“非纯静态资源”呢？它是指须要做事器在页面之外作额外打算的 HTML 页面。详细来说，当我打开某一网站之前，该网站须要通过权限认证等一系列手段确认我的身份、进而决定是否要把 HTML 页面呈现给我。这种情形下 HTML 确实是静态的，但它和业务做事器的操作耦合，我们把它丢到CDN 上显然是不得当的。
其余，CDN的域名必须和主业务做事器的域名不一样，要不，同一个域名下面的Cookie各处跑，摧残浪费蹂躏了性能流量的开销，CDN域名放在不同的域名下，可以完美地避免了不必要的 Cookie 的涌现！
二进制位数与色彩的关系
在打算机中，像素用二进制数来表示。不同的图片格式中像素与二进制位数之间的对应关系是不同的。一个像素对应的二进制位数越多，它可以表示的颜色种类就越多，成像效果也就越细腻，文件体积相应也会越大。
一个二进制位表示两种颜色（0|1 对应黑|白），如果一种图片格式对应的二进制位数有 n 个，那么它就可以呈现 2^n 种颜色。
打算图片大小
对付一张 100 100 像素的图片来说，图像上有 10000 个像素点，如果每个像素的值是 RGBA 存储的话，那么也便是说每个像素有 4 个通道，每个通道 1 个字节（8 位 = 1个字节），以是该图片大小大概为 39KB（10000 1 4 / 1024）。
但是在实际项目中，一张图片可能并不须要利用那么多颜色去显示，我们可以通过减少每个像素的调色板来相应缩小图片的大小。
理解了如何打算图片大小的知识，那么对付如何优化图片，想必大家已经有 2 个思路了：
减少像素点减少每个像素点能够显示的颜色图片类型要点
JPEG/JPG 特点：有损压缩、体积小、加载快、不支持透明,JPG 最大的特点是有损压缩。这种高效的压缩算法使它成为了一种非常轻巧的图片格式。另一方面，纵然被称为“有损”压缩，JPG的压缩办法仍旧是一种高质量的压缩办法：当我们把图片体积压缩至原有体积的 50% 以下时，JPG 仍旧可以保持住 60% 的品质。但当它处理矢量图形和 Logo 等线条感较强、颜色比拟强烈的图像时，人为压缩导致的图片模糊会相称明显。
PNG 特点：无损压缩、质量高、体历年夜、支持透明，PNG（可移植网络图形格式）是一种无损压缩的高保真的图片格式。8 和 24，这里都是二进制数的位数。按照我们前置知识里提到的对应关系，8 位的 PNG 最多支持 256 种颜色，而 24 位的可以呈现约 1600 万种颜色。PNG 图片具有比 JPG 更强的色彩表现力，对线条的处理更加细腻，对透明度有良好的支持。它填补了上文我们提到的 JPG 的局限性，唯一的 BUG 便是体积太大。
SVG 特点：文本文件、体积小、不失落真、兼容性好，SVG（可缩放矢量图形）是一种基于 XML 语法的图像格式。它和本文提及的其它图片种类有着实质的不同：SVG 对图像的处理不是基于像素点，而是是基于对图像的形状描述。
Base64 特点：文本文件、依赖编码、小图标办理方案，Base64 并非一种图片格式，而是一种编码办法。Base64 和雪碧图一样，是作为小图标办理方案而存在的。
WebP 特点：年轻的全能型选手，WebP 像 JPEG 一样对细节丰富的图片信手拈来，像 PNG 一样支持透明，像 GIF 一样可以显示动态图片——它集多种图片文件格式的优点于一身。但是毕竟年轻，兼容性存在一些问题。
渲染优化客户端渲染
在客户端渲染模式下，做事端会把渲染须要的静态文件发送给客户端，客户端加载过来之后，自己在浏览器里跑一遍 JS，根据 JS 的运行结果，天生相应的 DOM。页面上呈现的内容，你在 html 源文件里里找不到——这正是它的特点。
做事端渲染
在做事端渲染的模式下，当用户第一次要求页面时，由做事器把须要的组件或页面渲染成HTML字符串，然后把它返回给客户端。页面上呈现的内容，我们在 html 源文件里也能找到。做事端渲染办理了一个非常关键的性能问题——首屏加载速度过慢，也办理了SEO搜索引擎的问题。
浏览器渲染过程解析
浏览器的渲染机制一样平常分为以下几个步骤：
处理 HTML 并构建 DOM 树。处理 CSS 构建 CSSOM 树将 DOM 与 CSSOM 合并成一个渲染树。根据渲染树来布局，打算每个节点的位置。调用 GPU 绘制，合成图层，显示在屏幕上。在渲染DOM的时候，浏览器所做的事情实际上是：
获取DOM后分割为多个图层对每个图层的节点打算样式结果（Recalculate style–样式重打算）为每个节点天生图形和位置（Layout–回流和重布局）将每个节点绘制添补到图层位图中（Paint Setup和Paint–重绘）图层作为纹理上传至GPU复合多个图层到页面上天生终极屏幕图像（Composite Layers–图层重组）基于渲染流程的 CSS 优化建议
CSS 选择符是从右到左进行匹配的，比如 #myList li {}实际开销相称高。
避免利用通配符，只对须要用到的元素进行选择。关注可以通过继续实现的属性，避免重复匹配重复定义。少用标签选择器。如果可以，用类选择器替代。 缺点：#dataList li{} 精确：.dataList{}不要多此一举，id 和 class 选择器不应该被多余的标签选择器拖后腿。缺点：.dataList#title 精确： #title减少嵌套。后代选择器的开销是最高的，因此我们该当只管即便将选择器的深度降到最低（最高不要超过三层），尽可能利用类来关联每一个标签元素。CSS 的壅塞
CSS 是壅塞的资源。浏览器在构建 CSSOM 的过程中，不会渲染任何已处理的内容。即便 DOM 已经解析完毕了，只要 CSSOM 不 OK，那么渲染这个事情就不 OK。我们将 CSS 放在 head 标签里 和尽快 启用 CDN 实现静态资源加载速率的优化。
JS 的壅塞
JS 引擎是独立于渲染引擎存在的。我们的 JS 代码在文档的何处插入，就在何处实行。当 HTML 解析器碰着一个 script 标签时，它会停息渲染过程，将掌握权交给 JS 引擎。JS 引擎对内联的 JS 代码会直接实行，对外部 JS 文件还要先获取到脚本、再进行实行。等 JS 引擎运行完毕，浏览器又会把掌握权还给渲染引擎，连续 CSSOM 和 DOM 的构建。
DOM渲染优化
先理解回流和重绘
回流：当我们对 DOM 的修正引发了 DOM 几何尺寸的变革（比如修正元素的宽、高或隐蔽元素等）时，浏览器须要重新打算元素的几何属性（其他元素的几何属性和位置也会因此受到影响），然后再将打算的结果绘制出来。这个过程便是回流（也叫重排）。重绘：当我们对 DOM 的修正导致了样式的变革、却并未影响其几何属性（比如修正了颜色或背景色）时，浏览器不需重新打算元素的几何属性、直接为该元素绘制新的样式（跳过了上图所示的回流环节）。这个过程叫做重绘。重绘不一定导致回流，回流一定会导致重绘。回流比重绘做的事情更多，带来的开销也更大。在开拓中，要从代码层面出发，尽可能把回流和重绘的次数最小化。
例子阐发
进化一：
进化二：
事实上，考虑JS 的运行速率，比 DOM 快得多这个特性。我们减少 DOM 操作的核心思路，便是让 JS 去给 DOM 分压。
在 DOM Fragment 中，DocumentFragment 接口表示一个没有父级文件的最小文档工具。它被当做一个轻量版的 Document 利用，用于存储已排好版的或尚未打理好格式的XML片段。由于 DocumentFragment 不是真实 DOM 树的一部分，它的变革不会引起 DOM 树的重新渲染的操作（reflow），且不会导致性能等问题。
进化三：
进化四：
当涉及到过万调数据进行渲染，而且哀求不卡住画面，如何办理？
如何在不卡住页面的情形下渲染数据，也便是说不能一次性将几万条都渲染出来，而该当一次渲染部分 DOM，那么就可以通过 requestAnimationFrame 来每 16 ms 刷新一次。
window.requestAnimationFrame() 方法见告浏览器您希望实行动画并要求浏览器不才一次重绘之前调用指定的函数来更新动画。该方法利用一个回调函数作为参数，这个回调函数会在浏览看重绘之前调用。
把稳：若您想要不才次重绘时产生另一个动画画面，您的回调例程必须调用 requestAnimationFrame()。
Event Loop事宜循环中的异步队列有两种：macro（宏任务）行列步队和 micro（微任务）行列步队。
常见的 macro-task 比如： setTimeout、setInterval、 setImmediate、script（整体代码）、 I/O 操作、UI 渲染等。
常见的 micro-task 比如: process.nextTick、Promise、MutationObserver 等。
例子剖析：
// task是一个用于修正DOM的回调setTimeout(task, 0)
上面代码，现在 task 被推入的 macro 行列步队。但由于 script 脚本本身是一个 macro 任务，以是本次实行完 script 脚本之后，下一个步骤就要去处理 micro 行列步队了，再往下就去实行了一次 render,必须等待下一次的loop。
Promise.resolve().then(task)
上面代码，我们结束了对 script 脚本的实行，是不是紧接着就去处理 micro-task 行列步队了？micro-task 处理完，DOM 修恰好了，紧接着就可以走 render 流程了——不须要再花费多余的一次渲染，不须要再等待一轮事宜循环，直接为用户呈现最即时的更新结果。
当我们须要在异步任务中实现 DOM 修正时，把它包装成 micro 任务是相对明智的选择。
上面说了重绘与回流，Event loop，但很多人不知道的是，重绘和回流实在和 Event loop 有关。
当 Event loop 实行完 Microtasks 后，会判断 document 是否须要更新。由于浏览器是 60Hz 的刷新率，每 16ms 才会更新一次。然后判断是否有 resize 或者 scroll ，有的话会去触发事宜，以是 resize 和 scroll 事宜也是至少 16ms 才会触发一次，并且自带节流功能。判断是否触发了 media query更新动画并且发送事宜判断是否有全屏操作事宜实行 requestAnimationFrame 回调实行 IntersectionObserver 回调，该方法用于判断元素是否可见，可以用于关于节流和防抖，你可以阅读
JavaScript什么是防抖和节流？JavaScript什么是防抖和节流（下部）？往期更多性能方面文章链接：
JavaScript不得不知的图片Base64编码小知识JavaScript重文·大概你该知道浏览器输入 URL 后发生了什么？JavaScript前端性能优化之高性能滚动 scroll 及页面渲染优化JavaScript web优化系列之内存空间详细图解JavaScript web优化系列之实行高下文详细图解JavaScript web优化系列之浸染域链与闭包详细图解链接文章：
https://segmentfault.com/a/1190000019897234
