一、浏览器架构
1.1浏览器架构演进
- 单进程架构：所有模块运行在同一个进程中，包括网络、插件、JavaScript运行环境等
- 多进程架构：主进程、网络进程、渲染进程、CPU进程、插件进程
- 面向服务架构：将原来的UI、数据库、文件、设备、网络等，作为一个独立的基础服务
1.2浏览器架构对比
1.3任务管理器
打开浏览器，选择工具，选择浏览器管理即可打开相对应的管理器，是多进程分工的
二、渲染进程
2.1 常见浏览器内核
2.2 多线程架构
内部是多线程实现，主要负责页面渲染、脚本执行、事件处理、网络请求等
2.3 JS引擎和渲染引擎
- 解析执行JS
- XML解析生成渲染树，显示在屏幕
- 桥接方式通信
2.4 多线程工作流程
- 网络线程负责加载网页资源
- JS引擎解析JS脚本并且执行
- JS解析引擎空闲时，渲染进程立即工作
- 用户交互，定时器操作等产生回调函数放入任务队列中
- 事件进程进行事件循环，将队列里的任务取出交给JS引擎执行
2.5 小试牛刀
三、Chrome运行原理
3.1网页显示过程（浏览器输入URL后发生了什么）
输入处理：1）用户URL框输入内容后，UI线程会判断输入的是一个URL地址，还是一个query查询条件；2）如果是URL，直接请求站点资源；3）如果是query，将输入发送到搜索引擎
开始导航：1）当用户按下回车，UI线程通知网络线程发起一个网络请求，来获取站点内容；2）请求过程中，tab处于loading状态
读取响应：1）网络线程接收到HTTP响应后，先检查响应头的媒体类型（MIME Type）；2）如果响应主体是一个HTML文件，浏览器将内容交给渲染进程处理；3）如果拿到的是其他类型文件，比如Zip、exe等，则交给下载管理器处理
寻找渲染进程：1）网络线程做完所有检查后，会告知主进程数据已经准备完毕，主进程确认后认为这个站点寻找一个渲染进程；2）主进程通过IPC消息告知渲染进程去处理本次导航；3）渲染进程开始接收数据并告知主进程自己开始处理，导航结束，进入文档加载阶段
资源加载：1）收到主进程的消息后，开始加载HTML文档；2）除此之外，还需要加载子资源，比如一些图片，CSS样式文件以及JS脚本
构建渲染树：1）构建DOM树，将HTML文本转化成浏览器能够理解的结构；2）构建CSSOM树，浏览器同样不认识CSS，需要将CSS代码转化为可理解的CSSOM；3）构建渲染树，渲染树是DOM树和CSSOM树的结合
页面布局：1）根据渲染树计算每个节点的位置和大小；2）览器页面区域绘制元素边框；3）遍历渲染树，将元素以盒模型的形式写入文档流
页面绘制：1）构建图层，为特定的节点生成专用图层;2)绘制图层，一个图层分成很多绘制指令，然后将这些指令按顺序组成一个绘制列表，交给合成线程；3）合成线程接收指令生成图块；4）格线程将图块进行栅格化；5）展示在屏幕上
3.2前端性能
首屏优化：
压缩、分包删除无用代码；静态资源分离；JS脚本非阻塞加载；缓存策略；SSR；预置loading、骨架屏
渲染优化；
CPU加速、减少回流、重绘；离屏渲染；懒加载
JS优化：
防止内存泄漏；循环尽早Break；合理使用闭包；减少Dom访问；防抖、节流；Web Workers
四、跨端容器
跨端原因：1）开发成本、效率；2）一致性体验；3）前端开发生态
跨端方案：webview、小程序、RN/WeeX、Lynx、Flutter
WebView:即网页视图，用于加载网页URL，并展示其内容的控件；可以内嵌在移动端App内，实现前端混合开发，大多数混合框架都是属于WebView的二次开发，比如lonic、Cordova。使用WebView的优势：1）一次开发，处处使用，学习成本低；2）随时发布，即时更新，不用下载安装包；3）移动设备性能不断提升，性能有保障；4）通过JSBridge和原生系统交互，实现复杂功能
常用WebView分类：Android、IOS、国产Android
WebView使用原生能力：
跨端容器通用原理：1）UI组件；2）渲染引擎；3）逻辑控制引擎；4）通信桥梁；5）底层API抹平表现差异
跨端方案对比：
客户端容器总结：
思考：原生客户端因为自身天花板的原因也在逐渐向跨平台方案倾斜，当然这得益于跨平台方案的明显优势。对于开发者而言，可以做到一次开发多端复用，这在很大程度上能够降低研发成本，提高产品效能。但是，移动端的跨平台技术并不是仅仅考虑一套代码能够运行在不同场景即可，还需要解决性能、动态性、研发效率以及一致性的问题。5G 的到来对于技术研发工作者的我们而言意味深远。它的出现是数据传输速度、响应速度和连接性的一次巨大飞跃。5G 将与超高清视频、VR、AR、消费级云计算、智能家居、智慧城市、车联网、物联网、智能制造等产生深度融合，这些都将为前端技术的发展带来新的增长和机遇。
