Browser: Internet communication
You need to know the browser works just its general process.
Come together to think about. A browser in the end is how it works.
In fact, browser implementers, they do, is to become a web page URL displayed on a screen.
This process is this:
- First of all browsers use the HTTP protocol or HTTPS protocol requests a page from the server;
- The request back to the parsed HTML code to construct the DOM tree;
- DOM tree CSS properties calculation;
- Finally, the elements one by one according to CSS rendering attributes, to obtain the bitmap memory;
- An optional step is the synthesis of the bitmap, which would greatly increase the speed of the subsequent draw;
- After synthesis, and then drawn onto the screen.
Before beginning a detailed description, to establish a perceptual knowledge. We start from the back requests HTTP, this process is not generally imagined to do the next step done, but a pipeline.
Requested to return from HTTP, produces a stream of data, the subsequent DOM tree construction, CSS calculation, rendering, compositing, drawing, is a step as much as possible before the output stream processing: i.e. completely without waiting for the previous step end, it begins to process the output of the previous step, so we browse the web, will see the gradual emergence of the page.
The first is part of the network of communications:
HTTP protocol
The browser first thing to do is to take back the data based on the URL, retrieve data using HTTP protocol (actually there before the DNS query process, but not explained in detail here started.)
HTTP standards developed by the IETF.
HTTP protocol is based on TCP protocol appears on the TCP protocol is, the TCP protocol is a two-way communication channel, HTTP TCP on the basis of the provisions of the Request-Response model. This mode of communication must be decided by the browser first launched.
HTTP is purely text-based protocol, it provides an application layer protocol using TCP protocol to transfer text format.
HTTP protocol format
HTTP Method (Method)
首先来介绍一下 request line 里面的方法部分。这里的方法跟我们编程中的方法意义类似，表示我们此次 HTTP 请求希望执行的操作类型。方法有以下几种定义：
- GET
- POST
- HEAD
- PUT
- DELETE
- CONNECT
- OPTIONS
- TRACE
浏览器通过地址栏访问页面都是 GET 方法。表单提交产生 POST 方法。
HEAD 则是跟 GET 类似，只返回请求头，多数由 JavaScript 发起
PUT 和 DELETE 分别表示添加资源和删除资源，但是实际上这只是语义上的一种约定，并没有强约束。
CONNECT 现在多用于 HTTPS 和 WebSocket。
OPTIONS 和 TRACE 一般用于调试，多数线上服务都不支持。
HTTP Status code（状态码）和 Status text（状态文本）
常见的状态码有以下几种：
-
1xx：临时回应，表示客户端请继续。
-
2xx：请求成功。
- 200：请求成功。
-
3xx：
-
301&302：永久性与临时性跳转。
-
304：跟客户端缓存没有更新。
-
-
4xx：客户端请求错误。
- 403：无权限。
- 404：表示请求的页面不存在。
- 418：It’s a teapot. 这是一个彩蛋，来自 ietf 的一个愚人节玩笑。（超文本咖啡壶控制协议）
-
5xx：服务端请求错误。
- 500：服务端错误。
- 503：服务端暂时性错误，可以一会再试。
对我们前端来说：
- 1xx 系列的状态码是非常陌生的，原因是 1xx 的状态被浏览器 http 库直接处理掉了，不会让上层应用知晓。
- 2xx 系列的状态最熟悉的就是 200，这通常是网页请求成功的标志，也是大家最喜欢的状态码。
- 3xx 系列比较复杂，301 和 302 两个状态表示当前资源已经被转移，只不过一个是永久性转移，一个是临时性转移。实际上 301 更接近于一种报错，提示客户端下次别来了。
304 又是一个每个前端必知必会的状态，产生这个状态的前提是：客户端本地已经有缓存的版本，并且在 Request 中告诉了服务端，当服务端通过时间或者 tag，发现没有更新的时候，就会返回一个不含 body 的 304 状态。
HTTP Head (HTTP 头)
HTTP 头可以看作一个键值对。原则上，HTTP 头也是一种数据，我们可以自由定义 HTTP 头和值。不过在 HTTP 规范中，规定了一些特殊的 HTTP 头。
在 HTTP 标准中，有完整的请求 / 响应头规定。
- Request Header：
- Response Header：
HTTP Request Body
HTTP 请求的 body 主要用于提交表单场景。实际上，http 请求的 body 是比较自由的，只要浏览器端发送的 body 服务端认可就可以了。一些常见的 body 格式是：
- application/json
- application/x-www-form-urlencoded
- multipart/form-data
- text/xml
我们使用 html 的 form 标签提交产生的 html 请求，默认会产生 application/x-www-form-urlencoded 的数据格式，当有文件上传时，则会使用multipart/form-data。
HTTPS
在 HTTP 协议的基础上，HTTPS 和 HTTP2 规定了更复杂的内容，但是它基本保持了 HTTP 的设计思想，即：使用上的 Request-Response 模式。
HTTPS 有两个作用：
- 确定请求的目标服务端身份，
- Ensure that data transmission is not an intermediate network node eavesdropping or tampering.
HTTP 2
HTTP 2 is an upgraded version of HTTP 1.1.
HTTP 2.0 biggest improvement two things:
-
Supports server-side push
Push server can send the first request to the server, the early part of the push to the client, which the client into the cache, which can avoid the order to bring the client requests a high degree of parallelism, resulting in performance problem.
-
Support TCP connection multiplexing.
TCP connection multiplexing, the use of the same TCP connection to transfer multiple HTTP requests, avoiding the overhead of TCP three-way handshake connection is established, and when first built a small TCP connection transmission window.
