web 性能优化浅析

101 阅读1分钟

想要找到优化的方法,首先得了解当我们在浏览器输入URL到渲染出结果页面的过程中发生了什么。

image.png

image.png 了解清楚了这个过程,就可以根据不同的过程,进行针对性的优化。

请求阶段优化:
  1. 更快的DNS服务。但没必要,已经很快了。但是可以自己先配好hosts。

  2. tcp连接会有很多次,如果复用可以加快。tcp复用(后端keep-alive)

  3. 查询数据库时,SQL优化。加快查询速度。

响应阶段优化:
  1. 提高服务器带宽。

  2. 开启压缩算法Gzip.

渲染阶段优化:
  1. 优化CSS,合并重复选择器和属性。(不太靠谱)

  2. 先加载CSS再加载JS(根据用户习惯,先看后操作)

  3. 懒加载。第二屏先不加载,用户操作之后再加载。

  4. 预加载(用户大概率会进行的操作,预先加载完成)

  5. CSS/JS/图片加上HTTP缓存。(html不要缓存)

再次渲染阶段优化:
  1. 使用cache-control来设置css和js的缓存时间;
  2. 创建多个域名来同时请求多个文件。