leejim

leejim 查看完整档案

深圳编辑  |  填写毕业院校  |  填写所在公司/组织 b.anyhub.cn 编辑
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 该用户太懒什么也没留下

个人动态

leejim 发布了文章 · 5月27日

小程序加载性能优化实践

前言

对于互联网产品来说,第一印象就是应用的启动速度。虽然启动足够快时用户不会有很大的感知,但是如果慢就会被发现就会被挑战,总结来说,快就是应该的。

而应用的启动速度优化,又可以分成首次启动速度优化和二次启动速度优化。对于不同的类型,对应的优化方案也是截然不同的。要如何确定优化方向以及优先级呢,这就要从具体的业务场景出发。

业务场景

但凡不谈业务场景就直接谈优化都是不够专业的。

本次优化实践主要是依托在微保的车险业务。

众所周知,车险一般都是一年期的保险。因此车险用户的访问频次非常低,一年一次。其次,因监管要求,用户在投保车险之前,必须要先完成实名认证;认证通过之后才能添加要投保的车辆。因此一个用户要想完成投保,一定要经过实名认证、添加车辆、报价、支付、完成投保等步骤。

另外,为了优化用户访问频次低的问题,平台通常会提供一些车主必备服务。以提升用户活跃度。

由此可见,微保车险的业务矩阵大致如下:

相较于车主服务,主流程的性能显得更为重要,毕竟涉及到成交的流程才是关键。因此,本次总结也是在 主流程 上优化实践得出的。

优化方向

绝大多数车主用户只拥有一辆汽车。因此一年之中就只有一次购买车险的机会。对于如此低频的产品,每次用户过来,都是全新的UI,全新的代码。相当于每次过来都是首次启动,此时 首次启动速度 就显得极为重要。这也是本次优化的主要方向。

我们参考Google提出的RAIL性能模型目标。

  • 以用户为中心;最终目标不是让您的网站在任何特定设备上都能运行很快,而是使大部分用户满意。
  • 立即响应用户;在 100 毫秒以内确认用户输入。
  • 设置动画或滚动时,在 10 毫秒以内生成帧。
  • 最大程度增加主线程的空闲时间。
  • 持续吸引用户;在 1000 毫秒以内呈现交互内容。

总结起来,我们的第一优化原则就是,保证绝大多数的用户能够较快地访问我们的应用。

准备工作

展开性能优化工作之前,还有一个重要的准备工作。即要预先采集基准数据。有了基准数据,才能很好地衡量自己的优化效果。

微信公众平台虽有提供小程序启动耗时、下载耗时的图表,但由于不能提供原始数据,不利于细化分析,因此本次性能优化采用的是自建日志上报系统提供的数据。

确定好性能指标,获取到相关数据,这还不够。

由于现实网络环境非常复杂,收集的原始数据是非常粗犷的,相同的代码,相同的配置,在不同的网络环境和手机上,加载时间会千差万别。因此对于收集到各种极端数据,必须要做一定的加工处理,才能变成可分析的数据:

常见的加工处理(指标计算口径)主要如下几种:

  • 平均数: 最直接的想法,计算所有数据的平均值。但是平均数会因为部分极端值导致偏大,会观察到数据的波动较大,因此平均数不适合作为参考指标。
  • 95分位数: 将所有数据从小到大排列,取第 95%位置的数值,将这个值作为我们的性能指标。
  • 截尾平均数: 同样将所有数据顺序排列,将尾部的部分数据移除,然后取平均值。这个值会相对平稳,比较适合作为参考指标。

结合前面提到的第一优化原则,明显 截尾平均数 这种指标计算口径是最佳选择。

比如假设我们承诺保证90%的用户在1000ms内完成小程序的加载,那么我们就只要关注前90%的用户的加载耗时是否在1000ms内即可。

通过截尾获得耗时较少的前50%、80%、90%用户的平均加载耗时数据(后续横向分析这三类用户的加载耗时的优化效果)

处理好数据之后,进行性能分析的时,可以如下进行分类分析:

  • 按手机系统(Android、iOS)分类
  • 按网络环境(WIFI和4G)分类

以下是采集的 4G网络下,不区分手机系统 的车险分包的加载耗时(作为优化前的基线数据):

实践

由于小程序有提供许多基础API、UI库,而这部分代码是每个小程序的依赖。因此初始化代码的时候,这个是最先初始化的,渲染流程大致如下:

相对于传统web,我们能在很多环节上做优化。比如资源加载顺序(图片懒加载、CSS前置加载,JS后置加载等),使用构建工具实现按需加载等。但小程序的底层逻辑比较封闭,我们无法深入参与,因此要优化小程序的加载性能,能做且最行之有效的方案就是优化小程序代码包的大小。

优化代码包大小的方案主要有以下几种:

  • 移除未使用的代码
  • 实现代码按需加载(在小程序里,即是采用分包加载方案)
  • 移除小程序包里的图片资源(因为小程序包下载时,默认使用了gzip压缩,而非文本的压缩效率较低)
  • 简化JavaScript,尽量避免在前端进行复杂的计算(将JS逻辑尽量迁移至后端或者采用Nodejs中台来完成这部分计算工作,这样也利于后续扩展到多平台)

移除未使用的代码

由于车险是微保最先推出的产品,经历了无数多个迭代,不可避免会出现已下线的业务或功能。这部分代码一般都是以页面为单位,因此可以结合PV数据来找到这部分代码。

提到PV数据,顺带提一下如何自建日志上报系统。由于小程序的每个页面都有完整的生命周期,因此进入一个新页面时,都会触发Page的onLoad方法,此时通过向后台服务上报进入页面的信息,即可完成页面PV数据统计。

对于如何实现错误路径的重定向处理,提供两个思路:

  1. 小程序提供的路由能力(如wx.navigateTo),当传入的url不存在时,会触发 fail 方法,此时在 fail 处理下即可。
  2. 使用 wx.onPageNotFound 方法处理,不过有一定的兼容性问题。

移除未使用的代码之后,车险分包由 1100+KB 降到 900+KB (减小18%)

代码按需加载

理想情况下,访问用户应该只下载有访问到的资源,其他资源一概等到需要的时候才下载。这种按需加载的方案,小程序是采用代码分包的方式处理。但由于分包与分包之间无法相互引用资源,无法复用代码,因此拆分分包必然导致开发的效率下降。因此拆分分包时,要把握好性能与效率的平衡。

由此,我们提出了 基于UV及访问路径的分包拆分原则

结合日志系统,我们发现车险的实名认证页是UV大户,而实名认证的逻辑和添加车辆、编辑车辆的逻辑比较类似,均包含了车辆管理逻辑和组件。因此这部分页面的代码相似度较高,比较适合拆成一个分包,最终将实名认证、车辆管理等页面拆分到:新用户分包A。

其次,通过观察页面漏斗数据发现,大部分的用户只访问了主流程上的页面:车险首页、报价页、支付页、保单详情页。至于调整方案页、车辆列表页等分支流程,只有少部分用户会访问到的。因此将主流程的页面拆分成主分包B,而其他所有分支流程的页面则拆分成另外一个分包:其他分包C。

最后将车险的分包拆分成如下:

  • 包含实名认证、车辆管理流程的新用户分包A(200+KB)
  • 包含主流程的主分包B(400+KB)
  • 包含分支流程的其他分包C(100+KB)

对于新用户(未完成实名认证),通过预检测实名情况,分发不同路径,从而实现新用户仅先加载新用户分包A,与此同时预加载主分包B。因此对于新用户来说,首次加载的是200+KB的新用户分包A,相对于优化前加载的900+KB完整分包,加载的小程序分包大小减少了78%。

对于旧用户(已完成实名认证),不再加载新用户分包A,与此同时预加载了其他分包C,因此加载的小程序分包大小减少了56%。

简化JavaScript

这部分优化与传统web开发的优化原理类似。

代码包下载完成之后,就要完成业务代码注入。这时,JS引擎就要解析/编译JavaScript,这也是JS引擎最耗时的操作,从Chrome开发者工具可以看到,其中黄色部分就是解析/编译耗时的部分:

因历史遗留问题,导致一些复杂的数据需要前端拼凑计算处理(如可续保车辆的计算等)。将这部分逻辑迁移至后端后,JavaScript的代码得到了进一步简化,只对最终数据做基本展示变换。

由于本次实践没有深入这方面的优化,故不详细叙述这块优化的效果,后续有机会另外开篇文章详细讲。

遇到的问题

在本次优化实践的过程中,遇到了许多问题,和大家分享一下我们的处理办法。

第一个遇到的问题,就是组件的引用。

因为小程序的限制,组件不能跨分包互相引用,要想跨分包复用,就要将组件放在小程序主包,而主包的代码是跨业务共有的,不能随意添加。因此在拆分分包的时候,需考虑到这个问题。

其次,是JS公共库的引用问题。

原本在同一个分包时,通过相对路径引入即可。但拆分成多个分包之后,JS就无法直接引用了。此时需要变换思路,如:将JS公共库挂载到全局变量global上;或者将代码copy一份到其他分包上(当然不是直接copy,是通过gulp或者webpack打包);又或者将公共库放在主包上。

还有更让人头疼的是,目录变更导致的路由跳转问题。

由于小程序分包机制要求每个分包都在一个目录里。因此拆分分包就不可避免地要对文件进行迁移,而小程序的跳转又和文件目录强耦合,文件路径变更导致跳转路径变化。因此涉及到的页面的跳转路径均要改变。

此时,还要考虑向前兼容,比如已推送的模板通知。因此路由跳转的封装就显得极为必要。

效果

经历以上的抽茧剥丝,终于等到了上线时间,可以到看,优化的效果非常明显:

横向对比不同分类的用户,可以更清晰看到各类用户的提升情况:

对于较快的前50%用户,也提升了接近50%的访问速度。

此次优化,保证了90%的用户可以在2000ms内完成小程序的加载。

后续优化

对于接下来的优化工作,我们仍有几个计划:

充分利用小程序提供的预下载分包功能。若没有设置预下载,用户在跳转其他分包页面时,就要等待分包的下载。对于比较急躁的用户,会以为卡机了,最终导致用户跳出。(小程序预下载的唯一限制就是,当前分包和预下载的分包大小之和不能超出2M,如果超出,可以考虑再次拆分分包)

简化WXML的class。类选择器是最常见的样式选择器,当页面变得庞大时,class的长度往往会越来越长。然而在不支持DOM操作的小程序里,class的主要作用主要是样式注入。因此可以通过脚本将WXML和WXSS相同的class统一精简成短小的命名。

采用Node.js中台转移部分计算。将JavaScript的代码进一步简化,这样有利于对小程序的加载性能进一步优化。其次,这样也有利用扩展到其他平台,比如H5等。

总结

尽管看似微信小程序的开发、发布方式和传统web有很大的差异。但是底层的运行还是类似的,因此可以从传统的web优化实践中找到优化的思路。

其中本文提到的一些优化实践是非常定制化的,是根据特殊的业务场景采取的特殊方式处理。毫无疑问,业务在发展,代码也会随着发生变动,这就需要不断的优化,才让用户的体验愈来愈好。

感谢大家阅读,如有错误,欢迎指正,感谢。

查看原文

赞 0 收藏 0 评论 0

leejim 收藏了文章 · 5月26日

玉伯的人生答案:做一个简单自由有爱的技术人

导语:

前端工程师如何成长?如何管理前端团队?如何打造团队文化?近日,蚂蚁研究员兼体验技术部负责人玉伯,在蚂蚁内部技术人的成长公开课上,分享了他的人生愿景和心路历程。

玉伯,蚂蚁研究员,体验技术部负责人。2008年加入淘宝,2012年开始在支付宝致力于设计语言 Ant Design、数据可视化 AntV、知识协同语雀等领域的工作。目前一心打造服务于蚂蚁金服及业界的一流技术与产品。

正文:

mceclip1_20200509104332_PT8K.png

今天给大家分享的议题,是如何做一个简单自由有爱的技术人。简单自由有爱是体验技术部的团队文化,同时也是我个人的人生愿景。我一直会去想,自己要成为什么样的一个人,究竟要活成什么样?这几年我找到的一个答案,就是去做一个简单自由有爱的人。今天跟大家分享一下我对这几个词的一些理解,以及背后的一些心路历程。

一、做一个简单的技术人

简单,对我来说有些特殊的含义。

我从开始做前端到现在已经有13年。一直以来,我觉得自己做技术时,追求的就是保持简单,追求技术的简单性,也追求做技术时心态的简单性。

在很多圈,包括技术圈,都有鄙视链的存在,比如说做Java的可能看不起做前端的,做前端的可能看不起做测试的,做产品的可能看不起做技术的,做运营的觉得产品都是为业务打工的。在这个鄙视链里,很多岗位的同学或多或少都会有职业上的困惑。

我知道很多前端同学,都会问自己一个问题,前端职业发展的天花板在什么地方?我究竟应该做几年前端?临近 35 岁要不要转型?很多同学都会有疑惑。但在这几年的工作经历里,我觉得其实每个岗位都很重要。我印象中逍遥子说过一句话,他说在公司里面,如果一个岗位不重要的话,其实早就取消了。每一位前端同学,每一位技术岗位的同学,职业上的困惑往往源自心态,要想在某个领域做到好,心态一定要保持简单,这一点很关键。

我经历过从前端转Java,在做前端之前我是写C++的。在转行过程中,我会问自己一个问题,究竟什么样的工作能让自己进入心流状态,能够让自己开心、有成就感、有价值感。然后我会发现在做前端写界面时,在做人机交互实现时,自己会没日没夜地去写代码,最终调试产出后很有喜悦感。只要一个岗位能够带给自己这种心流和喜悦感,那这个岗位对自己来说,就是很重要的。其实没必要去做很多横向比较。

比如说现在AI很火,算法很火,是不是我们都要去转型做人工智能?如果AI这一块确实能让你感觉到心流状态,能持续兴奋,去做就好。但如果只是为了去趁一个热点,那千万别去做。每一个岗位都很重要,不必去做比较。踢足球跟打篮球谁更重要?并不存在这种比较,每个人都很重要。这是我想分享的第一个点。

后来我就持续去做前端了。我自己还有一个感觉,就是做技术,一定要保持真实不装,用专业说话。我之前做SeaJS、KISSY、Ant Design等技术项目时,和团队同学会有不少争执,开源项目里,远程异步吵架更是家常便饭。

在这些争吵里,技术人都很简单,不看层级不看谁长得黑,只看谁在专业上能说服大家。坚持用专业说话,很多事情都会变得简单。现在挺怀念做技术时这种专业上的简单讨论,比如性能哪个方案好,通过数据来看,有一说一,非常简单有效。

现在做产品,我们也在尝试用专业说话,任何人都可以反驳我,但要从专业上说服我,还可以和我赌,我赌输了,就给大家发红包,赌赢了,也是我给大家发红包,鼓励专业上的深入思考,敢于争辩,任何据理力争的探讨,都是对团队有益的,最怕的是沉默。

做技术时,还会强调一点,要静水深流,很多领域都是要花长时间去做的。举个例子,像数据可视化,我们做G2和AntV是14年开始做,直到18年的时候,才初步有一些感觉出来。这之前的3年多时间,是一定要静下心来去做的。静水深流,很大程度上需要你的真热爱。

做数据可视化时,我当时是很兴奋的。萧庆有推荐一本书给我,《The Grammar of Graphics》,这是图形语法的一本书。我们之前写的图表,饼图、柱状图、趋势图等,都是一图一表。如果有一种图形语法,让我们可以自由选择直角坐标或极坐标,再通过可视通道映射,把不同的数据,映射到不同的可视通道里,就可以生成出不一样的图表出来。这种灵活性,用传统的 ECharts等图表类库是感受不到的。一旦感受到,就会非常兴奋。

但真要实现 G2 图形语法,需要我们能静下心来,花很长时间去阅读文献,去钻研,小到一个布局算法的实现,可能就是好几周的时间。真正花很长时间,深入去做,才会有些产出。

静水深流的同时,我们还要考虑如何接地气。所谓接地气就是如何跟业务衔接上,如果你做了很多专业研究,最终在业务上不能落地,那肯定有问题。一定要两手都要抓,一手要在专业上不断静水深流,一手要在业务上不断找落脚点。

我们常说,“此时此刻,非我莫属”,这个说法有个背面,是“每时每刻,做好自己”,坚持每时每刻做好自己,会让工作和生活都很简单。最近支付宝在用户体验上被很多用户吐槽,每个同学都会有自己的一些意见。做为技术,我们在吐完槽后,更重要的也许是去尝试推动解决技术能解决的问题。

“此时此刻,非我莫属”,更多强调的并不是态度问题,而是能力问题。怎么提升各方面的专业能力,才是最重要的。很多时候并不需要你主动去说“此时此刻,非我莫属”,而是要让你的能力能让别人看到,因为你的能力而被选中去做,才叫“此时此刻,非我莫属”。要被选中,一定需要长时间积累提高专业能力,这样别人才能够认可你,才会有被选中的机会。

二、做一个自由的产品人

mceclip3_20200509105144_TKVO.png

第二点谈到自由,我会着重讲下做产品的一些感受和经验。我的一个梦想是希望做一个自由的产品人。怎么才能在做产品时,拥有自由的状态呢?

大家常说“唯一不变的是变化”,这是很好的一个价值倡导。但对我来说,一开始挺困惑的。小学学数学,勾股定律非常吸引我,居然就是勾三股四玄五,它在欧氏几何里是一个不变的规律。大学研究生期间我是学物理的,物理学非常注重的一点,就是寻找万世万物的规律,这些规律里也有很多不变的东西,比如普朗克常数、光速等物理常量。为什么不变?这中间的物理诠释,非常美妙。“唯一不变的是变化”,我的理解里,背后还有一句话,叫做“万变之中,不变至美”。当我开始做产品,发现这句话非常管用。

举个例子,语雀里面的不变,是始终在知识领域,一直专注在知识的创作与交流上。做产品经常需要面对各种变化,这时寻找到不变的初心或定位,对产品的长远发展非常重要。这需要刻意锻炼自己在产品上的宏观眼力,能判断产品处于什么样的大趋势下,核心的差异化竞争优势在哪。

几年前,公司用Confluence或Wiki管理文档,也能用,选择做语雀,很大一个原因,是因为看见了Confluence的痛点,它不能跟上公司的变化,Confluence里很多文档,是跟随组织结构的,但组织结构在阿里经常快速变化,很容易导致Confluence上的文档被不断抛弃,停滞更新,很容易带来知识的荒岛化和孤岛化。

在这种背景下去做语雀,采用团队+知识库的模型,不绑定组织结构,让知识尽可能扁平化、尽可能开放,就能让语雀上的文档更有生命力,这是语雀在知识管理领域很核心的一个差异化竞争优势。同时不断提升文档的创作体验,让优势更具优势,并努力想办法让知识能流动起来,这是语雀里的关键点。文档的创作体验与知识的流动性,是语雀里面非常关键的不变点。当把这些不变点给抓住时,很多产品上的功能决策,就会变简单很多。

做产品过程中,光有眼力是不够的,还需要手力。手力是方法论,是术,是具体怎么去做。比如如何做用户体验地图,如何做具体的产品决策。俞军有一本书很不错,叫《产品方法论》,它里面有个概念是:用户是需求的集合。我们做一个产品,要去把握每个功能背后,究竟在满足什么用户什么场景下的什么具体需求,要去看这些需求有没有共性,这个共性的需求集合,构成的才是一种用户。用户并不是某一个具体的人,而是一种抽象。当你把这层抽象找到之后,你才能找到产品的真正用户。有非常多的手力,需要我们不断去学,去实践,然后才能掌握。

做产品过程中,还有很重要一点是心力。很多产品功能点做上去之后,可能要花很长时间用户才会用起来,并不是上线之后,马上就会有很多用户喜欢。如果刚开始一两周,数据不好看,就把它给毙掉的话,很多东西是做不出来的。技术产品领域,数据更多是一种辅助决策,你可以去参考它,但千万别迷信它,特别是在产品早期阶段。根据数据去做的产品功能,能让产品血肉丰满。但产品的灵魂,往往来自那些不根据数据、还坚持去做的产品功能。

做产品过程中还有一点,是往前一步,不给自己设限。做语雀,最大的一个感触,是啥都得做。最开始我是半个PD,然后很快变成了客服,同时还需要兼做运营,还需要去承担BD的工作,因为没有BD,只能逼着自己去做,一切为了产品往前跑。开心的是,每次跟用户的各种碰撞,在和用户一起面对各种各样的问题时,很多好的产品想法就涌现出来。经历时的各种苦逼,回忆起来却是幸福的。

万变之中,不变至美,找到产品中的不变点,很多事情就变简单了。同时不断逼自己去提升产品上的眼力、手力和心力,不给自己受限,随着这些能力的提高,我相信,做一个自由的产品人,就不会是太遥远的梦。

三、做一个有爱的活人

mceclip4_20200509105427_Q1IK.png

最后我想说一说“认真生活,快乐工作”。我曾经是个工作狂,第一次看到这句话时,第一反应是为什么词语错位了。马总非常厉害,故意把认真和快乐反了一下,让认真去搭生活,让快乐去搭工作。

我们很容易在工作中认真,但在生活中不认真。比如回到家里,陪小孩陪家人的时候,很容易松懈不在状态。后来我觉得不对,生活真的需要去认真对待的。现在我都会尽量早点回家,赶在小孩睡觉前能到家,尽量能花半个小时沉下心来,在陪伴小孩时,努力去做到把小孩看成整个全世界。很开心的是,真正这么去做后,哪怕每天只有半小时,也会发现小孩跟自己的互动多了很多,而且从这种互动中,父子彼此都能成长和收获。

快乐工作我只说一点。对我来说,快乐工作的核心是眼睛里要有光芒,你对自己的工作要有足够的热爱。我经常会问团队同学一个问题,你是不是对所做的事情,眼睛里是有光芒的,你内心是不是真的很期待去做。这句话能激发一些同学,同时也是把双刃剑,会杀伤一些同学。有些同学听完这句话后,反思自己的工作,觉得当前工作好像挺枯燥的,然后选择转岗或离职。这并不是一件坏事情,真正有深入思考后,意识到当前的工作对自己来说是很枯燥的,是没有激情的,有这种触动后再选择转岗或者离职,长远来看对这个同学是更好的,对团队也是更好的。自己究竟为什么东西而痴狂,内心激情在哪,想清楚后,个体或团队的战斗力是很不一样的。这能让个体和团队都能变得更好。

还有一句话,是去年的一个分享,“全情投入,守正出奇,愿等花开”,这个就不多说了,讲的是心态的定力,以及策略上的取舍。分享我最近的钉钉签名档,我改成了“关心、用心、静心”。关心非常关键,无论刚才说对生活的认真,对家人的关注,还是工作中对同学的关注,都很重要。很多团队的管理问题,我觉得都是leader对团队本身不够关心导致。年初或年中目标设定完成之后,等几个月后去看结果,这样是不行的,日常的过程管理更关键。生活中关心家人,工作中关心同学,朋友中关心好朋友,这是一个基本功,非常关键。

关心是第一步,很多事情还需要真正用心去做,同时愿意花时间去静心等一些结果。我们团队有句土话叫做“要快但不要急”。很多项目迭代,都希望能够尽快上线,包括我们做产品也希望能尽快拿到结果,但一定不能着急,很多东西不是短时间可以达成的。比如做云凤蝶,云凤蝶是一个企业级低代码研发平台,我们从17年开始投入,做过几次转型,一直到去年年底,我们在低代码领域才有一些真正的应用上来,才开始看到一些希望。用心去做,静心去等,这样关心才有效。

关心于人,用心于事,静心于己,我觉得能做到这三点的人,就是一个有爱的人。做一个有爱的活人,让自己始终处于活着的状态,希望自己能努力去做到。

四、体验技术部的团队⽂化

mceclip5_20200509105544_8SZW.png

前面这几点,是我对自己的要求,希望自己能在技术上做个简单人,在产品上做个自由人,在生活过程中能学会去爱。在2014年起,也在逐步把“简单、自由、有爱”倡导为整个体验技术部的团队文化。

简单自由有爱是三枚硬币。简单是枚硬币的话,正面是简单,反面则是专业。因为只有足够专业,才能够保持简单性,不够专业时,很多事情都会变复杂。

自由的背面是责任。光追求自由,没有担当没有责任是不行的。足够有责任心去担当,这样去做事情,才能真正获得自由感。

有爱也是一样,背后要有很强的行动力。公司做公益,光嘴巴上说是不行的,哪怕一年抽出三个小时真正做一次公益,才是真正的做公益。

我最近有做一个公益,是帮助小区的保安,在小区人员进出的地方帮忙测体温和看健康码。我在小区门口站了4个多小时,这个过程中,我发现保安的生活远远不像我们想像中那么枯燥,同时很惊讶发现支付宝的用户打开健康码有将近十几种方式,有些打开健康码的方式,我压根就想不到。比如很多人打开健康码,是通过中间那个banner广告,还有一个高中生给我看的是一张图片。后来发现给我看图片的还不只一个人,累计有四五个人给我看图片。有这个实际的体感后,就能很快理解,为什么健康码后续把时间给加上去。同时还会发现,有一些老人家没有智能机,这可怎么用健康码?估计大家如果没去接触,光凭想象是永远猜不出来的。没有智能机的老人家,是找小区开个单子,每天盖章来证明。

无论做公益还是做其他,一定要自己真正去做,在做的过程中,才会真正懂得一些东西。

“简单、自由、有爱”和“专业、责任、行动”,形成了体验技术部的亚文化。我们日常还会沉淀一些团队的土话,比如,“不要在毛坯房里雕花”,这是去年很强调的。因为在体验技术部,主要人群是设计和前端,我们身上有个特点,就是比较关注细节。这个特点,有时是个好事,可以让我们把东西做到极致,但同时在很多情况下,也会变成一个缺点。比如有设计师转做产品时,很容易去抓边角料,抓各种细节,但这些细节带来的性价比并不高。所以我们就会一直强调如果当前产品是个毛坯房的话,一定不要去雕花。我们真正要雕花的地方,应该是我们想清楚的一些关键主流程,在这些关键主流程上,可以花大力气去精心打磨,其他更多地方,该放则放,大胆取舍,才是更好的选择。

说了很多,最最关键的,是内心真的要去believe,要去相信。带着相信去疯狂做到时,往往真的就会往你想的方向发展。

【非常问答】Q&A环节

前端学习最重要的是什么?

玉伯:这个问题我说两个点。第一我觉得要保持学习的欲望、要保有好奇心,能持续不断对一些东西感兴趣,不断去往前学。还有一点,是在学的过程中,要去抓住一些不变的东西。比如说CSS的学习,很多前端同学可能都已经不太会CSS了,但是真的要去学CSS,要知道它最最核心的是盒模型、布局、层叠等原理,你要从一个更高的维度,去建立自己的理解。有了这些理解后,往往就可以四两拨千金,可以把整个知识体系建立起来。建好之后,就可以在学习过程中,知道自己究竟是在学一个新东西,还是只是学老方法的一个优化。

如何长期持续保持团队的战斗力和凝聚力,如何吸引更优秀的人才加入团队。

玉伯:我觉得非常简单的一招,叫做用事情去吸引人。团队做的事情一定要足够去吸引到对方的加入,让他认可这件事情,去为这件事情而疯狂。比如说Ant Design,这是一种设计语言,我们要做成全球一流的,认可这个方向并感兴趣的人就会被吸引过来。做语雀也是这样。在我心目中,语雀要做成新一代Office。在想一个问题,为什么从上个世纪80年代出现的Word、Excel、PPT,一直延续到现在。一个Word文档究竟要解决的本质问题是什么,是否环境已发生变化,是否有新的解法。根据这个思路去思考,你会发现Office现有的Word是面向打印机设计的,如今在数字化转型浪潮中,打印需求急剧下降,我们并不需要分页,很多面向A4纸打印的产品功能是可以简化的。这个大趋势下,我们其实有机会去重新定义什么是一份新型的Word文档。这个文档可以跟传统文档不一样,传统Word文档是静态的,新的文档可以基于互联网Web技术让整个文档活起来。当真正把这些东西想清楚后,去找到相应的同学去聊的过程中,感兴趣的对方,往往眼睛里就会有光芒,这就是团队的吸引力。对已有团队来说,有希望有前景的的事情,就是团队的战斗力和凝聚力所在,对内心有相信的团队同学来说,工作就不是简单一份工作了,而是为了内心的相信在做事。

中国的产品设计和西方的差别很大。如何去走向全球做到像FaceBook那种全球流行的设计?

玉伯:这个问题我其实没想过,我目前更多想的一个问题是很多全球化的设计为什么在中国推行不下去。适合中国的设计究竟应该怎样。有一个例子挺好玩。

在企业级IM里面,国外有一款产品很流行,叫Slack。当时钉钉也考虑过要不要做成Slack的样子,但是后来钉钉还是选择不往Slack的方式去做,而是借鉴了微信,采用了中国人更熟悉的产品形态,钉钉群的形态,让钉钉变得更接近中国人的使用习惯。我觉得更好的全球化应该是本地化,要回归到每一个国家每一个地区的用户群体,他们的用户习惯可能真的是不一样的。

之前听国际的一个同事分享,谈中国的红包,在东南亚有些地区不能用红包,要变成绿包或者是白包,因为当地文化对红色的理解不像我们一样觉得是喜庆的,喜庆的是白色或者绿色。

面向不同人群,也是一种“本地化”。比如说面向技术人员的产品应该怎么设计,和面向设计师的会很不同。像VSCode是面向程序员的,就很强调快捷键,很强调效率,甚至可以形成整个IDE领域的一整套体系化设计。产品的本地化设计,核心还是要回到用户本身习惯去看问题。

查看原文

leejim 赞了文章 · 5月26日

玉伯的人生答案:做一个简单自由有爱的技术人

导语:

前端工程师如何成长?如何管理前端团队?如何打造团队文化?近日,蚂蚁研究员兼体验技术部负责人玉伯,在蚂蚁内部技术人的成长公开课上,分享了他的人生愿景和心路历程。

玉伯,蚂蚁研究员,体验技术部负责人。2008年加入淘宝,2012年开始在支付宝致力于设计语言 Ant Design、数据可视化 AntV、知识协同语雀等领域的工作。目前一心打造服务于蚂蚁金服及业界的一流技术与产品。

正文:

mceclip1_20200509104332_PT8K.png

今天给大家分享的议题,是如何做一个简单自由有爱的技术人。简单自由有爱是体验技术部的团队文化,同时也是我个人的人生愿景。我一直会去想,自己要成为什么样的一个人,究竟要活成什么样?这几年我找到的一个答案,就是去做一个简单自由有爱的人。今天跟大家分享一下我对这几个词的一些理解,以及背后的一些心路历程。

一、做一个简单的技术人

简单,对我来说有些特殊的含义。

我从开始做前端到现在已经有13年。一直以来,我觉得自己做技术时,追求的就是保持简单,追求技术的简单性,也追求做技术时心态的简单性。

在很多圈,包括技术圈,都有鄙视链的存在,比如说做Java的可能看不起做前端的,做前端的可能看不起做测试的,做产品的可能看不起做技术的,做运营的觉得产品都是为业务打工的。在这个鄙视链里,很多岗位的同学或多或少都会有职业上的困惑。

我知道很多前端同学,都会问自己一个问题,前端职业发展的天花板在什么地方?我究竟应该做几年前端?临近 35 岁要不要转型?很多同学都会有疑惑。但在这几年的工作经历里,我觉得其实每个岗位都很重要。我印象中逍遥子说过一句话,他说在公司里面,如果一个岗位不重要的话,其实早就取消了。每一位前端同学,每一位技术岗位的同学,职业上的困惑往往源自心态,要想在某个领域做到好,心态一定要保持简单,这一点很关键。

我经历过从前端转Java,在做前端之前我是写C++的。在转行过程中,我会问自己一个问题,究竟什么样的工作能让自己进入心流状态,能够让自己开心、有成就感、有价值感。然后我会发现在做前端写界面时,在做人机交互实现时,自己会没日没夜地去写代码,最终调试产出后很有喜悦感。只要一个岗位能够带给自己这种心流和喜悦感,那这个岗位对自己来说,就是很重要的。其实没必要去做很多横向比较。

比如说现在AI很火,算法很火,是不是我们都要去转型做人工智能?如果AI这一块确实能让你感觉到心流状态,能持续兴奋,去做就好。但如果只是为了去趁一个热点,那千万别去做。每一个岗位都很重要,不必去做比较。踢足球跟打篮球谁更重要?并不存在这种比较,每个人都很重要。这是我想分享的第一个点。

后来我就持续去做前端了。我自己还有一个感觉,就是做技术,一定要保持真实不装,用专业说话。我之前做SeaJS、KISSY、Ant Design等技术项目时,和团队同学会有不少争执,开源项目里,远程异步吵架更是家常便饭。

在这些争吵里,技术人都很简单,不看层级不看谁长得黑,只看谁在专业上能说服大家。坚持用专业说话,很多事情都会变得简单。现在挺怀念做技术时这种专业上的简单讨论,比如性能哪个方案好,通过数据来看,有一说一,非常简单有效。

现在做产品,我们也在尝试用专业说话,任何人都可以反驳我,但要从专业上说服我,还可以和我赌,我赌输了,就给大家发红包,赌赢了,也是我给大家发红包,鼓励专业上的深入思考,敢于争辩,任何据理力争的探讨,都是对团队有益的,最怕的是沉默。

做技术时,还会强调一点,要静水深流,很多领域都是要花长时间去做的。举个例子,像数据可视化,我们做G2和AntV是14年开始做,直到18年的时候,才初步有一些感觉出来。这之前的3年多时间,是一定要静下心来去做的。静水深流,很大程度上需要你的真热爱。

做数据可视化时,我当时是很兴奋的。萧庆有推荐一本书给我,《The Grammar of Graphics》,这是图形语法的一本书。我们之前写的图表,饼图、柱状图、趋势图等,都是一图一表。如果有一种图形语法,让我们可以自由选择直角坐标或极坐标,再通过可视通道映射,把不同的数据,映射到不同的可视通道里,就可以生成出不一样的图表出来。这种灵活性,用传统的 ECharts等图表类库是感受不到的。一旦感受到,就会非常兴奋。

但真要实现 G2 图形语法,需要我们能静下心来,花很长时间去阅读文献,去钻研,小到一个布局算法的实现,可能就是好几周的时间。真正花很长时间,深入去做,才会有些产出。

静水深流的同时,我们还要考虑如何接地气。所谓接地气就是如何跟业务衔接上,如果你做了很多专业研究,最终在业务上不能落地,那肯定有问题。一定要两手都要抓,一手要在专业上不断静水深流,一手要在业务上不断找落脚点。

我们常说,“此时此刻,非我莫属”,这个说法有个背面,是“每时每刻,做好自己”,坚持每时每刻做好自己,会让工作和生活都很简单。最近支付宝在用户体验上被很多用户吐槽,每个同学都会有自己的一些意见。做为技术,我们在吐完槽后,更重要的也许是去尝试推动解决技术能解决的问题。

“此时此刻,非我莫属”,更多强调的并不是态度问题,而是能力问题。怎么提升各方面的专业能力,才是最重要的。很多时候并不需要你主动去说“此时此刻,非我莫属”,而是要让你的能力能让别人看到,因为你的能力而被选中去做,才叫“此时此刻,非我莫属”。要被选中,一定需要长时间积累提高专业能力,这样别人才能够认可你,才会有被选中的机会。

二、做一个自由的产品人

mceclip3_20200509105144_TKVO.png

第二点谈到自由,我会着重讲下做产品的一些感受和经验。我的一个梦想是希望做一个自由的产品人。怎么才能在做产品时,拥有自由的状态呢?

大家常说“唯一不变的是变化”,这是很好的一个价值倡导。但对我来说,一开始挺困惑的。小学学数学,勾股定律非常吸引我,居然就是勾三股四玄五,它在欧氏几何里是一个不变的规律。大学研究生期间我是学物理的,物理学非常注重的一点,就是寻找万世万物的规律,这些规律里也有很多不变的东西,比如普朗克常数、光速等物理常量。为什么不变?这中间的物理诠释,非常美妙。“唯一不变的是变化”,我的理解里,背后还有一句话,叫做“万变之中,不变至美”。当我开始做产品,发现这句话非常管用。

举个例子,语雀里面的不变,是始终在知识领域,一直专注在知识的创作与交流上。做产品经常需要面对各种变化,这时寻找到不变的初心或定位,对产品的长远发展非常重要。这需要刻意锻炼自己在产品上的宏观眼力,能判断产品处于什么样的大趋势下,核心的差异化竞争优势在哪。

几年前,公司用Confluence或Wiki管理文档,也能用,选择做语雀,很大一个原因,是因为看见了Confluence的痛点,它不能跟上公司的变化,Confluence里很多文档,是跟随组织结构的,但组织结构在阿里经常快速变化,很容易导致Confluence上的文档被不断抛弃,停滞更新,很容易带来知识的荒岛化和孤岛化。

在这种背景下去做语雀,采用团队+知识库的模型,不绑定组织结构,让知识尽可能扁平化、尽可能开放,就能让语雀上的文档更有生命力,这是语雀在知识管理领域很核心的一个差异化竞争优势。同时不断提升文档的创作体验,让优势更具优势,并努力想办法让知识能流动起来,这是语雀里的关键点。文档的创作体验与知识的流动性,是语雀里面非常关键的不变点。当把这些不变点给抓住时,很多产品上的功能决策,就会变简单很多。

做产品过程中,光有眼力是不够的,还需要手力。手力是方法论,是术,是具体怎么去做。比如如何做用户体验地图,如何做具体的产品决策。俞军有一本书很不错,叫《产品方法论》,它里面有个概念是:用户是需求的集合。我们做一个产品,要去把握每个功能背后,究竟在满足什么用户什么场景下的什么具体需求,要去看这些需求有没有共性,这个共性的需求集合,构成的才是一种用户。用户并不是某一个具体的人,而是一种抽象。当你把这层抽象找到之后,你才能找到产品的真正用户。有非常多的手力,需要我们不断去学,去实践,然后才能掌握。

做产品过程中,还有很重要一点是心力。很多产品功能点做上去之后,可能要花很长时间用户才会用起来,并不是上线之后,马上就会有很多用户喜欢。如果刚开始一两周,数据不好看,就把它给毙掉的话,很多东西是做不出来的。技术产品领域,数据更多是一种辅助决策,你可以去参考它,但千万别迷信它,特别是在产品早期阶段。根据数据去做的产品功能,能让产品血肉丰满。但产品的灵魂,往往来自那些不根据数据、还坚持去做的产品功能。

做产品过程中还有一点,是往前一步,不给自己设限。做语雀,最大的一个感触,是啥都得做。最开始我是半个PD,然后很快变成了客服,同时还需要兼做运营,还需要去承担BD的工作,因为没有BD,只能逼着自己去做,一切为了产品往前跑。开心的是,每次跟用户的各种碰撞,在和用户一起面对各种各样的问题时,很多好的产品想法就涌现出来。经历时的各种苦逼,回忆起来却是幸福的。

万变之中,不变至美,找到产品中的不变点,很多事情就变简单了。同时不断逼自己去提升产品上的眼力、手力和心力,不给自己受限,随着这些能力的提高,我相信,做一个自由的产品人,就不会是太遥远的梦。

三、做一个有爱的活人

mceclip4_20200509105427_Q1IK.png

最后我想说一说“认真生活,快乐工作”。我曾经是个工作狂,第一次看到这句话时,第一反应是为什么词语错位了。马总非常厉害,故意把认真和快乐反了一下,让认真去搭生活,让快乐去搭工作。

我们很容易在工作中认真,但在生活中不认真。比如回到家里,陪小孩陪家人的时候,很容易松懈不在状态。后来我觉得不对,生活真的需要去认真对待的。现在我都会尽量早点回家,赶在小孩睡觉前能到家,尽量能花半个小时沉下心来,在陪伴小孩时,努力去做到把小孩看成整个全世界。很开心的是,真正这么去做后,哪怕每天只有半小时,也会发现小孩跟自己的互动多了很多,而且从这种互动中,父子彼此都能成长和收获。

快乐工作我只说一点。对我来说,快乐工作的核心是眼睛里要有光芒,你对自己的工作要有足够的热爱。我经常会问团队同学一个问题,你是不是对所做的事情,眼睛里是有光芒的,你内心是不是真的很期待去做。这句话能激发一些同学,同时也是把双刃剑,会杀伤一些同学。有些同学听完这句话后,反思自己的工作,觉得当前工作好像挺枯燥的,然后选择转岗或离职。这并不是一件坏事情,真正有深入思考后,意识到当前的工作对自己来说是很枯燥的,是没有激情的,有这种触动后再选择转岗或者离职,长远来看对这个同学是更好的,对团队也是更好的。自己究竟为什么东西而痴狂,内心激情在哪,想清楚后,个体或团队的战斗力是很不一样的。这能让个体和团队都能变得更好。

还有一句话,是去年的一个分享,“全情投入,守正出奇,愿等花开”,这个就不多说了,讲的是心态的定力,以及策略上的取舍。分享我最近的钉钉签名档,我改成了“关心、用心、静心”。关心非常关键,无论刚才说对生活的认真,对家人的关注,还是工作中对同学的关注,都很重要。很多团队的管理问题,我觉得都是leader对团队本身不够关心导致。年初或年中目标设定完成之后,等几个月后去看结果,这样是不行的,日常的过程管理更关键。生活中关心家人,工作中关心同学,朋友中关心好朋友,这是一个基本功,非常关键。

关心是第一步,很多事情还需要真正用心去做,同时愿意花时间去静心等一些结果。我们团队有句土话叫做“要快但不要急”。很多项目迭代,都希望能够尽快上线,包括我们做产品也希望能尽快拿到结果,但一定不能着急,很多东西不是短时间可以达成的。比如做云凤蝶,云凤蝶是一个企业级低代码研发平台,我们从17年开始投入,做过几次转型,一直到去年年底,我们在低代码领域才有一些真正的应用上来,才开始看到一些希望。用心去做,静心去等,这样关心才有效。

关心于人,用心于事,静心于己,我觉得能做到这三点的人,就是一个有爱的人。做一个有爱的活人,让自己始终处于活着的状态,希望自己能努力去做到。

四、体验技术部的团队⽂化

mceclip5_20200509105544_8SZW.png

前面这几点,是我对自己的要求,希望自己能在技术上做个简单人,在产品上做个自由人,在生活过程中能学会去爱。在2014年起,也在逐步把“简单、自由、有爱”倡导为整个体验技术部的团队文化。

简单自由有爱是三枚硬币。简单是枚硬币的话,正面是简单,反面则是专业。因为只有足够专业,才能够保持简单性,不够专业时,很多事情都会变复杂。

自由的背面是责任。光追求自由,没有担当没有责任是不行的。足够有责任心去担当,这样去做事情,才能真正获得自由感。

有爱也是一样,背后要有很强的行动力。公司做公益,光嘴巴上说是不行的,哪怕一年抽出三个小时真正做一次公益,才是真正的做公益。

我最近有做一个公益,是帮助小区的保安,在小区人员进出的地方帮忙测体温和看健康码。我在小区门口站了4个多小时,这个过程中,我发现保安的生活远远不像我们想像中那么枯燥,同时很惊讶发现支付宝的用户打开健康码有将近十几种方式,有些打开健康码的方式,我压根就想不到。比如很多人打开健康码,是通过中间那个banner广告,还有一个高中生给我看的是一张图片。后来发现给我看图片的还不只一个人,累计有四五个人给我看图片。有这个实际的体感后,就能很快理解,为什么健康码后续把时间给加上去。同时还会发现,有一些老人家没有智能机,这可怎么用健康码?估计大家如果没去接触,光凭想象是永远猜不出来的。没有智能机的老人家,是找小区开个单子,每天盖章来证明。

无论做公益还是做其他,一定要自己真正去做,在做的过程中,才会真正懂得一些东西。

“简单、自由、有爱”和“专业、责任、行动”,形成了体验技术部的亚文化。我们日常还会沉淀一些团队的土话,比如,“不要在毛坯房里雕花”,这是去年很强调的。因为在体验技术部,主要人群是设计和前端,我们身上有个特点,就是比较关注细节。这个特点,有时是个好事,可以让我们把东西做到极致,但同时在很多情况下,也会变成一个缺点。比如有设计师转做产品时,很容易去抓边角料,抓各种细节,但这些细节带来的性价比并不高。所以我们就会一直强调如果当前产品是个毛坯房的话,一定不要去雕花。我们真正要雕花的地方,应该是我们想清楚的一些关键主流程,在这些关键主流程上,可以花大力气去精心打磨,其他更多地方,该放则放,大胆取舍,才是更好的选择。

说了很多,最最关键的,是内心真的要去believe,要去相信。带着相信去疯狂做到时,往往真的就会往你想的方向发展。

【非常问答】Q&A环节

前端学习最重要的是什么?

玉伯:这个问题我说两个点。第一我觉得要保持学习的欲望、要保有好奇心,能持续不断对一些东西感兴趣,不断去往前学。还有一点,是在学的过程中,要去抓住一些不变的东西。比如说CSS的学习,很多前端同学可能都已经不太会CSS了,但是真的要去学CSS,要知道它最最核心的是盒模型、布局、层叠等原理,你要从一个更高的维度,去建立自己的理解。有了这些理解后,往往就可以四两拨千金,可以把整个知识体系建立起来。建好之后,就可以在学习过程中,知道自己究竟是在学一个新东西,还是只是学老方法的一个优化。

如何长期持续保持团队的战斗力和凝聚力,如何吸引更优秀的人才加入团队。

玉伯:我觉得非常简单的一招,叫做用事情去吸引人。团队做的事情一定要足够去吸引到对方的加入,让他认可这件事情,去为这件事情而疯狂。比如说Ant Design,这是一种设计语言,我们要做成全球一流的,认可这个方向并感兴趣的人就会被吸引过来。做语雀也是这样。在我心目中,语雀要做成新一代Office。在想一个问题,为什么从上个世纪80年代出现的Word、Excel、PPT,一直延续到现在。一个Word文档究竟要解决的本质问题是什么,是否环境已发生变化,是否有新的解法。根据这个思路去思考,你会发现Office现有的Word是面向打印机设计的,如今在数字化转型浪潮中,打印需求急剧下降,我们并不需要分页,很多面向A4纸打印的产品功能是可以简化的。这个大趋势下,我们其实有机会去重新定义什么是一份新型的Word文档。这个文档可以跟传统文档不一样,传统Word文档是静态的,新的文档可以基于互联网Web技术让整个文档活起来。当真正把这些东西想清楚后,去找到相应的同学去聊的过程中,感兴趣的对方,往往眼睛里就会有光芒,这就是团队的吸引力。对已有团队来说,有希望有前景的的事情,就是团队的战斗力和凝聚力所在,对内心有相信的团队同学来说,工作就不是简单一份工作了,而是为了内心的相信在做事。

中国的产品设计和西方的差别很大。如何去走向全球做到像FaceBook那种全球流行的设计?

玉伯:这个问题我其实没想过,我目前更多想的一个问题是很多全球化的设计为什么在中国推行不下去。适合中国的设计究竟应该怎样。有一个例子挺好玩。

在企业级IM里面,国外有一款产品很流行,叫Slack。当时钉钉也考虑过要不要做成Slack的样子,但是后来钉钉还是选择不往Slack的方式去做,而是借鉴了微信,采用了中国人更熟悉的产品形态,钉钉群的形态,让钉钉变得更接近中国人的使用习惯。我觉得更好的全球化应该是本地化,要回归到每一个国家每一个地区的用户群体,他们的用户习惯可能真的是不一样的。

之前听国际的一个同事分享,谈中国的红包,在东南亚有些地区不能用红包,要变成绿包或者是白包,因为当地文化对红色的理解不像我们一样觉得是喜庆的,喜庆的是白色或者绿色。

面向不同人群,也是一种“本地化”。比如说面向技术人员的产品应该怎么设计,和面向设计师的会很不同。像VSCode是面向程序员的,就很强调快捷键,很强调效率,甚至可以形成整个IDE领域的一整套体系化设计。产品的本地化设计,核心还是要回到用户本身习惯去看问题。

查看原文

赞 42 收藏 16 评论 3

leejim 发布了文章 · 1月22日

一个小小的优化,能让你的小程序瘦身10%

我司一直专注于微信小程序(以下简称小程序)开发,可以说是重仓押注在小程序上。但由于小程序的大小有严格的限制(单个分包/主包大小不能超过2M)。而我们的业务又相对比较复杂,因此常常会突破小程序的大小限制。因此,我们就不得不思考如何优化小程序的大小。

暴力处理

要优化小程序的大小,最好(最暴力)的方式就是删页面。

这样来,即高效执行起来也简单:统计下所有页面的PV、UV,将一些不活跃的页面移除就完事了。

但是,本文并不是要讲如何移除页面,因为这没什么好讲的。

分析

讲本文的优化方式之前,先分析一下小程序一般都由哪些文件组成的。

一般都是由以下几种文件组成:

  • .js 逻辑文件
  • .wxml 页面结构文件
  • .wxss 样式文件
  • .json 配置文件
也许你会将一些image放在小程序里,一般建议放较小且少量的image,其他都使用网络图片

其中,由于JavaScript有一定的兼容问题需要处理,因此在打包和上传小程序时,开发者工具会对JavaScript进行babel编译处理,故这块可优化的空间比较有限。

而JSON的大小都比较小,且格式较为固定,也没什么可优化的地方。

接下来就是本文要重点说到的WXML了,一般WXSS都是和WXML配套使用的。这两者占小程序的大小比例也比较高,可优化空间非常大,可优化的思路也非常多。本文先讲一下WXML的一个优化技巧。

试验

其实,小程序最终的执行都是以WEB的形式完成的。因此`WXML`可以理解成类似于`VUE`的语法糖,最终都是要编译成`HTML`的。

所以,想要压缩`WXML`代码,就可以参考`HTML`的压缩方式。比如移除多余的空格。

我立马做了个试验,将`WXML`中的部分的空格移除之后,再使用开发者工具上传,发现小程序的大小真的发生了变化,变得更小了。因此可以得出结论,移除`WXML`中的空格是可行的压缩思路。

自动化

既然移除空格是可以减小小程序代码体积的,那么如何实现自动化移除的。

首先我想到的是,利用巨人的肩膀:`htmlparser2`。通过语法分析器,识别`WXML`的空格,并一举歼灭。

绝大多数情况下,这个做法是可行的。但是有一种情况,会导致`parser`识别出错:`WXML`中出现`{{ }}`,且使用了`<`。

因此需要特制一个识别`WXML`语法的`parser`。

由于这样的parser比较简单,因此我就自己上手写了一个:wxml-parser

实践

通过上述我写的parser,写了一个简单的minifier:wxml-minifier

安装

npm i -D wxml-minifier

使用

let minifier = require('wxml-minifier')
let fs = require('fs')
let resource = fs.readSync('./app.wxml') // 假设输入为:<view class="home"    ></view>       <!-- test -->

let result = minifier(resource)
console.log(result) // <view class="home"></view>

总结

通过将WXML中多余的空格移除,可以将小程序的代码减小大概10%。

其实,从这个角度可以发现,开发者工具在上传WXML时,是没有做任何处理的。因此对于HTML的任何压缩方式都可以在WXML上使用。当然这也是后续我的wxml-parser持续更新迭代的方向。

不知道为什么微信官方在开发者工具上传代码时,不进行简单的简化处理。如果你有答案的话,欢迎在评论中给我回复!

如果觉得对你有用,希望给我一个star,感谢!

查看原文

赞 1 收藏 1 评论 0

leejim 关注了标签 · 1月22日

javascript

JavaScript 是一门弱类型的动态脚本语言,支持多种编程范式,包括面向对象和函数式编程,被广泛用于 Web 开发。

一般来说,完整的JavaScript包括以下几个部分:

  • ECMAScript,描述了该语言的语法和基本对象
  • 文档对象模型(DOM),描述处理网页内容的方法和接口
  • 浏览器对象模型(BOM),描述与浏览器进行交互的方法和接口

它的基本特点如下:

  • 是一种解释性脚本语言(代码不进行预编译)。
  • 主要用来向HTML页面添加交互行为。
  • 可以直接嵌入HTML页面,但写成单独的js文件有利于结构和行为的分离。

JavaScript常用来完成以下任务:

  • 嵌入动态文本于HTML页面
  • 对浏览器事件作出响应
  • 读写HTML元素
  • 在数据被提交到服务器之前验证数据
  • 检测访客的浏览器信息

《 Javascript 优点在整个语言中占多大比例?

关注 134358

leejim 关注了标签 · 1月22日

前端

Web前端开发是从网页制作演变而来的,名称上有很明显的时代特征。在互联网的演化进程中,网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行为也以浏览为主。2005年以后,互联网进入Web 2.0时代,各种类似桌面软件的Web应用大量涌现,网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片,各种富媒体让网页的内容更加生动,网页上软件化的交互形式为用户提供了更好的使用体验,这些都是基于前端技术实现的。

Web前端优化
  1. 尽量减少HTTP请求 (Make Fewer HTTP Requests)
  2. 减少 DNS 查找 (Reduce DNS Lookups)
  3. 避免重定向 (Avoid Redirects)
  4. 使得 Ajax 可缓存 (Make Ajax Cacheable)
  5. 延迟载入组件 (Post-load Components)
  6. 预载入组件 (Preload Components)
  7. 减少 DOM 元素数量 (Reduce the Number of DOM Elements)
  8. 切分组件到多个域 (Split Components Across Domains)
  9. 最小化 iframe 的数量 (Minimize the Number of iframes)
  10. 杜绝 http 404 错误 (No 404s)

关注 152264

leejim 关注了标签 · 1月22日

vue.js

Reactive Components for Modern Web Interfaces.

Vue.js 是一个用于创建 web 交互界面的。其特点是

  • 简洁 HTML 模板 + JSON 数据,再创建一个 Vue 实例,就这么简单。
  • 数据驱动 自动追踪依赖的模板表达式和计算属性。
  • 组件化 用解耦、可复用的组件来构造界面。
  • 轻量 ~24kb min+gzip,无依赖。
  • 快速 精确有效的异步批量 DOM 更新。
  • 模块友好 通过 NPM 或 Bower 安装,无缝融入你的工作流。

官网:https://vuejs.org
GitHub:https://github.com/vuejs/vue

关注 96594

leejim 关注了标签 · 1月22日

linux

Linux是一种自由和开放源代码的类Unix计算机操作系统。目前存在着许多不同的Linux,但它们全都使用了Linux内核。Linux可安装在各种各样的计算机硬件设备,从手机、平板电脑、路由器和视频游戏控制台,到台式计算机,大型机和超级计算机。

Linux家族家谱图,很全很强大!! 图中可以清楚的看出各个Linux发行版的血缘关系。无水印原图:http://url.cn/5ONhQb

关注 63651

leejim 关注了标签 · 1月22日

css

层叠样式表(英语:Cascading Style Sheets,简写CSS),又称串样式列表,由W3C定义和维护的标准,一种用来为结构化文档(如HTML文档或XML应用)添加样式(字体、间距和颜色等)的计算机语言。

关注 61528

leejim 关注了标签 · 1月22日

html5

HTML5 是 HTML 下一个的主要修订版本,现在仍处于发展阶段。广义论及 HTML5 时,实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。

关注 88034

认证与成就

  • 获得 1 次点赞
  • 获得 1 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 1 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 1月22日
个人主页被 75 人浏览