浏览器应用相关

浏览器组成

用户界面：如地址输入框，前进返回，打开历史记录等

网络：浏览器开启网络线程发送请求或下载资源文件的模块

渲染引擎：解析DOM文档和CSS规则并将内容排版到浏览器中显示出有样式的界面

UI后端：用于绘制基本浏览器窗口内控件，按钮，输入框等

JavaScript解释器：浏览器解释和执行JavaScript脚本的部分，如V8引擎

JavaScript引擎：可以在用户界面和渲染引擎之间传送指令或在客户端本地读写数据，是浏览器各个部分互相通信的核心

持久化数据存储：cookie，localStorage

URL->网页内容过程

对url地址进行分析判断，按照协议方式来处理，调用引擎中处理url的方法，分析并加载url地址

dns解析，获取ip地址，连同浏览器的cookie，userAgent等信息向网站目的ip发出请求

进行HTTP协议会话，浏览器客户端向Web服务器发送报文

进入Web服务器处理请求

进入部署好的后端应用找到对应的请求处理逻辑

服务器处理请求并返回响应报文，如果浏览器访问过该页面，缓存上有对应资源会与服务器最后修改记录对比，一致则返回304，否则返回200

浏览器下载HTML文档或从本地缓存读取文件内容

浏览器根据下载接收到的HTML文档解析结构建立DOM树，并根据HTML中的标记请求下载指定的MIME类型文件，同时设置缓存等内容

页面开始解析渲染DOM，CSS根据cssrule解析并结合DOM树进行布局和绘制渲染，JavaScript根据DOM API操作DOM，并读取浏览器缓存、执行事件绑定，页面展示整个过程完成。

浏览器内核

Tredent内核 IE，360，搜狗

Gecko内核  Netscape，Firefox，Seamonkey

Prestio内核 Opera7以上

Webkit内核 Safari，Chrome

Blink内核（Webkit的一个分支） Opera 一些移动端应用内嵌

渲染引擎工作流程

解析HTML构建DOM树

构建渲染树

渲染树布局阶段

绘制渲染树

数据持久化存储技术

HTTP文件缓存：基于HTTP协议的浏览器端文件级缓存机制，在文件重复请求的情况下，浏览器根据HTTP响应的协议头信息判断是从服务器端请求文件还是从本地读取文件。

LocalStorage：HTML5的一种本地缓存方案，核心api有如localStorage.setItem（key，value），localStorage.getItem(key)等。

SessionStorage:与LocalStorage功能类似，但是会在浏览器关闭时自动清空，由于不能进行客户端持久化数据存储，使用场景较少。

Cookie：为了辨明用户身份或Session跟踪而存储在用户浏览器端的数据，一般会通过HTTP请求发送到服务端。Cookie也分Session Coockie和持久性Cookie两种，要注意，被设置为HttpOnly的Cookie记录只能通过HTTP请求头发送到服务端进行读写操作，这样可以避免服务器端的Cookie记录被前端JavaScipt修改，保证了服务端验证Cookie的安全性。

WebSQL： 是浏览器端用于存储较大数据的缓存机制，不过只有较新版本的Chrome浏览器支持该机制。

IndexDB：可以在客户端存储大量结构化数据并且能够在这额数据上使用索引进行检索的一套API。

Application Cache

cacheStorage：在ServiceWorder规范中定义的，可用于保存每个ServiceWorker声明的Cache对象。