Web性能优化

---

title: Web性能优化
date: 2018-11-03 16:46:40
tags: [JavaScript]
categories: JavaScript

---

1. 浏览器会查看是否有缓存

除了html文件外尽量使用缓存。具体可见我的博客。

2. DNS查询

减少 DNS 查询，即尽量把所有的资源放在一个网站，这样的话只需要请求一个网站就可以下载所有的资源。

3. 建立TCP连接

1. TCP 连接复用，在 HTTP 协议里面加一个请求头：keep-alive，即第一次 TCP 连接建立以后不断开连接，第二次请求时复用上一次的连接。
2. 如果使用的是 http/2.0 ，它的连接复用率是更高的，即多路复用

4. 发送HTTP请求 后台处理

1. 减少 cookie 体积，使用CDN也可以减少 cookie 体积，因为CDN没有cookie，尽量使用CDN去获取静态资源，就可以达到减少cookie的目的
2. Cache-Control，加上这个响应头。如果资源已被缓存，直接就不发请求
3. 合并文件也可以减少http请求，比如将多个js文件合并成一个
4. 同时发送多个请求，比如浏览器会自动同时下载 css 和 js 文件（同时下载的文件数量和浏览器有关），比如 IE 可以一个域名下的文件同时下载4个，那么如果有8个文件，我们就可以放在两个域名下。
   这就和我们的第二点矛盾了，那么如何权衡呢？

权衡域名数量：

如果文件很少，比如只有两三个文件，那么就放在一个域名下就好了。
如果文件很多，比如10个css和10个js，如果都放在一个域名下，虽然 DNS 查询次数少了，但文件的下载需要排队，这样的情况下更好的方式是增加域名数量（一般通过 CDN 来增加域名数量），减少下载文件的排队时间，从而减少了请求的时间 。

5. 前端接收响应

1. 响应头ETag。如果服务器发现你的文件是最新的，它就不会给你发响应体，只给你发一个304，客户端就不会再重新下载文件了，直接使用上一次下载的文件。
2. gzip压缩。在服务器用gzip压缩文件，只要能压缩，它就会把文件打包一下再发给浏览器，这样文件大小会大幅减小，浏览器拿到gzip包（打包后的文件后缀是.gz）以后，再打开压缩包进行解析
   但是gzip也有缺点，浏览器解压gzip会耗费性能，所以这里也需要权衡：
   如果文件大小只有几Kb，那就没必要压缩了，如果文件比较大的话，gzip压缩后的优化效果是很显著的。

6. 响应接收完成 得到HTML文件

7. 浏览器解析文件，查看DOCTYPE选择以什么方式解析网页

DOCTYPE不能写错，也不能不写，如果不写，浏览器会先用各种解析方式预读一下，最后选择一个看起来正确的方式正式解析，这样时间也浪费了，渲染方式还有可能是错的。

8. 逐行解析HTML

9. 标签渲染

现代浏览器渲染标签一般有两种方式：

1. 看到一个标签，立刻在页面中渲染该标签，之后解析完 css 文件后再重新渲染一次（比如IE）
2. 看到一个标签，记在DOM树中，等所有CSS下载完毕再来渲染该标签（比如Chrome）

这一部分非要优化的话，那就是尽量减少标签数量，不过其实影响不大。

10. 并行下载CSS文件

1. 开始下载CSS文件
2. 继续往下看还有没有CSS，如果有，同时下载第二个CSS
3. 一个域名最多同时下载 4-8个 CSS文件（IE 4个，Chrome 8个，具体数量由浏览器而定）
4. 注意：CSS文件下载是并行的，解析是串行的
   在Chrome中，CSS文件会阻塞HTML渲染，即第9步所说，需要下载完所有的css文件才会开始渲染页面。
5. 优化：CSS文件优化，可以使用gzip，可以合并CSS文件，如果文件数量多，也可以增加域名数量（即使用CDN）

11. 并行下载JS文件，串行解析

1. JS一定会阻塞HTML的渲染，即如果有一个