浏览器相关的一些小记

从输入 url 到得到 html 的详细过程

1. 浏览器根据 DNS 服务器得到域名对应的 IP 地址
2. 向这个 IP 的服务器发送 http 或 https 请求
3. 服务器收到、处理并返回请求
4. 浏览器得到返回的内容

TCP 是运输层的面向连接的可靠的运输协议，HTTP 是纯粹的文本协议，它是规定了使用 TCP 协议来传输文本格式的一个应用层协议。TCP 协议是一条双向的通讯通道，HTTP 在 TCP 的基础上，规定了 Request-Response 的模式。而 HTTPS 是使用加密通道来传输 HTTP 的内容。但是 HTTPS 首先与服务端建立一条 TLS 加密通道。TLS 构建于 TCP 协议之上，它实际上是对传输的内容做一次加密，所以从传输内容上看，HTTPS 跟 HTTP 没有任何区别。

HTTP 格式：

1. request：

   • request line

     • method
       (HTTP 请求执行的操作类型：GET、POST、HEAD 等)
     • path
     • version

   • head

     accept: text/html,application/xhtml+xml,application/xml;...（接收格式）accept-encoding: gzip, deflate, br（编码方式）accept-language: zh-CN,zh;q=0.9（语言类型）cache-control: max-age=0（控制缓存时效性）cookie: 客户端存储的 cookie 字符串
     upgrade-insecure-requests: 1
     user-agent:（浏览器标识）

   • body
     主要用于提交表单场景。（application/json、multipart/form-data、text/xml 等）

2. response：

   • response line

     • version
     • status code
     • status text
       （200：客户端请求成功；301&302：永久性与临时性跳转；403：无权限，服务器拒绝提供服务；404：请求资源不存在；500：服务器发生不可预期的错误。503：服务器当前不能处理客户端的请求。）

   • head

     connection:（连接类型，keep-alive 表示复用连接）cache-control: public, max-age=86400（缓存控制）content-length: 334（内容长度）content-encoding: gzip（内容编码方式）content-type: text/html; charset=utf-8（内容类型）date: Wed, 11 Sep 2019 10:17:59 GMT（日期）server: Tengine（服务端软件类型）keep-alive：（保持连接不断时需要的信息）status: 200
     vary: Accept-Encoding
     date: Tue, 10 Sep 2019 17:15:33 GMT（服务器日期）etag: 16151473764464638424
     expires: Wed, 11 Sep 2019 17:15:33 GMT 过期时间，）

   • body
     body 就是要给浏览器解析、渲染的内容

/*
   1. 得到服务器的响应内容，解析代码和构建 DOM 树，此时只有节点和属性，不包含任何的
样式信息。2. 接下来是 CSS 计算，把 CSS 规则应用到 DOM 树上，为 DOM 结构添加显示相关属性的
过程。3. 然后是排版。最基本的排版方案是正常流排版，它包含了顺次排布和折行等规则，这是一
个跟印刷排版类似的排版方案，也跟我们平时书写文字的方式一致，所以我们把它叫做正常流。同时浏览器又可以支持元素和文字的混排，元素被定义为占据长方形的区域，还允许边框、边
距和留白，这个就是所谓的盒模型。4. 最后就是根据这些样式信息和大小信息，为每个元素在内存中渲染它的图形，并且把它绘
制到对应的位置。位图操作部分，这包括了渲染、合成和绘制三个部分。渲染过程把元素变成
位图，合成把一部分位图变成合成层，最终的绘制过程把合成层显示到屏幕上。*/