AICon日程100%就绪,9折倒计时最后一周 了解详情
写点什么

跳出前端看前端,才能跟别人平等对话

  • 2020-02-06
  • 本文字数:2935 字

    阅读完需:约 10 分钟

跳出前端看前端,才能跟别人平等对话


对于很多前端同学来说,如何在工作中掌握更多的话语权,甚至主导解决方案,是他们当前很关注的问题。在这方面应该怎么做呢?在 GMTC 全球大前端技术大会(深圳站)2019 现场,InfoQ 记者采访了阿里巴巴高级前端专家,ICBU (阿里巴巴国际事业部)性能架构师易晓峰,请教这个问题。作为无线前端和工程团队的负责人,他认为现在前端越来越复杂,很多问题需要多方协同解决,所以要跳出前端再去看前端。如果只盯着前端自己的领域,很难去跟别人平等对话。前端需要保持一个空杯心态,多向后端、客户端同学学习。


InfoQ:请您介绍一下您在阿里巴巴的经历以及您团队的基本情况。


易晓峰:我是 2015 年加入的阿里巴巴,一直在阿里巴巴的国际事业部,也就是 ICBU,我们是一个面向全球用户的国际化团队。我加入后就进入了刚刚组建的无线前端团队,算是见证了整个阿里巴巴国际站无线化的发展。目前我主要负责无线前端以及工程团队,今年团队主要是在跨端和性能两个方向上。


InfoQ:对于一个面向全球用户的大型电商网站,它在性能优化上要重点考虑哪些因素?


易晓峰:性能优化我觉得通常会存在一个“不可能三角”,什么叫“不可能三角”呢?就是性能、规模、成本这三者你只可取其二,很难三者兼得。对我们来说,能通过哪些方式朝向三者兼得的目标去突破是我们的重点。


所以我们做性能优化基本上会考虑这几个方面:第一,我们的方案对于整体性能能够提升多少;第二,我们的方案是不是能够规模化;第三,我们要考虑这个方案的成本。


对于阿里巴巴这么大一个网站,不可能像一个小网站一样通过整体重构去提升性能。做一个 Case 的性能极致很容易,但是如果我们要在低成本规模化下达到性能极致,这是相当难的,我把它叫性能的工业化生产,如果一个性能方案做不到工业化生产,它可能就不是一个特别好的方案。


还有一个重点就是要考虑到国际化的特殊性,包括地区的差异性、物理距离、用户分散等复杂的问题。这些特殊性会给我们的性能优化带来很多挑战,有些行之有效的方案可能需要调优才能工作得好,有些大家认为完全不会是问题的可能会成为问题。


InfoQ:具体到阿里巴巴,在性能优化上我们是怎么做的?


易晓峰:我们主要围绕两个方向 。第一个方向是减少资源的响应时间;第二个方向是降低执行运算的复杂程度。但跟传统的前端性能优化不太一样的是:我们会从网、云、端整个链路去看性能的优化。


在网络层面,我们会有如 BBR 加速、动态加速、边缘流式渲染等;在云端,我们会做 SSR、API 优化、链接复用等;在端上,会有各种缓存策略、API 加载等性能的优化。此外我们对数据也非常重视,会花很大精力做数据的度量、数据的采集,因为数据不只是可以让我们的优化成果得以呈现,还能够指导我们去做优化。打个比方,全球网络最差地区,跟网络最快地区,可能相差 70 倍,这么高的一个网速的差别,用户硬件设备在体验上的差别也会很大。所以我们会基于数据去做分层,了解整个链路中的每个环节时间的消耗。例如一个用户它可能是从 Facebook 跳过来的,经历了很多次跳转到你这边来,性能可能就会比较差;但如果说用户直接打开网页,性能就会好一些。不同的设备,不同的网络,性能到底阻塞在哪里,我们都要通过数据去发现问题,然后去寻找解决方案。


InfoQ:随着业务的发展,我们性能优化工作的重心发生过哪些变化?


易晓峰:我们性能优化这块可以分成三个阶段。第一阶段叫做蛮荒时代。什么叫蛮荒时代?就是纯靠体感进行优化。比如老板去国外,回来说我们网站太慢了;或者大家自己觉得最近我们这个网站太慢了;或者程序员良心发现,觉得太慢了,我们应该把它修一修。这个时候主要就是纯前端层面的优化,比如说 JS 大小,或者拿着雅虎前端优化的 35 条军规对一对,做一下优化;或者一些什么通用的优化方案,做一做看一看。


第二个阶段叫做工业化时代。我们建立了一个多维度全链路的度量分析体系,以及数据监测体系,同时我们在网、云、端做全方位优化。


第三个阶段很快就会到来,叫做精细化时代。为什么要精细化呢?因为我们现在性能优化已经进入了深水区,这时候就需要去精耕细作,用数据驱动的方式去做差异化的优化,根据不同用户客观环境(网络、用户设备)和主观环境(用户行为及动线)去做差异化优化。


InfoQ:您个人比较关注前端领域哪些技术发展趋势?


易晓峰:首先我比较关注跨端;其次比较关注性能;第三比较关注 D2C(Design to Code)。另外就是边缘计算,虽然到现在这个技术的基建还是非常薄弱,但是我觉得它未来是有无限可能的;除此之外,我们还很关注 Google 的技术,毕竟我们是一个国际化团队,像 Google 推出的 PWA、AMP,以及我们现在和 Google 合作的 TWA,都是我们关注的重点。


InfoQ:您的角色还挺神奇的,又负责前端,同时又是性能架构师,为什么会有一个这样复合的角色呢?此外对于希望从前端转向架构师的同学,您有何建议和忠告?


易晓峰:我觉得性能跟前端本身就比较相关,前端重体验,而性能又是体验的一部分。你服务器的性能好不好用户不一定能感知到,用户感知的都是跟前端相关的东西。其实我们在做性能优化的时候一直在提一个概念:“用户不是要真的快,他是要感知到快”。性能这个事情本身在前端的视角去看会更合适,或者准确来讲,它叫做用户视角,因为我们离用户更近,我们更有责任、也有义务去把这个事情做好。


建议和忠告不敢说,只能说一点浅见吧。现在前端面临的问题越来越复杂,很多问题我们需要结合多方一起解决,我们需要跳出前端看前端,如果只是盯着前端这个领域,很难平等对话及主导解决方案。现在要在前端领域做好,除了前端专业的知识,还需要很多的服务器、客户端、数据库、网络等多方面的累积。所以我们也需要保持空杯心态,多向后端、客户端学习。


InfoQ:2019 年在大前端领域,您觉得有哪几个技术发展是超过预期的?2020 年您对趋势的预判是什么?


易晓峰:第一个是跨端跨容器技术,2019 年我觉得跨端技术太繁荣了,百花齐放,比如 SwiftUI、Flutter,以及各种小程序的解决方案;另外就是 D2C,过去一年我们在这块儿发展还是挺好的。


我再说说 Serverless,2019 年大家都在讲 Serverless。Serverless 是云计算发展到一定阶段之后的一个比较有意思的产物,我觉得它会彻底改变前后端的协作模式。后端未来可能更专注于领域模型的建设,前端可能更专注于产品的建设。过去这个中间呢,其实有很多牵扯。大家都讲前后端分离,但是怎么去分离?大家本质上还是在组成一个东西。现在如果是基于 Serverless 这种方式,就是让前端拥有控制数据的能力,同时你又不用去担心这个服务器的运维问题,我觉得这个对于前端会带来很多变化。还有一个就是现在部署在 CDN 边缘结点上的 Serverless,这个会给前端带来非常多的可能。我们现在正在做的边缘流式渲染,就是利用了 CDN 边缘结点 Serverless 的能力。


当然在我看来无论是跨端技术,还是 Serverless、D2C、边缘计算,我都很看好他们在 2020 年的发展前景。


嘉宾介绍:


易晓峰,阿里巴巴高级前端专家,ICBU (阿里巴巴国际贸易)性能架构师,负责无线前端 &工程团队。2018 年主要负责性能优化,从网、云、端全方位优化三端性能,让海外用户的性能得到了极大幅度的提升,同时还建立起用户视角的国际化性能监测及度量体系。欢迎对国际化事业有兴趣的前端朋友们加入我们:微信:wvv8oo。


2020-02-06 16:102619

评论 1 条评论

发布
用户头像
lol
2020-02-07 16:32
回复
没有更多了
发现更多内容

最强阿里巴巴历年经典面试题汇总:C++研发岗

linux大本营

c++ Linux epoll 服务器开发

Windows后渗透之权限维持

Thrash

cornerstone 基础概念篇(二)

Lazy

大前端 脑科学 脑科学软件工程 脑影像

cornerstone 基础概念篇(一)

Lazy

cornerstone 脑科学 脑科学软件工程 脑影像

Flutter Tab

Geek_7e907c

Flutter

Geek_7e907c

如何设计高效的HBase数据模型

Jowin

HBase

阿里技术官最新总结12W字JAVA面试宝典,吊打面试官的硬核法宝!

Java架构之路

Java 程序员 架构 面试 编程语言

如何从Docker镜像提取Dockerfile?

运维研习社

Docker Dockerfile 5月日更

Spark RDD详解

大数据技术指南

大数据 spark 5月日更

CRUD程序员勿进!全身心投入才能读懂腾讯大佬亲码的“Java微服务”学习笔记

Java架构师迁哥

据说学会这款数据分析工具,会被各大名企高薪哄抢!

博文视点Broadview

Kubernetes入门——Kubernetes日志采集与监控告警

百度开发者中心

百度 Kubernetes 云原生 kubernetes入门 技术课程

情场失意的我,幸获师兄捞了一把,助我拿到6个大厂offer,Java岗

Java架构师迁哥

中国信创生态系列报道|融云CEO韩迎:坚持双轮驱动,信创未来大有可为

融云 RongCloud

记一次java读取matlab数据方式

Lazy

Java 后端 matlab 脑科学软件工程

在FL Studio中如何混音你的鼓组采样与旋律采样

奈奈的杂社

经验分享 知识分享

Webrtc 屏幕共享

融云 RongCloud

DICOM图像中灰度理解

Lazy

脑科学 脑科学软件工程 脑影像

Docker网络学习第五篇-基础网络模式

Lazy

Docker

canvas从零到一,实际案例

Vue 海报 js ts canvas

css与less,sass的奇妙之旅

less SASS

Java岗面试攻略分享,阿里的offer真的不难拿

Java架构师迁哥

ELK协议栈基本介绍

五分钟学大数据

大数据 5月日更

iOS 面试策略之系统框架-UIKit

iOSer

ios 面试 语言 & 开发 系统框架

【LeetCode】整数转罗马数字Java题解

Albert

算法 LeetCode 5月日更

阿里内网流传的9w字图解网络(全彩版)GitHub现已下载量过百万

Java架构之路

Java 程序员 架构 面试 编程语言

这份Github下载量高达76.9W次的《Java系列面试宝典》,足以吊打各个大厂面试官!

Java架构之路

Java 程序员 架构 面试 编程语言

容器Pod语系修改

ilinux

Serverless:这真的是未来吗?(一)

Serverless Devs

运维 云原生 服务器 #Serverless

开源十问, 社区新人快速上手指南

DT极客

跳出前端看前端,才能跟别人平等对话_大前端_张晓楠_InfoQ精选文章