【计网修炼手册】浏览器

常见浏览器内核的种类。

Trident：IE6、IE7、IE8、IE9、IE10、360 浏览器和猎豹浏览器。
Gecko：firefox 浏览器。
Blink：opera 浏览器。
Webkit：sarfari 和 chrome 浏览器。

浏览器内核中的线程。

内核主要分成五部分：

GUI 渲染线程：负责渲染浏览器界面，解析 HTML，CSS，构建渲染树，布局和绘制等。当界面需要重绘或回流时，该线程就会执行。注意，GUI 渲染线程与 JS 引擎线程是互斥的，

JS 引擎线程：解析和执行 javascript。

事件触发线程：归属于浏览器而不是 JS 引擎，用来控制事件循环。

定时器触发线程：setInterval 与 setTimeout 所在线程。浏览器定时计数器并不是由 JavaScript 引擎计数的，因此通过单独线程来计时并触发定时（计时完毕后，添加到事件队列中，等待 JS 引擎空闲后执行）。

异步 http 请求线程：在 XMLHttpRequest 在连接后是通过浏览器新开一个线程请求，将检测到状态变更时，如果设置有回调函数，异步线程就产生状态变更事件，将这个回调再放入事件队列中，再由 JavaScript 引擎执行。

浏览器的渲染流程。

接收到文档后，渲染引擎会对 HTML 文档进行解析生成 DOM 树、对 CSS 文件进行解析生成布局树；同时执行页面中的 JavaScript 代码；最终根据 DOM 树和布局树，计算样式生成渲染树，渲染树中，只会包含即将显示在页面中的元素及其样式信息（如 head 元素、display 为 hidden 的元素就不会包含在渲染树中）；根据渲染树需要进行布局来计算每个元素在页面上的位置；

接下来渲染引擎开始进行绘制（paint），这一步分为若干阶段：
1、根据渲染树绘制每层的各个元素。
2、栅格化绘制出的图像（将渲染树中的节点转换成屏幕上的实际像素）
3、显示在屏幕上。
每一层的绘制是由浏览器来完成的；最后的合成是由 GPU 来完成；而栅格化过程取决于浏览器的设置，chrome 默认开启 GPU 栅格化，否则由 CPU 进行。

浏览器从输入请求到呈现页面的过程。

1、URL 解析
2、DNS 查询
3、TCP 连接
4、处理请求
5、接受响应
6、渲染页面

localstorage、sessionstorage 的区别，以及使用场景。

localStorage：生命周期是永久的，关闭页面或浏览器之后 localStorage 中的数据也不会消失。localStorage 除非主动删除数据，否则数据永远不会消失（只会存储 string）。

sessionStorage：生命周期是在仅在当前会话下有效。sessionStorage 引入了一个“浏览器窗口”的概念，sessionStorage 是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是 sessionStorage 在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage 也是不一样的。

使用方法：

window.localStorage
window.sessionStorage

API：

setItem(key, value) // 保存数据，以键值对的方式储存信息。
getItem(key) // 获取数据，将键值传入，即可获取到对应的 value 值。
removeItem(key) // 删除单个数据，根据键值移除对应的信息。
clear() // 删除所有的数据
key(index) // 获取某个索引的 key