前端性能优化基础知识

浏览器工做的详细流程图

缓存相关

1. Prompt for unload 卸载已经存在的页面 释放占用的内存 提醒unload
2. redirect 本地的重定向，先从本地找，本地找不到再请求服务器 真正的开始unload
3. App cache 操做浏览器的缓存

网络相关

4. DNS 查询服务器IP地址 CDN 优化

5. TCP 与服务器连接TCP 长链接优化，复用TCP

6. Request 优化服务器

7. Response 压缩 gzip

处理数据

8. Processing 解析文档 生成dom树，绑定事件
9. onLoad 加载

DNS详解

• 域名系统 将域名（文本）转化为IP
• 顶级域名 后缀 .com/.com.cn 加了前缀 www.就变成了二级域名 www是万维网
• 域名服务器
  

  

  • Root 解析 .com
  • TLD 解析 google.com
  • Name 解析 www.google.com
• 域名资源记录

TCP三次握手与四次挥手

• TCP协议模型详解

  

  

• 三次握手

  1. 客户端发起 调用connect() 发送指令 SYN seq顺序号 TCP连接时候是把大数据包拆分红小数据包传输的，因此就有了标识的顺序号，以便进行组装
  2. 远程服务器祯听 listen() ACK应答顺序号 服务器也有本身的请求号
  3. 客户端应答服务器的顺序号加1返回服务器

• 屡次数据传输

• 四次分手

  1. 客户端 调用close() 发送指令 FIN 顺序号 应答号
  2. 服务器 响应客户端请求
  3. 服务器应答以后 调用close() 发送 FIN
  4. 客户端进行确认已断开 服务器多一次是为了先响应，避免客户端超时

CDN

• 选择离得最近的服务器

缓存机制

× Etag/If-None-Match策略

• Etag: web服务器响应请求时，告诉浏览器当前资源在服务器的惟一标识
• If-None_Match:当资源过时时（使用Cache-Control标识的max-age），发现资源是Etage声明，则再次向web服务器请求时带上头If-None-Match（Etag的值）。web服务器收到请求后发现有头If-None-Match则与被请求资源的相应校验串进行比对，决定返回200或者304 × last-Modified/If-Modified-Since策略
• Last-Modified:标示这个响应资源的最后修改时间。web服务器在响应请求时,告诉浏览器资源的最后修改时间。
• If-Modified-Since:当资源过时时(使用Cache-Control标识的max-age),发现资源具备Last-Modified声明,则再次向web服务器请求时带上头 If-Modified-Since,表示请求时间。web服务器收到请求后发现有头If-Modified-Since 则与被请求资源的最后修改时间进行比对。若最后修改时间较新,说明资源又被改动过,则响应整片资源内容(写在响应消息包体内),HTTP200;若最后修改时间较旧,说明资源无新修改,则响应HTTP 304 (无需包体,节省浏览),告知浏览器继续使用所保存的cache。