浏览器相关流程及优化

组成

浏览器

渲染引擎:

Trident, Gecko, Presto, Webkit, Blink

流程

1. **DNS解析(迭代查询）

优化：

• 减少dns请求
• dns预解析
• httpdns防劫持
• dns负载均衡**

DNS

2. 浏览器以一个随机端口进入到网卡，进入TCP／IP协议栈，然后可能经过防火墙过滤，
3. **建立TCP链接：

优化：

用https／http2**

tcp

• 第一次握手：客户端A将标志位SYN置为1,随机产生一个值为seq=J（J的取值范围为=1234567）的数据包到服务器，客户端A进入SYN_SENT状态，等待服务端B确认；
• 第二次握手：服务端B收到数据包后由标志位SYN=1知道客户端A请求建立连接，服务端B将标志位SYN和ACK都置为1，ack=J+1，随机产生一个值seq=K，并将该数据包发送给客户端A以确认连接请求，服务端B进入SYN_RCVD状态。

• 第三次握手：客户端A收到确认后，检查ack是否为J+1，ACK是否为1，如果正确则将标志位ACK置为1，ack=K+1，并将该数据包发送给服务端B，服务端B检查ack是否为K+1，ACK是否为1，如果正确则连接建立成功，客户端A和服务端B进入ESTABLISHED状态，完成三次握手，随后客户端A与服务端B之间可以开始传输数据了

  
  
  tcp

3. 发送HTTP请求（****GET 或者 POST 等，不常用的还有 PUT 和 DELETE 、****HEAD****、****OPTION****以及 TRACE ）：静态资源缓存，can，服务器负载均衡，服务器缓存，
4. 服务器给浏览器响应一个****301****永久重定向响应
5. 浏览器跟踪重定向地址
6. 服务器处理请求：nginx->应用服务器
7. 服务器返回一个http响应
8. 客户端渲染：jscss位置，减少体积，

渲染流程

1. 加载HTML内容，处理HTML标记，构建DOM树
2. 加载css，处理css标记，构建CSSOM树
3. 将DOM和CSSOM合并成一个渲染树
4. Layout：CPU根据渲染树来布局，计算及节点几何信息
5. Paint：GPU根据每个Layer位置绘制点，以渲染层缓存
6. Composition：处理多层渲染层Layers之间的关系，合成一个页面
   其中：
7. CSS 被视为阻塞渲染的资源，这意味着浏览器将不会渲染任何已处理的内容，直至 CSSOM 构建完毕。存在阻塞的 CSS 资源时，浏览器会延迟 JavaScript 的执行和 DOM 构建。
8. 当浏览器遇到一个 script 标记时，DOM 构建将暂停，直至脚本完成执行

css优化：

1. 设置了媒体类型，会加载但不会阻塞

js优化：

1. async 与 defer 属性对于 inline-script 都是无效的
2. defer 属性：载入 JavaScript 文件时不阻塞 HTML 的解析，执行阶段被放到 HTML 标签解析完成之后。
3. async属性：表示异步执行引入的 JavaScript，如果已经加载好，就会开始执行，加载的 JavaScript 依然会阻塞 load 事件。多个 async-script 的执行顺序是不确定的
4. 使用 document.createElement 创建的 script 默认是异步async的

dns优化

1. 减少 DNS 请求
2. 缩短 DNS 解析路径
3. dns预解析 dns－prefetch
4. localDns：缓存挟持，转发
5. HttpDns：
   客户端直接访问HttpDNS接口，获取业务在域名配置管理系统上配置的访问延迟最优的IP。客户端向获取到的IP后就向直接往此IP发送业务协议请求。

CDN功能：

1. 调度分配主机；负载均衡，根据 IP，网络流量情况分配最靠近，网络最通畅的 CDN 节点实现加速
2. 反向代理
3. 静态缓存；缓存静态资源（html，图片，音乐，视频等）
4. 防止 DDOS 攻击