客户端容器|青训营笔记
浏览器架构演进:
1.单进程架构
2.多进程架构
3.面向服务架构:多进程架构的升级板,将每个进程作为一个独立的基础服务
浏览器架构对比
渲染进程-多线程架构
内部是多线程实现,主要负责页面渲染,脚本执行,事件处理
多线程渲染的工作流程:
1. 网络线程负责加载网页资源
2. JS引擎解析JS脚本并且执行
3. JS解析引擎空闲时,渲染线程立即工作
4. 用户交互、定时器操作等产生回调函数放入任务队列中
5. 事件线程进行事件循环,将队列里的任务取出交给JS引擎执行
Chrome运行原理
浏览器地址栏输入url后,会先对url进行处理:判断输入的是url还是query查询条件
然后开始导航:UI线程通知网络线程发起一个网络请求,来获取站点内容
内核读取响应:首先检查响应头的媒体类型,如果是HTML文件,则浏览器将内容交给渲染进程处理,如果是其他文件,则交给下载管理器处理
同时渲染进程开始工作,渲染完成后通知主进程获取。
浏览器性能优化
1. 压缩,分包,删除无用代码
2. 静态资源分离
3. JS脚本非阻塞加载
4. 缓存策略
5. SSR
6. 预置loading、骨架屏
渲染优化:
1. GPU加速
2. 减少回流、重绘
3. 离屏渲染
4. 懒加载
JS优化
1. 防止内存泄漏
2. 循环尽早break
3. 合理使用闭包
4. 减少Dom访问
5. 防抖,节流
6. Web Workers
跨段容器:
Flutter,lynx, webview ,Weex等等
通用原理
1. UI组件
2. 渲染引擎
3. 逻辑控制引擎
4. 通信桥梁
5. 底层api抹平表现差异