浏览器架构演进 1.单进程架构：所有模块运行在同一个进程里，包含网络、插件、Javascript运行环境等 2.多进程架构：主进程、网络进程、渲染进程、GPU进程、插件进程 3. 面向服务架构：将原来的UI、数据库、文件、设备、网络等，作为一个独立的基础服务 常见浏览器内核：trident，gecko,webkit,blink,edge 浏览器架构内部是多线程实现，主要负责页面渲染，脚本执行，事件处理，网络请求等 里面的内部渲染进程过程 1.网络线程负责加载网页资源 2.JS引擎解析JS脚本并且执行 3.JS解析引擎空闲时，渲染线程立即工作 用户交互、定时器操作等产生回调函数 放入任务队列中 事件线程进行事件循环，将队列里的任 务取出交给JS引擎执行 4Chrome运行原理：如何展示网页，输入处理，开始导航，读取响应，寻找渲染进程，资源加载，构建渲染数，页面布局，页面绘制 5如何进行首屏优化 1.压缩、分包、删除无用代码 2.静态资源分离 3.JS脚本非阻塞加载 4.缓存策略 5. SSR 6预置loading、骨架屏 7GPU加速 8减少回流、 9离屏渲染 10懒加载 JS优化 1.防止内存泄漏 2.循环尽早break 3.合理使用闭包 4.减少Dom访问 5.防抖、节流 5.Weh Worlrow
6为什么需要跨端 1.开发成本、效率 2.一致性体验 3.前端开发生态 开发工具 Htmis CSS3 JavaScript 终端 Android 有哪些跨端方案 webview ·小程序 · RN/WeeX · Lynx Flutter 跨端容器 webView 小程序 React Native WeeX flutter Lynx
Webview，即网页视图，用于加载网页Url，并展 示其内容的控件 可以内嵌在移动端App内，实现前端混合开发，大多数混合框架都是基于Webview的二次开发；比如Ionic、 Cordova
跨端容器使用WebView优势 1.一次开发，处处使用，学习成本低 2.随时发布，即时更新，不用下载安装包 3.移动设备性能不断提升，性能有保障 4.通过JSBridge和原生系统交互，实现复杂功能
跨端容器WebView使用原生能力 Javascript 调用Native ·API注入：Native获取Javascript环境上下文，对其挂载的对象或者方法进行拦截 ·使用Webview URL Scheme 跳转拦截 · IOS上 window.webkit.messageHandler直接通信 Native 调用 Javascript 直接通过webview 暴露的API执行JS代码 IOS webview.stringByEvaluatingJavaScriptFromString Android webview.evaluateJavascript
跨端容器-小程序 微信、支付宝、百度小程序、小米 直达号 渲染层-webview 3.双线程，多webview架构 4.数据通信，Native转发 三 JSCore 逻辑层 Native 服务端 39
跨端容器-React Native/WeeX 1.原生组件渲染 2. React/Vue框架 3. virtual dom 4. JSBridge ComponentA ComponentB Componentc 渲染流程
跨端容器Lynx
- Vue
- JS Core/V8
- JSBinding
- Native UI/ Skia
跨端容器Flutter
- wideget dart vm
- skia图形库 Flutter渲染流程 42 <ByteTech 初阶训练营 跨端容器-通用原理
- UI组件 2.渲染引擎 逻辑控制引擎 4.通信桥梁 底层API抹平表现差异 #青训营笔记
