客户端容器
web浏览器以及跨端方案 容器就是一个盒子 对调用方法暴露 浏览器架构 渲染进程 chrome运行原理
浏览器架构
架构演变
1、单进程架构：扩展性低；所有模块运行在同一个进程里，数据没有隔离。稳定性低，三方插件某个tab页面js脚本问题导致浏览器崩溃。流畅度卡顿，所有页面运行在统一进程中，开启多个页面时明显卡顿。
2、多进程架构，各进程分配独立的内存区域，有些进程功能较大，耦合度高。安全性高。
3、面向服务架构，做好了沙箱隔离，安全性高。
多进程分工
浏览器主进程：主要负责页面展示逻辑，用户交互，子进程管理；
GPU进程：进行UI绘制；
网络进程：网络服务进程，负责网络资源加载；
标签页（渲染进程）：控制tab内的所有内容
插件进程
为什么会有单进程架构？受到硬件的限制
面向服务架构是否会替代多进程架构：谷歌2016年在多进程架构演进，在性能比较好的设备，会做成面向服务器。性能差退化为多进程架构。
常见浏览器内核
Edge-Chakra
Chrome-V8引擎
webkit safari jsCore
多线程架构
内部是多线程实现，主要负责页面渲染，脚本执行，事件处理，网络请求等。
浏览器地址输入URL后发生了什么？
输入处理、开始导航、读取响应、寻找渲染进程、资源加载：加载子资源、执行脚本；构建：构建DOM、构建CSSOM、构建渲染树、布局、构建图层、绘制图层、光栅化、展示完成。
输入处理：用户url输入内容后，Ui线程会判断输入的是一个URL地址还是query查询。如果是URL，直接请求站点资源。如果是query，将输入发送给搜索引擎。
开始导航：回车后，UI线程发送网络请求。
读取响应：网络线程收到HTTP响应后，检查HTTP头的媒体类型；
寻找渲染进程：数据准备完毕，主进程需寻找渲染进程去渲染，告诉渲染进程去处理本地导航，开始接收数据并且通知自己主动导航。
资源加载：收到主进程的消息后，开始加载HTML
构建渲染树：构建DOM树，将HTML文本转化为浏览器能够理解的结构。
构建CSSOM树，浏览器同样不认识CSS。
构建渲染树，渲染树是DOM树和CSSOM树的结合。
渲染进程：根据渲染树计算每个节点的几何位置和大小。在浏览器页面区域绘制元素边框。遍历渲染树，将元素以盒模式渲染。
页面绘制：构建图层 为特定的节点生成专用图层。 绘制图层：一个图层分成很多绘制指令，然后将这些指令按顺序组成一个绘制列表，交给合成线程。合成线程接收指令生成图块。
栅格线程将图块进行栅格化，展示在屏幕上。
前端性能
时间都花在哪里？script解析和空闲时间比较长等待资源加载，加载js和网络接口等待数据回来渲染。
什么时候卡顿？某个js执行得太久，来不及刷新就会卡顿。
首屏优化
构建的时候，借助工具将代码压缩，删除无用代码。
单页应用，代码分包，分包可以利用浏览器并行能力。
静态资源分离。
JS脚本非阻塞加载。js引擎和gui渲染互斥。
合理使用缓存策略。使用打包工具。
SSR服务器端渲染
预置loading
渲染优化
1、GPU加速：颜色渐变，使用透明度，每个像素点的值都改变。transform做动画用GPU做加速。新建图层也是耗时的操作。设置while change 告诉浏览器这个元素会被GPU加速，放在新建图层里。
2、减少回流和重绘。可见不可见用visible… table现代框架不太会用
3、离屏渲染。开辟一段内存，将需要渲染的内容渲染好，等需要在显示。canvas画点和线，用离屏渲染好一些
4、懒加载：在缓存里取，减少时间。
JS优化
1、防止内存泄漏：使用全局变量会有全局泄露的风险，用es5、es6严格模式使用工具可以检测。dom复制给js变量，dom引用没有清空，要手动清空。定时器忘记清除会导致泄漏，最好是可以使用自动封装的定时器。
2、循环尽早break。
3、合理使用闭包。减少元素的创建。
4、减少DOM访问。JS引擎和渲染引擎笔记费时。className只访问一次。经常使用的dom，用变量缓存起来，不需要每次去windows查找。
5、防抖，防止多次调用。在规定时间内，执行最后一次的结果。 节流：规定时间之内，不管你多次调用，只会执行一次。滚动的时候会用到，dom拖拽，手指移动。
6、web workers 新版浏览器的属性 和js相互独立 不会阻塞浏览器渲染 在传输的时候 通过文本输出 可以用在图片音频的处理
跨端容器
为什么需要跨端：
1、开发成本、效率
2、一致性
3、前端开发生态
跨端方案
webview：网页视图，用于加载网页URL，并展示其内容的控件，内嵌在移动端APP内，实现前端混合开发。常用webview，安卓、ios。
js调用native：API注入；使用webview URL Scheme跳转拦载
小程序：微信、支付宝、百度小程序。渲染层：webview，双线程：多webview架构。数据通信：native转发。
RN/weex：原生组件渲染，依赖于react和vue框架，virtual dom 对dom的描述，JSBridge
Lynx：vue、js core/v8、JSBinding、Native UI/Skia
Flutter：1、widget、dart vm、skia图形库
通用原理
1、UI组件、渲染引擎、逻辑控制引擎、通信桥梁、底层API抹平表现差异。
同样是基于webview渲染，为什么小程序更流畅？
-小程序做了离线缓存，webview需要去服务器端请求。小程序会基于webview做了静置。 未来的跨端方案会是webview。
