Facebook 前端技术栈重构分享

发表于 3年以前  | 总阅读数:3162 次

阿里@张克军翻译

当我们考虑如何构建一个新的网络应用—一个为现代浏览器设计的、具有用户对Facebook(我们已知的)所有期望的功能,我们现有的技术栈无法支持我们所需要的类似于桌面应用的感觉和性能。完全重写是非常罕见的,但在这种情况下,由于过去十年来Web技术发生了很多变化,我们知道这是我们实现性能和未来可持续发展目标的唯一途径。今天,我们就分享一下我们在重构Facebook.com时的经验教训,使用React(一种用于构建用户界面的声明式JavaScript库)和Relay(React的GraphQL客户端)来重构Facebook.com。

1. 开始

我们希望Facebook.com能够快速启动,快速响应,并提供高度互动的体验。虽然服务端驱动(server-driven)的应用程序可以提供快速启动时间,但我们不相信它能像客户端驱动(client-driven)的应用程序那样具有互动性和愉悦性。然而,我们相信我们可以构建一个客户端驱动的应用程序,并能提供具有竞争力的快速启动时间。

但是从头开始做一个客户端优先的APP,这带来了一系列新的问题。我们需要快速重建网站,同时解决速度和其他用户体验问题,而且在未来几年内能可持续的发展。在整个过程中,我们围绕着两个技术口号开展工作:

  • 尽可能少,尽可能早。只提供所需要的资源,而且能在需要的时候及时送达。
  • 服务于用户体验的工程体验。我们开发的最终目标是为了我们的用户。当思考用户体验的挑战时,我们需要引导工程师默认做正确的事情来适配体验需求。

我们应用这些原则来改进网站的四个要素:CSS、JavaScript、数据和路由。

2. 反思CSS,解锁新功能

首先,我们通过改变编写和构建样式的方式,将主页上的CSS减少了80%。在新网站上,我们写的CSS与在浏览器上看到的CSS不同。当我们将CSS-like的JavaScript和组件写在一起时,构建工具会将这些样式分割成单独的优化包。因此,新网站的CSS数量减少了,支持暗模式和动态字体大小以实现可访问性,并改善了图片的渲染性能,同时让工程师们开发更容易。

原子化的CSS,减少主页80%的CSS

在我们的旧网站上加载主页时,加载了超过400KB的压缩CSS(2MB未压缩),但实际上只有10%的CSS被用于初始渲染。我们一开始并没有使用那么多的CSS,只是随着时间的推移而增加,很少做删减。之所以会出现这种情况,部分原因是每一个新功能都意味要添加新的CSS。

我们通过在构建时生成原子化CSS来解决这个问题。原子化CSS有一个对数增长曲线,因为它与唯一的样式声明的数量成正比,而不是与我们编写的样式和功能的数量成正比。这使得我们可以将整个网站中生成的原子型CSS合并到一个单一的、小的、共享的样式中。结果是新主页CSS下载量不到老网站的20%。

协同定位样式(Colocating styles)减少未使用的CSS,使其更容易维护

CSS随着时间的推移而增长的另一个原因是我们很难识别各种CSS规则是否还在使用。Atomic CSS有助于缓解这一点的性能影响,但独特的样式仍然会增加不必要的字节,而且我们的源代码中未使用的CSS会增加工程开销。现在,我们将我们的样式与我们的组件写在一起,这样就可以将它们串联起来删除,并且只在构建时将它们分割成单独的包。

我们还解决了另一个问题,CSS的优先级取决于顺序,当使用自动打包时,这一点尤其难以管理,因为自动打包会随着时间的推移而改变。以前,一个文件中的变化可能会在作者没有意识到的情况下破坏另一个文件中的样式。相反,我们现在用一种熟悉的语法来编写样式,它的灵感来自于React Native风格的API。我们保证样式以稳定的顺序应用,而且不支持CSS后裔选择器。

改变字体大小以提高无障碍性

在今天的许多网站上,人们会通过使用浏览器的缩放功能放大文字。这可能会不小心触发平板电脑或移动端布局,或者改变不需要放大的东西,比如图片。

通过使用rems,我们可以遵守用户指定的默认值,并且能够提供对自定义字体大小的控制,而不需要修改CSS。然而,设计通常是使用CSS像素值创建的。手动转换为rems会增加工程开销和潜在的bug,所以我们的构建工具自动完成这个转换。

构建时处理的例子

源代码

const styles = stylex.create({
  emphasis: {
    fontWeight: 'bold',
  },
  text: {
    fontSize: '16px',
    fontWeight: 'normal',
  },
});

function MyComponent(props) {
  return <span className={styles('text', props.isEmphasized && 'emphasis')} />;
}

生成的CSS)

.c0 { font-weight: bold; }
.c1 { font-weight: normal; }
.c2 { font-size: 0.9rem; }

生成的JavaScript

function MyComponent(props) {
  return <span className={(props.isEmphasized ? 'c0 ' : 'c1 ') + 'c2 '} />;
}
用于主题设计的CSS变量(暗夜模式)

在旧网站上,我们曾经尝试通过在body元素中添加一个类名来应用主题,然后用这个类名来覆盖现有的样式,这些样式有更高的优先级。这种方法有问题,它不再适用于我们新的原子化的CSS-in-JavaScript方法,所以我们改用CSS变量来进行主题切换。

CSS变量被定义在一个类下,当这个类应用到DOM元素上时,它的值会被应用到它的DOM子树中的样式。这让我们可以将主题组合成一个单一的样式表,这意味着切换不同的主题不需要重新加载页面,不同的页面可以有不同的主题而不需要下载额外的CSS,不同的产品可以在同一个页面上并排使用不同的主题。

.light-theme {
  --card-bg: #eee;
  }
.dark-theme  {  
  --card-bg: #111;
}
.card {
  background-color: var(--card-bg);
}
在JavaScript中使用SVG,实现快速、单一渲染的性能

为了防止图标在其他内容之后出现闪烁,我们使用 React 将 SVG 内联到 HTML 中,而不是将 SVG 以img的方式显示。因为这些SVG现在是有效的JavaScript,所以它们可以和周围的组件一起实现干净的单次渲染。我们发现,在加载JavaScript的同时加载这些SVG的好处大于SVG的绘制性能。通过内联,不会出现图标闪烁。

function MyIcon(props) {
  return (
  <svg {...props} className={styles({/*...*/})}>
       <path d="M17.5 ... 25.479Z" />
    </svg>
  );
}

3. JavaScript通过Code-splitting提高性能

代码大小是一个基于JavaScript的单页面应用最大的担忧之一,因为它对页面加载性能影响很大。我们知道,如果我们想让Facebook.com的客户端React app有客户端的效果,就需要解决这个问题。我们引入了几个新的API,这些API的工作原理与我们 "尽可能少,尽可能早"的口号一致。

递增的代码加载,在需要的时候提供需要的东西(what we need, when we need it)

在等待页面加载的时候,我们的目标是通过渲染页面的UI "骨架 "来即时反馈页面会是什么样子。这个骨架需要最少的资源,但如果代码被打成一个包,我们就无法提前渲染,所以我们需要根据页面显示的顺序将代码拆分成包。然而,如果简单地这样干(即使用在渲染过程中获取的动态导入),我们可能会伤害到性能,而不是有利于性能。这就是我们对“JavaScript加载层”的代码拆分设计的基础。我们将初始加载所需的JavaScript分成三层,使用一个声明式的、可静态分析的API。

第1层是显示上层内容的首刷所需的基本布局,包括初始加载状态的UI骨架。

第一层代码加载和渲染后的页面

import ModuleA from 'ModuleA';

第2层包括了所有需要的JavaScript,以完全呈现所有的折叠内容。第2层之后,屏幕上的任何内容都不应该因为代码加载而发生视觉上的变化。

第2层代码加载和渲染后的页面

importForDisplay ModuleBDeferred from 'ModuleB';

一旦遇到一个importForDisplay,它和它的依赖关系就会被移到第2层。返回一个基于promise包装的模块,以便在模块加载后访问它

第2层需要完整的交互。如果有人在第2层代码加载和渲染后点击菜单,即使菜单的内容还没有准备好渲染,也会立即得到反馈。第3层包含显示后才需要的、不影响当前屏幕展示的所有东西,包括log代码和订阅实时更新数据的代码。

importForAfterDisplay ModuleCDeferred from 'ModuleC';

// ...

function onClick(e) {
  ModuleCDeferred.onReady(ModuleC => {
    ModuleC.log('Click happened! ', e);
  });
}

一旦遇到importForAfterDisplay,它和它的依赖关系就会被移到第3层。返回一个基于promise包装的模块,以便在模块加载后访问它。

一个500KB的JavaScript页面,在第1层可以变成50KB,第2层可以变成150KB,第3层可以变成300KB。以这种方式分割代码,使我们能够通过减少需要下载的代码量来达到每一个里程碑,从而提高了从第一次绘制到视觉完成的时间。因为第3层并不影响屏幕上的像素,所以它并不是真正的渲染,最终的刷图完成时间更早。最重要的是,加载屏幕能够更早地渲染。

只有在需要的时候才加载的试验驱动(experiment-driven)的依赖项

我们经常需要渲染两个相同的UI的变体,例如在A/B测试中经常需要渲染两个相同的UI。最简单的方法是下载两个版本,但这意味着下载的代码可能永远不会被执行。一个稍微好一点的方法是在渲染时动态导入,但这可能会很慢。

相反,为了保持我们的 "尽可能少,尽可能早 "的口号,我们构建了一个声明式的API,可以提前提醒我们这些决定,并将其编码到我们的依赖图中。当页面正在加载时,服务器能够检查试验,并只向下发送所需版本的代码。

const Composer = importCond('NewComposerExperiment', {
  true: 'NewComposer',
  false: 'OldComposer',
});

我们将每个帖子类型所需的依赖关系作为查询的一部分来表达

更赞的是,PhotoComponent 本身就把它需要的照片附件类型的数据精确地描述为片段,这意味我们甚至可以把查询逻辑拆分出来。

使用JavaScript预算来防止代码蠕变

分层和条件依赖关系可以帮助我们交付每个阶段所需的代码,但我们还需要确保每个层的规模随着时间的推移保持在可控范围内。为了管理这个问题,我们引入了每个产品的JavaScript预算。

我们根据性能目标、技术约束、产品考虑制定预算。同时根据产品边界和团队边界分配页面级预算,并根据产品边界和团队边界进行细分。共享基础设施(Shared infra)被添加到一个精心筛选的列表中,并给出了自己的预算。共享基础设施会计入所有页面的预算,但其中的模块是免费提供给产品团队使用的。对于延迟加载、有条件加载或交互时加载的代码也有预算。

我们为过程的每一步创建了相关的工具:

  • 依赖关系图工具让我们更容易理解字节来自哪里,并识别出减少代码大小的机会。
  • 合并请求上的大小监控会显示大小回归 / 改进,并触发可定制的警报。
  • 通过交互式图表显示历史大小以及修订之间的变化情况。
  • 通过Dashboard帮助我们了解当前的大小与预算的关系。

尽早实现数据获取(data-fetching)的现代化

作为这次重写的一部分,我们对网站上的数据获取的基础设施进行了现代化改造。虽然旧网站的一些功能使用 Relay 和 GraphQL 进行数据采集,但大部分数据获取都是作为服务器端 PHP 渲染的一部分。在新网站上,我们能够与我们的移动应用标准化,并确保所有的数据获取都通过GraphQL进行。由于Relay和GraphQL已经为我们处理了 "尽可能少的 "工作,我们只需要做一些改变,以支持尽早获得我们所需要的数据。

初始请求预加载数据,以提高启动效率

许多Web应用程序需要等到所有的JavaScript被下载并执行后才从服务器上获取数据。有了Relay,我们可以静态地知道页面需要什么数据。这意味着,一旦我们的服务器收到页面的请求,它就可以立即开始准备必要的数据,并与所需的代码并行下载。当页面可用时,我们会将这些数据与页面一起流转,这样客户端就可以避免额外的往返次数,更快地呈现最终的页面内容。

为减少往返次数和提高互动性的流数据

注:流数据具有四个特点:数据实时到达;数据到达次序独立,不受应用系统所控制;数据规模宏大且不能预知其最大值;数据一经处理,除非特意保存,否则不能被再次取出处理,或者再次提取数据代价昂贵。(来自网上的解释)

在最初加载Facebook.com时,有些内容可能会被隐藏或呈现在视口之外。例如,大多数屏幕上可以容纳一到两个News Feed帖子,但我们不知道事先会容纳多少个。此外,用户很有可能会滚动,在连载往返的过程中,逐一抓取每个故事需要时间。另一方面,我们在一次查询中获取的故事越多,查询的速度就越慢,这就导致查询时间越长,即使是第一个故事,也需要更长的视觉完成(Visually Complete)时间。

注:视觉完成时间是指网页可见区域内的所有元素都被100%加载。

为了解决这个问题,我们使用了一个内部的GraphQL扩展—@stream,将Feed连接流向客户端,用于初始加载和后续滚动时的分页。这使得我们可以在每一个feed故事准备好后,只需进行一次查询操作,就可以将每一个feed故事逐一发送。

fragment HomepageData on User {
  newsFeed(first: 10) {
    edges @stream
  }
  ...AdditionalData
}
推迟暂不需要的数据

不同部分的查询时间是不同的,例如,在查看个人资料时,获取一个人的姓名资料和照片相对来说比较快,但获取他们的Timeline内容则需要较长的时间。

为了在一次查询中获取这两种类型的数据,我们使用@defer,当响应的不同部分准备好后就可以将其变成流数据。这让我们能够尽快用初始数据渲染大部分的UI,并为其余部分渲染加载状态。有了React Suspense就更容易了,因为我们可以显式地设计加载状态,以确保流畅的、自上而下的页面加载体验。

fragment ProfileData on User {
  name
  profile_picture { ... }
  ...AdditionalData @defer
}

5. 定义路由图加快导航速度

快速导航是单页应用的一个重要功能。当导航到一个新的路径时,我们需要从服务器上获取各种代码和数据来渲染目的页面。为了减少加载新页面时需要的网络往返次数,客户端需要提前知道每条路线需要哪些资源。我们将其称为路由图,每个条目称为路由定义。

尽早获得路由定义

对于Facebook来说,这个路由图太大了,无法一次性发送全部的。相反,我们在会话期间,随着新链接的呈现,动态地将路由定义添加到路由图中。路由图和路由器存在应用的最顶端,允许结合当前应用和路由器的状态来驱动应用级的状态决策,例如基于当前路由的顶部导航栏或聊天标签的行为。

尽早预获取资源

客户端应用程序通常要等到React渲染一个页面后才会下载该页面所需的代码和数据。通常情况下使用React.lazy或类似的东西实现。由于这可能会使页面导航速度变慢,所以我们反而会在链接被点击之前就开始请求一些必要的资源。

为了提供更流畅的体验,我们使用React Suspense转场来继续渲染上一个路由,直到下一个路由完全渲染完毕或暂停到下一个页面的UI骨架的 “友好 “的加载状态。这样做会减少很多干扰,而且它模仿了标准的浏览器行为。

代码和数据并行下载

在新网站上我们做了很多懒加载代码,但如果我们懒加载一个路由的代码,而这个路由的数据抓取代码就在这个路由的代码里面,最后就会出现串行加载的情况。

"传统 "的React / Relay app,加上懒加载的路由,结果会是两次往返为了解决这个问题,我们想出了EntryPoints,它是包裹代码分割点并将输入转化为查询的文件。这些文件非常小,对于任何可以到达的代码拆分点都会提前下载。

代码和数据是并行提取的,让我们可以在一次网络请求往返中下载这些

GraphQL查询仍然与视图写在一起,但EntryPoint封装了何时需要该查询以及如何将输入转化为正确的变量。应用程序使用这些 EntryPoints 来自动决定何时请求,确保默认情况下正确的发生。这有一个额外的好处,那就是创建一个单一的JavaScript函数,它包含了App中任何给定点的所有数据获取需求,可以用于前面讨论的服务器预加载。

我们在这里讨论的许多变化并不是Facebook特有的。这些概念和模式可以应用到任何框架或库的客户端应用程序中。通过标准化我们的技术栈,我们已经能够重新思考如何以一种执行力强、可持续的方式引入人们想要的功能--即使是在工程和产品规模的运营过程中也是如此。

工程体验的改善和用户体验的改善必须齐头并进,不能把性能和可访问性看作是对输出功能的额外负担。通过优秀的API、工具和自动化,我们可以帮助工程师们更快地推进工作,并同时发布更好的、更高性能的代码。为提高新的Facebook.com的性能所做的工作非常广泛,我们预计很快会分享更多关于这项工作的信息。要查看重新设计的内容,请访问facebook.com。它正在逐步推出,很快就会对大家开放。

 相关推荐

刘强东夫妇:“移民美国”传言被驳斥

京东创始人刘强东和其妻子章泽天最近成为了互联网舆论关注的焦点。有关他们“移民美国”和在美国购买豪宅的传言在互联网上广泛传播。然而,京东官方通过微博发言人发布的消息澄清了这些传言,称这些言论纯属虚假信息和蓄意捏造。

发布于:6月以前  |  808次阅读  |  详细内容 »

博主曝三大运营商,将集体采购百万台华为Mate60系列

日前,据博主“@超能数码君老周”爆料,国内三大运营商中国移动、中国电信和中国联通预计将集体采购百万台规模的华为Mate60系列手机。

发布于:6月以前  |  770次阅读  |  详细内容 »

ASML CEO警告:出口管制不是可行做法,不要“逼迫中国大陆创新”

据报道,荷兰半导体设备公司ASML正看到美国对华遏制政策的负面影响。阿斯麦(ASML)CEO彼得·温宁克在一档电视节目中分享了他对中国大陆问题以及该公司面临的出口管制和保护主义的看法。彼得曾在多个场合表达了他对出口管制以及中荷经济关系的担忧。

发布于:6月以前  |  756次阅读  |  详细内容 »

抖音中长视频App青桃更名抖音精选,字节再发力对抗B站

今年早些时候,抖音悄然上线了一款名为“青桃”的 App,Slogan 为“看见你的热爱”,根据应用介绍可知,“青桃”是一个属于年轻人的兴趣知识视频平台,由抖音官方出品的中长视频关联版本,整体风格有些类似B站。

发布于:6月以前  |  648次阅读  |  详细内容 »

威马CDO:中国每百户家庭仅17户有车

日前,威马汽车首席数据官梅松林转发了一份“世界各国地区拥车率排行榜”,同时,他发文表示:中国汽车普及率低于非洲国家尼日利亚,每百户家庭仅17户有车。意大利世界排名第一,每十户中九户有车。

发布于:6月以前  |  589次阅读  |  详细内容 »

研究发现维生素 C 等抗氧化剂会刺激癌症生长和转移

近日,一项新的研究发现,维生素 C 和 E 等抗氧化剂会激活一种机制,刺激癌症肿瘤中新血管的生长,帮助它们生长和扩散。

发布于:6月以前  |  449次阅读  |  详细内容 »

苹果据称正引入3D打印技术,用以生产智能手表的钢质底盘

据媒体援引消息人士报道,苹果公司正在测试使用3D打印技术来生产其智能手表的钢质底盘。消息传出后,3D系统一度大涨超10%,不过截至周三收盘,该股涨幅回落至2%以内。

发布于:7月以前  |  446次阅读  |  详细内容 »

千万级抖音网红秀才账号被封禁

9月2日,坐拥千万粉丝的网红主播“秀才”账号被封禁,在社交媒体平台上引发热议。平台相关负责人表示,“秀才”账号违反平台相关规定,已封禁。据知情人士透露,秀才近期被举报存在违法行为,这可能是他被封禁的部分原因。据悉,“秀才”年龄39岁,是安徽省亳州市蒙城县人,抖音网红,粉丝数量超1200万。他曾被称为“中老年...

发布于:6月以前  |  445次阅读  |  详细内容 »

亚马逊股东起诉公司和贝索斯,称其在购买卫星发射服务时忽视了 SpaceX

9月3日消息,亚马逊的一些股东,包括持有该公司股票的一家养老基金,日前对亚马逊、其创始人贝索斯和其董事会提起诉讼,指控他们在为 Project Kuiper 卫星星座项目购买发射服务时“违反了信义义务”。

发布于:6月以前  |  444次阅读  |  详细内容 »

苹果上线AppsbyApple网站,以推广自家应用程序

据消息,为推广自家应用,苹果现推出了一个名为“Apps by Apple”的网站,展示了苹果为旗下产品(如 iPhone、iPad、Apple Watch、Mac 和 Apple TV)开发的各种应用程序。

发布于:6月以前  |  442次阅读  |  详细内容 »

特斯拉美国降价引发投资者不满:“这是短期麻醉剂”

特斯拉本周在美国大幅下调Model S和X售价,引发了该公司一些最坚定支持者的不满。知名特斯拉多头、未来基金(Future Fund)管理合伙人加里·布莱克发帖称,降价是一种“短期麻醉剂”,会让潜在客户等待进一步降价。

发布于:6月以前  |  441次阅读  |  详细内容 »

光刻机巨头阿斯麦:拿到许可,继续对华出口

据外媒9月2日报道,荷兰半导体设备制造商阿斯麦称,尽管荷兰政府颁布的半导体设备出口管制新规9月正式生效,但该公司已获得在2023年底以前向中国运送受限制芯片制造机器的许可。

发布于:6月以前  |  437次阅读  |  详细内容 »

马斯克与库克首次隔空合作:为苹果提供卫星服务

近日,根据美国证券交易委员会的文件显示,苹果卫星服务提供商 Globalstar 近期向马斯克旗下的 SpaceX 支付 6400 万美元(约 4.65 亿元人民币)。用于在 2023-2025 年期间,发射卫星,进一步扩展苹果 iPhone 系列的 SOS 卫星服务。

发布于:6月以前  |  430次阅读  |  详细内容 »

𝕏(推特)调整隐私政策,可拿用户发布的信息训练 AI 模型

据报道,马斯克旗下社交平台𝕏(推特)日前调整了隐私政策,允许 𝕏 使用用户发布的信息来训练其人工智能(AI)模型。新的隐私政策将于 9 月 29 日生效。新政策规定,𝕏可能会使用所收集到的平台信息和公开可用的信息,来帮助训练 𝕏 的机器学习或人工智能模型。

发布于:6月以前  |  428次阅读  |  详细内容 »

荣耀CEO谈华为手机回归:替老同事们高兴,对行业也是好事

9月2日,荣耀CEO赵明在采访中谈及华为手机回归时表示,替老同事们高兴,觉得手机行业,由于华为的回归,让竞争充满了更多的可能性和更多的魅力,对行业来说也是件好事。

发布于:6月以前  |  423次阅读  |  详细内容 »

AI操控无人机能力超越人类冠军

《自然》30日发表的一篇论文报道了一个名为Swift的人工智能(AI)系统,该系统驾驶无人机的能力可在真实世界中一对一冠军赛里战胜人类对手。

发布于:7月以前  |  423次阅读  |  详细内容 »

AI生成的蘑菇科普书存在可致命错误

近日,非营利组织纽约真菌学会(NYMS)发出警告,表示亚马逊为代表的电商平台上,充斥着各种AI生成的蘑菇觅食科普书籍,其中存在诸多错误。

发布于:7月以前  |  420次阅读  |  详细内容 »

社交媒体平台𝕏计划收集用户生物识别数据与工作教育经历

社交媒体平台𝕏(原推特)新隐私政策提到:“在您同意的情况下,我们可能出于安全、安保和身份识别目的收集和使用您的生物识别信息。”

发布于:7月以前  |  411次阅读  |  详细内容 »

国产扫地机器人热销欧洲,国产割草机器人抢占欧洲草坪

2023年德国柏林消费电子展上,各大企业都带来了最新的理念和产品,而高端化、本土化的中国产品正在不断吸引欧洲等国际市场的目光。

发布于:6月以前  |  406次阅读  |  详细内容 »

罗永浩吐槽iPhone15和14不会有区别,除了序列号变了

罗永浩日前在直播中吐槽苹果即将推出的 iPhone 新品,具体内容为:“以我对我‘子公司’的了解,我认为 iPhone 15 跟 iPhone 14 不会有什么区别的,除了序(列)号变了,这个‘不要脸’的东西,这个‘臭厨子’。

发布于:6月以前  |  398次阅读  |  详细内容 »
 相关文章
为Electron程序添加运行时日志 4年以前  |  19432次阅读
Node.js下通过配置host访问URL 5年以前  |  5579次阅读
用 esbuild 让你的构建压缩性能翻倍 3年以前  |  5284次阅读
 目录