首先我们应当明确的是使一个网站加载得很快得过程才叫做Web性能优化，而让一个网站的服务器的CPU占用少叫做服务器性能优化
一、分析过程
要分析一个网站有哪些过程需要进行优化，那么我们首先应清楚一个网站在加载过程中经历了哪些过程，具体内容参见文章 一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？
文件下载并行，解析串行
浏览器请求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的渲染。
二、优化过程
image.png
一些优化过程如下：
- 优化DNS查询
减少DNS查询，尽量减少域名。如果存在多个请求，尽量将多个请求放在一个域名内。 - 优化TCP连接
- 在请求头中开启 keep-alive
在 HTTP 协议中加上一个请求头 keep-alive，那么服务器就会尽量去复用这个TCP连接（TCP连接复用） - HTTP/2.0 多路复用
- 在请求头中开启 keep-alive
- 优化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
image.png
使用 CDN 的两个好处：
1. 增加并行下载数
2. 解除光速的限制 -
<link rel="stylesheet" href="/style.css">要放在 head 标签中，<script>标签要放在body最后。
CSS文件放在head中原因是为了尽早下载css文件，防止CSS阻塞HTML的渲染，防止用户提前看到看到样式不完整的页面。
JS文件放在body最后面的原因：- 为了尽早显示页面（前面说了JS文件也同样会阻塞HTML的渲染）
- 能够获取到节点（JS放前面会阻塞HTML渲染，这样就会导致获取不到DOM节点）
-
网友评论