WEB性能优化

129 阅读3分钟

说到Web性能优化,就是让网页展示得更快

从在网址输入baidu.com到页面展示搜索框,中间经历了什么?

一、当输入baidu.com后,第一件事做的是DNS查询,得到一个IP

这一步我们可以做的是:

  1. DNS服务优化,可以花钱买更多的DNS服务,或者买一些DNS加速器
  2. 配 hosts,在hosts直接把IP配好,就没有DNS查询过程了

二、发起Http请求、html请求、css请求、js请求,每一个请求都需要tcp连接,就有四个tcp连接

优化方法是让后端做tcp复用(keep-alive)

三、百度收到请求后,会去查询数据库

可以优化查询数据库的时间,就是 SQL 优化

四、百度查询到数据后,返回给用户

这一步优化返回的速度,时间=下载量/速度,所以就是减少下载量或者提高速度,速度分为服务器的下载速度和用户的带宽,只能优化的是服务器的下载速度,总的来说就是 压缩Gzip、提高server 带宽(花钱)

五、页面展示HTML

这一步可以优化CSS和JS,从用户的习惯去分析,用户先看页面展示,再用鼠标或键盘操作,所以应该先把用户看的加载出来,再加载鼠标键盘操作

先加载css,再加载js

先不加载第二屏(懒加载)

先加载第二页的内容,用户点击第二页的时候就能很快的显示(预加载)

六、用户关掉浏览器,再打开网页,

浏览器会自动缓存DNS,一段时间内不会删除

后端可以将css,js,图片,http 加缓存,速度会比第一次快,cache-control

七、用户在请求一个页面的时候,会请求很多文件,比如1个html,10个css,20个js,理论上要发31个请求,这怎么优化?

如果31个一起发时间就短了,可是这样会消耗服务器带宽,用户带宽。所以每个浏览器都会做限制,一个域名最多同时发10个/8个/4个请求。

假如是10个,那么就需要发4次,这样时间就太长了

优化方案是 加域名,a域名发1个html请求,b域名发10个css请求,c域名发10个js请求,c域名然后再发10个js请求,这样就只需两次请求的时间

用来加速的域名叫cdn域名

加域名会增大DNS事件,一个域名会增加一个DNS事件,上面的例子增加了3个域名,就增加了4个DNS事件,这时就需要做权衡,对比DNS增加的时间和加域名节约的时间,一般情况下DNS很快,不会增加多少时间

八、加了域名后,可以实现cookie-free

cookie会随着请求上传,假设cookie有4k,那么31个请求就有124k的cookie

因为cookie只会跟着主域名走,那么加了域名后,所有的css和js就不用上传4k的cookie,就实现了cookie-free