现代浏览器渲染过程

回顾一下 http 请求过程：

输入网址并回车 -> 浏览器开始干活，会检测内外网是否联通
DNS 域名解析, 转成 ip, 经过透明设备（路由器等）到达机房，机房可能只有一个入口，那么就需要通过反向代理，代理到对应的机器上
浏览器发送 http 请求
服务器处理请求
服务器返回 html 响应；
浏览器解析渲染页面

浏览器渲染过程

Navigation Timing 是由 W3C 建立的流程，帮助衡量网络性能。把 http 请求过程中的每一步都设置了断点，当执行到断点的时候，对应的浏览器里面有一套 api（performance.timing)

W3C 创建的流程是一个建议性的东西，并不要求浏览器实现，但是现代浏览器基本都实现了。

这是性能优化的基本手段。这张图从 url 输入之后到页面展示的过程，通过 api 可以探查到这些步骤，返回出来的是运行的时间。

如何测试网络速度

第一阶段

本地处理阶段

Prompt for unload

是在做准备工作，把正在展示的页面卸载掉。

点击一个新链接，把当前页面先卸载，才能展示新页面
如果没有正在打开的页面，如新开一个 tab，那么直接从fetch Start阶段开始。

Redirect && Unload

Redirect 是看页面需不需要做重定向（本地重定向 -> 判断 url 本地数据库里面有没有做缓存，在处理过程中，它同时在做 unload，把前面页面释放掉）

RedirectStart 和 RedirectEnd 对应的是重定向开始和结束的时间。
同样，unload 也对应了 start 和 end，前一个网页在处理的时间点和被处理完成之后的时间点；

App cache

准备工作处理完后，看是否需要从本地拿缓存，需要的话就在 app cache 中拿缓存，一旦从这里拿了东西后，就直接返回渲染了。就不再走网络部分了。这就是强制缓存。

第二阶段

网络处理阶段

DNS

通过 DNS 解析查找 ip 地址，同样也有开始和结束时间：

domainLookupStart: 查询域开始
domainLookupEnd: 查询域结束

这两块是可以被优化的点，这属于网络质量，不由前端管。
如果 DNS 服务器延迟很高，在这里就会耽误很多时间

TCP

通过 DNS 解析后，需要建立 TCP 连接，这里有三个时间节点：

connectStart: 开始建立连接时间，即握手开始
secureConnectionStart: 这一步是可选的，建立安全连接，即 TLS
connectEnd: 这一步把第三个握手包发送过去。如果这里用的是加密连接，则最后一步是加密连接握手完毕。

Request && Response

建立连接后，就开始请求了。

请求发出去的时间节点为: requestStart，这里没有请求结束的时间。因为数据的收发需要经过网络传输，一般是按服务器接收到最后一个字节来算的时间。所以只有服务器才知道，浏览器拿不到。

发出去后，需要等待服务器响应，当浏览器接收到响应的时候，就开始了 responseStart，直到接收完最后一个字节时，responseEnd 也完成了。

第三阶段

浏览器处理阶段

Processing

当数据接收完后，要先进行 domLoading（载入 dom），开始 Dom Tree 渲染；
首先要解析 dom 树，解析完成后，进入 domInteractive，就开始解析 dom 了，这时候浏览器还需要处理页面上引用的资源，图片、样式、js 等
解析加载完成后，接着进入 domContentLoaded。此时页面只有一个骨架，在这个时间点内需要处理 js、css
dom 树处理完毕后，进入 domComplete

onload

如果页面绑定了 onload 时间，就进入 onload 时间点

loadEventStart: load 开始的时间
loadEventEnd: load 结束的时间

到这里页面就处理完毕了 👏

优化流程

DNS 解析速度
TCP 连接速度
Response 返回速度
Processing 阶段，优化页面
onload 阶段，决定什么时候初始化

前端主要优化点在 4 和 5

DNS

DNS 相关知识

CDN 与集群

CDN 要与 DNS 进行配合，是网络优化的一种。

CDN 就是数据分发网络，客户端可以从不同的服务器拿到数据;

但是不同的服务器的 IP 是不一样的，这时候就要配合 CDN 去分级管理(不同的地区返回不一样的 IP 地址)。

左图非 CDN，右图 CDN

概念

CDN 的全称是 Content Delivery Network，即内容分发网络。

CDN 是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。

CDN 的关键技术主要有内容存储和分发技术。

# 现代浏览器渲染过程

# 浏览器渲染过程

# 第一阶段

# Prompt for unload

# Redirect && Unload

# App cache

# 第二阶段

# DNS

# TCP

# Request && Response

# 第三阶段

# Processing

# onload