虽然接触推荐算法是2009年，第一次组建人工智能团队却在2014年底。在经历了应用发行、广告、信息流和浏览器等业务，看到人工智能给业务带来的巨大价值，因参与其中而被彻底征服。那时起我就坚定认为，人工智能是继计算机以来最强大的力量，将会从每个角落彻底改变世界。

从32k猫和网页三剑客开始，一直热爱着前端，看着人工智能时代到来，萌发了帮助前端进入人工智能领域的愿望。2018年4月在前端委员会的共创会上，提出“前端智能化”方向。设计和规划直到推动这个方向落地，已经一年多。我在实践中发现，对前端智能化不理解、不会做，是阻碍前端工程师参与其中的最大障碍。

不理解主要是因为缺乏前端智能化的定义，大家不懂我在说什么、做什么，很多听过我分享的朋友都强烈要求我给大家提供一些学习建议和资料。曾尝试写过一些文档，但总觉得无法简单把前端智能化讲清楚，有必要把自己的实践经验和思考总结都梳理一下，供大家参考。

对比智能和前端智能

“前端智能”是在人工智能驱动下的前端技术，就像机器学习是人工智能的子集，前端智能是在前端领域实现智能化的途径和技术。人工智能在前端领域应用，自身从理论转向应用媒介是工程技术。因为人工智能理论研究过程涉及计算机软件辅助，学术和技术相互转换的门槛不高。

在行业推动下产生了“算法工程师”这个热门岗位，经历过从零组建算法团队以及大量的业务实践，逐渐认识到这个岗位的特殊性——过渡。机器视觉（图像分类）、语音（科大讯飞）、强化学习（OpenAI的Alphago）、自然语言理解（谷歌词向量）……等方向上，研究的重大突破背景下，产业和学术双方都在积极推动学术成果的产业落地，算法工程师肩负联结学术和产业的重任。但是，本质上学术和产业是有重大区别的，除了微软研究院、谷歌研究院等企业下属的专门研究机构，在业务上算法工程师的工作，大部分时间是用工程技术手段落地学术成果，虽然论文多、学术氛围浓郁，但真正能在业务上产生实际价值的很少，因此，应用领域需要的学术研究能力有限，只有长期研究改进、经过产业落地验证过的少数学术成果，是多数应用场景的选择对象。因此，前端智能首先要关注行业上成熟的学术研究成果，学习论文做实验仅用于判断技术发展趋势和脉络即可，集中精力围绕学术和技术构建工程能力。

前端智能无需学习太多底层数学原理和算法细节，优秀的学术研究成果基本都是经过大量研究、演算、实践、验证、优化的，除非是天才，很难提出底层原理性创新。首先，关注点应该聚焦在问题定义上，最终希望人工智能解决的问题是什么？（是否能用人工智能解决及解决程度判断）“第一性原理”分析后，最核心及本源的关键点是什么？（对问题的归纳和抽象确定应用方向）这些关键点属于人工智能的哪个领域？（在哪个学术研究领域寻找可靠学术成果）是否有充分、高质量的标注数据来描述问题？（监督还是无监督学习）其次，通过实验找到合适的模型和合适的训练方法，围绕描述问题的程度和模型的要求组织数据，用恰当的方法训练。最后，借助现有的前端工程链路把模型的能力服务化，在业务中验证模型服务能力和效果，根据使用过程产生的数据继续优化模型。

对比人工智能，“前端智能”是在前端领域对人工智能的工程应用技术和方法，降低人工智能应用工程成本、提高工程质量，促使智能化对业务产生价值，这是前端智能关注的核心问题。

对比前端和前端智能化

前端智能化是一整套全新方法论，帮助前端技术升级到智能化前端技术。在阿里内部推动智能化的过程中经常被问到：既然Python里已经可以系统化解决机器学习的问题，为什么要在前端技术领域里用前端技术再造一套轮子？是的，Python确实在机器学习领域内是无可争议的新晋霸主，传统C/C++和Matlab也拥有丰富技术生态，但是，在这些技术领域里理解和使用人工智能和机器学习，对于推动前端技术在“AI时代”进步作用不大。最终，还是要回到前端技术领域内去理解和使用人工智能的能力，一方面，可以“更前端”地方式去思考人工智能的价值，另一方面，借助人工智能帮助前端工程体系和前端技术体系进行成长和发展。相比于在Python里重新实现前端复杂的技术和工程体系，还是在前端技术体系基础上，用智能化改造和发展更加实际。

举例来说：Node.js刚刚问世的时候也存在巨大争议，Node.js对前端的意义和价值不大的声音仍然存在，事实上Node.js作为Javascript技术在服务端延展，极大丰富了整个前端技术和工程领域的技术生态，核心解决了“谁最理解谁定义”这个问题。过去，前端工程师最理解UI交互，业务中却无法定义构成UI交互背后的配置和数据。起初，这个问题在模版技术帮助下，前后端分离、动静分离等应用场景中，并没有产生太多的问题。此后，随着动态能力要求提高，系统复杂度的逐渐增强，传统方案背后，大量前后端之间的沟通协作成本，增加了研发成本，降低了研发效率和可用性。Node.js赋予前端工程师跨技术领域、跨平台编排业务逻辑、代码逻辑的能力，Node生态迅速繁荣，迎来了前端工程效能黄金时代，“前端智能化”未来也和Node.js一样立足前端技术领域解决“智能化”技术如何应用的问题，作为最理解业务场景和用户的一线技术，把人工智能技术工程化、业务化，把用户价值带回一线。

对比前端和前端智能化，后者应该是前者技术生态土壤上长出的新物种。前端智能化在前端技术内部，可以丰富技术视角、技术思想、技术手段。前端智能化在前端技术外部，可以拓展更多应用场景、赋予业务更多价值，缩短和其他软件技术的差距。

前端智能的问题

看一个技术领域如同看企业发展，马化腾回忆微信成长发展过程时说：被别人干掉不如被自己干掉，被别人革命不如革自己的命。任何技术都像企业一样有盛衰荣辱，Javascript作为一门编程语言，前端作为一个技术领域，之所以有生命力，是源自于这个领域的从业者不断突破，不断创新，不断革自己的命。

因为做浏览器，对行业发展变化属于鸭先知，移动端带来的寒意和前端技术全面退守中后台，共同释放着前端技术应用场景缩小的信号。前端技术却顽强的创新和反击，从RN和Weex带来的FE-Native混合应用开始，PWA和Hight Level Web API对Web容器性能体验优化，TypeScript带来的强类型和大型项目代码组织能力，小程序在私域流量中的发力，Node.js带来服务能力和工程能力的升级，移动端APP带来场景缩小的冲击，被前端技术自身变革发展所缓解。所谓天晴修屋顶，未来技术发展趋势和脉络如何？给前端技术带来的冲击和机遇是什么？

旧：用户 —— 前端技术/客户端技术 —— 服务
新：用户 —— 前端技术/客户端技术 —— 边缘计算框架 —— 模型 —— 服务

对于旧的方式来说，前端技术是连接用户到服务之间的桥梁，连接的手段是UI、交互逻辑、业务逻辑、代码逻辑。今天正在发生着新的方式，借助边缘计算框架AliNN、NCNN、xNN、Tensorflow lite……等，模型已经在端上承担识别用户和识别场景的工作。今天，以ML Kit为载体，人脸识别（刷脸鉴权）、肢体识别（尬舞）、语音识别（语音交互）、语音合成（数字播报）、图像识别（机器视觉）……等能力可以在客户端方便的调用，由这些能力组成的更个性化且高效的UI交互方式，客户端已经在使用这些模型能力改变研发方式。当人工智能技术继续发展，她不仅仅是调用这个API还是调用哪个API的问题，而是将人工智能技术的能力融合进UI交互领域，用新的方式服务用户的技术问题。

融合人工智能是趋势，当设备借助摄像头和模型人脸识别能力直接鉴权时，传统的登陆过程会逐渐被抛弃，就像今天的登陆方式已经越来越多采用手机号加短信验证码一样。以往编排UI逻辑过程中，打开首页会变成：xx用户在xx场景下打开首页，模型还可能提供用户习惯的操作路径及获取服务的方式，以往粗放的：加载模版、拉取资源、获取样式、渲染页面的方式显然无法满足需求，所有步骤都会附加诸多条件，例如：加载白领女性年轻化模版、根据xx场景获取xx资源、根据xx场景获取xx样式……等一系列附加条件，让UI更懂用户提供更个性化的服务。这绝不是换一下API就能解决的，涉及到针对整个技术体系和工程体系的升级。

通过总结，可以聚焦在三个问题上：移动端场景复杂、新旧UI和交互方式技术体系不兼容、个性化需求增多带来的研发成本。人工智能带来的技术革新，呈现在具体前端技术工作场景上，会带来怎样的变化。

移动端场景复杂度太高

PC时代，家和办公室是主要场景，硬件运算能力有限、软件技术落后，一个字符界面到图形界面的升级，就足以轰动整个行业乃至世界。随着软硬件技术发展，互联网技术的进步，除了传统的生产和娱乐两大主场景，生活场景也逐渐融入到软硬件产品中。移动端本质上把PC和互联网装进口袋，人们随时随地和互联网保持连接，同时，借助不断革新的硬件，随时随地可立即使用强大的存储和运算能力。这种变化从空间上看，把家和办公室作为主场景的情况进行了彻底拓展，除非明确被禁止，否则，空间上任何地方都可能是用户使用移动端的场景。从时间上看，便携的移动设备几乎从早到晚在攫取用户的注意力，聚会上司空见惯的玩手机，马路上随处可见的低头族……即便电池无法满足全天高负荷续航，随处都可以刷个充电宝给电池回回血。当一个技术随时随地可以被使用，那么，这个技术所设计的场景一定非常复杂。

除了上述时间和空间场景外，还有很多构成场景的要素，有着丰富多彩的可能性。还记得，之前学习记叙文写作时，基本写作要素是：时间、地点、人物、情节、环境。而场景可以理解为，一个人在特定的时间和空间，和环境发生了什么情节的互动。除了时间和空间，参与者的特征、环境的特征是复杂且动态变化的，不同参与者与不同环境互动的不同方式产生不同的情节也是复杂且动态变化的。假设一个用户在午餐时间路过一家餐厅，收到推送提醒这家餐厅有优惠券可以使用，用户进入餐厅落座，扫码点餐下单，就餐完毕后扫码付款。在这个场景中，用户不断变化的行走路线、消费对优惠的敏感度、就餐口味的变化、资金情况……等，都会让这个看似简单的就餐场景，演化出更多的复杂性和场景的变化。

按照常规技术视角来看，基于时间、地理位置、推送、活动投放、二维码、电子支付等技术即可完成上述场景。按照智能化的视角来看，当前场景移动端上实时的传感器数据如何使用，服务端上的离线非实时数据如何获取，利用人工智能的方式理解这些数据并服务于当前场景，给用户提供更加个性化的服务、更好的体验。移动端上的传感器包括：图像传感器、光线传感器、惯性加速计、磁场传感器、四轴陀螺仪角度传感器、音频传感器、触摸传感器、结构光深度传感器、3D视觉传感器……等，这些传感器的数据被实时送入模型，不同的模型根据单一或组合的传感器数据产生特定功能，例如图像传感器和结构光深度传感器、3D视觉传感器一起，借助模型产生人脸识别功能，预测当前传感器输入的数据是否符合本地加密存储的特征数据，籍此来完成基于人脸识别的鉴别功能。再比如惯性加速计和四周陀螺仪角度传感器一起配合，由模型在训练时使用跑步时的惯性和角度传感器数据进行机器学习，掌握在跑步时惯性和角度数据的特征和模式，未来模型就可以根据实时的惯性和角度传感器数据来判断用户是否在跑步，那些足不出户把手机粘在洗衣机里的人来说，无法再随便混步数了。这种例子还有很多，随着传感器的增多、数据更精确、检测更实时，这些排列组合将逐渐化生成为人体感官知觉能力的延伸，就像外骨骼对人肢体能力进行延伸发展。

模型则把原始传感器数据翻译成有价值的理解和判断，好像从日志里找寻BUG或性能优化的蛛丝马迹，一万个程序员眼里可能看出一万种问题，模型也会从数据中产生不同的理解和判断。对于一个成年人、一个男性成年人、一个从事IT工作的男性成年人……不同深度的抽象层次，一个富有和冲动的成年男人这种不同角度的抽象方式，模型根据数据将产生越来越多复杂的理解和认知，这些理解和认知都将从参与者角度出发，把场景变得更复杂。

交互不兼容

除了场景和参与者，另一个将复杂度推向极致的是交互行为，这是未来技术挑战最大的部分。PC时代的主要交互方式是键盘和鼠标，键盘确定的键值把参与者的物理敲击带入到数字世界，鼠标则通过指针的运动把参与者的物理操作带入到数字世界，简单、明确、直接、统一的输入方式大大简化了UI和交互设计、实现的难度。移动端用虚拟键盘和触摸操作分别延展了传统键盘和鼠标的输入习惯，但是，移动端智能带来的人脸识别基础上表情输入、肢体识别基础上动作输入、运动识别的姿态输入……，复杂的输入方式要求在场景、用户、交互方式等方面重新思考技术实现方式。

阿里巴巴双十一有个笑脸大作战的活动，借助AliNN的强大移动端机器学习加速能力，实时对用户的表情进行检测，对用户的表情和Emoj进行匹配。这种基于模型对人脸识别的应用还有更广阔的想象空间，除了这种小游戏，还可以把表情输入抽象成一种交互方式，比如皱眉头表示取消、微笑表示确认，用户交互行为的输入就不是查询一下BOM或API那么简单了，而是需要对模型给出的预测结果理解，并对不同预测结果做出正确的响应，而不是简单的把交互行为看作以往OnType、OnClick这么简单，现在的前端框架和技术都未体系化思考这种变化的技术方案。

个性化需求增多研发成本高

社会的方方面面都是在做成本和效率的平衡。日常出行的时候，开车出行无疑是最高效的，开车就走。坐出租可能成本低一点，毕竟不用买车，缴停车费，但是要约要等，效率不如买个私家车。地铁、公交依此类推，在降低成本的同时损失了效率。这里降低成本的方式是“公共化”，越“个性化”效率越高，背后付出的成本也更高，越“公共化”效率越低，背后付出的成本也越低。

从商业的角度看，计算机软件和互联网行业流量达到一定程度后，人口红利和流量增长的红利逐渐消逝，企业更加关注效率，一个用户每次接触到产品和服务时能产生多少价值？一个新闻APP，如果用户每次打开看到的都是不感兴趣的内容，一个电商APP，每次打开都是不喜欢的商品，无法产生用户价值。现在的技术能力就像“公共化”，对用户打标签、对内容打标签，然后机器学习、协同推荐各种算法一齐上，却始终只能把效率提升到“一群人”这个程度，因为针对每个用户进行个性化服务的成本太高。

解题思路

过去凭借动态化能力应对复杂场景

网页三剑客的时代，页面基本都是静态的，“DHTML”里的“D”起初只是用户交互部分的动态。为了摆脱静态页面的一次性带来的高昂研发成本，动态化技术随之产生，借助模版技术和动态数据填充的方式大幅降低研发成本。更多传统桌面应用程序和软件工程专家加入前端，最终把逐页面开发的方式转向桌面应用程序类似的开发方式。用控件呈现数据进而拼装组件、搭建页面，单页面应用程序更是把动态化技术推向巅峰。需求变更中的数据和样式变化都被动态化技术解耦，勿须或少量修改代码、勿须或少量发布就可以满足产品需求。

程序设计的复杂度永远都不会消失，只会转移。按照动态化技术分析，动态化能力越强，就要求整个架构和程序在设计实现之初越灵活，越灵活就要求研发过程越复杂，把箭头转向另一个方向，不需要过多设计根据每个需求实现每个页面，在设计之初异常简单却几乎完全没有灵活性，需求变更的时候只能重写。回到复杂场景的应对上，灵活性是否能匹配复杂场景，需求变更和新需求能否被良好实现，是平衡复杂度和灵活性的一把标尺，即便不断增加灵活性，因为新场景出现的速度并非渐进式的，很多场景凭借人体识别突然爆发让整个技术体系猝不及防。

对需求理解的深入度，决定了对需求未来变化的预测准确度，无法准确预测需求变化将无法判断今天的技术储备是否能应对未来的变化。这里的技术储备放到实践中看，包括预先准备好的框架、脚手架、库、模版、主题、组件、控件等，由于突然爆发的场景大部分难以用现有的技术去实现，这些准备就会失效。例如在VR的场景，即便有3D相关的积累，没有深入理解VR场景前，也难以用现有的技术储备完整、良好的实现一个VR的场景，就像Vive里播放视频和浏览网页，只是在3D空间强行渲染一个2D的界面，很难把这个场景服务好，这背后需要大量研究、实践和思考，比如3D空间的遮挡问题、虚拟物件和UI结合的问题、3D场景下可交互性问题……只要把这些场景用现在的技术体系去实践一边，就会暴露出大量需要重构的地方。

继续看VR的例子，是否可以简单的在现有技术上做拓展，以克服场景复杂性带来的技术问题？先回顾一下现在的状况，即便手机屏幕有大刘海、小刘海、大眼睛、大下巴……还有诸多异形屏，但是，总体可以将UI概括为2D的多边形。进入VR场景，UI可能和任何形状结合，可能是一个3D沙盘，也可能嵌入到一些透明材质内部，也许会悬浮在空中，复杂的场景应对的办法就是用前端智能化彻底对技术体系重构和改造。

现在凭借模型感知简化场景复杂度

以运营和营销活动小规模试水的场景，未来即将成为基础设施。移动互联网确实把互联网装在用户口袋里，让每个人随时随地保持和网络的连接，但资费居高不下带宽捉襟见肘，很难孕育出行业的变革。不限流量、3G和4G的较高网速、可接受的套餐价格，共同决定了移动互联网是否能成为基础设施。

今天看红包大作战只是一种营销活动的玩法，移动端人工智能框架不够成熟，模型能力和软件能力的连接不够紧密合理，缺少技术沉淀和积累研发成本高。随着软硬件技术的不断完善，对人工智能的理解不断深入，人工智能和软件能力的连接会更加紧密健壮，研发成本会逐步降低，最终，类似双十一表情大作战背后的人脸和表情识别，都将成为构建业务场景的基础设施。随着基础设施的完善和发展，所涉及的场景也愈加复杂，业务将逐渐发挥出技术的每一滴潜能。

建议继续学习：

1. 如何成为一名优秀的web前端工程师（前端攻城师）？    (阅读：5421)
2. 前端第三方服务优化策略    (阅读：4247)
3. 也谈谈前端，架构，框架与库    (阅读：3567)
4. 用于前端的模板引擎    (阅读：3059)
5. 淘宝网：前端安全须知    (阅读：2929)
6. 前端性能优化的方向    (阅读：2842)
7. 我做前端一年半    (阅读：2719)
8. 2009年前端技术领域回顾    (阅读：2705)
9. 前端的横向发展    (阅读：2323)
10. 近几年前端技术盘点以及 2016 年技术发展方向    (阅读：2274)