神族九帝's blog 神族九帝's blog
首页
网盘 (opens new window)
线报 (opens new window)
商城 (opens new window)
  • 复习指导
  • HTML
  • CSS
  • JavaScript
  • 设计模式
  • 浏览器
  • 手写系列
  • Vue
  • Webpack
  • Http
  • 前端优化
  • 项目
  • 面试真题
  • 算法
  • 精选文章
  • 八股文
  • 前端工程化
  • 基础篇
  • 进阶篇
  • 高级篇
  • 计算机基础
  • 高频考点
  • 精简题
  • 综合问题
  • 复习题
  • vue
  • vue2源码学习
  • 剖析vuejs内部运行机制
  • TypeScript 入门实战笔记
  • vue3源码学习
  • 2周刷完100道前端优质面试真题
  • npm发包
  • 重学node
  • 前端性能优化方法与实战
  • webpack原理与实战
  • webGl
  • 前端优化
  • Web3
  • 更多
  • 网站
  • 资源
  • Vue资源
  • 收藏的一些API
  • 未来要做的事
  • 宝塔面板+青龙面板
  • 安卓手机当服务器使用
  • 京东自动评价代码
  • 搭建x-ui免流服务器(已失效)
  • 海外联盟
  • 好玩的docker
  • 导航
GitHub (opens new window)

神族九帝,永不言弃

首页
网盘 (opens new window)
线报 (opens new window)
商城 (opens new window)
  • 复习指导
  • HTML
  • CSS
  • JavaScript
  • 设计模式
  • 浏览器
  • 手写系列
  • Vue
  • Webpack
  • Http
  • 前端优化
  • 项目
  • 面试真题
  • 算法
  • 精选文章
  • 八股文
  • 前端工程化
  • 基础篇
  • 进阶篇
  • 高级篇
  • 计算机基础
  • 高频考点
  • 精简题
  • 综合问题
  • 复习题
  • vue
  • vue2源码学习
  • 剖析vuejs内部运行机制
  • TypeScript 入门实战笔记
  • vue3源码学习
  • 2周刷完100道前端优质面试真题
  • npm发包
  • 重学node
  • 前端性能优化方法与实战
  • webpack原理与实战
  • webGl
  • 前端优化
  • Web3
  • 更多
  • 网站
  • 资源
  • Vue资源
  • 收藏的一些API
  • 未来要做的事
  • 宝塔面板+青龙面板
  • 安卓手机当服务器使用
  • 京东自动评价代码
  • 搭建x-ui免流服务器(已失效)
  • 海外联盟
  • 好玩的docker
  • 导航
GitHub (opens new window)
  • vue2源码学习

  • 剖析vuejs内部运行机制

  • TypeScript 入门实战笔记

  • vue3源码学习

  • 2周刷完100道前端优质面试真题

  • npm发包

  • 重学node

  • 前端性能优化方法与实战

    • 00 开篇词 开启刻意练习之路,进阶前端性能技术专家
    • 01 体系总览:性能优化体系及关键指标设定
    • 02 性能瓶颈点:从 URL 输入到页面加载整过程分析
    • 03 案例分析:移动端 M 站性能优化落地注意事项
    • 04 指标采集:首屏时间指标采集具体办法
    • 05 指标采集:白屏、卡顿、网络环境指标采集方法
    • 06 工具实践:性能 SDK 及上报策略设计
    • 07 平台实践:如何从 0 到 1 搭建前端性能平台
    • 08 诊断清单:如何实现监控预警并进行问题诊断
    • 09 优化手段:首屏秒开的 4 重保障
    • 10 优化手段:白屏 300m 和界面流畅优化技巧
    • 11 工具实践:如何进行性能专项测试
    • 12 理论分析:Hybrid 下的性能优化整体分析
    • 13 高级进阶:保证首次加载为秒开的离线包设计
    • 14 高级进阶:瞒天过海的骨架屏及 SSR 优化手段
    • 15 高级进阶:WebView 层及代码架构层面优化
    • 16 黑科技:详解预请求、预加载及预渲染机制
    • 17 横向对比:百度、阿里云、美团性能方案对比
      • 18 性能演进:RN、Flutter、小程序和 Enhance Hybrid
      • 19 成长之路:前端技术专业能力与业务产出平衡
      • 20 结束语 开启性能优化实践之路
    • webpack原理与实战

    • webGl

    • 前端优化

    • Web3

    • 更多

    • 学习笔记
    • 前端性能优化方法与实战
    wu529778790
    2021-09-20

    17 横向对比:百度、阿里云、美团性能方案对比

    前面我介绍了性能优化实践及在 Hybrid下的进阶优化方案,这是我们目前的做法,那么,业界是什么样的情况呢?在这里我就挑选三家互联网公司——百度、阿里云、美团,一起来看看他们是怎么做的?

    为什么选它们呢?

    之所以选百度,是因为用户要快速搜索到自己想要的内容,这对性能要求非常高;阿里云呢,它的应用实时监控服务 ARMS 里,很重要的一个指标就是性能指标;美团的外卖到店,履约服务的体验和性能,对服务质量影响非常大。我从中选取他们各自重要的方面和你聊聊,希望对你有所启发。

    百度

    首先,我们来了解下手百前端团队(百度 App 前端团队或手机百度前端团队的简称)。他们的性能优化整体思路是怎么样的呢?

    手百前端团队一般先是根据 QA 的专项测试和用户反馈去发现问题(如落地页首屏加载慢),然后定义性能指标,客户端和前端将指标上报,接着使用天幕平台监控预警,分析代码寻求优化解决方案,完成后实施评估。

    他们的性能指标主要以FCP、FMP 和卡顿率为主。

    其中,FCP 是指 First Contentful Paint, 表示浏览器内核首次绘制来自 DOM 的内容(如文本图片),其意义近似于白屏时间,不过是偏向内容出现的时间,而白屏时间是偏向等待的时间。FCP 的侧重点在于第一个字符开始绘制的时刻。

    卡顿率则是指请求中出现卡顿问题的占比。FMP 的定义和我们一样,我就不多解释了。

    指标上报过程中, NA(Native App)和 H5 都通过各自的埋点 SDK 进行上报,天幕平台根据上报的数据指标,给出平均值、80分位值等,绘制性能报表。

    然后是分析性能报表,他们找到指标不合理的地方,复现问题,进行优化。优化完成后,通过 AB 测试得出性能指标提升,评估体验提升。这样通过长期优化,渐渐达成秒开目标。

    由于百度搜索前端团队的优化更多借助 NA 能力,对我们借鉴意义很大,在这里我就重点介绍一下。通过数据分析,手百前端团队性能问题主要集中在以下方面:

    1. WebView 初始化耗时 500ms;

    2. Hybrid 初始化大概 100ms,更多是指调起 App 时,Native 对协议中传入参数的解析及对模板头部和 body 的解析;

    3. 正文加载和渲染;

    所以优化的思路大致是看WebView 初始化是否可以优化、串行逻辑是否可以并行、渲染速度是否可以提升。落地方案就是借助CloudHybrid和WebView 预创建。

    具体来说,借助 CloudHybrid 方案,采用 SSR + 预加载 + 拦截请求的方式,可以简化页面渲染流程,提前化和并行化网络请求逻辑,进而提升 H5 首屏速度。而 WebView 预创建,就是为了减少 WebView 创建期间的耗时,我们在适当时机提前创建好它,放入缓存池,当页面需要展示内容时,从缓存池取出即可。

    手百团队用了很多 Native 的能力,比如首屏统计、卡顿率统计等。好处显而易见,手百客户端内的 H5 页面不需要进行开发就可以全面接入覆盖;缺点是方案依托 NA,升级时需要客户端来发版,另外如果要分享到端外,由于需要 H5 形式承接,指标采集和优化就必须有一套对应的解决方案。

    对此,他们依托于 San 技术栈来完成(类似 Vue 和 React 的 MVVM 框架),在 San 框架内部,采集性能指标,对 SSR 方案进行定制化优化。

    阿里云

    阿里前端技术团队尤其是淘系,因为业务场景复杂,在性能方面有很深的造诣,秒开率指标就是这个团队最先提出的。

    他们的整体性能优化思路及常规方案与百度非常类似,都是通过设定性能指标,搭建性能平台,针对监控平台上的数据诊断发现问题,优化完成后看业务数据变化。

    由于阿里云的性能监控方案在体验指标方面非常有特色,业界很多业务都开始上云服务,所以这里我重点介绍一下阿里云的 ARMS 性能监控方案,另外再聊聊双十一场景下的优化。

    那什么是 ARMS 性能监控方案?它是一种通过页面打开速度对 Web 场景进行监控,以此来提升站点性能体验的方案。很多阿里系业务都在使用这个方案对性能进行优化。

    这个方案用的是什么性能指标呢?

    ARMS 性能监控方案定义了一个性能指数Apdex,用来表示性能体验等级标准,其计算公式为Apdex=(满意数+可容忍数 / 2)/ 总样本量。Apdex 使用白屏时间作为计算指标,也就是T,默认取 2s。公式中满意数为 0~T,可容忍数为 T~4T,不满意为大于 4T。

    这是一个总体的指标,除此之外,还有首屏时间、秒开率、白屏时间、可交互时间、domReady 时间、Load 时间等指标。除首屏时间和秒开率之外,都是通过根据 W3C 规范中定义的 Navigation Timing API 计算出来的。

    由于首屏时间非常重要,我在这里就着重说一下在 ARMS 性能监控方案里,它的计算过程。

    首先是通过 mutationObserver 监听页面元素的变化,然后遍历每次新增的元素,计算元素得分总和,如果元素可见得分为 1,反之得分为 0。

    遍历过程采用的是深度优先遍历算法。如果子元素可见,则父元素可见,不用计算;如果最后一个元素可见,则之前兄弟元素可见,通过减少这些计算过程,来提升采集脚本的性能。

    这是具体的实现方案,业务侧怎么接入使用呢?非常简单,ARMS 性能监控方案支持 CDN 接入、NPM 包接入两种方式。

    CDN 接入,代码示例如下所示。

    uid: "xxx" // 该值用于区分用户的标识,根据业务设置。
    <script>
    !(function(c,b,d,a){c[a]||(c[a]={});c[a].config={pid:"xxx",appType:undefined,imgUrl:"https://arms-retcode.aliyuncs.com/r.png?", uid: "xxxx"};
    with(b)with(body)with(insertBefore(createElement("script"),firstChild))setAttribute("crossorigin","",src=d)
    })(window,document,"https://retcode.alicdn.com/retcode/bl.js","__bl");
    </script>
    

    这里面主要是设置 uid 来区分不同的业务名称,然后将请求统一发送到服务端的地址 https://arms-retcode.aliyuncs.com/r.png? 。接着向括号中的地址请求采集脚本(https://retcode.alicdn.com/retcode/bl.js),并设置该请求支持 crossorigin 跨域。这样如果加载过程中报错,可以通过阿里云的异常监控捕获到。
    使用 npm 包接入只需执行以下命令即可:

    npm install alife-logger --save
    

    以上是有关 ARMS 性能监控方案的介绍,接下来我结合双十一会场项目,和你介绍下阿里云是如何进行性能优化的。

    一般双十一会场项目的性能问题,主要集中在以下几个方面:

    1. 复杂网络环境下的问题,尤其是低端 Android 机环境下的问题;

    2. 拉新活动时,外部 H5(如投放在知乎、新浪微博的广告)调起淘宝 App 时需要初始化一些组件,从而导致页面体验相对于端内 H5 差的问题;

    3. 会场营销活动页面,因为二次访问率低,缓存数据过期导致的重复渲染和页面元素跳动问题。

    针对上述问题,具体的优化方案,阿里主要利用数据预加载、缓存和 SSR 方案来解决。

    其中阿里的 SSR 方案**,**较之于常规,具有低风险、低成本的特点。具体来说,阿里的 SSR 提供平滑的自动切换方案,在遇到问题时可以切换到 CSR 来实现低风险;通过提供统一的 Fass 服务,将前端、客户端和服务端能力结合在一起,可以方便低成本接入。

    它是怎么做到的呢?

    当页面需要 CSR 渲染时, 前端应用通过数据中的模块列表来加载模块并渲染,当页面需要 SSR 渲染时,前端应用使用 SSR 返回的 HTML 塞入 root container 中,然后根据模块列表加载模块最终的 Hydrate(注水,形象化描述将字符串数据变为可用的组件的过程)。这就是自动切换方案。

    而统一的 Fass 服务是指 SSR 渲染后台服务,独立出的一个数据服务,在文档服务返回内容保持静态化不变的同时,根据页面提供的模块列表和模块所需数据,将内容动态加载并渲染成 HTML。

    通过该方案,阿里可以将秒开率提高了一个新高度——82.6%,并且在业务指标方面(如 UV 点击率)也有不小的提升,最高达 5%。

    阿里云因为要为海量用户提供服务,属于B 端产品,所以相关的性能统计方案很统一,实现起来简明扼要。双十一会场的优化,用的都是进阶的一些手段,因为业务体量大,一点体验上的改进,会带来业务收入上的较大收益。

    美团

    美团在前端性能优化方面,会对首屏时间、白屏时间、页面加载完成时间,以及流畅度进行检测,进而对白屏时间过长,首屏加载慢和交互体验不一致进行优化。性能平台上,他们也会给出一些分位值,如 TP50、TP90 和 TP99,对秒开率进行统计。

    美团一般采用的是 Hybrid 开发模式,在这个模式下,美团大前端团队通过EnhanceHybrid(增强混合方案)方案、SSR 和离线化技术来进行性能优化。其中 EnhanceHybrid 是一大亮点,且对首屏时间贡献最大,具有零白屏时间的称号,我重点介绍一下它。

    这是一个什么方案呢?

    EnhanceHybrid 是一个视图切换的预加载方案。主要参考了苹果手机里的视图切换逻辑。当用户点击 A 的按钮进入 B 动作时,只有当 B 的动作完成之后,系统才会让 A 切换到 B,这样有效降低了白屏时间。就像你点击手机的设置按钮,当这个动作完成后,才会出现设置页面。

    这个方案重点解决了三个问题:

    1. 无法在跳转 B 之前完成 B 的加载和渲染;

    2. 无法获取 B 的渲染进度;

    3. A 等待时间长。

    它是这么解决的呢?

    当用户触发 A 视图到 B 视图的跳转操作后,系统会隐藏式地开启一个新的 Webview 网页视图,并展示加载等待动画,此时会展示 B 的加载和渲染进度(这个进度只能是模拟的估计)。当 B 视图加载完成,首屏内容渲染完成后,客户端通知网页视图,进行 A 视图的展示。此过程中 A 等待时间长的问题,可以通过离线化来解决。

    这个方案的一个好处是,直接可以接入使用,不需要业务前端做什么。

    小结

    好了,以上就是百度、阿里云、美团的性能优化方案,这里我们做一个对比。

    性能优化本质还是为了解决业务的问题,手百属于超级 App,解决了它的性能问题,就解决了大多数场景下的性能问题,所以借助 Native 能力做重性能方案是值得的。

    阿里云提供的服务旨在标准化,不能有太多个性化的统计方案,同时淘宝、天猫双十一会场遇到问题复杂度很高,我们场景的性能问题,他们都经历过。所以在性能指标采集和 SSR 方案实现方面要前沿一些。

    美团立足 Hybrid 做了 EnhanceHybrid 方案,低成本、务实地解决了性能问题,挺符合这个公司的文化的。

    下面给你留一个问题:

    当下 RN 或者 Flutter 技术很火,为什么不直接用它们,而选择 EnhanceHybrid 方案呢?

    欢迎在评论区和我沟通,下一讲,我将介绍 RN、Flutter、小程序这方面的性能演进。


    # 精选评论

    # 潘:

    美团的enhancehybird好像网上没有什么资料?请问下哪里能看到全面一点的资料呢?

    #     讲师回复:

        这块儿资料比较少,你遇到具体什么问题了,可以咨询我

    编辑 (opens new window)
    上次更新: 2021/09/20, 16:50:45
    16 黑科技:详解预请求、预加载及预渲染机制
    18 性能演进:RN、Flutter、小程序和 Enhance Hybrid

    ← 16 黑科技:详解预请求、预加载及预渲染机制 18 性能演进:RN、Flutter、小程序和 Enhance Hybrid→

    最近更新
    01
    好玩的docker
    07-04
    02
    我的第一个NFT
    07-03
    03
    海外迅雷
    06-01
    更多文章>
    Power by vuepress | Copyright © 2015-2023 神族九帝
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式
    ×