前端技术基础（一）：浏览器相关

浏览器访问网站过程

1. 用户在浏览器地址栏中输入网址
2. 浏览器解析网址构建HTTP请求
   HTTP请求报文包括：请求行、请求头和请求体
3. 浏览器发起DNS解析请求，将域名转化为IP地址
   网址映射到服务器IP地址，指定了访问的服务器
4. 浏览器发送请求报文给到服务器
5. 服务器接收并解析报文
6. 服务器处理请求，并封装成HTTP响应报文
7. 服务器将响应报文发送给浏览器
8. 浏览器解析响应报文，重新渲染，在遇到新的需求时再次发送HTTP请求
9. 最终生成页面

浏览器渲染过程

Google Chrome Blink 引擎

1. 解析HTML构建DOM树
2. 解析CSS构建CSS规则树
3. 从DOM树中筛选出需要渲染出的结点，剔除掉不用渲染的结点（如：、display: none的结点），构建render树
4. 将CSS规则树与render树相结合，定位坐标和大小，确定是否换行、position、overflow、z-index等等……此过程称为reflow或layout
5. 调用操作系统底层API进行绘图

Firefox Gecko 引擎

1. 解析HTML构建内容槽（Content Sink）
2. 解析内容槽构成内容模型（Content Model），一个类似DOM树的东西
3. 解析CSS构建CSS规则树
4. 将CSS规则树与DOM树相结合，生成帧树（Frame Tree），一种类似render树的东西
5. reflow
6. 调用操作系统底层API进行绘图

IE Trident 引擎 不开源不可知

Reflow / Layout

浏览器reflow或layout操作可以在Google Chrome开发者工具中点击右上角的三个点 -> More tools -> Rendering 中勾选Painting flashing，刷新网页后观看整个过程。由此可见，渲染的操作是非常复杂的，因此DOM树的操作次数务必要尽量地少，在一次重新渲染中执行多个DOM结点的更新会比频繁进行DOM结点的更新性能高出许多。

HTTP Request & Response

Web程序中的HTTP通讯一般分请求报文和响应报文，两种报文各有三个部分：

1. 请求（响应）报文行
   请求行中一般包含请求方法（GET || POST）和通讯协议（HTTP / 版本号）
   响应行中一般包含HTTP状态码（200、302、404等）和通讯协议（HTTP / 版本号）
2. 请求（响应）报文头
   请求头中一般有：主机IP及端口号、Content-Type、浏览器版本等等
   响应头中一般有：服务器类型、Content-Type、时间、Cookies等等
3. 请求（响应）报文体
   GET方法由于内容被包含在URL中，一般没有报文体
   POST方法一般都需要有报文体