组成
浏览器
渲染引擎:
Trident, Gecko, Presto, Webkit, Blink
流程
- **DNS解析(迭代查询）
优化：
- 减少dns请求
- dns预解析
- httpdns防劫持
- dns负载均衡**
DNS
- 浏览器以一个随机端口进入到网卡，进入TCP／IP协议栈，然后可能经过防火墙过滤，
- **建立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
- 发送HTTP请求（****GET 或者 POST 等，不常用的还有 PUT 和 DELETE 、****HEAD****、****OPTION****以及 TRACE ）：静态资源缓存，can，服务器负载均衡，服务器缓存，
- 服务器给浏览器响应一个****301****永久重定向响应
- 浏览器跟踪重定向地址
- 服务器处理请求：nginx->应用服务器
- 服务器返回一个http响应
- 客户端渲染：jscss位置，减少体积，
渲染流程
- 加载HTML内容，处理HTML标记，构建DOM树
- 加载css，处理css标记，构建CSSOM树
- 将DOM和CSSOM合并成一个渲染树
- Layout：CPU根据渲染树来布局，计算及节点几何信息
- Paint：GPU根据每个Layer位置绘制点，以渲染层缓存
- Composition：处理多层渲染层Layers之间的关系，合成一个页面
其中： - CSS 被视为阻塞渲染的资源，这意味着浏览器将不会渲染任何已处理的内容，直至 CSSOM 构建完毕。存在阻塞的 CSS 资源时，浏览器会延迟 JavaScript 的执行和 DOM 构建。
- 当浏览器遇到一个 script 标记时，DOM 构建将暂停，直至脚本完成执行
css优化：
- <link href="print.css" rel="stylesheet" media="print">设置了媒体类型，会加载但不会阻塞
js优化：
- async 与 defer 属性对于 inline-script 都是无效的
- defer 属性：载入 JavaScript 文件时不阻塞 HTML 的解析，执行阶段被放到 HTML 标签解析完成之后。
- async属性：表示异步执行引入的 JavaScript，如果已经加载好，就会开始执行，加载的 JavaScript 依然会阻塞 load 事件。多个 async-script 的执行顺序是不确定的
- 使用 document.createElement 创建的 script 默认是异步async的
dns优化
- 减少 DNS 请求
- 缩短 DNS 解析路径
- dns预解析 dns－prefetch
- localDns：缓存挟持，转发
- HttpDns：
客户端直接访问HttpDNS接口，获取业务在域名配置管理系统上配置的访问延迟最优的IP。客户端向获取到的IP后就向直接往此IP发送业务协议请求。
CDN功能：
- 调度分配主机；负载均衡，根据 IP，网络流量情况分配最靠近，网络最通畅的 CDN 节点实现加速
- 反向代理
- 静态缓存；缓存静态资源（html，图片，音乐，视频等）
- 防止 DDOS 攻击
网友评论