说到Web性能优化,就是让网页展示得更快
从在网址输入baidu.com到页面展示搜索框,中间经历了什么?
一、当输入baidu.com后,第一件事做的是DNS查询,得到一个IP
这一步我们可以做的是:
- DNS服务优化,可以花钱买更多的DNS服务,或者买一些DNS加速器
- 配 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