客户端容器 浏览器架构演进:单进程架构→多进程架构→面向服务架构 单进程架构:所有模块运行在同一个进程里,包含网络,插件,JavaScript运行环境等 多进程架构:主进程,网络进程,渲染进程,GPU进程,插件进程 面向服务架构:将原来的UI,数据库,文件,设备,网络等,作为一个独立的基础服务
多线程工作流程: 1,网络线程负责加载网页资源 2,JS引擎解析JS脚本并且执行 3,JS解析引擎空闲时,渲染线程立即工作 4,用户交互,定时器操作等产生回调幻术放入任务队列 5,事件线程进行事件循环,将队列里的任务去除交给JS引擎执行
补充编程范式部分内容: LL:从左到右检查,从左到右构建语法树 LR:从左到右检查,从右到左构建语法树
Chrome运行原理: 浏览器主进程:输入处理→开始导航→读取响应→寻找渲染进程 跨端容器-通用原理:1,UI组件 2,渲染引擎 3,逻辑控制引擎 4,通信桥梁 5,底层API抹平表现差异
输入处理:1,用户UI框输入内容后,UI线程会判断输入的是一个URL地址还是一个query查询条件 2,如果是URL,直接请求站点资源 3,如果是query,将输入发送给搜索引擎
开始导航:1,按下回车后,UI线程通知网络线程发起一个网络请求,来获取站点内容 2,请求过程中,tab处于loading状态
首屏优化:1,压缩,分包,删除无用代码 2,静态资源分离 3,JS脚本非阻塞加载 4,缓存策略 5,SSR 6,预置loading,骨架屏
渲染优化:1,GPU加速 2,减少回流,重绘 3,离屏渲染 4,懒加载
JS优化:1,防止内存泄漏 2循环