这是我参与8月更文挑战的第6天，活动详情查看：8月更文挑战

分析过程

要分析一个网站有哪些过程需要进行优化，那么我们首先应清楚一个网站在加载过程中经历了哪些过程，按照顺序大致分为以下几点：

读取缓存
DNS 解析
TCP 连接
发送 HTTP 请求
服务器处理请求并返回 HTTP 报文
浏览器解析渲染页面

文件下载并行，解析串行

浏览器请求CSS文件时，遇到多个CSS文件会同时下载，但是解析过程是依次执行的。JS文件也是一样的过程

文件阻塞HTML渲染

举个栗子，Chrome看见一个h1标签并不会立即去渲染，而是会等到CSS完全下载完毕之后再去渲染这个h1标签。如果CSS文件是在这个h1标签的前面，那么就必须等到这个CSS文件下载并解析完成后才会将h1标签显示到页面中，这就是CSS阻塞HTML渲染。（注意：IE是看见h1标签就直接渲染到页面上，下载并解析CSS之后，如果发现h1的样式发生变化就再渲染一次h1）

因此，CSS文件可能会阻塞HTML的渲染，是否阻塞取决于浏览器。而JS文件则不同，如果<script/>标签放在h1标签之前，那么在JS文件请求下载完成之前是不会渲染这个h1标签的，即JS文件一定会阻塞HTML的渲染。

优化过程

下面列举了一些常见的优化过程：

优化DNS查询

减少DNS查询，尽量减少域名。如果存在多个请求，尽量将多个请求放在一个域名内。

优化TCP连接

在请求头中开启 keep-alive，在 HTTP 协议中加上一个请求头 keep-alive，那么服务器就会尽量去复用这个TCP连接（TCP连接复用）
HTTP/2.0 多路复用

优化HTTP请求

优化请求第二部分（请求头）：减少 cookie 体积，不滥用 cookie，因为每个请求都会带上cookie，因此减少cookie的体积就相当于优化了请求。
使用 Cache-Control，Cache-Control 可以让浏览器在一定时间内不访问服务器（不发请求），直接使用本地的缓存作为响应。
浏览器会并行下载资源，即同时请求多个CSS或JS文件（不需要我们做，浏览器自己会做）
增加域名以增大并行下载资源的数量。以IE为例，一个域名最多可以同时请求4个CSS文件，那么使用两个域名就能同时请求8个域名（增加域名的方式是使用CDN）。
尽量使用CDN来请求静态资源
减少请求数量，将多个CSS或JS文件合并为一个文件。

注意：上文中“增加域名以增大并行下载资源的数量”这一点和优化DNS查询中“尽量减少域名”相互矛盾，那么这时候就需要我们做一个权衡，即分情况讨论：

文件很少的时候就没必要增加域名数量

文件很多的时候才增加域名数量

优化接收响应过程

设置ETag，使用ETag发起304请求。HTTP 304 Not Modified 表示无需再次传输请求的内容，也就是说可以使用缓存的内容。
使用gzip压缩工具对文件进行压缩，大幅度减少文件体积。
- 缺点是解压时需要耗费浏览器CPU。
- 因此这里又需要我们做权衡，看文件大小决定是否使用gzip。

优化DOCTYPE

一定要写并写正确的DOCTYPE，因为如果你不写或者写错，浏览器会依次使用HTML或XML的格式去尝试解析文本类型，这样既耗费时间又耗费性能。

CSS 文件和 JS 文件的优化措施

使用 CDN

使用 CDN 的两个好处：

增加并行下载数
解除光速的限制

注意外链 CSS 文件和 JS文件的放置顺序

<link rel="stylesheet" href="/style.css">要放在 head 标签中，<script>标签要放在body最后

CSS文件放在head中原因是为了尽早下载css文件，防止CSS阻塞HTML的渲染，防止用户提前看到看到样式不完整的页面。
JS文件放在body最后面的原因：
- 为了尽早显示页面（前面说了JS文件也同样会阻塞HTML的渲染）
- 能够获取到节点（JS放前面会阻塞HTML渲染，这样就会导致获取不到DOM节点）

Web 性能优化常见方法总结