一個高水平客戶端應用 UI 的開發者，通常需要滿足以下的一些條件：
- 熟悉跟渲染有關的基本概念，比如 2D 繪圖，光柵化，合成；
- 對所使用 UI Toolkit 的渲染流水線有較深的了解；
- 掌握 UI Toolkit 裏面的 View/Layer 等概念，知道在滿足布局/交互的需求下，如何構建一個性能最佳的 View/Layer Hierarchy；
- 掌握 UI Toolkit 提供的性能分析工具，能夠對應用的 UI 性能（交互/動畫）進行分析，找出性能瓶頸；
- 掌握常見的最佳實踐和優化技巧；
雖然上述條件略高，但是滿足條件或者起碼部分滿足條件的客戶端開發者數量上應該還是不少的。國內互聯網公司裏面，比較成熟的客戶端應用開發團隊，起碼都會有一兩位。
假設我們把上述條件稍微進行修改，寫一個針對頁端的 WebApp UI 開發者的版本：
- 熟悉跟渲染有關的基本概念，比如 2D 繪圖，光柵化，合成；
- 對瀏覽器內核的渲染流水線有較深的了解；
- 掌握瀏覽器內核裏面的 DOM/Render Layer/Compositing Layer 等概念，知道它們之間的映射關系，知道在滿足布局/交互的需求下，如何構建一個性能最佳的 Compositing Layer Hierarchy；
- 掌握瀏覽器提供的性能分析工具，能夠對 WebApp 的 UI 性能（交互/動畫）進行分析，找出性能瓶頸；
- 掌握常見的最佳實踐和優化技巧；
假如我們使用上述條件進行過濾，恐怕這次滿足條件甚至部分滿足條件的頁端開發者就是鳳毛麟角了。頁端和客戶端的開發者在這方面的差異，它的原因是什麽，要填補上這個差異的困難又是什麽，以下是自己的一些思考。
客觀的原因
客戶端 UI 開發者在 UI Toolkit 提供的編程環境中，需要直接操作 View/Layer/Canvas，而頁端 UI 開發者在瀏覽器提供的編程環境中，直接面對的是更高抽象層級的 DOM/CSS，這也意味著頁端離底層更遠 ，這本身是頁端開發的一個優勢，但在降低了開發門檻的同時也容易導致對底層運行機制理解和掌握的不足；
瀏覽器的渲染流水線通常比 UI Toolkit 更復雜，首先是因為瀏覽器本身需要處理的源對象是更高抽象層級的 DOM/CSS，其次瀏覽器的渲染流水線本身不是完全獨立的，它自身也是一種客戶端應用，跟其它客戶端應用一樣，需要基於平臺的 UI Toolkit 來完成完整的渲染和交互；
基於 UI Toolkit 公開的入門指南，最佳實踐，甚至內部運行機制分析等文檔資料和書籍更多且更系統，而瀏覽器引擎相關的公開文檔資料則非常少且零散，而從頁端的角度寫的，能夠為頁端所理解的就更少了；
主觀的原因
客戶端的開發有著更悠久的歷史，相應的開發技術和方法論更成熟，也因為其開發門檻較高，一般而言開發團隊的工程化和專業化的程度也更高。
而 Web 開發還是正處於一個傳統文檔流類型網頁轉向 WebApp 應用類型網頁的過程中（即使瀏覽器本身也還處於一個逐步進行技術演進的過程），兩種不同類型的網頁所需要的開發技術和方法論有所差異，工程化和專業化的要求程度也不同。
頁端團隊自身也還在適應這個過程，一方面在語言/框架/工具/規範方面的工程化程度已經達到較高的水平，但是另一方面，適應應用開發的開發技術和方法論的掌握還不足，專業化程度也並不夠，在專業領域知識/經驗的積累和傳承，領域專家的培養，不同專業領域的分工協作等方面還有很大的提高空間。
最後的思考
我個人相信，基於 Open Web 技術開發的 Mobile WebApp 應用，按當前現狀的普遍質量而言，在交互/動畫方面還有很大的提高空間。但是這需要內核開發者和頁端開發者的共同努力，一方面內核開發者需要進一步加速內核的技術演進，使之更適應 WebApp 的開發，並且內核開發者應該更主動地輸出相應的工具，知識和經驗來幫助頁端開發者；另一方面，頁端開發者也需要進一步掌握應用開發的開發技術和方法論，提高開發團隊的工程化和專業化程度。
Make The Open Web Great Again！
Tags: mobile webapp ui 瀏覽器
文章來源：