Web 性能优化
理解 Web 性能优化
对于Web的性能话题，从来都没有断绝过。因为这个东西没有最好，只有更好。而且往往也是业务的繁杂程度去决定优化程度的。作为一个前端开发者，性能是我们关注的指标。它直接影响着我们的用户，同时也影响着产品本身。
1. DNS 查询
DNS 查询就像电话簿，你在浏览器地址栏输入网址，通过 DNS 查询得到域名的真实 IP。
- 无法优化过程
- 可以优化数量，减少DNS查询
- 将所有的资源放到一个网站，这样可以减少 DNS 查询
因为每次 DNS 查询就是查找唯一域名的过程，那么域名越少，DNS 查询就越少，应该尽量将资源放在同一域名。
2. TCP 连接
- 经典的三次握手不展开赘述。
- TCP 连接复用（TCP Connection Reuse），在 HTTP 请求头中的 Connection 上加 keep-alive；
- HTTP2.0 多路复用
3. HTTP 请求及响应
3.1 Cookie
- 减少 Cookie 大小
每次请求都会带上对应的 Cookie，减少 Cookie 大小可以降低其对响应速度的影响：
- 去除不必要的 Cookie；
- 尽量压缩 Cookie 大小；
- 设置合适的过期时间。
3.2 静态资源使用无 Cookie 域名
静态资源一般无需使用 Cookie，可以把它们放在使用二级域名或者专门域名的无 Cookie 服务器上，降低 Cookie 传送的造成的流量浪费，提高响应速度。
3.3 添加 Expires 或 Cache-Control 响应头
HTTP/1.1 增加的 Cache-Control，它比 Expires 等好在其设定时间是相对的，避免了用户本地设置时间落后所造成的无法良好缓存的问题等。
- 静态内容：将 Expires 响应头设置为将来很远的时间，实现「永不过期」策略；
- 动态内容：设置合适的 Cache-Control 响应头，让浏览器有条件地发起请求。
3.4 配置 Etag
通过如 MD5 等加密算法，设置缓存体的 Etag 配合 3.3 的缓存时间使用，这样 Cache-Control 就可以设置较长时间（max-age 设置个十年半载 ），只要浏览器缓存中资源与源服务器中的资源 Etag 不一致，说明内容更新了，此时再下载新资源；Etag 匹配成功则直接响应 304，不用重复下载了用户自然感觉很快。
3.5 使用 Gzip
使用 Gzip 就是将 HTML、CSS、JS、XML、JSON 等资源进行 Gzip 高效压缩，减少资源体积那么下载就会更快。
Gzip 压缩通常可以减少 70% 的响应大小，对某些文件更可能高达 90%，比 Deflate 更高效。主流 Web 服务器都有相应模块，而且绝大多数浏览器支持 Gzip 解码。
从HTTP/1.1开始，客户端就有了支持压缩的 Accept-Encoding HTTP 请求头。
Accept-Encoding: gzip, deflate
服务器看到这个请求头，它就会用客户端列出的一种方式来压缩响应。web服务器通过 Content-Encoding 响应头来通知客户端。
Content-Encoding: gzip
需要注意的是，已经压缩过的内容如图片和PDF不要使用 Gzip，另外还有文件内容本身就很小，这些资源再使用 Gzip 反而会增加资源下载时间，浪费 CPU 资源，而且还可能增加文件体积。
HTTP 请求的另一个优化方案是增加同时请求的数量，浏览器会同时发送多个请求，但是同一域名最多同时发送 4~8 个（不同浏览器不同）请求，那么当资源过多时，可以采用增加域名的方法增加并发量。当然这一方法又与上述 DNS 查询的优化方案矛盾，真正使用的时候就需要权衡。
另外，既然一次只能发的请求有限，就应该将重要的需要优先展示的资源先请求
4. 浏览器解析渲染页面
- 响应完成后，浏览器下载完资源，就开始解析资源生成页面了。对于前端来说，这部分内容是完全需要我们去掌控的，
4.1 写对文档类型声明 <!DOCTYPE html>
“
<!DOCTYPE html>" 确保浏览器按照最佳的相关规范进行渲染，而不是使用一个不符合规范的渲染模式。
不写或写错文档类型声明，会浪费浏览器渲染页面的时间或引起错误排版。
4.2 使用外部 JavaScript 和 CSS
外部 JavaScript 和 CSS 文件可以被浏览器缓存，在不同页面间重用，也能降低页面大小。
当然，实际中也需要考虑代码的重用程度。如果仅仅是某个页面使用到的代码，可以考虑内嵌在页面中，减少HTTP请求数。另外，可以在首页加载完成以后，预先加载子页面的资源。
4.3 合并和压缩 JS/CSS 等文件
通过该方法减少页面所需资源，减少请求数量，加快响应时间。现在 webpack 打包工具都已经默认实现了。
4.4 减少 DOM 操作和使用高效的事件处理
- 缓存已经访问过的元素；
- 使用 DocumentFragment 暂存 DOM，整理好以后再插入 DOM 树；
- 操作 className，而不是多次读写 style；
- 避免使用 JavaScript 修复布局；
- 减少绑定事件监听的节点，如通过事件委托（当然现在浏览器功能强大，影响不大）；
- 尽早处理事件，在 DOMContentLoaded 即可进行，不用等到 load 以后。
4.5 图片优化
如何将图片变得又小又好
4.6 使用 CND
内容分发网络（Content delivery network 或 Content distribution network）是指一种透过互联网互相连接的计算机网络系统，利用最靠近每位用户的服务器，更快、更可靠地将音乐、图片、影片、应用程序及其他文件发送给用户，来提供高性能、可扩展性及低成本的网络内容传递给用户。
动态 CDN，使用离你最近的服务器；CDN 没有 Cookie，使用 CDN 可以减少 Cookie；CND 会自动合并脚本文件等，减少请求数量；当然，使用 CND 同时也增加了一个域名，增大了同时请求数量。
本文参考：
前端性能优化之雅虎35条军规
前端经典面试题: 从输入URL到页面加载发生了什么？
深入阅读从输入URL到页面加载的过程？如何由一道题完善自己的前端知识体系！
