首先要搞清楚用户访问网站时，经历了哪些步骤，我们才好从每一步中寻找可以优化的地方。
步骤 及 优化方法
- 查看缓存
当访问某个页面时，浏览器会先检查本地有没有缓存。
方法：如果有缓存，就使用本地缓存的页面；如果没有缓存，在访问服务器。
- DNS 查询
浏览器访问某网站的服务器，要先进行 DNS 查询。也就是，拿到地址栏中的地址，去 DNS 服务器查询相应的 数字IP 地址，然后使用 数字IP 地址去访问该网站的服务器。
方法：减少 DNS 查询，即，尽量减少域名。
举例来说，如果 a.css 放在 A 网站，b.css 放在 B 网站，那么就要进行两次 DNS 查询；我们可以把 a.css 和 b.css 放在同一个网站，这样就只要进行一次 DNS 查询。
- 建立 TCP 连接
方法：TCP 连接连接复用。
即，在 HTTP 协议中加上一个请求头 keep-alive，服务器就会保持连接，当第二次请求时，就复用之前的那个连接。
另外，如果使用的是 HTTP/2.0 版本，连接复用率是更高的（多路复用）。
- 发送 HTTP 请求
HTTP 请求有 4 部分：
第一部分：请求行，不能优化。
第二部分：请求头。方法1：不要滥用 Cookie；减少 Cookie 体积。
第三部分：回车。
第四部分：请求的内容。方法2：在请求头中设置 Cache-Control，让浏览器使用本地的缓存文件。
方法3：合并CSS和JS文件，减少请求数。
方法4：增加域名同时请求多个文件。
同一域名可以同时请求多个 CSS 和 JS。但是不同的浏览器存在着差别：IE 浏览器最多只能同时请求 4 个文件，Chrome 浏览器最多可以同时请求 8 个文件。
由于 IE 只能从同一域名同时请求 4 个文件，所以我们可以将文件放在不同域名，那么 IE 就可以从不同域名，同时请求超过 4 个文件，那么请求速度不就加快了吗。
但是这与上面第 2 步冲突了。第 2 步提到，要减少域名，这里又说把文件放到不同的域名，那就要增加域名。
那么这里，我们就要做个“权衡”，具体情况具体分析：
如果文件多，可以放到不同域名，以此减少浏览器请求的时间（多域名）；
如果文件少，就可以放到一个域名，以此减少 DNS 查询时间（少域名）。
- 接收响应
方法1：使用 ETag。
ETag 可以做到，当服务器发现你请求的文件是最新的(通过MD5值比对)，就不给你再发送文件，而是发送 304，让你使用上次发送过的文件。
方法2：使用 Gzip。
服务器将 html、css、js 等文件压缩，浏览器接收压缩后的文件。
当然如果文件小，就不用 Gzip。
因为浏览器在进行解压时，也会耗费时间。
- 接收完成，解析 HTML
解析 HTML 的时候，有以下步骤：
查看 DOCTYPE，根据 DOCTYPE 选择使用 html 或者 xml 等
方法1：DOCTYPE 标签不能写错，也不能不写。
因为这样会导致浏览器解析 HTML时间变才, 甚至解析出错。
然后开始逐行解析
方法2：不要写太多无用的标签。
看到标签，浏览器会干嘛呢？Chrome 浏览器不会立即渲染该标签，它会等所有 CSS 加载完了，再渲染该标签。
方法3：把 CSS文件 放到 head 标签，这样可以尽早渲染页面。
- 下载解析CSS 和 JS
当浏览器碰到 CSS 和 JS 时，就会下载 CSS 或 JS，然后解析。
下载是并行的，而解析是串行的。
方法1：把 CSS文件 和 JS 文件放到 CDN（内容分发网络）。
文件放到 CDN的好处:
- 增大同时下载的数量。
- 如果客户端与服务器距离较远，放到 CDN可以减少通信过程中的时间损耗。
- 访问CDN不需要Cookie，从而减少了Cookie体积。
方法2：JS文件 放到 body 标签最后。
这样可以尽早显示页面，因为解析 JS 会阻塞页面渲染，同时还可以让 JS 获取到所以DOM节点。
其他优化方法
延迟加载（懒加载）
先下载第一屏内容，后面内容根据用户动作延迟加载。
避免空 src 的图片，可以写成 <img src="about:blank"/>；
避免使用 @import 引入 CSS 文件。
图片压缩
好的无损压缩图片工具
第一：Tinypng
地址：https://tinypng.com/
最大限度的做到对画质无损的进行压缩，支持对Jpg和Png的压缩。
第二：Compressor.io
地址：https://compressor.io/compress
Compressor支持JPG，PNG，GIF，SVG多种格式的照片。
第三：Kraken.io
工具地址：https://kraken.io/web-interface
Kraken可以把Zip中的文件一次性导入到工具中进行压缩，同时它支持不同的格式同时进行压缩。
第四：Giftofspeed
JPG压缩：https://www.giftofspeed.com/jpg-compressor/
Png压缩：https://www.giftofspeed.com/png-compressor/
在Giftofspeed，你可以输入你的网址，然后这个工具会建议你对图片进行优化，这样你就可以发现很多问题。
第五： OptimiZilla
地址：http://optimizilla.com/
这个工具可以批量上传和批量压缩图片，一次可以上传20张图片；
同时他的压缩程度大小可以有你自己来调节，而且是尽量的不改变画质。
总结优化方法
- 减少 DNS 查询，即，尽量减少域名。
- TCP 连接连接复用。
- 不要滥用 Cookie；减少 Cookie 体积。
- 在请求头中设置 Cache-Control，让浏览器使用本地的缓存文件。
- 合并CSS和JS文件，减少请求数。
- 文件多时，增加域名同时请求多个文件。
- 使用 ETag。
- 使用 Gzip压缩文件。
- DOCTYPE 标签不能写错，也不能不写。
- 不要写无用的标签，减少标签数。
- 把 CSS文件 放到 head 标签，这样可以尽早渲染页面。
- JS文件 放到 body 标签最后。
- 把 CSS文件 和 JS 文件放到 CDN。
- 使用延迟加载（懒加载）。
- 避免空 src 的图片，可以写成 <img src="about:blank"/>。
- 避免使用 @import 引入 CSS 文件。
- 尽量压缩图片。
最后
怎么看某个网站有没有优化好呢？
控制台 -> Audits -> Run audits 。
网友评论