我们平时所用的浏览器其实就是客户端容器。
浏览器架构
先来讲讲浏览器架构的演进。其实在早期的时候，浏览器是单进程架构，所有模块运行在同一个进程里，包括网络，插件，JavaScript运行环境等。现在的浏览器架构呢是多进程架构，有主进程，网络进程，渲染进程，GPU进程，插件进程。各个进程之间相互独立，防止单个进程或页面崩溃后影响整个浏览器。还有一个是面向服务架构，面向服务架构它其实是一个多进程架构的升级版，也是一个多进程架构。只不过将原来的UI、数据库、文件、设备、网络等，作为一个独立的基础服务。
每个进程有每个进程的分工，浏览器主进程主要负责页面展示逻辑，用户交互，子进程管理；包括地址栏，书签，前进，后退，收藏夹等。也就是说，我们打开浏览器看到的都是主进程展示的画面。GPU进程负责UI绘制，包含整个浏览器全部UI；网络进程，全名网络服务进程，负责网络资源加载；标签页也就是渲染进程，控制Tap内的所有内容，将Html、Css和Javascript转换为用户可交互的网页；插件进程，控制网站运行的插件，比如flash、ModHeader等；除此之外，还有一些别的进程。到这里我们知道，单进程架构的弊端是非常多呢，那么既然都那么不好了，为什么会有单进程架构呢？早期的时候主要是受硬件的限制。早期的内存没有那么大，单进程可以节约一些空间，这可能也是其中一个原因叭。那么，在三种架构的对比中可以看到，面向服务架构是最好的，那么面向服务架构是否会替代多进程架构呢？老师自己觉得，是会的，因为不仅性能好，优势更大。
渲染进程
渲染进程内部是多线程结构，主要负责页面渲染、脚本执行、事件处理、网络请求等。
JS引擎vs渲染引擎
两个引擎是相互独立的，解析运行的过程不同，两者之间可以通过bridge转换。
再来看看多进程的工作流程。首先，网络线程负责加载网页资源，JS引擎负责解析JS脚本并且执行，接着JS解析引擎空闲时，渲染线程立即工作，然后，用户交互，定时器操作等产生回调函数放入任务队列，最后，事件线程进行事件循环，将队列里的任务取出交给JS引擎执行。
Chrome运行原理
以Chrome浏览器为例子，我们看看浏览器是怎么运行的。浏览器地址输入URL后发生了什么？
先来看输入处理，当用户url框输入内容后，UI线程会判断输入的是一个URL地址呢，还是一个query查询条件；如果是URL，直接请求站点资源；如果是query，将输入发送给搜索引擎。然后开始导航，当用户按下回车，UI线程通知网络线程发起一个网络请求，来获取站点内容；请求过程中，tab处于loading状态。接着是读取响应，网络线程接收到http响应后，先检查响应头的的媒体类型，（MIMIE Type）；如果响应主体是一个HTML文件，浏览器将内容交给渲染进程处理；如果拿到的是其他类型文件，比如Zip,exe等，则交给下载管理器处理。还有寻找渲染进程，网络线程做完所有检查后，会告知主进程数据已准备完毕，主进程确认后为这个站点寻找一个渲染进程；主进程通过IPC消息告知渲染进程去处理本次导航；渲染进程开始接收数据，并告知主进程自己已开始处理，导航结束，进入文档加载阶段。然后是渲染进程-资源加载，收到主进程的消息后，开始加载HTML文档；除此之外，还需要加载子资源，比如一些图片，CSS样式文件以及Javascript脚本。加载完之后，就开始构建渲染树，构建渲染树分为几步：1、构建DOM树，将HTML文本转化为浏览器能够理解的结构，2、构建CSSOM树，浏览器同样不认识CSS，需要将CSS代码转化为可理解的CSSOM，3、构建渲染树，渲染树是DOM树和CSSOM树的结合；构建完渲染树，接下来对渲染树进行页面布局，1、根据渲染树计算每个节点的位置和大小，2、在浏览器页面区域绘制元素边框，3、遍历渲染树，将元素以盒模型的形式写入文档流；下面是页面绘制：1、构建图层：为特定的节点生成专用图层，2、绘制图层：一个图层生成很多绘制指令，然后将这些指令按顺序组合成一个绘制列表，交给合成线程，3、合成线程接收指令生成图块，4、栅格线程将图块进行栅格化，5、展示在屏幕上。
跨端容器
为什么需要跨端容器？有几个优点，一是开发成本低，效率比较高，二是一致性体验良好，三是前端开发生态太多了，也能解放一下客户端人力。
Webview
Webview，即网页视图，用于加载网页URL，并展示其内容的控件，它可以内嵌在移动端APP内，实现前端混合开发，大多数混合框架都是基于 Webview的二次开发，比如lonic,Cordova
小程序
最开始是微信先推出了小程序，然后各大平台也慢慢有了，其实小程序呢先还是一个web view的方案，基于浏览器的内核，重构了一个解析器。
React Native/Weex
它和小程序不一样的地方是它用的是原生组件渲染，依赖React/Vue框架，有个virtualdom的概念。
Lynx
性能比上一个好。
Flutter
主要是三个概念，wideget和dart vm和skia图形库，是Flutter的组件。
