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

浏览器访问网站过程

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、30二、404等）和通信协议（HTTP / 版本号）
2. 请求（响应）报文头
   请求头中通常有：主机IP及端口号、Content-Type、浏览器版本等等
   响应头中通常有：服务器类型、Content-Type、时间、Cookies等等
3. 请求（响应）报文体 GET方法因为内容被包含在URL中，通常没有报文体 POST方法通常都须要有报文体