编程范式和容器
机器语言---汇编语言---高级语言
副作用/执行顺序/代码组织/状态管理/语法和词法
|--------命令时 面向对象/面向过程
编程范式-----------------声明式 函数式/响应式
|-----函数---函数和语句
自顶向下 程序-------模块1---------变量---数据结构
|
| |-----函数---函数和语句
|---模块2---------变量---数据结构
面向对象
1.封装
2.继承
3.多态 接口复用
4.依赖注入 声明依赖 声明实现 然后得到注入对象
面向对象编程的原则
1.单一职责原则
2.开放封闭原则 在扩展性开放 在更改性上封闭
3.里氏替换原则 子体应当可以替换父类 并且出现在父类出现的任何地方
4.依赖倒置原则 具体依赖抽象 上层依赖下层
5.接口分离原则 让依赖通过接口来区分
浏览器架构
1.单进程架构：所有模块运行在同一个进程里，包含网络、插件、JavaScript运行环境等
2.多进程架构：主进程、网络进程、渲染进程、GPU进程、插件进程
3.面向服务架构：将原来的UI、数据库、文件、设备、网络等，作为一个独立的基础服务
浏览器架构-多进程分工
1.浏览器（主进程） 负责页面展示逻辑，用户交互 子进程管理
2.GPU进程负责UI绘制，包含整个浏览器全部UI
3.网络进程网络服务进程，负责网络资源加载
4.标签页(渲染进程)控制tab内的所有内容，将Html、Css和JavaScript转换为用户可交互的网页
5.插件进程控制网站运行的插件，比如flash、ModHeader等
6.其他进程如上图所示：适用程序Storage/Network/AudioService等
渲染进程-多线程架构
内部是多线程实现，主要负责页面渲染，脚本执行，事件处理，网络请求等
线程 功能
JS引擎 负责解析js脚本，运行js程序，每个渲染进程下面只有一个js引擎线程。与GUI渲染线程互斥，如果js任务执行事件过长，会导致页面卡顿
GUI渲染 负责渲染浏览器界面，解析html、css，构建dom树和render树、布局、绘制，和js引擎线程互斥，GUI更新会在js引擎空闲时立即执行
定时器触发 定时器所在线程，setTimeout、setInterval计时完毕后，将回调添加到事件队列，等待js引擎执行
网络线程 在XHR、Fetch等发起请求后新开一个网络线程请求，如果设置了回调函数，在状态变更时，将回调放入事件队列，等待js引擎执行
事件触发 由宿主环境提供，用于控制事件循环，不断地从事件队列里取出任务执行
浏览器输入url发生了什么?
1. 主进程通知为站点寻找一个渲染进程 browser---通过ipc告知--->Render(我收到了 这就干活)
2. render开始加载html文档 和图片 css js等资源
3. html-->DOM树------------|
css-->CSSOM-------------|----render树(渲染树)
4. 页面布局
5. 构建图层(edge3d视图可见图层)---绘制图层(交给合成线程)---合成线程生成图块---交给栅格线程栅格化
首屏优化
1.压缩、分包、删除无用代码
2.静态资源分离
3.js脚本非阻塞加载
4.缓存策略
5.SSR
6.预置loading 骨架屏
渲染优化
1.GPU加速
2.减少回流，重绘
3.离屏渲染
4.懒加载
js优化
1.防止内存泄漏
2.循环尽早break
3.合理使用闭包
4.减少Dom访问
5.防抖、节流
6.WebWorkers
Webview 跨端容器
1.Webview，即网页视图，用于加载网页Url，并展示其内容的控件
2.可以内嵌在移动端App内，实现前端混合开发，大多数混合框架都是基于Webview的二次开发；比如Ionic、Cordova
渲染流程
1.原生组件渲染--->2.React/Vue框架--->3.virtual dom--->4.JSBridge--->5.Native API--->6.android/ios
跨端容器的通用原理
1.UI组件
2.渲染引擎
3.逻辑控制引擎
4.通信桥梁
5.底层API抹平表现差异
