客户端容器（web浏览器以及跨端方案）
浏览器架构
浏览器架构演进
- 单进程架构：所有模块全部在一个进程里
- 扩展性低、安全性低、稳定性低、卡顿
- Q：为什么单进程架构这么不好，还会有呢？A：因为早年进程很贵
- 多进程架构
- 扩展性中、安全性高、稳定性高、流畅
- 包括：浏览器主进程、GPU进程、网络进程、标签页、插件进程、其他进程
- 面向服务架构：将原来的UI、数据库等作为一个独立的基础服务
- 扩展性高、安全性高、稳定性高、流畅
渲染进程
常见浏览器内核
- Trident from IE4
- Gecko from Firefox
- Webkit from Safari,Chrome Anddroid
- Blink from Chorme,Opera
- Edge from Edge
- Trident+Webkit form 360,QQ,搜狗
多线程架构
内部多线程实现，主要负责页面渲染、脚本执行、事件处理、网络请求。不好的话就会导致卡顿。
JS引擎vs渲染引擎
- JS引擎
- AST-字节码-机器码-操作系统
- 渲染引擎
- HTML-Dom树+CSS-CSSOM树==render树--显存
多线程工作流程
- 网络线程负责加载网络资源
- JS引擎解析JS脚本并执行
- 用户交互放入任务队列
- 事件线程进行事件循环
Chrome运行原理
如何展示网页
- 浏览器地址输入URL以后发生了什么？（八股文）
- 浏览器主进程：输入处理--开始导航--读取响应--寻找渲染进程
- 输入处理：
- 判断：用户输入的是URL还是query查询？
- URL：请求站点资源
- query：发送给搜索引擎
- 判断：用户输入的是URL还是query查询？
- 开始导航
- 通知网络线程发起网络请求，获取站点。此中处于loading。
- 读取响应
- 网络线程先检查媒体类型MIME type
- 如果是HTML，则交给渲染进程
- 如果是其他，则交给下载管理器
- 寻找渲染进程
- 寻找一个渲染进程，by IPC
- 接收渲染进程的数据，进入文档加载
- 输入处理：
- 渲染进程：资源加载-构建-布局-绘制-合成-展示完成
- 资源加载
- 加载HTML文档，然后是图片CSS以及JavaScript
- 构建渲染树
- 构建DOM树，将HTML转换为浏览器可读的
- 构建CSSOM树，CSS转换
- 构建渲染树，结合DOM树和CSSOM树
- 页面布局
- 计算节点位置和大小
- 构建元素边框
- 以盒模型的方式写入
- 页面绘制
- 构建图层
- 绘制图层，交给合成线程
- 生成图块
- 将图片进行珊格化
- 展示
- 资源加载
- 浏览器主进程：输入处理--开始导航--读取响应--寻找渲染进程
前端性能表现
- Q：时间都花在哪？
A：Script解析 - Q：什么情况下卡顿？
A：JS函数解析时间太长了，来不及刷新
前端优化方案
- 首屏优化
- 压缩删除无用代码、静态资源分离、JS脚本非阻塞加载（因为自上而下加载，js和xx互斥）、缓存策略（加快第二次进入）、SSR、预置loading
- 渲染优化
- GPU加速：透明度、用transfrom做动画
- 减少重绘，千万不要使用tab布局
- 离屏渲染
- 懒加载
- JS优化
- 防止内存泄漏、循环尽早break、合理使用闭包、减少DOM访问、防抖、Web Workers
跨端容器
跨段方案
- webview（网页视图）
- 可以内嵌在移动端app中，框架：Lonic、Cordova
- 优势：
- 一次开发、处处使用
- 不用下载安装包
- 移动设备硬件性能支持
- JSBridge和原生系统交互
- webview使用原生能力
- Javascript调用Natice:API注入、跳转拦截、直接通信
- Native调用Javascript:
- 小程序
- 例：微信、支付宝
- 渲染层：webview，双线程多webview架构、数据通信，native转发
- RN/Weex
- React Native/Weex
- 原生组件渲染、React or Vue框架、virtual dom、JSBridge
- React Native/Weex
- Lynx
- Vue--JS Core--JSBinding--Native UI/Skia
- Flutter
- weideget-dart vm-skia图形库
- 通用原理
- UI组件、引擎渲染、逻辑控制引擎、通信桥梁、底层API抹平表现差异
