常见浏览器内核的种类。
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