言

前端到底离业务有多远？由阿里@岳逢楽分享。

阿里巴巴前端技术专家，曾负责天猫首页、双十一大促营销以及各类中后台项目，在性能优化、产品体验、平台化、电商业务等领域有一定的探索。

正文从这开始～～

你是否头疼于，每天做不完的需求和改不完的bug？

你是否发愁，每天撸业务代码，是否能获得技术成长？

而追求成就感的你是否想过，你所编写的一行行代码，是在反复的变化中迅速成为遗留代码，还是助公司插上腾飞的翅膀，在你死我活的战场上脱颖而出？

因此本文会将业务和前端关联起来讨论，探讨业务发展的不同时期，前端所能做的一些事情，既能解业务的困扰，也让前端同学们摆脱码工、切图仔的定位。

千言万语不如一张图，全文完。

大误，还是得详细说说。

一、初始阶段

在业务的初始阶段，在市场定位、用户诉求、产品逻辑已经明确的前提下，此时业务的核心诉求是 『尽快上线』，进行快速验证和产品迭代，当然，质量还得能过得去。

所以此时技术同学的方案侧重点是：

快、爽

先说『快』，在这种情况下，什么vue/react都见鬼去，老夫只用jQuery一把梭！

这是反面案例，这样就只能重构火葬场了，项目上线完就打包行李滚蛋……

此时的快，指的是 尽可能复用集团/业内成熟的方案、架构，按捺住自己重新造轮子的躁动不安的心情。这又涉及到一个问题：如何选择一个靠谱的方案？这是一个可以另开文章的话题，但先在此简单说说根据我个人的经验，主要从稳定性、可扩展性、性能去考虑。稳定性 如何去评估？如果一个项目能做到这几项，我是比较放心的。

• 项目star数多
• 有单测，代码覆盖率90%~95%以上
• 文档完备，有常见Q&A
• issue有较快的处理流程和周期，3天内响应、1~4周内关闭。
• 有稳定的版本控制，不进行不兼容的升级，非要不兼容升级的话，将迁移工具做到极致。

可扩展性 如何评估？主要是指能否根据业务or已有技术方案，自定义部分内容。

• 例如组件库，是否能自定义主题、组件的事件回调等，因为有的[需求，组件除了完成默认的行为，还需要执行其他逻辑如埋点；
• 例如单测工具，能否配置白名单，因为有一些代码是兼容特殊场景，编写用例模拟场景的成本实在比较高。这个主要是根据技术诉求和经验进行判断。

性能问题，短期容易被人忽视，因为能跑就行，但一旦埋下隐患，日后有坑就极难解决。容易出现性能问题的地方有：代码构建、长列表/表格滚动、大数据图表、复杂动画、3D全景渲染等，如果所做的业务涉及到这几个方面，选择方案的时候就要特别注意性能。

如果实在图省事儿，create-react-app、umi开箱即用来一套就完事儿了。

『爽』 这个字我的理解是，一款新产品出现，一定需要在用户体验or交互上有绝对领先对手的地方。

一个我始终记忆犹新的例子，就是乔布斯发布第一款iPhone时，演示滑动列表时全场的惊呼，一个乔布斯的哥们说：当你滑动页面的时候我就湿了。

另一个前端领域的例子，就是Ant Design。AntD被广泛使用，很大一部分原因是其出色的视觉设计和动效。至今为止，AntD的官网介绍上仍然说这是一个设计体系。

所以我觉得，一款新产品，除了提供刚需价值，最好在美观和易用上领先对手一大步，虽然主要还是看设计师和产品的功底，但前端同学的实现上至少不能拖后腿，不能加载太慢、滚动太卡。

蓝海市场、刚需产品也许不那么看重这一点，但有的蓝海门槛较低，很快就会转变为红海。

还值得一提的是，账户体系的建设，包括打通三方登录、免登等（客户端登录态透传到h5），网上不少资料，我实在没这方面经验，就不在此多嘴了。

二、快速扩张

OK，假设产品如期上线，数据蹭蹭上涨，看起来一切都很完美。

然后问题就来了，业务开始扩张，公司新招了100个运营和10个PD，你会发现需求突然就翻了10倍。这个时候我们怎么办？

答案只有一个：提（jia）效（ren）。所以这个时期的核心是：

快、稳

提效最简单的办法是加人，但问题是，100个运营好找，100个能写出靠谱代码的前端不好找，有的时候改别人的代码，比重写一遍更麻烦。看过《人月神话》的同学都知道，加人带来的效率提升是有瓶颈的，人平均效率会随着人数增加而下降。

此时就需要考虑通过技术手段提效，沉淀基础研发体系，包括：

• 基础工具库+ 业务工具库，避免重复写一些简单但是容易出bug的业务逻辑。
• UI规范 + 组件体系。UI规范很重要，如果设计师不能达成一致，那出来的视觉稿必然是千差万别的，你的公共组件也就难以沉淀了。
• 研发工具升级。主要有 构建性能优化、数据mock工具、环境切换工具、线上问题排查工具等。

除了技术手段，人员的技术成长也很重要，毕竟技术方案是由人来执行的，个人觉得常用的方式有：

• CodeReview，帮助新人快速成长到一定水平，保证新人开发代码的可维护性。
• 内部分享。分享好用工具以提升研发效率，分享底层原理避免踩更深的坑浪费大量时间，也可以分享一些编码、调试小技巧。

当然，还有一个提效的神技，就是——砍需求。

砍需求也是一门技术活儿，有的高级工程师用嘴就将需求解了。但不是每个团队都采用放权式管理（此处感谢我的历任老板们），给你足够的权力自己砍需求和排期；有的公司采用的是集权式管理，只有前端leader能够砍需求和进行任务分配，也使得不少同学这方面能力没成长起来。

那么需求到底怎么砍？听我简单说一下，欢迎更好的套路。

• 首先，端正心态。你砍需求不是为了自己偷懒要早下班，你砍需求是为了业务整体效率的提升。你要砍的是无效需求、重复需求，公司业务的核心需求不能砍。不然你把公司业务都砍死了，自己喝西北风去？公司如果运气好IPO了，你不也爽一波？
• 其次，先问问需求解决的业务问题是什么？搞清楚这一点，就能判断：这个需求的优先级多高、是不是伪/重复需求、是否有其他方式替代解决。此处的伪需求，是指不能实际解决用户问题的需求。
• 再其次，数据说话。相关的数据是怎么样的？如何推导出业务的问题所在？做完这个需求数据会变成什么样？
• 最后，这个需求可能需要哪些上下游合作。涉及其他环节的需求，一定要将上下游拉到一起，考虑到所有可能的问题，统一一个方案，才能客观评估工作量。
• 最后的最后，也是最重要的，将共性的需求沉淀，构建组件体系or业务模块体系。有这个沉淀，才能更进一步，对需求做收敛，例如总不能说，已经有一个slider模块了，你还要再做一个类似的吧，对业务的提升到底在哪？

一般一个重要的、合理的需求都能比较好回答上面这些的问题。其中第三点，数据说话，也对公司的数据化能力提出了要求。

• 最基本的pv/uv、uv点击率、停留时长，这是和前端页面相关的指标。
• 模块热度、功能使用情况，这是用来和业务方撕逼的时候使用的。（上次做的功能你们又不用！）
• 还有业务指标，例如电商的gmv、售罄率，但这些和前端没直接关系。
• 高级一点可以玩GrowthHack，全链路监控细分用户群的使用情况，比较适合业务已经增长到一定体量，精细化运营的场景。
• 大数据分析+洞察+数据可视化。会在第三部分讲述。

另一个不能忽视的是，如何变得更『稳』，因为大家都很急，一急就容易出线上故障，然后时间都花在处理故障上了，然后时间就更急，一个快速腐化的死循环，然后你能怎么办呢？只能以猝死明志啊……常见的有以下几种方法：

• 研发流程管控。不经测试不允许上线，这也是阿里的研发红线，看起来是效率降低的，但其实只是把处理线上问题的时间用来测试了而已。
• 基础库、基础组件 上单元测试，代码覆盖率90%+
• 监控。线上404、页面白屏、js/接口报错等。
• 安全。最基本的xss、csrf做一下，再整体升一下https
• 问题复盘、沉淀机制。避免再出同样的问题。

以上这些问题解决了，前端同学也就算是又快又稳地帮业务度过了快速发展期，迎来业务的精耕细作期。

三、精耕细作

俗话说得好：攻城容易守成难，但现在攻城也不那么容易了。现在新兴的独角兽，背后都有AT的影子，例如ofo和摩拜，双方都极难一下子摁死对方。而是互拼内力，最后很可能落得两败俱伤。这个时候我们就需要稳中求快。

前两个阶段的C端场景看起来和前端关系更加紧密，那么这个阶段和前端有什么关系呢？我觉得能做的事情有：

中后台系统的构建。将运营们的工作线上化，同时减少部分手工操作，达到效率的提升。

虽然说运营们通常excel用得虎虎生风，但有容易出错、贪腐较多的问题，想想ofo被曝贪腐严重的新闻。

在不少缺前端的公司，这部分通常也由后端用jQuery一把梭。但后端撸出来系统，通常都欠缺交互意识（无导航、报错信息等设计）、撸不出稍微复杂的布局（见过被float和flex难住的）、缺少动效、SPA 等，做出来的系统真的差不少，都9012年了，还是让专人来干这活吧。记得加上水印，包括明水印和暗水印，便于公司时候追责，间接防止公司机密外泄。

大数据可视化。不仅仅是消费者端页面的访问数据，还有更深层次的公司运营数据。例如ofo可以实时跟踪自行车的损坏率、监控车辆密集程度等，从而指挥调度车的调度，达到车辆投放和使用率的最佳匹配。虽然这事儿吧，核心还是数据同学产出数据的准确性，但前端同学的配合是不可或缺的。

常见的可以用来做这事儿的有Echarts、HighCharts、G2等等，虽然我们基本不可能再重复自研一套，但取其精华，快速赋能业务，就是业务前端的价值所在。

平台化。此处其实指的是大中台、小前台的概念。因为我们往往已经积累了一批中后台系统，但如何使同一个系统更快支撑新的业务、砍掉/合并重复功能的中后台系统，也是辅助业务的一种手段。

ABTest。根据之前的经验，电商不同行业的不同人群，对于交互设计的偏好真的就不一样，有的喜欢大图，有的喜欢小图。因此通过ABTest方案，对人群进行千人千面的细分展现，对业务也是可以稍微有一定的提升。

容器技术（hybrid & 内核）& 极致性能。其实也就这么提一下，因为对于大多数公司，真没有深入追求浏览器内核提升的价值和可能性。hybrid方案是有必要的，但应该在急剧扩张时期就做得差不多了。极致性能也属于比较炫技的东西了（已经做到1~2s页面可交互的前提下），短期内没有特别大的必要，但在追求极致性能的过程中，迫使相关同学深入了解容器技术、服务端、网关、cdn等底层，并推动相关方升级，经过长时间的积累，带来人力储备和技术储备的提升。

四、新赛道、新增量时期

基本上做完上面那些东西，公司的业务进入一个稳定的时期，就是到处看看有什么新的东西可以做了。（当然还是可能有各种各样蛋碎的改版） 核心

端的扩展

包括各类小程序。名义上是便于管控第三方，提供更好的体验，其实就是人为割裂出一个端，同时用流量把这个端喂起来。不过没办法，谁让爸爸们有流量呢。但注意一点，扩展一个端是有维护成本的，且并不会直接带来流量收益，需要配套的运营计划。

3D、全景、VR / AR 。有可能带来交互根本变化的东西，唯一的缺点是科技还不够先进，做全景素材成本很高，VR/AR的应用场景也不够多。

Flutter。

智能化

业务的智能化。例如活动界面的千人千面，根据算法计算出最佳界面元素组合方式等。

研发的智能化。例如FB的Aroma、之前业内的psd2html，但这个算法和普通的电商推荐算法相比，最大的区别在于容错率极低，你推荐错了一个商品大不了不买看下一个，但你自动生成错了一句代码，整个系统就跑不起来。

实在不知道前端还有什么新的东西好关注的了，硬掰不出来，就这样吧，欢迎指点。

五、最后

读完本文，相信你已经找到了前面三个问题的答案，能够不再被一堆需求推着走，也能够不再只撸业务代码，孕育出属于你们团队的技术方案而获得技术上的提升，最重要的是找到自己的一身本领在这个商业世界中的价值，不忘极客梦，技术改变世界，rock the world。

关于本文 作者：@岳逢楽 链接：https://zhuanlan.zhihu.com/p/62722892

虫涉及的技术包括但不限于熟练一门编程语言（这里以 Python 为例） HTML 知识、HTTP 协议的基本知识、正则表达式、数据库知识，常用抓包工具的使用、爬虫框架的使用、涉及到大规模爬虫，还需要了解分布式的概念、消息队列、常用的数据结构和算法、缓存，甚至还包括机器学习的应用，大规模的系统背后都是靠很多技术来支撑的。（

网页知识（html，js,css，xpath等），虽然不难，但一定需要了解。 你得知道这些网页是如何构成的，然后才能去分解他们。

一、什么是HTML

HTML全称Hyper Text Mark-up Language(超文本标记语言),它不是一种编程语言，而是一种标记语言 (markup language)。标记语言是一套标记标签 (markup tag)，HTML 使用标记标签来描述网页。

HTML是编写网页的语言，浏览器懂这门语言，爬虫本质上是模拟浏览器抓取数据。因此懂些HTML知识对入门爬虫很有帮助~

作为一门语言，它有自己的语法规则，用来表示比“文本”更丰富的意义，比如图片，表格，链接等。浏览器（IE,FireFox等）软件知道HTML语言的语法，可以用来查看HTML文档。目前互联网上的绝大部分网页都是使用HTML编写的。

二、HTML长什么样？

HTML的语法：文本+标签

即给文本加上表明文本含义的标签(Tag)，让用户（人或程序）能对文本得到更好的理解。

关于标签：

• HTML 标签是由尖括号包围的关键词，比如 <html>
• HTML 标签通常是成对出现的，比如 <b> 和 </b>
• 标签对中的第一个标签是开始标签，第二个标签是结束标签
• 开始和结束标签也被称为开放标签和闭合标签

示例

效果

<html>
 <head>
 <title>欢迎来到简书-皮壹侠</title>
 </head>
 <body>
 欢迎访问<a href="https://www.jianshu.com/u/5a41eb2ceec6">皮壹侠的简书主页</a>!
 </body>
</html>

如果想尝试，可以下载Notepad++来动手试一试

所有的HTML文档都应该有一个<html>标签

<html>标签可以包含两个部分:<head>和<body>

• <head>标签用于包含整个文档的一般信息
• 文档的标题（<title>标签用于包含标题）
• 对整个文档的描述
• 文档的关键字
• ...
• <body>标签存放文档的具体内容

上面代码中，<a>标签用于表示链接，在浏览器查看HTML文档时，点击<a>标签括起来的内容时，通常会跳转到另一个页面。这个要跳转到的页面的地址由<a>标签的href属性指定

如上<a href="https://www.jianshu.com/u/5a41eb2ceec6">，href属性的值就是https://www.jianshu.com/u/5a41eb2ceec6

三、HTML可以包含哪些内容？

通过不同的标签，HTML文档可以包含不同的内容，比如文本，链接，图片，列表，表格，表单，框架等。

文本

• HTML对文本的支持是最丰富的，你可以设置不同级别的标题，分段和换行，可以指定文本的语义和外观，可以说明文本是引用自其它的地方，等等等等。

链接

• 链接用来指出内容与另一个页面或当前页面某个地方有关。

图片

• 图片用于使页面更加美观，或提供更多的信息。

列表

• 列表用于说明一系列条目是彼此相关的。

表格

• 表格是按行与列将数据组织在一起的形式。也有不少人使用表格进行页面布局。

表单

• 表单通常由文本输入框，按钮，多选框，单选框，下拉列表等组成，使HTML页面更有交互性。

框架

• 框架使页面里能包含其它的页面。

四、HTML文档格式

HTML 文档 = 网页

• HTML 文档描述网页
• HTML 文档包含 HTML 标签和纯文本
• HTML 文档也被称为网页

Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容。在HTML文本中，用尖括号括起来的部分称为标签。

如果想在正文里使用尖括号（或者大与号小与号，总之是同一个东西），必须使用字符转义，也就是说转换字符的原有意义。<应该使用<代替，>则使用>，至于&符号本身,则应该使用&替代。Python学习关注，每天免费直播课程学习群：839383 765 分享业内最新python学习资源！

示例

标签本质上是对它所包含的内容的说明，可能会有属性，来给出更多的信息。比如<img>（图片）标签有src属性（用于指明图片的地址），width和height属性（用于说明图片的宽度和高度）。

HTML里能使用哪些标签，这些标签分别可以拥有哪些属性，都是有规定的，后续如深入学习HTML其实就是学习这些标签。

HTML文档结构

标签通常有开始部分和结束部分（也被称为开始标签和结束标签），它们一起限定了这个标签所包含的内容。

属性只能在开始标签中指定，属性值可以用单引号或双引号括起来。结束标签都以/加上标签名来表示。有时候，有些标签并不包含其它内容（只包括自己的属性，甚至连属性都没有），这种情况下，可以写成类似这样：<img src="logo.gif" />。（注意最后的一个空格和一个反斜杠），它说明这个标签已经结束，不需要单独的结束标签了。

对比下：

<img src="logo.gif" />

<a href="http://www.baidu.com">百度</a>

注：HTML文档里所有的空白符（空格，Tab，换行，回车）会被浏览器忽略，唯一的例外是空格，对空格的处理方式是所有连续的空格被当成一个空格，不管有一个，还是两个，还是100个。之所以有这样的规则是因为忽略空白符能让使用HTML的作者以他觉得最方便的格式来排列内容，比如可以在每个标签开始后增加缩进，标签结束后减少缩进。由于英语文本中空格用得很普遍（用于分隔单词），所以对空格做了这样的特殊处理。如果要显示连续的空格（比如为了缩进），应该用 来代表空格。

结构解析1

结构解析2

五、常用标签介绍

（一）文本

文本

（二）图片

图片

（三）链接

链接

（四）分段与换行

分段与换行

（五）表格

表格

（六）列表

列表

（七）框架

好了，以上就是我的分享，每天都会更新，记得关注我们哦！