从url输入到页面渲染的过程

[chunbin1]

1. DNS解析

[chunbin1]

2. TCP三次握手

[chunbin1]

3. https握手

强缓存和协商缓存

强缓存

强缓存是根据返回头中的 Expires 或者 Cache-Control 两个字段来控制的，都是表示资源的缓存有效时间。

Expires 是 http 1.0 的规范，值是一个GMT 格式的时间点字符串，比如 Expires:Mon,18 Oct 2066 23:59:59 GMT 。这个时间点代表资源失效的时间，如果当前的时间戳在这个时间之前，则判定命中缓存。有一个缺点是，失效时间是一个绝对时间，如果服务器时间与客户端时间偏差较大时，就会导致缓存混乱。而服务器的时间跟用户的实际时间是不一样是很正常的，所以 Expires 在实际使用中会带来一些麻烦。 Cache-Control这个字段是 http 1.1 的规范，一般常用该字段的 max-age 值来进行判断，它是一个相对时间，比如 .Cache-Control:max-age=3600 代表资源的有效期是 3600 秒。并且返回头中的 Date 表示消息发送的时间，表示当前资源在 Date ~ Date +3600s 这段时间里都是有效的。不过我在实际使用中常常遇到设置了 max-age 之后，在 max-age 时间内重新访问资源却会返回 304 not modified ，这是由于服务器的时间与本地的时间不同造成的。当然 Cache-Control 还有其他几个值可以设置， 不过相对来说都很少用了：

no-cache 不使用本地缓存。需要使用协商缓存。 no-store直接禁止浏览器缓存数据，每次请求资源都会向服务器要完整的资源， 类似于 network 中的 disabled cache。 public 可以被所有用户缓存，包括终端用户和 cdn 等中间件代理服务器。 private 只能被终端用户的浏览器缓存。 如果 Cache-Control与 Expires 同时存在的话， Cache-Control 的优先级高于 Expires 。

[chunbin1]

4. 生成dom树

解析字节流的具体流程

1. 通过分词器将字节流转换为Token,大概分为文本TOKEN、Start Tag和End Tag，分别对应文本标签、开始标签和结束标签
2. HTML解析器维护了一个Token栈
   • 如果压入到栈中的是StartTag Token，HTML 解析器会为该 Token 创建一个 DOM 节点，然后将该节点加入到 DOM 树中，它的父节点就是栈中相邻的那个元素生成的节点。
   • 如果分词器解析出来是文本Token，那么会生成一个文本节点，然后将该节点加入到 DOM 树中，文本Token 是不需要压入到栈中，它的父节点就是当前栈顶 Token 所对应的 DOM 节点。
   • 如果分词器解析出来的是EndTag 标签，比如是EndTag div，HTML 解析器会查看 Token 栈顶的元素是否是 StarTag div，如果是，就将 StartTag div 从栈中弹出，表示该 div 元素解析完成。

[chunbin1]

5. js和css如何阻塞页面渲染 CSS 不会阻塞 DOM 的解析，但会阻塞 DOM 渲染。 JS 阻塞 DOM 解析，但浏览器会"偷看"DOM，预先下载相关资源。 浏览器遇到 Githubissues.
6. Githubissues is a development platform for aggregating issues.