一、一次完整页面请求所发生的的事情
过程:
1.url解析
- 地址解析和编码
- HSTS
- 缓存解析
2.DNS域名解析
- 先进行本地DNS服务器解析,递归解析:
- 如果本地解析不到,再去域名服务器解析,迭代解析:
3.TCP三次握手建立连接:
4. 发送HTTP请求,服务器处理请求,返回响应结果
5.TCP四次挥手断开连接
5.浏览器渲染
二、前端性能优化
前端性能优化主要从上述过程中的关键节点进行优化,这也叫CRP。
1.缓存优化
客户端在向服务端发起请求之前要先检查是否有缓存,如果有缓存的话,直接将缓存渲染到页面,如果没有的话再发起请求。
(1)缓存位置
- Service Worker:浏览器独立线程进行缓存
- Memory Cache : 内存缓存
- Disk Cache:硬盘缓存
- Push Cache:推送缓存(HTTP/2中的)
一般情况下文存储在浏览器缓存中,数据存储在本地。
- 打开网页,地址栏输入地址: 查找 disk cache 中是否有匹配,如有则使用,如没有则发送网络请求。
- 普通刷新 (F5):因为 TAB 并没有关闭,因此 memory cache 是可用的,会被优先使用(如果匹配的话),其次才是 disk
cache。 - 强制刷新 (Ctrl + F5):浏览器不使用缓存,因此发送的请求头部均带有 Cache-control:
no-cache(为了兼容,还带了 Pragma: no-cache),服务器直接返回 200 和最新内容。
(2)硬盘与内存
- 硬盘读取速度慢,存储内容多;
- 内存读取速度快,存储内容少。
(3)浏览器缓存
浏览器缓存分为强缓存和协商缓存
强