浏览器访问网站过程
- 用户在浏览器地址栏中输入网址
- 浏览器解析网址构建HTTP请求
HTTP请求报文包括：请求行、请求头和请求体 - 浏览器发起DNS解析请求，将域名转化为IP地址
网址映射到服务器IP地址，指定了访问的服务器 - 浏览器发送请求报文给到服务器
- 服务器接收并解析报文
- 服务器处理请求，并封装成HTTP响应报文
- 服务器将响应报文发送给浏览器
- 浏览器解析响应报文，重新渲染，在遇到新的需求时再次发送HTTP请求
- 最终生成页面
浏览器渲染过程
Google Chrome Blink 引擎
- 解析HTML构建DOM树
- 解析CSS构建CSS规则树
- 从DOM树中筛选出需要渲染出的结点，剔除掉不用渲染的结点（如：、display: none的结点），构建render树
- 将CSS规则树与render树相结合，定位坐标和大小，确定是否换行、position、overflow、z-index等等……此过程称为reflow或layout
- 调用操作系统底层API进行绘图
Firefox Gecko 引擎
- 解析HTML构建内容槽（Content Sink）
- 解析内容槽构成内容模型（Content Model），一个类似DOM树的东西
- 解析CSS构建CSS规则树
- 将CSS规则树与DOM树相结合，生成帧树（Frame Tree），一种类似render树的东西
- reflow
- 调用操作系统底层API进行绘图
IE Trident 引擎 不开源不可知
Reflow / Layout
浏览器reflow或layout操作可以在Google Chrome开发者工具中点击右上角的三个点 -> More tools -> Rendering 中勾选Painting flashing，刷新网页后观看整个过程。由此可见，渲染的操作是非常复杂的，因此DOM树的操作次数务必要尽量地少，在一次重新渲染中执行多个DOM结点的更新会比频繁进行DOM结点的更新性能高出许多。
HTTP Request & Response
Web程序中的HTTP通讯一般分请求报文和响应报文，两种报文各有三个部分：
- 请求（响应）报文行
请求行中一般包含请求方法（GET || POST）和通讯协议（HTTP / 版本号）
响应行中一般包含HTTP状态码（200、302、404等）和通讯协议（HTTP / 版本号） - 请求（响应）报文头
请求头中一般有：主机IP及端口号、Content-Type、浏览器版本等等
响应头中一般有：服务器类型、Content-Type、时间、Cookies等等 - 请求（响应）报文体
GET方法由于内容被包含在URL中，一般没有报文体
POST方法一般都需要有报文体