web 性能优化

前言

这里提到的 web 性能是从用户层面来理解的， 即网站加载快就是性能优。

要说 web 性能优化，不妨来看看从用户输入网址到浏览器呈现页面，这其中经历了哪些流程，然后从流程入手，进行优化。

web 性能优化

当用户输入网址并进行访问时，浏览器会做出反应。

1. 缓存

有时候页面之前已经加载了，那么直接从缓存中读取即可。

2. DNS 查询

这个阶段，我们无法优化 DNS 查询的过程，但是我们可以优化 DNS 请求的数量，也就是在请求一些资源（CSS、JS、图片等）的时候，尽量将这些资源放在同一个域名下面，减少页面中请求域名的数量。

3. 建立 TCP 连接

这个阶段前端控制不到，不过还是可以用连接复用来优化。

4. 发送 HTTP 请求

• 合并文件，减少请求 尽量将 CSS、JS 等合并，以减少请求的数量。
• 减少 cookie 体积 浏览器在请求资源的时候会自动带上 cookie，所以精简 cookie 可以减轻网络压力。
• 将 CSS、JS、图片等静态资源放在 CDN 上，这样向 CDN 请求资源的时候就不会有 cookie。
• 缓存 设置缓存，从缓存中读取资源来代替从服务器请求资源，减轻网络压力。
• 增加域名 浏览器会限制同一域名同时请求的个数，域名设置的越多，能同时发出的请求数量也越多。与 DNS 查询那里冲突，根据具体情况进行取舍。

5. 浏览器接受响应

当服务器接到浏览器的请求之后，就会做出响应。这里服务器可以通过设置Cache-Control、ETag、Last-Modified等标签进行缓存控制。

服务器还可利用 gzip 来对资源进行压缩，然后发送给浏览器，浏览器接受到gzip资源之后再解压。利用这种方法减轻网络压力。

6. 接受 HTML 进行解析

DOCTYPE 必须有，不能错，以便浏览器快速准确正确地解析文件。

7. CSS 放在 HTML代码前部

在有些浏览器（比如 chrome ），当它解析到一个标签（比如 <h1>我是标签</h1>）时，它会检查 CSS 文件下载完成没，CSS 没下载完成它就不会渲染这个标签，所以最好还是讲 CSS 放在 HTML 代码的前部。这样先下载 CSS 文件，然后遇到一个标签就渲染一个，提升页面的呈现时间。

CSS 文件是下载并行，解析串行。可同时下载多个文件，至于具体可同时下载几个，不同的浏览器有不同的规定。

可通过文件合并来减少请求，也可通过增加域名的方式来提升同时可下载文件的个数，但会增加 DNS 请求，视具体情况做权衡。

8. JS 文件放 HTML 代码尾部

JS 会阻塞 HTML 的渲染，而且没有一开始没有 JS 也不影响用户浏览网站，所以将它放在尾部，等 HTML 渲染之后再来处理它，将网站尽快呈现给用户。

JS 文件也是下载并行，解析串行，所以也可通过合并文件减少请求或者增加域名来提升文件同时下载的个数。

以上就是我对 web 性能优化的一点点看法。