客户端容器 | 青训营笔记

皮皮小龙虾
35 阅读3分钟

image (2).png

浏览器架构

架构演进

单进程-->多进程-->面向服务架构

图1.png

  1. 单进程架构，是所有模块运行在同一个进程里，是前期计算机资源有限无奈的选择。
  2. 多进程架构，可以分为主进程、网终进程、渲染进程、GPU进程、插件进程（可通过浏览器-更多工具-任务管理器查看）。 图2.png
  3. 面向服务架构，将原来的U、数据库、文件、设备、网络等，作为一个独立的基础服务。

图3.png

渲染进程（标签页）

浏览器渲染进程内部是多线程实现的，包括JS引擎线程、GUI渲染线程、定时器触发线程、网络线程、事件触发线程，JS引擎与GUI渲染引擎的通信是通过Bridge桥接进行的。

图4.png 多线程的工作流程：

  1. 网络线程负责加载网页资源；
  2. JS引警解析JS脚本并且执行；
  3. JS解析引擎空闲时，渲染线程立即工作（JS引擎与渲染线程是互斥的）；
  4. 用户交互、定时器操作等产生回调函数放入任务队列中；
  5. 事件线程进行事件循环，将队列里的任务取出交给JS引擎执行。

image (3).png 任务队列可以分为宏任务队列和微任务队列，执行顺序如下（web前端知识：js中的微任务和宏任务 - 掘金 (juejin.cn)）：

  1. 首先执行当前代码（同步任务），直到遇到第一个宏任务或微任务。
  2. 如果遇到微任务，则将它添加到微任务队列中，继续执行同步任务。
  3. 如果遇到宏任务，则将它添加到宏任务队列中，继续执行同步任务。
  4. 当前任务执行完毕后，JavaScript 引擎会先执行所有微任务队列中的任务，直到微任务队列为空。
  5. 然后执行宏任务队列中的第一个任务，直到宏任务队列为空。
  6. 重复步骤 4 和步骤 5，直到所有任务都被执行完毕。 需要注意的是，微任务比宏任务优先级要高，因此在同一个任务中，如果既有微任务又有宏任务，那么微任务会先执行完毕。而在不同的任务中，宏任务的执行优先级要高于微任务，因此在一个宏任务执行完毕后，它才会执行下一个宏任务和微任务队列中的任务。

image (4).png

Chrome运行原理

从一道面试题开始：浏览器地址输入URL后发生了什么？

图6.png

前端性能优化

首屏优化

  1. 压缩、分包、删除无用代码
  2. 静态资源分离
  3. JS脚本非阻塞加载
  4. 缓存策略
  5. SSR
  6. 预置loading、骨架屏

渲染优化

  1. GPU加速 主要是CSS3，用transform做动画
  2. 减少回流、重绘 千万不要用table，一改就要重绘
  3. 离屏渲染 canvas
  4. 懒加载

JS优化

  1. 防止内存泄漏 全局变量，严格模式可以检测风险；DOM引用没有删除；定时器没清除(自己封装一个能自动清除的定时器)
  2. 循环尽早break
  3. 合理使用闭包 单例
  4. 减少Dom访问 js访问DOM需要桥接，非常耗时；使用classname，只访问一次
  5. 防抖、节流
  6. Web Workers H5的新特性；与JS线程独立，

跨端容器

跨端开发的原因

  1. 开发成本、效率
  2. 一致性体验
  3. 前端开发生态

跨端方案

image (5).png

webview

WebView类似于浏览器渲染进程

1.同样是基于webview渲染，为什么小程序体验比webview流畅？ 小程序会预先对资源进行缓存 2.未来的跨端方案会是什么？ 会回归webview

webview优势：

  1. 一次开发，处处使用，学习成本低；
  2. 随时发布，即时更新，不用下载安装包；
  3. 移动设备性能不断提升，性能有保障；
  4. 通过JSBridge和原生系统交互，实现复杂功能

JS与Native通信

图5.png

avatar
文章
阅读
粉丝