言

前端到底離業務有多遠？由阿里@岳逢楽分享。

阿里巴巴前端技術專家，曾負責天貓首頁、雙十一大促營銷以及各類中后臺項目，在性能優化、產品體驗、平臺化、電商業務等領域有一定的探索。

正文從這開始～～

你是否頭疼于，每天做不完的需求和改不完的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 >皮壹俠的簡書主頁</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

三、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 >百度</a>

注：HTML文檔里所有的空白符（空格，Tab，換行，回車）會被瀏覽器忽略，唯一的例外是空格，對空格的處理方式是所有連續的空格被當成一個空格，不管有一個，還是兩個，還是100個。之所以有這樣的規則是因為忽略空白符能讓使用HTML的作者以他覺得最方便的格式來排列內容，比如可以在每個標簽開始后增加縮進，標簽結束后減少縮進。由于英語文本中空格用得很普遍（用于分隔單詞），所以對空格做了這樣的特殊處理。如果要顯示連續的空格（比如為了縮進），應該用 來代表空格。

結構解析1

結構解析2

五、常用標簽介紹

（一）文本

文本

（二）圖片

圖片

（三）鏈接

鏈接

（四）分段與換行

分段與換行

（五）表格

表格

（六）列表

列表

（七）框架

好了，以上就是我的分享，每天都會更新，記得關注我們哦！