1.按下回车键
键盘控制器在得到码值13之后,将其编码用于传输。物理键盘或虚拟键盘传输按键信息。服务器监听键码值,把这个按键字符发送给窗口管理器,当前窗口使用有关图形API把文字打印在输入框内。
2.解析URL
浏览器通过 URL 使用的HTTP协议与请求的资源页地址。当协议或主机名不合法时浏览器传给默认的搜索引擎,转换非 ASCII 的 Unicode 字符(含有不是 a-z, A-Z,0-9, - 或者 . 的字符)。浏览器会对主机名部分非ASCII的字符使用 Punycode 编码。
3.检查 HSTS 列表
浏览器检查自带的“预加载 HSTS(HTTP严格传输安全)”列表,判断使用 HTTPS 或 HTTP 协议发送请求(可要求浏览器只使用 HTTPS 发送请求)。
4.DNS 查询
检查域名在浏览器缓存中?检查本地操作系统 hosts?发送 ARP(地址解析协议)广播子网内查询?查找本地 DNS 服务器?如果本地 DNS 服务器没有找到结果,它会发送一个递归查询请求,一层一层向高层 DNS 服务器做查询,直到查询到起始授权机构把结果返回。
5.使用套接字
当浏览器得到了目标服务器的 IP 地址、端口号,这个请求首先被交给传输层,在传输层请求被封装成 TCP segment(目标端口会被加入头部),然后送往网络层(再加入一个 IP 头部),这个 TCP packet 进入链路层(再加入 frame 头部),TCP 封包已经准备好。通过以太网、WiFi、蜂窝方式进行传输,最终封包会到达管理本地子网的路由器。继续经过自治区域的边界路由器,最终到达目标服务器。
6.TLS 握手(安全传输层协议)
客户端发送一个 ClientHello 消息到服务器端,消息中同时包含了它的 Transport Layer Security (TLS) 版本,可用的加密算法和压缩算法。
服务器端向客户端返回一个 ServerHello 消息,消息中包含了服务器端的TLS版本,服务器所选择的加密和压缩算法,以及数字证书认证机构(Certificate Authority,缩写 CA)签发的服务器公开证书,证书中包含了公钥。客户端会使用这个公钥加密接下来的握手过程,直到协商生成一个新的对称密钥。
客户端根据自己的信任CA列表,验证服务器端的证书是否可信。如果认为可信,客户端会生成一串伪随机数,使用服务器的公钥加密它。这串随机数会被用于生成新的对称密钥。
服务器端使用自己的私钥解密上面提到的随机数,然后使用这串随机数生成自己的对称主密钥。
客户端发送一个 Finished 消息给服务器端,使用对称密钥加密这次通讯的一个散列值。
服务器端生成自己的 hash 值,然后解密客户端发送来的信息,检查这两个值是否对应。如果对应,就向客户端发送一个 Finished 消息,也使用协商好的对称密钥加密。
从现在开始,接下来整个 TLS 会话都使用对称秘钥进行加密,传输应用层(HTTP)内容。
7.HTTP 服务器请求处理
服务器根据浏览器发送的 HTTP 头部包含的信息(例如包含了 Etag 头部),可以判断出浏览器缓存的新鲜度,返回这样的响应: 200 或 304。
在解析完 HTML 之后,浏览器和客户端会重复上面的过程,直至 HTML 页面引入的所有资源全部都获取完毕。
HTTPD 接收请求,拆分请求的参数(HTTP 请求方法、域名、请求路径/页面),URL 重写模块,如果匹配上的话,服务器会按照规则重写这个请求,根据请求信息获取相应的响应内容,服务器会使用指定的处理程序分析处理这个文件(例如PHP)。
8.浏览器处理资源文件
当服务器提供资源之后(HTML,CSS,JS,图片等),浏览器会执行解析(HTML,CSS,JS)和渲染(构建 DOM 树 -> 渲染 -> 布局 -> 绘制)。
HTML 与 CSS 解析
- HTML 解析器对 HTML 文档进行解析,生成解析树(以 DOM 元素以及属性为节点的树)。HTML 解析算法,主要包含了两个阶段:标记化和树的构建。
解析完成后开始加载其他资源,此时文档为可交互 ,然后解析推迟模式的脚本,之后文档状态为完成,浏览器触发load事件。 - 根据CSS词法和句法 分析CSS文件和 style 标签包含的内容以及 style 属性的值,每个CSS文件都被解析成一个样式表对象(StyleSheet object),这个对象里包含了带有选择器的CSS规则,和对应CSS语法的对象。
页面渲染
- 通过DOM节点树创建“渲染树”,并计算每个节点的各个CSS样式值;
- 通过子节点属性值构建每个节点的坐标;
- 利用到最近页面渲染时计算出来的各个值,计算出各个层的最终位置,由GPU异步渲染,帧被送到Window Server。图形驱动软件会把任务分成多个部分,这样可以充分利用 GPU 强大的并行计算能力,用于在渲染过程中进行大量的浮点计算。
后期渲染与用户引发的处理
渲染结束后,浏览器根据某些时间机制运行 JavaScript 代码或与用户交互(在搜索栏输入关键字获得搜索建议)。也可能改变网页的内容和布局,产生又一轮渲染与绘制。