浏览器相关

1. 跨标签页通信

在同一个浏览器下，可打开多个tab页，每个tab页相对是独立的，如何实现tab页之间的通信呢。

case1: 两个需要交互的tab页面具有依赖关系

如A页面通过window.open('') 打开页面B； 或者是iframe嵌套页面B。可通过HTML5的window.postMessage()完成通信。

case2: 打开的页面属于同源策略

两个不相关的tab页，可通过localstorage共享值，通过键值对的形式存储，每个域名下可存储5M数据。我们要适当的使用localstorage，必要的数据才能存储在localstorage中，因为localstorage的数据是被写入磁盘的，也就意味着，每次读取localstorage中的数据时，是从硬盘驱动上读取这些字节。读写硬盘对性能影响较大。第二它是同步的，读取存储一次都会对性能有影响。

优化：一个key值存储10个对象的读取速度比10个key值分别存储1个对象要快。从localStorage读取数据的最佳策略是使用尽可能少的键值，存储尽可能多的数据。

参考：dev.to/rdegges/ple…

case3: 两个互不相关的tab页面通信

页面A与页面B之间通过一个iframe作为桥接，具体实现自行搜索下。

2.浏览器架构

浏览器主要是有

1. 用户界面 -- 页面上的操作菜单，
2. 浏览器引擎 -- 在用户界面和呈现引擎之间传送指令
3. 渲染引擎 -- 负责显示请求的内容
4. 网络 -- 如http请求
5. 用户界面后端 -- 
6. JavaScript解释器 -- 用于解析和执行JavaScript代码
7. 数据存储 -- 浏览器需要在硬盘上保存各种数据，如cookie，localstorage。新的HTML规范定义了“网络数据库”。

  这几个部分构成。

想了解浏览器的机制，主要是最近在做页面优化相关的工作。以chrome浏览器为例，chrome浏览器是多进程多线程的浏览器