QCon 2019 大會| 淘寶前端技術專家開講啦 ！
本文來自淘寶 高階前端技術專家 甄焱鯤（甄子 ）在 QCon 2019 全球軟體開發大會的分享 《一個前端智慧化的實踐》 今天小編帶大家一起來深入瞭解一下 。
之前有一個評價說張勇是在高速公路上換引擎的人，阿里巴巴在高速發展的時候張勇帶著大家為阿里巴巴換上移動端的新引擎，推動阿里巴巴持續快速增長。反觀前端領域，經歷由 Angular、React、Vue、Webpack 等技術驅動的高速發展階段，整個前端領域就像行駛在高速公路的汽車。這輛車已經擁有了三部引擎：Web、Server、Native，Web 這部引擎在 PWA、WASM、WebGL 等技術增強下繼續保持強勁勢頭，Server 引擎以 Node.js 為核心借勢 Serverless 在雲端大放異彩，Native 引擎以PhoneGap、React-Native、Weex 技術為核心搶佔客戶端快速開發原生應用的灘頭陣地。前端智慧化將是未來的新前端引擎，而我們就是在前端高速發展中，給前端技術換引擎的人。希望可以啟發你，在人工智慧改變這個世界的時候，作為一個前端工程師參與其中，為前端技術領域換上前端智慧化引擎。
雖然接觸推薦演算法是2009年，第一次組建人工智慧團隊卻在2014年底。在經歷了應用發行、廣告、資訊流和瀏覽器等業務，看到人工智慧給業務帶來的巨大價值，因參與其中而被徹底征服。那時起我就堅定認為，人工智慧是繼計算機以來最強大的力量，將會從每個角落徹底改變世界。
1. 理解人工智慧
“人工智慧”或許是迄今為止最神祕的程式設計方式。通過機器學習程式，在神經網路中總結出規律和模式，就可以推理出結果。用數學理論無法簡單證明，用工具分析也難以理解，但是神經網路卻工作的很好。在語音、影象識別等領域已經達到工業標準，識別準確率遠超人類。不同以往、難以解釋的程式設計方式，正在改進安檢、支付等場景的效率和體驗，這正是人工智慧的神祕之處。
這種神祕的程式設計方式和之前有何不同？以往的程式設計方式以計算為核心，可以總結為演算法加資料結構。人工智慧的程式設計方式以推理為核心，通過模型預測的概率推理結果，可以總結為資料加模型。過去，程式設計過程中邏輯條件都是確定的數值區間，邏輯背後執行的是各種規則，規則的背後是程式設計師憑經驗制定的策略。現在，人工智慧通過機器學習的方式，在資料中根據規則測試各種策略，找出不同數值區間下最優的策略，學習最優策略背後的規律和模式，即使輸入的數值區間發生變化也能利用學到的規律和模式產生最優的策略。
從規則和計算到規律和模式：
3x3x3x3 = 81
34 = 81
ln(3) = 1.0986
eln(3) = 2.9999
2.99994 = 80.9892
81 = eln(3).4
Q = erate.time
Q是結果 e約2.71828 rate是單位時間增長率 time是經歷了多少個時間單位的增長
拿圍棋舉例，通過程式設計實現一個圍棋遊戲。按照棋盤看，在縱橫19條線361個交叉點上，每個點可能有黑、白、空三種可能，落子的可能性有 3^361 的數值區間。按照走法看，合法棋局總數在 10^170 量級，合法棋路總數在 10^300 量級，遠大於全宇宙原子數量 10^80 的海量數值區間。傳統程式設計方式窮舉所有可能性的搜尋空間巨大，如果下一步棋需要算幾個小時，那麼，這遊戲根本沒法玩。Alpha Go通過自己和自己對弈的方式，藉助深度神經網路學習棋局、棋路背後的模式和規律，應對不同棋局、棋路下落子的可能性，推理出最佳策略。從2015年起，Alpha Go在網上實現快棋600連勝，在韓國戰勝李世石，在圍棋發源地中國戰勝柯潔，“狗狗”用實力證明：自己並非一個簡單的棋譜搜尋程式。
人工智慧的核心是用特殊程式設計方法使程式具備推理能力，既可以根據推理結果糾正模型，進行監督的學習，也可以讓程式像Alpha Go一樣自己和自己對弈，從而讓模型無監督的學習。模型學成出師後，可以在無人干預的情況下進行推理，利用概率預測分析，產生最佳策略，藉助最佳策略處理模型未曾見過卻似曾相識的問題。
2. 定義前端智慧化
從圍棋的問題中可以看到，如果規則和運算不能解決，那麼，這就是人工智慧擅長解決的。在前端技術領域當然也會有規則和運算不能直接解決的問題，所以，這些問題就是前端智慧化要解決的問題。前端智慧化就是在複雜場景中，藉助人工智慧技術，解決規則和運算不能直接解決的複雜問題。
2.1 程式設計領域不能直接通過規則和運算解決的問題
可以從“該不該”和“能不能”兩個不同角度分析，“該不該”是從投入產出比分析，“能不能”是從不可替代性分析。在圍棋的例子中，使用傳統程式設計窮舉所有可能性，只要算力足夠是可以實現的，但投入產出比差。還是圍棋的例子，使用圍棋遊戲規則為規則，棋譜為運算依據，當玩家下出棋譜之外的局面和棋路，傳統程式就會因為缺失運算依據而無法處理，就是不能用規則和運算解決的問題。
2.2 前端領域不能直接通過規則和運算解決的問題
還是從“該不該”和“能不能”進行分析。JavaScript在不同指令碼引擎上會以解釋和編譯兩種方式執行，在不同的指令碼引擎和執行方式上存在很大的效能差異。針對JavaScript的效能優化，以執行速度快為規則，依據不同指令碼引擎特性，窮舉所有優化可能性對算力的要求巨大，計算過程緩慢而影響研發效率。這種複雜條件下，採用規則和運算的解法投入產出不成正比。在優化JavaScript可維護性的時候，有較強的團隊屬性和主觀性，傳統的前端程式設計技術無法理解可維護性背後的模式和規律。前端智慧化可以藉助模型的能力進行自然語言處理，理解程式碼的語義，總結可維護性好的程式碼背後語義的模式和規律，然後，給可維護性打個分。
2.3 前端智慧化解決的問題
前端智慧化就是在傳統前端程式設計投入產出不成正比或無法處理的複雜場景中，藉助模型對規律和模式的理解，在無人干預的情況下進行推理，產生最佳策略，藉助最佳策略解決傳統前端投入產出比差或無法處理的問題。
3. 可行性評估
前端智慧化價值評估解決的是“該不該做”的問題，前端智慧化可行性評估解決的是“能不能做”的問題。人工智慧可以總結為資料加模型的神祕程式設計方式，因為前端智慧化是在前端領域應用人工智慧技術，所以，只要解決了資料和模型的問題，就可以解決前端智慧化可行性問題。
3.1 資料評估
面對一個前端智慧化適合的問題時，首先要審查是否有充分的資料描述這個問題，有充分的資料描述就意味著模型有可能學會資料背後的規律和模式。在技術工作中經常要面對技術選型，其中一個衡量技術可採納性的標準就是文件是否豐富，尤其在新技術的採納性評估中，有多少人用過踩過坑？沉澱了多少文件資料？直接決定了採納該技術的可行性。假設要解決的問題是Javascript程式碼可維護性問題，就要審查可維護性好的程式碼有多少？可維護性差的程式碼有多少？維護性好的程式碼和維護性差的程式碼是否能充分覆蓋現實中的所有情況？各種情況的程式碼數量分佈是否均衡？
所謂“讀萬卷書，行萬里路”，見多才能識廣，資料應該是越多越好。但是，不能簡單理解為多多益善，假如一個人見過上萬人但沒見過很多外國人，她很難認出一個外國人是哪國人，這就是所謂資料是否均衡。應該被標註為外國人而誤標註為中國人，這就是錯誤資料或噪聲。相對資料均衡性，通常錯誤資料是資料處理中比較麻煩的部分，資料不均衡可以批量處理，資料噪聲只能單獨識別處理。
當面對不同的問題，錯誤資料和噪聲可能是很有價值的。在語音識別領域核心挑戰是抗噪，當語音混雜在不同背景噪聲下，模型識別的時候就會受到干擾。一個解決辦法是去不同背景噪聲的環境下采集資料，讓模型學會從噪聲中分辨語音。當最終要解決的問題是在噪聲中識別語音，對資料的要求就是要擁有噪聲背景的標註資料。如果只是做演講的同聲翻譯系統，就不需要採集那麼多帶背景噪聲的語音識別資料。
3.2 模型評估
前端智慧化要解決的問題是否有成熟的模型解決，是判斷可行性的核心問題。這就像上一個內六角螺絲，是否有對口的螺絲刀直接決定了可行性。模型提供特定的功能，有的模型用來識別影象、有的模型用來識別文字、有的模型用來識別語音、也有模型用來合成語音……成熟的模型會在泛化能力和準確率上具有很高的水準。
成熟的模型一般都會提供預訓練的模型，通常，這些預訓練的模型會在海量資料集和大型分散式裝置上進行過精心的訓練和除錯，能夠在不加訓練的情況下保持較高的準確率。此外，成熟的模型都擁有較高品質的程式碼，可以直接Git Clone進行實驗。最後，成熟的模型都擁有較完善的文件，這些文件會對模型的原理和功能進行較完整的介紹，同時有豐富的實驗教程和實驗資料。你可以根據這些教程來快速實驗，根據實驗資料要求組織自己的資料，訓練自己的模型。
除非模型效果很好、文件齊全、程式碼質量高，否則，儘量避免看到新論文就去做實驗，因為實踐證明這些實驗對前端智慧化應用人工智慧的意義不大。環境配置、收集資料、處理資料、訓練模型這個過程需要耗費大量時間和精力，然而在實際業務中應用的機會很小，核心原因是這些開源專案更多是為論文服務，從實驗目的出發並非為了產品和業務，這是技術到產品的鴻溝。如果新論文涉及的方法有價值，同時是一些名校名師、名企名家的新論文，才值得去做實驗。
重要的事情說三遍：準確定義問題、準確定義問題、準確定義問題！
只有準確的定義問題才能探求資料和模型是否足以支撐實現我們的目標。實踐中需要反覆檢查：定義的問題是否符合未來應用場景的客觀情況？資料是否能夠充分、高質量描述定義的問題？模型是否足夠成熟？
4. Imgcook.taobao.org的實踐
4.1 問題
一般軟體工程會從應用到平臺再到生態不斷髮展，整體的協作範圍和複雜度都有大幅度增加，藉助機器學習帶來的前端智慧化能力，就可以降低協作成本。舉例來說，之前設計稿生成程式碼需要給設計師提供大量的規範和要求，而設計師對這些要求有個人解讀，設計師的設計習慣也千差萬別，最終造成大量Bad Case讓規範失效。機器學習藉助計算機視覺對設計稿進行識別，無法直接用閾值和規範測量計算的一些視覺內容，可以藉助機器學習進行識別從而輔助規則提升相容性。對於設計師來說，無需記住冗長的規範，怎麼順手怎麼設計極少約束，降低了設計師和前端工程師的協作成本。
4.2 目標
目標很簡單：用機器學習和外掛輔助給設計師和前端工程師提供統一的協作介面，自動完成設計稿到程式碼的過程。除了能夠用設計稿直接生成程式碼的方式減少UI開發工作量，未來可以對資料繫結、簡單互動邏輯也通過語義化分析和自然語言理解的機器學習能力進行支撐。
4.3 架構
4.4 資料收集和處理
藉助語義化分割對UI影象進行處理，得到輪廓、結構、上下文等特徵。
藉助超級畫素的方法來降低特徵的數量，合併畫素達到降低干擾因素的效果。
採用OpenCV進行測量、計算，然後用規則嘗試提取有用的特徵資料，結果並不理想，可以看到，圖上半部分已經被我用閾值過濾掉商品留下文字，但同時文字也有缺失，例如"買買買模式已開啟"識別後只有"買模式已開啟"被準確識別。同時，圖下半部分效果更差，商品實體並沒有被剔除掉。所以，閾值在進行特徵提取的時候會遇到大量的問題，因此，還是要回到用機器學習的模型來進行識別，總結歸納UI元素的特徵。
OpenCV更加擅長測量和計算，因此，未來將採用模型識別加OpenCV測量計算的方式，對UI元素進行識別的同時，還能夠測量出諸如：面積、邊距、行高……等資訊。
4.5 實際效果
可以看到，實際效果還是不錯的，我們已經能夠準確識別出各種UI控制元件。由於UI元素的尺寸和傳統現實世界物體識別的尺寸有較大差異，規律也不盡相同，因此，在使用Yolo V3模型的時候，Anchors的設定上需要重新進行聚類分析。
4.6 沉澱
利用在前端智慧化和Imgcook專案中積累的經驗和程式碼沉澱一套讓前端同學可以快速上手ML的混合技術框架，涵蓋從資料獲取、資料處理、模型訓練、模型服務化、資料反饋到工程化的方方面面，已經初步完成了在Icon、Font識別過程中積累的部分工程鏈路、資料結構化標準、部分標註資料，後續會以：文件 +框架原始碼 +工具服務 +資料開源的方式對外提供 。
5. 暢想未來
是否只能做頁面重構？顯然不是，就如文初所說，前端智慧化會改變工作的方方面面。
這裡舉一個簡單的例子，分析一下網頁載入效能優化。以前Yahoo前端還是很牛的，除了家喻戶曉的YUI，網頁優化的三十五條軍規更是各大公司網頁釋出的門檻。其實，這裡的網頁載入效能優化並不複雜，主要從HTTP協議特點出發總結了降低檔案大小、合併來減少請求數量、CDN加速情況……等經驗。
從圖中可以看到，Google從Yahoo網頁優化規則上發展而來的Page Speed功能非常強大，基本覆蓋了網頁載入效能的方方面面。這裡列舉的優化方法共同構成了網頁載入效能優化的思想，下面引入智慧視角和學習視角重新審視。
智慧視角的觀察路徑是：效用、思想、要素分解，這裡的例子中效用是：降低網頁載入時間。降低網頁載入時間的思想是：提升傳輸速度、減少傳輸量。這三個思想對應的要素不同，下面分別進行分析。
5.1 提升傳輸速度
提升傳輸速度主要用減少連線數量的方法，減少連線數量可以提升網頁載入效能源於HTTP協議的特點，HTTP協議基於TCP/IP協議存在三次握手，建立連線的時間比較長，在Google推動下HTTPS的普及下，證書傳輸和加解密又會耗費很多時間，因此，減少連線數量可以降低這些時間消耗。但是，同時要理解單位連線傳輸速度比較慢，總體載入效能依舊會降低，這也是多執行緒下載優化載入效能的原理。因為載入內容可以預先確定，所以，針對載入內容特點設計連線數量可以優化效能。例如檔案比較大，平均傳輸速度比較小，可以考慮分多個連線併發載入。
平均傳輸速度是一個粗糙的統計值，預先根據這個粗糙的統計值設計連線數量，勢必在平均情況下表現尚可在波動情況下表現就差強人意了。之前在做印度的業務，印度因為基礎建設比較差網路擁堵情況嚴重、訊號不穩定等，網路經常出現波動，這時最優的方案應該是根據網路波動情況動態調整連線數量。動態調整可以一定程度解決這個問題，但是每次檢測網速也有載入效能損耗，還可能因印度大量低端手機運算能力不足造成卡頓、崩潰等問題。
假設有一個簡單的AI模型可以根據使用者使用網路的習慣、網路情況和地理位置等資訊，再結合不同長度檔案和不同載入市場下載入效能的資料，推測使用者載入網頁時的網速情況，就可以由模型評估出一個最合適的連線數量管理策略。
5.2 減少傳輸量
降低網頁載入時間另一個重要方法就是減少傳輸量。這個比較直觀，傳輸的資料量小載入效能自然好，但是傳輸數量往往不是我們想減小就能減小的，需要分兩面看：壓縮和排序。對於必須要載入的內容，減小傳輸資料量的主要辦法是壓縮，文字Gzip、圖片WebP等方法直接壓縮檔案內容來減小傳輸量。對於可延遲載入的內容進行延遲，避免對必要內容載入產生執行緒或網路資源競爭。
如果上述傳統優化傳輸量方法還不能滿足你的需求，那麼DCGAN模型可能是一個選擇。DCGAN模型可以通過神經網路預測圖片缺失的部分，如果只傳輸部分資料剩下的由模型補全，將極大減少傳輸資料量。其實，這個思路也是傳統程式設計思想裡用時間換空間的思路，因為DCGAN模型預測需要運算時間的。
總結
從量和質兩個方面看，人都存在巨大的侷限性。
從量的角度看，任何人能夠掌握的知識量因為其學習速度和壽命存在巨大瓶頸。從質的角度看，任何人對知識的理解質量因為其學習能力和學習環境存在巨大差異。訓練字型識別模型的時候，大概1400ms的時間藉助CUDA顯示卡加速可以學習28張圖片，每張圖片有98x98x16共計448維資訊，整個網路有110萬個特徵，這種學習量和學習速度是人無法企及的。
從質的角度看，如果有高質量的樣本資料，神經網路的學習能力擁有穩定的學習質量，不會像人一樣受環境、情緒等因素影響。最重要的是機器插上電執行起來就可以7x24小時不間斷的進行高質量學習，而人不僅無法保證學習質量的一致性，也不能像機器一樣連軸轉。
因此，智慧化能突破人學習上的侷限性。未來，在前端技術領域中，因為智慧化加持，新手和大牛之間可能只差一個優質的機器學習模型和一些高質量學習樣本。
推薦閱讀
掃描二維碼
關注淘寶技術
在看點這裡