Web性能优化

发表于 | 分类于

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的渲染，即如果有一个<script>标签在<h1>的上面，JS文件下载完以后才会开始解析<h1>
  2. 和CSS文件一样，可以使用这三个方法来优化：gzip、CDN 以及 合并文件。
  3. JS文件放在body最后，css放在head里。
  • 原理：
  1. CSS和JS大部分时候都会阻塞浏览器对页面的渲染，所以理论上我们应该把所有阻塞渲染的东西都放在HTML的后面。
  2. 但是在Chrome里，CSS就算放到最后，在没有下载完CSS之前它也不会去渲染页面，因此我们干脆把CSS放在最前面，让浏览器早一点去下载CSS。
  3. 而JS放到后面是因为：先把界面展示给用户，在用户移动鼠标做操作的这段时间里再去下载JS，这样体验更好。
    另外JS放在后面可以获取到节点，如果放在最前面，页面还没有渲染完，是获取不到任何节点的，放后面也不用专门监听onload事件了。

12. 其他优化技巧

使用CDN

  1. 什么是CDN：Content Delivery Network 内容分发网络。
    把一个很远的资源分布到全国(球)各地，让全国(球)各地的用户访问都很快。
  2. 原理：如果服务器距离用户很远，访问服务器的时间就会增加，最佳优化方法就是使用CDN。
    比如用户访问谷歌，直接访问美国的服务器就会很慢，但是CDN可以通过DNS查询，给用户动态的返回一个最近的服务器IP地址，从而减少用户与服务器的物理距离，减少请求和响应的时间。
  3. 作用：增加并发下载数；解除光速的限制。

延迟加载&预加载

懒加载，如果一页的内容有很长，可以优先下载解析第一屏的内容，剩下的内容当用户滚动到时再显示。用户没有看到的地方先不加载，还可以节省流量。
预加载，当用户还没有抵达下一页时，先提前下载好内容，当用户想要跳转到下一页时就会非常的快。

Audits测试

在Chrome的控制台，点击Audits，点击Run audits即可。