加入大淘宝到现在也有六年多了，一路走来很开心可以一直做技术。负责过业务、基础库、工具以及架构，期望自己不断成长。想对之前的工作做一些思考和记录，也想为后续的工作找一个合适的开始。有蛮多话想说的，这次就先从

前端性能现状提到前端你最先想到什么？前端工程？web？JavaScript、CSS、HTML？如果站在用户的视角那是他们距离信息最近的地方，无论前端在生产技术上如何演变，最终服务于信息表达的根本不会变。在互联网诞生的初期就已经存在前端技术了，起初它就和传真没有什么区别，只能表达一些简单的基础信息，但随着浏览器不断的技术演变，如今的前端领域已是拥有超级复杂的信息表达系统了。如今的前端除了可轻松构建起丰富的信息表达形式，更具有可共享、易更新、多平台运行等等的优点，随着生态体量的不断壮大，前端技术也逐渐慢慢渗透到了其它终端领域。比如在移动应用中使用

前言：前端领域的自动化测试一直以来对于前端同学来说，自动化测试都是一个比较特殊的命题。一方面，大家其实都知道自动化测试的好处，做了什么改动只要跑一遍测试用例就知道有没有改挂了之前的逻辑，进行修改时也更有底气。而另一方面，前端本身就具有特殊性，活动页从需求评审到正式上线可能在一周内就完成了，这种迭代速度还写测试用例就是折磨自己。但实际上，自动化测试在前端工程中也是相当重要的一部分。即使是快速迭代的活动页面，也会有通用的工具函数与

协议的支持。相应的需要对播放器配套设施需要升级，包括测试方案及其覆盖度的完善、日志能力的完备、体验评价体系及全链路画质及质量监控的建设。如果大家有相类似的场景、相关的经验，欢迎与我们进行交流。

Demo示例如下图：1、Node.js应用状况集团在2019年的时候，Node.js应用状况表现为：a、服务器利用率低：集团1600+Node.js应用，常年cpu利用率

TypeScript，以及落地相关研发规约的经验。在开始前，我们先做一个简单的铺垫。淘宝旺铺是店铺业务中面向商家的一站式店铺管理后台，最重要的部分之一就是旺铺装修页面。商家在这里使用官方模块、外部

性能优化是一个老生常谈的话题，每谈及性能优化，我们一定会提到的就是用户体验，用户体验的好坏是决定产品成功与否的关键。性能优化是为了提升用户体验，从这个角度出发，“快”即是好的用户体验，但我们知道，用户体验其实是一个相对抽象和复杂的概念，性能只是其中的一个影响因素。那么究竟何谓用户体验，又何谓好的用户体验呢？本文尝试从一个前端技术同学的角度，来谈谈对于用户体验的一些理解和看法，如果文中存在理解有误的地方，还望指正。什么是用户体验我们先来看看，维基百科对于用户体验的定义：用户体验是指一个人使用一个特定产品或系统或服务时的行为、情绪与态度。包括人机交互与拥有产品时的操作面向、体验面向、情感面向、意义面向、与价值面向；还包含用户对于系统的功能、易用、效率的感受，因此用户体验在本质上可以视为一个人对于系统的主观感受与主观想法。简单来说，用户体验指的是一种在用户使用一个产品（服务/系统）的过程中所建立起来的纯主观的心理感受。影响用户体验的因素为了让大家对于用户体验更有体感，下面我们通过一个例子来进行说明：在一个阴雨的秋天傍晚，小丽下班乘坐公交车回家，由于是晚高峰，公交车上十分拥挤，她没有找到座位，只能扶着车门边的把手站着。她突然想到在外出差的丈夫小明，由于今天刚被老板批评了工作不认真，所以想要向丈夫寻求安慰，于是她准备用手机给小明打电话。提问：在上面的场景中，有哪些因素会影响小丽使用手机时的用户体验呢？在前面我们提到，用户体验指的是“用户在使用产品过程中的心理感受”，那么下面我们就来分析一下在整个过程中，可能对小丽心理感受产生影响的因素有哪些：首先是小丽当时自己的情绪状态（被老板批评，心情沮丧），可能会影响到她使用手机打电话时的心理感受。然后是周围的环境状况，也可能产生影响，例如：感官因素（下雨，移动的车辆，路过的景物，灯光，噪音──小丽通过感官所感受到的环境）社会因素（同路的乘客，联系上丈夫的可能性──他人对用户体验的影响）时间因素（公交车的行程时间──时间上的限制）基础成本因素（是否有信号，电话和短信的费用──使用成本的限制）任务目的因素（打电话是一个双向对话“任务”的一部分，而其它正在进行中的活动可能扰乱或中断这一“任务”，例如：注意自己什么时候该下车──其他活动的限制）......最后是手机产品功能本身对小丽的影响，例如：由于扶着门把手，手机在单手操作时是否方便？由于戴着口罩，无法人脸识别，手机的其余解锁方式是否足够便捷？在手机通话的用户界面，是否能快速找到小明的电话并拨通？手机是否支持语音助手，可以直接拨通电话？.....通过上面的分析，我们可以看到，影响用户体验的因素可能是多方面的，并不仅仅局限于产品功能本身。总的来说，我们可以将影响用户体验的因素分为三个大类：使用者状态：动机、期望、情绪、认知、性格...所处环境状况：感官因素、社会因素、时间因素...产品功能：功能、交互体验、界面设计...“使用者状态”和“所处环境状况”这两类因素，其实也就是我们在进行产品设计时经常提到的，产品面向的用户人群和使用场景。在产品设计时，通过对典型用户人群和使用场景的研究分析，能够帮助我们设计和完善产品功能。用户体验设计在上面我们介绍了用户体验的定义和影响用户体验的因素，那么站在产品设计者的角度，怎样的产品设计才能够提供好的用户体验呢？我们首先来看这样一张图：上面这张图，一方面反映了网站建设并不像表面看起来那么简单，另一方面图中关于网站建设的五个部分，也对应了《用户体验要素》一书中，产品设计影响用户体验的五个层次，从抽象到具象分别为：战略层：指产品的目标，要解决什么样的用户需求，例如手淘是要帮助用户买到喜欢的商品范围层：指产品的功能组成，例如手淘需要通过搜索、详情、购物车、支付等完成购买结构层：指产品的链路设计，例如手淘需要帮助用户在海量商品中快速找到想买的商品并完成下单框架层：指产品的交互设计，页面结构和布局，行动点的位置等表现层：指产品的设觉设计在日常工作中，产品需求的迭代，所经历的也就是这样一个层次渐进的过程，整个过程需要由我们产品经理、运营、交互设计、视觉设计和技术开发同学的共同参与。好的产品体验，离不开每位参与者对这五个层次由浅入深的研究、思考和打磨。从前端视角来看通过上面对用户体验要素层次的划分，我们不难看出，前端的范围主要在用户体验的表现层和框架层，是用户体验的第一道把关者，可以说，前端工程师的每一行代码，每一条样式，每一段交互都直接影响着用户最直观的感受。可能有的同学会认为，表现层和框架层的设计主要由交互和视觉同学负责，前端只是技术实现，表现层和框架层用户体验的好坏是由设计结果来决定的，前端在其中起到的影响很小。不可否认，用户对于产品的第一印象的确是由视觉同学的设计结果来决定的，但是视觉同学所产出的也仅仅只是一张静态图或有简单交互效果的原型图而已，用户与这张静态图所产生的所有交互体验都是由前端工程师来实现的，这其中对于体验细节的把握和完善也同样重要。那么从前端开发者的角度来看，有哪些体验细节需要我们关注呢？仅仅是性能优化吗？我们可以从下面三个方面来进行思考。

AttachAddon(webSocket);terminal.loadAddon(attachAddon);在这个例子中，为

为了兼容老的浏览器，尤其是IE系列，使用ES6以上规范的前端代码往往使用Babel等转码工具转码成ES5的代码。距离发布ES6的2015年已经过去了6年了，现在浏览器对于ES6的兼容性如何呢？我们来看下CanIUse的数据：可以看到，有98.14%的浏览器支持ES6.

JSError、Crash、接口等指标。通过技术指标的异常去分析异常原因。但是实际上技术指标可能和实际用户感知的问题没有指标关系，比如某个

前端的世界一直在变化着，在各种熟悉的语言进化中迅速的化学反应。也许你和我们一样，对前端的理解也在不断刷新。欢迎你和我们一起，在淘宝这个丰富多彩、包罗万象的平台上，发现无限的潜力。

由于淘宝目前的链路，我们只能在浏览器上做视频解析的操作，这也给到前端一些机会。社区上存在两种自定义截帧的方案，一种是使用video+canvas，一种是用FFmpeg+WebAssembly。

前端的世界一直在变化着，在各种熟悉的语言进化中迅速的化学反应。也许你和我们一样，对前端的理解也在不断刷新。欢迎你和我们一起，在淘宝这个丰富多彩、包罗万象的平台上，发现无限的潜力。

token进行命名的，它很自然的描述了该token的使用场景，无须查看文档就已经知道这是用于active状态下的一级按钮背景色。当然每个人可以根据自己项目最适合的开发场景来定义token的命名。

在缺陷预测那一步，我们得到的结果可能好也可能不好，但是问题在于缺少可解释性。所以我们要通过测试用例、静态分析等各种方法，以及对于它们之间的相关关系进行分析，试图能够从缺陷的角度来理解问题的根源。

第三是机器学习的框架。光了解深度学习还不够，传统的机器学习在更贴近业务的时候，可能效果更好，还节省算力资源。比如可以使用mljs库，地址在：https://github.com/mljs/ml

在项目开始之前，我们就开始沟通整体的技术选型和美术创作工具，也就是创作选型，我们沟通了几种动效选型。一种是帧动画，以逐帧的方式来播放动画；第二种是骨骼动画，基于一套基础的骨架，来播放动画；然后是

前面提到的都是单个视频播放的场景，实际业务中还有同一个页面中多个播放器的场景，比如列表流、版头等，这时候就引入了播放器多实例控制的问题，需要保证页面内只有一个播放器播放（播放甜区）、内存管理等。

开发领域中这个函数是可以分别对这两个元进行求偏导的。忘了什么是偏导？没关系，简单理解就是这两个元素的任意变动，所引起对整个组件整体所产生的变动都是可推测的。有没有回想起些什么？对，这也是

Support（https://www.electronjs.org/docs/api/context-bridge#parameter--error--return-type-support）。

为了对用户做定向权益和货品，承接页会进行红包直塞、补贴价计算逻辑，原本的执行逻辑交给前端来控制，通过红包模块请求完毕后发送事件告诉其他模块发起请求，在用户网络条件不稳定的情况下，首屏可见时间不可控。

前言回顾什么是H.265？本文在这里就不对H.265做介绍了。感兴趣的朋友可以看下面的文章了解详情。（第一篇是我们在2019年3月发布的文章，距今已有2年，时间过得真快）《Web端H.265播放器研发解密》[1]WebAssembly的发展看了上面那篇2年前的文章应该清楚了浏览器对于H.265支持程度。好消息是经过两年发展，Webassembly发布了1.1版本，增加了很多新特性，性能也有了提升。坏消息是浏览器依然不支持H.265，估计以后也不可能会支持了。所以呢两年后的今天如果我们要在浏览器里播放H.265还是需要借用Webassembly+FFmpeg的能力。本文也不多加介绍了，细节看下面的链接吧。Webassembly[3]FFmpeg[4]现状这篇文章的目的是？H.265播放器（Videox.js）在淘宝直播落地已经近两年了。之前的架构设计主要针对的是直播的场景，播放m3u8和flv的直播流，由于直播落地的场景是B端主播中控台，使用场景是可以预览画面即可，故而对帧率要求不高。但是今年的短视频业务面向的多是C端用户，需要在Web场景下播放1080P/720P的H.265视频，那么必须满足短视频主流分辨率+码率流畅播放的要求。同时业务上还要支持多视频格式如（mp4/fmp4）的需求，所以综合评估后对原有架构进行了升级。既然有了升级自然就需要沉淀下经验。按照一贯套路我就来水一篇文章了。当然这两年内业界也有大量H.265播放器的实践落地，我写这篇文章也是借这次重构的机会分享自己的一些经验，希望能帮助各位少踩些坑。视频演示如下将演示新版播放器播放

为什么会有运营工作台背景电商发展20余年，给无数消费者带来了全新的购物体验并深深改变了整个商业环境，繁荣的表面下，整个市场已然已进入白热化竞争的阶段。随着互联网大范围普及所带来的用户增长及流量红利逐渐萎缩，各电商平台的规模越来越大，获客成本成倍增长，整个电商行业开始进入平稳、成熟期，现有市场空间很难再有爆发式的增长。当前各大平台消费侧、营销侧等模式及策略也逐渐趋同，竞争愈发激烈。

本文作者：刘博文（Berwin），花名“玖五”，畅销书《深入浅出Vue.js》作者、知名技术博主、讲师、阿里巴巴淘系技术部前端技术专家，现负责淘系618、双11等超大型营销活动主会场的终端渲染架构。回想起年初刚来杭州那会，是疫情正严重的时候，那时候刚来杭州要住半个月的酒店，然后才能进入阿里巴巴溪西园区（后续简称”园区”），时间过得飞快，一晃已经来杭州半年了，这半年经历了很多，也学到了很多，写一篇文章总结下这半年来自己的成长。勇于挑战权威要勇于挑战权威，发现现有技术体系的问题，并解决它。记得当时刚来杭州时，心情是非常忐忑的，对未来非常憧憬，能和那么多很厉害的工程师一起工作是一件特别爽的事，再加上我们团队是做双十一大促会场的，技术人都知道双十一对工程师来说意味着什么。入职后，一大堆技术名词和各种技术体系铺面而来也确实让我感受到了技术的强大，所以就一直以学习的心态在了解和接触现有的技术体系。进入园区后第二个月就开启了618战役，感谢主管墨冥的信任，当时我承担了一个非常重要的专项PM（Project

的效果好坏。由此可见，人工预演这种方式不仅时间和人力成本过高，而且防护效果有限，并不适合作为长期的防控手段。所以，我们向前探索准备通过一些产品化的手段来解决防控效果和成本问题，就有了如下的一些尝试。

headers内容里，headers里面写入版本号、灰度状态直接在渲染层注入到页面模板内容，模板渲染的时候可以写入到全局参数中具体方式web

布局即是代码中每个节点与节点之间的关系，是父子关系还是兄弟关系。从颗粒度大小上划分，可以分为页面间模块/区块之前的关系、模块/区块内原子模块/区块之间的关系以及原子模块/区块内组件、元件之间的关系。

前端的世界一直在变化着，在各种熟悉的语言进化中迅速的化学反应。也许你和我们一样，对前端的理解也在不断刷新。欢迎你和我们一起，在淘宝这个丰富多彩、包罗万象的平台上，发现无限的潜力。

诸如dinamicX的语法是XML的，表达式很晦涩，有没有一种前端友好的DSL方案呢？整个新奥创协议是怎么样子的，新奥创平台如何做到端到端的研发的等等这些，我们留到后面跟大家再做整体的介绍。

Model(https://job.alibaba.com/zhaopin/positiondetail.htm?trace=qrcodeshare&positionCode=GP658916)。

当然现在ER的技术才刚刚起步，还有很多不足和成长空间，我更看重的是这个新技术的给前端拓开新的视野，前端的生命周期能延长到CDN边缘节点上。也许读者看到这里，已经想到其他可以在ER上尝试的新玩儿法了。

前端的世界一直在变化着，在各种熟悉的语言进化中迅速的化学反应。也许你和我们一样，对前端的理解也在不断刷新。欢迎你和我们一起，在淘宝这个丰富多彩、包罗万象的平台上，发现无限的潜力。

为了解决产品运营们随时调整页面结构、增删模块等灵活性的业务要求，同时在当前结构下能够利用客户端缓存做到资源离线最大化的技术诉求，目前的会场页面使用了多段式的终端渲染方案：先加载HTML和Entry

前端的世界一直在变化着，在各种熟悉的语言进化中迅速的化学反应。也许你和我们一样，对前端的理解也在不断刷新。欢迎你和我们一起，在淘宝这个丰富多彩、包罗万象的平台上，发现无限的潜力。

目前已覆盖支付宝、特价版、优酷、高德、淘小铺、一淘等App，以及通过百川SDK集成在众多外部媒体App。业务上也接入了每日必抢、大牌直降、淘宝特价、淘宝直播、百川媒体、优酷、小铺、轻店、花呗等业务。

今年，淘系首次引入了史上最大规模与商家系统联合的全链路压测。过去，由于商家系统没有经过高强度的全流量压测，淘宝将订单信息持续推送给商家时就会发生挤压，导致商家的服务器容量不足，造成大量订单无法发货。

随着前端领域边界的不断拓展，前端工程师的日常工作内容已经与几年前有着巨大的不同。Serverless、微前端、智能化等新兴技术使得前端的技术闭环越来越完整而又错综复杂，前端交付的也早已不再只是简单的

前端的世界一直在变化着，在各种熟悉的语言进化中迅速的化学反应。也许你和我们一样，对前端的理解也在不断刷新。欢迎你和我们一起，在淘宝这个丰富多彩、包罗万象的平台上，发现无限的潜力。

基础组件粒度小，强调通用性，难以覆盖所有场景。对于垂直业务而言，会有特定交互逻辑或数据处理逻辑，例如阿里的花名选择器、钉钉的唤醒图标、淘宝的小蜜机器人等等，它们就是业务组件(Business

algorithm(https://developer.mozilla.org/en-US/docs/Web/API/WebWorkersAPI/Structuredclonealgorithm)

前端的世界一直在变化着，在各种熟悉的语言进化中迅速的化学反应。也许你和我们一样，对前端的理解也在不断刷新。欢迎你和我们一起，在淘宝这个丰富多彩、包罗万象的平台上，发现无限的潜力。

工作台支持图像分类、文本分类等模型的训练，而且，所有的操作都可以通过图形化界面来完成。用户不需要了解模型训练的细节，只需要按照提示，提供训练所需的数据，就可以完成模型的定制。同时，MNN

随着前端领域边界的不断拓展，前端工程师的日常工作内容已经与几年前有着巨大的不同。Serverless、微前端、智能化等新兴技术使得前端的技术闭环越来越完整而又错综复杂，前端交付的也早已不再只是简单的

2020）CSS活动中分享了一个有关于CSS特性相关的话题。看了一下这个主题的PPT，里面有些新东西还是蛮有意思的。基于该PPT，我稍微整理近24个CSS方面的新特性，感兴趣的同学可以继续往下阅读。

前端的世界一直在变化着，在各种熟悉的语言进化中迅速的化学反应。也许你和我们一样，对前端的理解也在不断刷新。欢迎你和我们一起，在淘宝这个丰富多彩、包罗万象的平台上，发现无限的潜力。

基于上诉的一些问题拆解，再加上我们希望用户在本地初始化完成的模块工程就是一个开箱即用的状态，不用再去调整一些默认配置。所以我们决定在Rax基础脚手架之上去定制和扩展我们互动需要的能力：

和相关依赖），我们希望训练完成后的模型就能直接使用，而不再需要任何繁琐的前置步骤。模型方面，我们将支持更轻量级的目标检测模型（YOLO/SSD），这对于一些简单场景的目标检测任务也能轻松胜任。

前端的世界一直在变化着，在各种熟悉的语言进化中迅速的化学反应。也许你和我们一样，对前端的理解也在不断刷新。欢迎你和我们一起，在淘宝这个丰富多彩、包罗万象的平台上，发现无限的潜力。

CRUD，感觉工作几年下来没什么成长。诚然，有意思、有挑战的工作确实不多见，更多的是一些琐碎的、重复的工作。所以，在工作之外，也需要花一些时间，关注下业内资讯、新闻，看看书、写写博客、参与一下

我们可以发现其实行业频道的模块大同小异，功能类似，一些高频模块的覆盖率达到了70%+，对这些高频模块进行规范和复用，理论上能省掉近一半的开发人力。于是，接下来对高频模块开始进行抽象和规范: