背景 作为目前最流行的 JavaScript 引擎,V8 引擎从出现的那一刻起便广泛受到人们的关注,我们知道 JavaScript 可以高效地运行在浏览器和 Nodejs 这两大宿主环境中,也是因为背后有强大的 V8 引擎在为其保驾护航,甚至成就了 Chrome 在浏览器中的霸主地位。不得不说,V8 引擎为了追求极致的性能和更好的用户体验,为我们做了太多太多,从原始的 Full-codegen 和 Crankshaft 编译器升级为 Ignition 解释器和 TurboFan… »
定义 是一种类似于微服务的架构,它将微服务的理念应用于浏览器端,即将单页面前端应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。各个前端应用还可以独立开发、独立部署。同时,它们也可以在共享组件的同时进行并行开发——这些组件可以通过 npm 或者 git tag、git submodule 来管理。 qiankun(乾坤)就是一款由蚂蚁金服推出的比较成熟的微前端框架,基于 single-spa 进行二次开发,用于将 Web… »
需求背景 基于公司的要求,需要对地图组件做出选型,以支持在地图上展示线路轨迹 技术选型 选型 优点 缺点 百度地图 大厂支持、UI 比较美观、API 文档较为清楚 内网搭建访问较为困难 高德地图 大厂支持、UI 比较美观、API 文档较为清楚 内网搭建访问较为困难 echarts 地图 UI 美观、API 文档较为清楚 内网搭建访问较为困难、功能较弱 天地图 支持离线访问、是专用地图 UI 不够美观、文档不够清楚 arcgis 支持离线访问、UI… »
Diff 算法 概览 在 beginWork 一节我们提到 对于 update 的组件,他会将当前组件与该组件在上次更新时对应的 Fiber 节点比较(也就是俗称的 Diff 算法),将比较的结果生成新 Fiber 节点。 这一章我们讲解 Diff 算法的实现。 你可以从 这里 看到 Diff 算法的介绍。 为了防止概念混淆,这里再强调下 一个 DOM 节点在某一时刻最多会有 4 个节点和他相关。 current Fiber。如果该 DOM 节点已在页面中,current Fiber… »
render 阶段 流程概览 本章我们会讲解 Fiber 节点是如何被创建并构建 Fiber 树的。 render 阶段开始于 performSyncWorkOnRoot 或 performConcurrentWorkOnRoot 方法的调用。这取决于本次更新是同步更新还是异步更新。 我们现在还不需要学习这两个方法,只需要知道在这两个方法中会调用如下两个方法: 可以看到,他们唯一的区别是是否调用 shouldYield。如果当前浏览器帧没有剩余时间,shouldYield… »