2022前端技术趋势解读.pdf

序演讲人：姜凡(展炎)，阿里巴巴前端委员会委员长，大淘宝前端团队负责人，推进前端工程化、端架构演进来不断提升用户体验，致力通过 Node、智能化、产品平台能力建设，演进&定义“新前端”。正文：大家好，我是阿里巴巴前端委员会委员长姜凡，花名展炎。首先感谢大家一直以来对 D2前端技术论坛的关注和支持。今年第十六届 D2 前端技术论坛的 slogan 是“精心”，所谓“精”是指对体验的精益求精，“心”则是指回归用户体验的初心。根据这个 slogan，本次大会组委会拟定了六个主题方向，包括：语言框架、跨端技术、前端体验、Node/Serverless、低代码、多样化。下面，我分别引用一句话，来描述这六个方向。1、语言框架“形而上者谓之道，形而下者谓之器”易经系辞语言框架是 D2 一直保留的专场，有些人可能觉得它有些生涩或实用性不高，而随着技术体系和生态的发展，前端是技术领域里生态最繁华的，究其原因是跟前端语言框架的发展和形态有很大关系。我们希望今天在具体的研发、工程框架、解决方案之外，能够站在更高的视角来看待其背后的演进和发展思路到底是什么，这也是我们一直以来保留语言框架这个专场的原因。2、跨端技术“不可陷之楯与无不陷之矛,不可同世而立”韩非子今天在各个端之间，各个厂商之间，都希望建立起一个高墙，就像一个盾一样把自己的商业和生态圈起来；而从研发角度则希望能够敏捷、快速试错、低成本，就像矛一样去打破这个壁垒。其实我们知道，不可能有一个盾把某个商业完全隔离，也不可能有一个方案能够把这些高墙全部击碎，二者之间就是不断在寻找一个动态的平衡的过程，来解决商业壁垒或商业鸿沟与通用性之间的平衡。3、前端体验“不忘初心，方得始终”华严经前端体验专场是今年独立设定的，这也是今年 D2 论坛的 slogan“精心”的缘起之一，重新声明了用户体验再次回归的价值。4、Node/Serverless“行而不辍，未来可期”荀子修身Node/Serverless 专场在 D2 也是延续了很长时间，我们对它的发展投入了大量工作。因为Node 的历史并不长，存在比如多语言的问题，比如原来仅仅是基于高并发、而今天要回归到弹性扩缩容的问题，以及并不是那么完备的线上运维的问题等等。客观来讲，相比虚拟机和容器的市场份额，Serverless 的市场份额并不是很大。但无论是从技术研发角度还是从云原生厂商角度，都非常看好 Serverless 的前景和市场价值。5、低代码“旧时王谢堂前燕，飞入寻常百姓家”乌衣巷这段话的原意是表达的旧贵族的落寞，但我在这里想表达的是：低代码除了我们今天关注的效能和成本之外，它一方面解决了在不懂技术或没有技术资源的情况下，有一个好的 idea 就可以通过低代码实现，就像我们今天使用电脑的办公软件一样；另一方面，低代码降低了很多门槛，让更多的人有机会进入到社会数字化大升级的战役当中来。换句话说，过去只有少部分人可以做的事情，今天低代码让更多的人可以使用，让他们的产出变得更加有价值，这是一个“普惠”的思想。6、多样化“乱花渐欲迷人眼，浅草才能没马蹄”钱塘湖春行今天的多样化非常繁华，其实多样化的场景完全是因为前端在工程效能上已经做到非常的极致，极致到今天很多技术领域为了工程化的落地，就一定会去考虑和前端大的技术生态的连接。另外，这句话描述的是杭州的自然景观，我也希望疫情能够早点散去，未来能够邀请大家来杭州做一些面对面的交流。好的，以上是本次 D2 大会主题的六大方向以及我本人的一些看法。最后，希望本次 D2 大会能够给大家带来一些收获，引发大家的思考。谢谢大家！。目录语言框架6ReScript:JavaScript 平台上高质量大规模程序构建的秘密武器62022 年 Deno 的生态状况介绍16跨端技术28使用跨端方案 Rax 编写鸿蒙应用28V8 JS AOT 化的探索与实践42浅谈 web component 实践与应用55Serverless67云原生 WebAssembly 与 Serverless67Node.js Web 框架再进化 面向前端与未来标准81用 Rust 和 Node-API 开发高性能 Node.js 模块94前端体验112基于大数据的前端页面异常结果检测112用户行为链路的识别、挖掘及诊断123适老化&无障碍的前端体验探索 为更多人提供便利和自由141低代码165腾讯低代码引擎建设思考和实战165ESM Bundleless 在低代码场景的实践188面向中后台复杂场景的低代码实践思路203多样化219解读千万级关系网络下的数据探寻可视化技术219向量到墨水：从绘画视角解析三维模型的漫画风格渲染技术238开源表单方案 Formily 的核心设计思路252协同文档工作机制简介266CRDT 实时协作技术在稿定编辑器中的应用279虚拟偶像诞生记 数字人行业和技术探究287Web 端短视频编辑器的设计与实现 像做 PPT 一样做视频309语言框架6语言框架ReScript:JavaScript 平台上高质量大规模程序构建的秘密武器摘要：ReScript 是第一个完全由中国人主导、并在世界范围内有广泛用户的通用程序语言。它放弃了对 JavaScript 语法的完全兼容，保证了单个模块级别兼容。它专注于解决实际问题，优化工具链的性能和用户体验，其编译器和构建系统的性能超出了 TypeScript 一到两个数量级，其类型信息也用于辅助生成更高效的代码。分享人：张宏波，ReScript 编程语言作者,前 OCaml 程序语言的唯一中国核心开发人员。Meta 唯一一位在华特聘的软件工程师。本科毕业于清华大学电子工程系，在 MSRA 实习期间对函数式程序语言产生了浓厚的兴趣，被沈向洋院士推荐赴宾夕法尼亚大学就读程序语言的博士学位。博士第二年受 Bloomberg 破格邀请以硕士毕业的身份负责领导该公司函数式语言编译器的开发和维护工作。在该公司工作期间开源的 BuckleScript 编译器是当时该公司最受欢迎的开源软件，多次被公司官方报道。目录：一、ReScript 简介和发展史二、ReScript 基于数据的编程三、示例：红黑树一、ReScript 简介和发展史ReScript 是在放弃对 JavaScript 的语法完全兼容，同时保证单个模块级别的兼容的情况下一门JavaScript 平台上的函数式语言，其类型系统和模块化编程的思想积累了学术界近三十年的研究经验。和传统的学术语言不同的是，ReScript 摒弃了一些学院派的思维，专注于解决实际问题，优化工具链的性能和用户体验，其编译器和构建系统的性能超出了 TypeScript 一到两个数量级，其类型信息也用于辅助生成更高效的代码。ReScript 是第一个完全由中国人主导并在世界范围内用于商业开发的通用程序设计语言。1、ReScript：一种静态类型的函数式语言ReScript 用来解决 JavaScript 大规模代码可依赖的重构问题。JavaScript 是脚本语言，大规模代码的重构是很有挑战性的问题，而解决重构的经典方案就是引入一个静态的类型系统。下图针对与 JavaScript 的互操作性（横轴）和类型性可依赖性（纵轴）把 ReScript 和其它编程语言进行了对比：Elm 或 PureScript 完全放弃了与 JavaScript 的互操作，设计一个封闭的语言；TypeScript（TS）是另外一个极端，兼容了所有的 JavaScript，然后慢慢变得更安全；ReScript 则属于折中的方式，即在不牺牲类型性可依赖性的前提下与 JavaScript 的互操作越来越好；语言框架语言框架多，在巴西甚至还开设了培训班。韩国 Rescript 网站：https:/green-labs.github.io/有人曾在知乎上提问：为什么中国出了那么多厉害的互联网公司，但没有自己设计过编程语言？我认为创造一个编程语言并不难，但让大众信任和使用这个编程语言是一项很困难的任务。ReScript 最初的 demo 也只用了六个周末，但将它做成一个具有生产价值的编辑器却用了六年时间，而且到现在还有很多需要改进的地方。5、ReScript 的特性下图是一个简单的 ReScript 示例，左边是 ReScript 代码，右边是生成的 JavaScript，通过示例可以看到 ReScript 的特性包括：支持给函数名加 label，提高可读性；自动进行函数类型推断，用户无需标注类型；编辑器自动优化；语言框架语言框架下图是一个相对复杂一点的示例，数据是 1,2,3，有三个函数 map、keep、reduce，open 相当于 JavaScript 的 import。2、模式匹配首先定义一个 type schema，然后通过模式匹配解析数据，最后生成新数据。type schema 相当于一个数据描述语言，其表达能力决定了数据处理能力；pattern match 相当于对数据的解析，通过解析将要素重新绑定生成新数据。下图是一个 type schema 示例，白色框中是对应的 TypeScript 的定义，左侧是 ReScript。对比 ReScript 和 TypeScript 的写法有点类似，但二者最大的区别在于 TS 不可将任意类型进行union，这个示例中如果类型有交集就不能用 number 和 undefined 这样定义，而 ReScript 则支持任何类型的 union。语言框架语言框架模式匹配三、示例：红黑树1、如何定义：type红黑树是一个平衡二叉查找树，分左右两边，其节点有红黑两种颜色，首先要定义颜色 R 和 B，节点中有叶子节点和中间节点两种分别定义；下图是对比 TypeScript 的定义语言框架语言框架另外，AVL 树也可以用 ReScript 通过模式匹配实现，有兴趣的朋友可以参考知乎文章20 行ReScript 代码实现 AVL 树。20 行 Rescript 代码实现 AVL 树网址：https:/ 是一个很有深度的语言，本次仅分享了其中一部分，感兴趣的朋友欢迎到官网了解更多内容。ReScript 官网：https:/rescript-lang.org/语言框架语言框架7、Deno 默认有一个称为安全执行的东西，这意味着您的程序不能访问文件系统、网络连接，除非你明确允许，否则它们无法暂停子进程或访问环境变量。例如我们从远程 URL 运行一个程序：deno run https:/deno.land/std/examples/welcome.tsWelcome to Deno这是 Deno 的功能之一，也很有趣，你无需事先下载资源，这一切都有运行时为你完成。在这里我们正在下载一个名为 Welcome 的程序，这也是我们标准库的一部分，Deno 会下载资源，并从 TypeScript 转换成 JavaScript，然后执行它。如果要允许 Deno 可以访问文件系统、互联网连接、子进程或环境变量，你需要通过提供所谓的允许标准来让 Deno 可以这样做：allow-read=/tmpallow-net=allow-read=/tmp，意味着你的程序现在可以读取您的文件系统中的/tmp 目录；allow-net=，是指 Deno 能够访问互联网连接，但只能连接到 G 域。8、Deno 可以从 URL 访问资源，无需事先在本地下载它们，在这里你可以看到，我们使用了一个名为 magenta 的函数（它也来自 Deno 标准库）：import magenta from“https:/deno.land/std/fmt/colors.ts;它来自一个名为 fmt color 的模块，URL 解析实际上是与浏览器相同的，因此，这与使用 ES 模块时，浏览器将使用的 URL 解析算法完全相同。9、Deno 没有像 Node 那样的 node_modules 或 index.js 概念，所以它不会让您的文件系统寻找匹配的包，这并不完全正确，我们稍后讨论。语言框架语言框架onload,prompt(),confirm(),alert()many more.Deno 也支持标准的 Web Workers API，支持 AbortController，甚至提供了完整的 WebGPU支持，因此您实际上可以直接在 Deno 中运行您的机器学习模型，并在显卡上非常高效的运行。为了确保所有的这些 API 的实际工作方式与它们在浏览器中的工作方式相同，Deno 使用了一种叫做 Web Platform Tests 的东西，对所有浏览器进行大量测试，以确保它们正确的符合标准。因此，Deno 现在被列在 MDN 的兼容性表中，任何时候，您去 MDN 寻找一些 JavaScript API的适用性时，如果 Deno 也支持它，您会在右侧表中看到它的适用信息。Deno 现在被列在 MDN 的兼容性表中13、Deno 不仅仅是一个 runtime，它实际上是一个完整的工具链，在一个二进制文件中提供了整个工具链，当您开始一个新项目时，不需要去寻找测试器或格式化工具，也不需要单独安装它们，创建项目时，可能所需的一切都已经存在在 Deno 里了。SUBCOMMANDS:bundle Bundle module and dependencies into single filecache Cache the dependencies语言框架语言框架let res=await fetch(url);let server=res.headers.get(server)!;console.log(server:,magenta(server);在打印之前，我们会为标题名称着色，首先我们从导入 magenta 函数开始，同样，这次我们使用 Deno 标准库的 fmt colors 模块，这是一个标准的 ES 模块语句，其工作方式与在浏览器中的工作方式相同；然后我们获取传递给程序的第一个命令行参数，在这里您可以看到我们用到了这个 Deno 命名空间，因此，访问命令行参数不是您可以在浏览器中所做的事情，有没有可以复用的 WebAPI，这就是为什么会需要 Deno 命名空间。在获取 URL 后，我们将需要获取资源，在这里我们使用了 fetch API，同样，fetch 在浏览器中可用，所以 Deno 复用了这个 API，而不是引入一个新的 API；在这里你还可以看到我们使用了 await 关键字（置于 fetch 前），所以 Deno 支持前置的 await；在获取 URL 的资源后，我们需要取得响应的标头，响应的标头，这又是一个 Web 兼容的 API，就像你在浏览器中所做的，在 Deno 中所做的就应该一样；最后我们将服务器标头记录到控制台，但首先，这个 magenta 函数会先执行。下面是一些你在运行这个程序的示例参考：$deno run-allow-net curl.ts https:/Server:nginx$deno run-allow-net curl.ts https:/Server:cloudflare$deno run-allow-net curl.ts https:/Server:GitH可以注意到，-allow-net 这个没有值的标志，告诉 Deno 它可以访问互联网上的任何东西，当然我们可以在每个示例中将其限制，例如-allow-net=，然后 Deno 将只能访问 域的 URL。语言框架语言框架我们使用的是 TLS 实现的 Rustls，类似于 OpenSSL；使用 wpgu，它是 WebGPU API 的后端，你可以在显卡上执行的所有操作实际上都是在此 API之上实现的；对于代码格式化 Deno fmt，我们使用 dprint，dprint 是一个与 Prettier 非常相似的项目，但同样，它不是在 JavaScript 中实现的，它是在 Rust 中实现的，所以它会更快。二、Deno 2022 年的生态状况Deno 的发布非常频繁，我们用称为“火车模型”的方式来发布，每周都有发布，如果您错过了合并某些东西的时间，那么不需要担心，因为下周就会有另一个版本发布。我们通常每个月发布 2-4 个补丁版本和一个次要版本，从 2020 年 5 月的 1.0 开始，每个月实施一个次要版本，所以到目前为止有 17 个次要版本。我们发布了大量功能和这些次要版本，以及近 100 个补丁版本，2022 年的计划是继续专注于 Web 兼容性，希望添加更多 Web API 工作，以运行更多功能和已支持的 Web API，例如 Web Crypto；我们也希望与 TypeScript 有更好的集成，虽然 Deno 已经能使用 TypeScript，但我们想进一步改进它，您可以在 IDE 中获得一流的 IntelliSense 和建议。我们还想迭代我们的安全模型，可能会为其提供更多功能。正如我们在一些示例中看到的那样，Deno 有一个叫做标准库的东西，它是我们团队官方支持的一组模块，我们自己会进行审核和审查，并且保证这些 API 可以和 Deno 一起使用。标准库也会源源不断更新和增加新功能，因此希望我们能够在 2022 年稳定 Deno 的发布版本 1.0 以及所有标准库。采用 Deno 的项目每月数据都在增加，例如有一个名为 Flat Data 的项目，那是一个 GitHub 项目，它使用 Deno fetch 来载入 URL 资源，基本上，它允许您在 GitHub 中运行 CI 期间执行单个文件（JavaScript）。因此在 GiHub 操作中，您可以拥有操作数据的工作流，这些数据提供给您的 GitHub 操作 API。语言框架语言框架Deno 目前已经可适用于生产环境，但是我们听到一些意见，由于它与 Node.js 和 Node.js 生态系统有很大不同，因此现在很难被采用，我们也认知了这个问题，在整个 2021 年，我们花了很多努力，希望让 Deno 具备一流的 Node.js 兼容性，这意味着你能够将运行工具、程序和 Node.js 生态系统所编写的依赖项都运行于 Deno，我们称之为 compat 模式。因此我们在过去两个月中一直在稳步前进，已经为众多内部节点模块提供了兼容性，目前仍在处理更大的模型，例如 HTTP、TTPS 或 zlib，我们预计将在 2022 年第二季度实现完全兼容性。我们这样做是为了更广泛的受众，尤其是能进入前端开发的生态系统，我们的目标之一是让热门的前端工具，如 Vite、Next.js 等，在和 Deno 工作中不会出现问题。实际上，我们在这方面取得了很好的进展，并且已经有一些现有的 Node.js 工具可以在 Deno中使用。语言框架语言框架https:/ playgrounds，很像 CodePen，不同之处在于它们不在用户本地运行，这些 playgrounds 实际上部署在世界各地 Deno Deploy 支持的所有数据中心。你可以快速构建一个想法的原型，它将立即部署到世界各地，你甚至可以将这个 playgrounds 嵌入您自己的网页或通过链接分享给你的朋友。当然，Deno 是开源的，我们接受贡献者和贡献代码，这些贡献非常受欢迎和赞赏，Deno 已经有超过 600 名贡献者，有很多很多项目可以参与，而 Rust 能力不是必须的。在这里留下一个链接，它将向你展示 Deno 公司的 GitHub 上的所有项目，你可以找到自己感兴趣的东西并帮助提供新功能和改进现有功能。如果你想为开源项目做出贡献，请来找我们，我们很高兴为新贡献者提供所需的任何帮助。网址链接：https:/deno.land/manual/contributing跨端技术跨端技术大厂商的超级 App 生态：尤其在微信结合小程序成功打造自身生态后，更多大流量 App 也都纷纷基于小程序建设，因此小程序就成为一个必须选择的端。在以上三方面的背景下，就引发了无线跨端的复杂问题。2、跨端背景下需要什么样的技术方案？跨端背景下的技术方案有 2 个思路：一码多端：开发一套代码可以运行在多个端；各写一套：每个端开发一套代码，常见的手机应用就是使用这种方案；下图中通过研发成本、适配成本、功能一致、招聘成本这四个维度对两种方案进行对比。研发成本：一码多端只需要开发一套代码显然成本会低；适配成本：由于不同端的适配非常复杂，一码多端的成本就会随之升高；功能一致：即业务逻辑的一致性，一码多端由于只有一套代码易于保障功能一致性，各写一套则比较难保障，比如常见的一个功能在 Android 可以使用但 iOS 不能；招聘成本：一码多端只专注一种代码，相对人员的学习成本也较低。跨端技术跨端技术鸿蒙系统的架构分层2、鸿蒙系统与跨端的结合如下表所示，鸿蒙系统上端提供两种应用开发的解决方案：Java 和 JavaScript。Java 开发在未来主要是支持 JavaScript 的开发。JavaScript 提供两种模式：类 Web 范式和声明式，前者更多会面向大前端生态，而后者更多会面向客户端的开发。鸿蒙系统将 JavaScript 作为应用开发的一等公民，因此，Rax X 鸿蒙具备理论可能性。跨端技术跨端技术4、技术方案业务在技术层面的问题，首先是上面提到的单独开发一套应用的成本太高，另外，新技术太多已经学不动了，而使用 Rax 去开发鸿蒙应用的优势包括：使用类 React 语法开发，不需要学习新的语法；一套代码多个端，降低开发成本；开发链路上可以更好的结合 Web 生态；三、技术原理：Rax 如何对接鸿蒙应用Rax 对接鸿蒙方案分三部分内容：渲染能力、工程构建和研发链路。1、多端渲染VDOM 的跨端能力VDOM 的核心特点是标准的数据结构，可以跟具体的端解耦，进而更好的支持跨端渲染；另外，抽象一层标准数据结构能更有机会做到数据驱动 UI 的编程范式。跨端技术跨端技术Rax Driver 生态在 Rax Driver 生态中有面向 WebView 的 driver-web，面向 Node.js 的 driver-server，面向小程序的 driver-miniapp。右图是一个简单的 driver-server 的 demo，可以看到在 server 端明确的 driver 和端解耦。对接方案鸿蒙官方提供的类 Web 开发范式是拆分了三个文件（见下图）：index.hml，index.css 和 index.js，写法与小程序/Vue 非常类似。跨端技术跨端技术面三层是代码层，包含：driver-harmony、Rax Core 和业务代码。其中核心部分是 driver-harmony 对接 JS Framework 的渲染指令，鸿蒙在 JS Framework 中提供跟浏览器标准类似的API，在 driver 中调用 API 完成节点渲染。右图是一个简单的 demo，由于 API 与浏览器 API 存在差异，需要一些磨平操作。在实现 driver 后就可以实现 demo 链路的跑通，如下图，左边是鸿蒙页面的一个组件，在这个组件中需要在生命周期 onReady 里面调用 rax render 再传入对应的 driver-harmony，就可以实现在真机调试上渲染出 Rax 节点。跨端技术跨端技术Plugin-rax-harmony在上述基础上，就可以轻松的创建 plugin-rax-harmony 工程插件。通过这个工程插件可以：注册独立的 webpack 任务为 harmony 产物的构建；定制 webpack 配置；生成鸿蒙产物；跨端技术跨端技术长期方案支持在 DevEco Studio 从 Rax 应用创建-开发-调试-发布的全链路研发能力。目前这个方案还在和鸿蒙的团队在讨论之中。（研发链路演示见视频）附：Rax 与鸿蒙的合作 Roadmap2021 年 8 月：Rax 团队和鸿蒙团队第一次会议交流。2021 年 10 月：结合鸿蒙提供的渲染指令跑通 demo。2021 年 12 月：完成渲染链路的完整对接；与鸿蒙 IDE 团队沟通全链路方案。2022 年 2 月：IDE 全链路流程开发完成；Rax 相关组件&API 适配完成。2022 年 3 月：结合 Harmony 3.0 正式发布。Rax 对接鸿蒙的技术方案选择了相对性能优越、运行轻量的长期方案，预计在 2022 年 3 月结合鸿蒙 Harmony3.0 一起正式发布。跨端技术跨端技术1、快磁盘代码缓存技术：避免 JS 非首次执行时的重复编译，使 JS 性能提升 50%以上；UC LLVM 优化编辑器技术：为 V8 字节码处理程序生成更高效紧凑的汇编指令，使 JS 性能提升 10%-30%；2、强JS 卡死检测：当 JS 出现卡死情况时，在 native 中可以得到告警并获取卡死时的现场信息，使业务尽早发现、定位和解决问题；OOM 定位信息：在崩溃日志中增加了 JS 堆内存信息和 OOM 时的 JS 现场信息，使业务可以快速定位 OOM 问题；JS API 扩展：在 JS 中扩展了一系列能力，让 H5 开发者可以快速开发调试以及进行性能分析等；JSI：让业务可以脱离 WebView 使用 V8，同时享有 U4 针对 V8 的所有优化成果；3、稳疑难崩溃攻克：解决了线上发现的许多疑难崩溃稳定性问题，如 CPU 缓存刷新问题、高通部分 CPU 缺页中断处理 BUG 等系列非常底层的问题；安全漏洞修复：修复各种 N-day、0-day 的安全漏洞并及时上线。U4 内核在 V8 引擎中做了很多优化和能力扩展，然而在将 JavaScript 和传统的 Native 技术相比时，仍然发现一些不足。如下图所示，JavaScript 在跨平台和动态化方面较 Native 有很大优势，但在启动性能方面却存在差距。其原因主要是 JavaScript 在运行前需要在用户的设备里在线编译，并且每次运行前都需要重新编译；而 Native 是在打包时 PC 离线编译，在用户设备中可以直接运行。跨端技术跨端技术根据 V8 执行 JS 的流水线分析来看，实现 JS AOT 有三种可行方案：本地代码（MachineCode，汇编），全字节码缓存（Full Code Cache），部分字节码缓存（Code Cache）。1、本地代码（Machine Code，汇编）早在 2010 年，V8 在执行 JS 时，先使用解析器将 JavaScript 源代码解析生成抽象语法树（AST），再使用基线编译器 Full-codegen 将 AST 编译成为未优化版的汇编代码后执行；当某些函数多次执行成为热点函数后，再使用优化编译器生成优化版的汇编代码执行。然而，在 2016 年 V8 引入了字节码后，就摒弃了基线编译器 Full-codegen。V8 为什么会摒弃基线编译器 Full-codegen 呢？这就需要对 JS 语言规范的标准有一些了解。以加号运算符为例（如下图），在 operator+的规范中，会使用到 GetValue、ToString、ToNumber、ToPrimitive 等语义，同时 ToString、ToNumber 也会调用 ToPrimitive 语义，在ToPrimitive 语义中会调用 GetMethod、Call 语义，其中 Call 语义可能调用任意 JS 代码，GetMethod 会调用 GetV 获取对象属性，GetV 会调用 ToObject。由此可见，一个看似简单的加号运算符涉及的标准非常多，而由于 JavaScript 的弱类型语言特性，在编译时无法确定两个相加的操作数会是数值、字符串、对象等还是任意类型组合，因而需要将这些路径全部编译生成庞大的汇编代码。通过这个示例可以看到，将 JS 源代码直接全部编译成未优化版的汇编代码，将面临编译过程缓慢、生成代码体积庞大等问题，进而同时会导致生成的代码占用内存高、因 CPU 缓存频繁失效导致性能差的问题，另外还存在 CPU 架构不通用的问题。由此可见，使用汇编代码并不是一个可取的方案，V8 验证过这个方案的不可行。跨端技术跨端技术3、部分字节码缓存（Code Cache）下图是 Blink 执行 JS 的逻辑。在 Blink 中执行 JS 时 V8 会先只编译最上层的函数，并在运行到内部函数时，如未被编译，则先编译该内部函数后运行。同时 JS 中会注册 DOM 事件，在 DOM 事件被触发时也会执行之前未执行的函数，这时 V8 也会先将其编译生成字节码再运行，同样如 Async function、Promise、Timer 等异步任务，也会在遇到未被编译的函数时先编译再运行。最后，当页面跳转或关闭时，将所有编译过的函数序列化并生成字节码缓存。这个方案存在的问题：跨端技术跨端技术策略二：追求便捷的使用先验规则使用 PGO 的方式生成 AOT，每次发布时都需要先收集函数信息，这在无形中增加了业务发布的复杂度。为了追求更便捷的使用，内置了另一种先验规则的策略。这个策略的核心在于预测需要被执行的函数，然后只为这些函数生成字节码。下图是一段 JS 代码，在代码执行前 V8 先编译灰色背景部分的代码，这些代码运行时会编译并执行第二层代码（紫色部分），第二层代码执行时会编译第三层代码（黄色部分），然后是第四层代码（蓝色部分）。通过对线上 TOP 站点的 JS 分析，发现了以下特征：JS 层级嵌套越深，使用率越低；相反，层级越浅使用率越高，如最上层代码的使用率是 100%；JS 越小，覆盖度越高：一些小型 JS 内的函数使用率可以达到 90%以上。结合以上特征对 TOP 站点进行不断的实验和分析后，最终确定了一套整体最优的生成策略，如下：小型 JS：不生成 AOT因为如果生成 AOT 后都需要从磁盘加载反序列化，可能会比直接编译 JS 源码更耗时。跨端技术跨端技术访问时生成如下图，当用户打开页面时向后台 AOT 线程发起预编译任务，让后台线程同步生成 AOT，同时Blink 主线程发起页面打开加载请求，并进行解析、排版、渲染等操作，在结束这些操作时 JS代码也已经在 AOT 线程编译完成，Blink 主线程可以直接加载和反序列化并运行。影响或不足：如果 AOT 线程执行缓慢，在 Blink 主线程执行 JS 时字节码可能未生成完成，导致 Blink 主线程需要重新编译；适用场景：业务 JS，已经离线到本地。在线生成（访问时生成）策略二、离线生成离线生成的方式提供了一个离线工具，可以在服务端使用函数信息或先验规则结合 JS 源码预编译生成 AOT，然后将 AOT 内置到发布包中，提供给线上用户直接运行，省去编译的过程。适用场景：APP 冷启动时执行（没有预热时机）；JS 不经常变动；JS 不需要动态更新。跨端技术跨端技术四、优化效果下面左图是某页面未使用 AOT 的 Trace 结果，右图是基于先验规则打开页面时后台预热生成AOT 的结果。对比两个结果发现，后者 JS 执行时间减少 35%左右。另外，针对线上 TOP 站点进行对比分析发现，使用 PGO 策略可以使执行性能平均提升 49%以上，使用先验规则可以平均提升 33.9%以上。我们以夸克高考为例，对比使用 AOT 后，首屏性能提升了 17.6%以上。五、展望在当前的 U4 3.0&4.0 版本中，V8 执行 JS 的流程是：通过解析器将 JS 源码解析生成抽象语跨端技术跨端技术浅谈 web component 实践与应用摘要：前端框架不断推陈出新，如何在不断的革命与淘汰的氛围中维持服务功能的稳健，一直是每位工程师最大的理想与目标，本片分享的是如何透过 web component 轻松快活玩转各框架，让功能开发与服务稳健可以并行迈向未来。分享人：Paul Li，台湾雅虎 AMP 项目的首席程序员，一直渴望使用现代网络技术。他也是台湾雅虎的前端工程师，专注于用户体验，为用户带来生动流畅的流程。目录：一、为什么使用 Web Component？二、Custom Elements（自定义元素）三、Shadow DOM四、实践演示八年前，Web Component 推出后即受到 Google 的青睐，旗下浏览器率先支持 WebComponent。但由于当时环境并不友好，同时 Web API 的支持不够充足，Web Component没有得到推广应用，然而它的核心思维启发了近年来 Framework 的开发。经过几年的发展，Web Component 已经成功的成为 W3C 的标准之一，主流浏览器如 Chrome、Edge、Firefox、Safari 都纷纷张开双臂拥抱 Web Component。一、为什么使用 Web Component？1、背景雅虎奇摩拍卖是一个类似于淘宝的电商平台，在台湾服务近 20 年，深受大家喜爱。然而由于技术转换、人力缺乏等一系列原因造成的技术问题，导致无论是既有功能的移转，还是新功能的开发，工程师都需要以不同的 Framework 开发相同的 module，这无形中增加了工程师的工作时间，同时削弱了他们的工作热情。然而这些问题在导入 Web Component 后都得到确切有效跨端技术跨端技术如前面提到，Custom Elements 可以支持 attributeChanged，因此当 attribute 有新增、修改或移除时就会调用 attributeChangedCallback。如果需要 Custom Elements 支持不同的 Property，可以通过 get 和 set 设定 Property。最后也是最重要的步骤是要通过 customElements.define，将刚刚撰写的 class 以及要定义的tag 名称my-component进行绑定，tag 名称必须包含“-”符号。完成绑定后，“MyComponent”的 HTML tag 就产生了。3、如何使用 Custom Elements使用 Custom Elements 只要导入对应的 JavaScript，建议使用 JavaScript Module 的方式加载档案，因为通过 JS Module 可以使用 import/export 语法快速导入 JS Lab，相同的 JS 档案不会重复加载，同时加载的 JS 可以得到保护。最后将新建的 my-component 置入到相应的地方即可使用 Custom Elements。跨端技术跨端技术三、Shadow DOM通过 Shadow DOM 可以使 Web Component 呈现出表里不一的效果。如果 Web Component同时具有 Light DOM 和 Shadow DOM 时，浏览器会以 Shadow DOM 为主要渲染对象。使用Shadow DOM 旨在保证 Light DOM 和 Shadow DOM 的渲染不会互相干扰。如何将 Shadow DOM 与 Custom Elements 有效结合？打开刚建立好的 my-component.js，首先生成一个 template，设置 innerHTML，设置的内容就是希望 Web Component 呈现的内容。接着在 constructor 里设置 Shadow DOM，然后将template 里的内容置入 Shadow DOM，实现 Shadow DOM 和 Custom Elements 的结合。Web Component 的 type 名称都是由开发者自定义，因此搜索引擎无法第一时间判断其含义，这时可以通过 Light DOM 不会被渲染的特性设置一些线索提供给搜索引擎进行分析，以确保SEO 的准确性。跨端技术跨端技术1、Collages基于 Web Component 可以实现不同服务中呈现不同图片的拼接效果。举例：如下图，如果要调整红框内图片的间距，可以通过改变 gap 设置实现。跨端技术跨端技术4、VenomVenom 就是雅虎开发的广告封装 Web Component，有图片、video 等不同呈现方式。通过Web Component 包装广告让广告效果得到更好的发挥。跨端技术跨端技术示例 3：在卖