浏览器
浏览器架构
单进程架构--多进程架构--面向服务架构
面向服务架构可以理解为多进程架构的升级版，其具有了耦合性更低，服务更聚合，拓展性高的优点。
问题
1.为什么会有单进程架构 2.面--会替代多--吗
两者都与内存等资源有关。 因为早期资源不足且昂贵，所以使用单进程节约资源，资源不断丰富，使得架构不再重视节约资源，而是追求更高的效率。目前，大多数机器上的chrome为面向服务架构，但资源跟不上的机器会运行多进程架构。基本思路是在高配设备中，每个服务独立开进程，保证稳定；在低配设备中，多个服务合并为一个进程，节约资源。同样的思路也应用到了Android上。
渲染进程 --多线程架构
1.JS引擎
一个渲染进程只有一个JS引擎，JS引擎与GUI引擎互斥，所以若js任务时间过长，页面会出现卡顿。
2.GUI渲染
当js解析几何完毕时，会自动开启。
3.定时器触发 4.网络线程 5.事件触发
tip: 正如之前所说，每一个渲染进程都会有一个JS线程，而事实是，每开一个标签页，都是开启一个独立的渲染进程。为了避免内存占用过高，会根据机器硬件来对所能开启的标签页数目作限制。
具体流程
chrome 运行原理
1.输入处理
分析用户的输入，若是URL，则直接请求相应站点；
若是query，则传给搜索引擎（chrome的搜索引擎其实也是站点）。
2.开始导航
1.用户enter后，UI线程通知网络线程发送请求，获取站带你内容。
2.请求过程中，tab处于loading状态
3.处理响应
1.网络线程收到http响应后，先分析响应头附带的媒体类型信息（MIME type）； 2.若是HTML类型，交给渲染进程； 3.若是其他如zip等类型，交给下载管理器。
4.寻找渲染进程
1.当网络进程检查无误后，会告知主进程已经准备就绪
2.主进程通过IPC通知渲染进程
渲染进程告知主进程已经开始渲染，导航结束，开始文档加载阶段
5.加载资源
1.加载html文档 2.加载css，图片，javascript脚本等
6.构建渲染树
1.生成DOM（依据html文件），使得html被浏览器看懂 2.生成CSSOM树，使得css被浏览器看懂 3.两者结合，生成渲染树
7.页面布局
8.页面绘制
首屏优化
1.js代码压缩与分包
2.静态资源（比如图片）分离
3.js脚本非阻塞加载
本身渲染是从上到下的采取这种方式能有效缓解页面堵塞等情况
4.缓存策略
5.SSR
6.预置loading，骨架屏
使用vue，react等框架，加载的内容多，容易出现空白页面，使用了 loading，实际是增加一段在加载时显示的效果。vue与react都含有loading组件，可以实现不错的动画。 骨架屏就是在页面完全加载出来前，让用户大致知道页面的布局等信息。本质是用一些占位符替代还没加载出来的信息。
渲染优化
js优化
1.防止内存泄漏
特别注意全局变量； ES6可以使用辅助工具检测；
2.循环尽早break
3.合理受用闭包
4.减少访问DOM
5.防抖，节流
6.web workers
