http协议
HTTP是在网络上传输HTML的协议，用于浏览器和服务器的通信。
术语解释
-
GET读取请求，从服务器获取数据。GET / HTTP/1.1
GET表示一个读取请求，将从服务器获得网页数据，/表示URL的路径，URL总是以/开头，/就表示首页，最后的HTTP/1.1指示采用的HTTP协议版本是1.1。目前HTTP协议的版本就是1.1，但是大部分服务器也支持1.0版本，主要区别在于1.1版本允许多个HTTP请求复用一个TCP连接，以加快传输速度。
-
Host请求域名Host: www.sina.com.cn
表示请求的域名是www.sina.com.cn。如果一台服务器有多个网站，服务器就需要通过Host来区分浏览器请求的是哪个网站。
-
Response Headers响应数据HTTP/1.1 200 OK 成功响应 404 Not Found 未找到 500 Internal Server Error 服务器内部错误 Content-Type: text/html 响应内容（文字视频or音乐图片）
流程
-
1、浏览器向服务器发送http请求
方法GET 请求获取Request-URI所标识的资源 POST 在Request-URI所标识的资源后附加新的数据路径URL域名Host头指定其他其他相关的Header，如果是post请求，还包括一个包含用户数据的body
-
2、服务器向浏览器返回HTTP响应
响应代码状态码 描述 范例 1xx 指示信息--表示请求已接收，继续处理 2xx 成功--表示请求已被成功接收、理解、接受 200 ok 3xx 重定向--要完成请求必须进行更进一步的操作 304 4xx 客户端错误--请求有语法错误或请求无法实现 404 Not Found 5xx 服务器端错误--服务器未能实现合法的请求 500 服务器内部出错 响应类型Content-Type 和其他相关header决定响应内容一般会携带一个包含响应内容的body，网页的html源码即在其中 3、浏览器渲染阶段
当浏览器获取到了服务器响应回的html，便会开始进行渲染，在渲染过程中，会分析dom树中的内容，如果遇到还需要向服务器请求其他资源（如cssjsimg等），便会再次发出http请求（重复步骤1、2）。
WEB的http协议是简单直接的请求-响应模式，一个http请求只处理一个资源。
因为http协议具备扩展性，因此大多数网站会在html中连入其他服务器的资源，以分散压力，站点之间的互联，就是World Wide Web
概念
-
HTTP URL
http://host[":"port][abs_path]状态码 描述 范例 http/https 通过何种协议定位网络资源 host 合法的Internet主机域名或者IP地址 port 端口号，缺省端口80 abs_path 指定请求资源的URI，如果未给出浏览器直接以'/'进行访问 http 和 https
http是HTTP协议运行在TCP之上。所有传输的内容都是明文，客户端和服务器端都无法验证对方的身份。
https是HTTP运行在SSL/TLS之上，SSL/TLS运行在TCP之上。所有传输的内容都经过加密，加密采用对称加密，但对称加密的密钥用服务器方的证书进行了非对称加密。此外客户端可以验证服务器端的身份，如果配置了客户端验证，服务器方也可以验证客户端的身份。
参考资料
浏览器渲染
流程
-
1、解析树（DOM）
DOM TreeHTML/SVG/XHTML
CSS Rulecss规则
Javascript脚本 通过DOM API和CSSOM API来操作DOM Tree和CSS Rule Tree -
2、渲染层（Rendering Tree）
DOM Tree + CSS Rule = Rendering Tree
将CSS Rule一一对应上Rendering Tree上的每个Element（DOM节点），形成Frame。
计算每个Frame（节点）的位置，进行layout（布局）或者reflow（回流）。
3、调用操作系统Native GUI的API绘制
解析
- DOM解析
每个标签都会向下解析，svg也是一个独立的标签 - CSS解析（对象绑定）
CSS Rule Tree 是依着Dom Tree 进行匹配的，涉及到css Selector写法
css rule tree 和 dom tree结合，会生成一个Style Context Tree，是讲css rule 节点匹配到dom节点的层，webkit浏览器下，直接把style对象存储在了dom结点上。
渲染（gui api绘制）
1、计算css样式
2、构建Render Tree
3、Layout 定位
-
4、paint 绘制
Repaint元素内重绘，但是不会影响到其他元素，比如说变换颜色Reflow回流，会影响到其他元素，遇到这种情况时，会从html的root frame开始递归，依次重新计算，重新计算的时候，会重复渲染的全部步骤，如果中间遇到其他结点的reflow，结果就是你懂得，因为在移动端，应当尽量减少reflow的过程。
reflow
-
名称 描述 Initial 初始化 Incremental js操作DOM TREE Resize 元素或者屏幕的大小重定义 StyleChange css属性变换 Dirty 几个Incremental的reflow发生在同一个frame的子树上属性变换 成因
名称 描述 Initial 初始化 Incremental js操作DOM TREE Resize 元素或者屏幕的大小重定义 StyleChange css属性变换 Dirty 几个Incremental的reflow发生在同一个frame的子树上属性变换 -
导致reflow的一些因素
1、发生场景
- resize
- 更改字体
- 添加移除stylesheet
- 改变内容
- 触发css伪类
- 更改classname
- 操作DOM节点
- 动态设置样式
- 获取一个必须经过计算的尺寸值时，比如访问offsetWidth、clientHeight或者其他需要经过计算的CSS值。（offsetTop, offsetLeft, offsetWidth, offsetHeight scrollTop/Left/Width/Height clientTop/Left/Width/Height getComputedStyle()）
-
减少reflow的方法
1、缓存样式，通过classname添加
2、离线dom修改| 名称| 描述 | ||-----|:----------|:--------|
| documentFragment 操作DOM | 缓存对象，N次创建，1次写入 | |
| clone更新 | 理论同上，在dom树外进行操作，最后才进行插入 | |
| 隐藏后修改 | 隐藏元素（display:none）不会触发reflow，修改好之后呈现即可 | |3、修改层级较低的dom
4、动画元素使用fixed或absoult的position
