http 请求完成，浏览器获取到了 html，开始解析并且渲染 HTML

总体流程

浏览器内核拿到内容后，渲染步骤：

1
2
3
4
5
6

1.解析HTML，构建DOM树
2.解析CSS，生成CSS规则树
3.合并DOM树和CSS规则，生成render树
4.布局render树（Layout/reflow），负责各元素尺寸、位置的计算
5.绘制render数据（paint），绘制页面像素信息
6.浏览器会将各层的信息发送给GPU,GPU会将各层合成（composite），显示在屏幕上

头部的区别

从 http1.0 到 http1.1，改进了很多头部

• http1.0 的缓存控制：
  • Pragma：严格来说，它不属于专门的缓存控制头，但是它设置了「no-cache」可以让本地强缓存失效（相当于一个配置项）
  • Expires：服务器配置，属于强缓存，用来控制在规定的时间之前，浏览器不会发出请求，而是直接使用本地缓存，注意，Expires 一般对应服务器端时间，如 Expires：Fri，30 Oct 2001 12:22:12
  • If-Modifien-Since/Last-Modifed:这个、两个是成对出现的，属于协商缓存的内容，其中浏览器的头部是「If-Modified-Since」，而服务端的是「Last-Modified」，他的作用是，在发起请求时，如果「If-Modified-Since」和「Last-Modified」匹配， 那么代表服务器资源并未改变，因此服务器不会返回资源实体，而是只返回头部，通知浏览器可以使用本地缓存。「Last-Modified」-> 文件最后修改的时间，只能精确到 1s
• http1.1 的缓存控制：
  • Cache-Control：缓存控制头部，有 no-cache、max-age 等多种取值。
  • Max-Age： 服务器配置的，用来控制强缓存，在规定的时间之内，浏览器无需发送请求，直接使用本地缓存，注意「Max-Age」是「Cache-Control」的值，不是独立的头部，例如「Cache-Control:max-age=3600」,而且它的值是绝对时间，由服务器计算
  • If-None-Match/E-tag:这两个是成对出现的，属于协商缓存的内容，其实浏览器头部的是「If-None-Match」，而服务端的是「E-tag」，同样，发出请求后， 如果「If-None-Match」和「E-tag」匹配，则代表内容未变，通知浏览器使用本地缓存，和「Last-Modified」不同，「E-tag」更精确，它是类似于指纹一样的东西，基于「FileEtag INode Mtime Size」生成的，也是只要文件变，指纹就会变，而且没有任何精度限制

http2.0

HTTP/2，即超文本传输协议 2.0，是下一代 HTTP 协议。是互联网工程任务组的 httpbis 小组开发进行。在开放互联网上 HTTP 2.0 将只用于 https://网址，而 http:// 网址将继续使用 HTTP/1，目的是在开放互联网上增加使用加密技术，以提供强有力的保护去遏制主动攻击。DANE RFC6698 允许域名管理员不通过第三方 CA 自行发行证书

今天有些忙，晚上二刷完「流浪地球」才回家，继续整理下昨天接下来的「Cookie」

Cookie

什么是 Cookie？

Cookie, 网站为了辨别用户身份、进行 session 跟踪而存储在用户本地终端的数据（加密），规范为 RFC6265

通俗的来说，就是「浏览器缓存」，在网站上来用帮助客户端和服务器校验身份，或者交换数据（通信），结合服务器的 seesion 使用。

昨天看到请求头部分，整理一些通用请求头，下面整理下常用的响应/请求头

常用的请求头部

1
2
3
4
5
6
7
8
9
10
11
12
13

Accept：接受类型，标示浏览器支持的MIME类型（对标服务器返回的Centent-Type）
Accept-Encoding： 浏览器支持的压缩类型，比如gzip等，超过类型不能接受
Content-Type：客户端发送出去实体内容的类型
Cache-Control：指定请求和响应遵循的缓存机制，如no-cache、no-store
If-Modified-Since：对应服务器的Last-Modified,用来匹配看文件是否变动，精确到1s
Expires：缓存控制，在这个时间内不会请求，直接使用缓存（http1.0，而且是服务器端时间）
Max-age： 代表资源在本地缓存多少秒，有效时间不会请求，而是使用缓存（http1.1）
If-None-Match：对于服务端的ETag，用于匹配文件内容是否改变（非常精确）（http1.1）
Cookie：有cookie并且同域访问时会自动带上（www.baidu.com/a.baidu.com非同域名！）
Host：请求的服务器URL
Origin：最初请求是从哪里发起的（精确到端口），Origin比Referer更遵循隐私
Referer：该页面的来源URL（适用于所有类型的请求，会精确到详细页面，csrf通常会拦截该字段）
User-Agent：用户客户端的一些必要信息

浏览器如何发起一个完整的 HTTP 请求？

答:==应用层==的发送 http 请求，==DNS==将域名解析成 IP，然后到==传输层==通过==三次握手==建立==TCP/IP 请求==，再到==网络层==的 ip 寻址，再到==数据链路层==的封装成帧，最后到==物理层==的利用物理介质传输。

五层因特网协议栈

浏览器的 URL 的构成

• portocal，协议头，例如：http、ftp 等
• host，主机域名或 IP 地址
• port，端口号
• path，目录路径
• query，即查询参数
• fragment，即#后的 hash 值，一般用来定位到某个位置

‘http://note.youdao.com/?user=admin&query=123#page=top' = portocal(https://) + host(www.jianshu.com) + port(80) + path(/p/d31f494ad6f5) + query(?user=admin&query=123) + fragment(#page=top)

最近看到很多大牛开始跳槽，我自己想了想，就现有技术而言，万一公司把我开了，好像自己也没地方可以去了，因为自己太菜了，我之前在网上看到一段话，也送给现在正在踌躇是否继续专研技术还是转管理的人

「在公司红利期的成就和业绩并不能代替你现有的成绩，想想自己跳出红利平台和舒适区是否还能继续你的辉煌？」