http协议and浏览器渲染原理

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 服务器内部出错

  详细响应码查阅 : wiki w3c

  响应类型 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之上。所有传输的内容都经过加密，加密采用对称加密，但对称加密的密钥用服务器方的证书进行了非对称加密。此外客户端可以验证服务器端的身份，如果配置了客户端验证，服务器方也可以验证客户端的身份。

参考资料

http协议简介

---

浏览器渲染

流程

• 1、解析树（DOM）

  DOM Tree HTML/SVG/XHTML
  CSS Rule css规则
  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

参考资料

渲染树构建、布局及绘制

浏览器的渲染原理简介

how browser work