Flipboard發布Web版，在Web技術實現上取得突破

原文  http://www.infoq.com/cn/news/2015/04/flipboard-web-version

最近，Flipboard 發布了其雜志形式社交網絡聚合閱讀器的 Web版本 。這次發布旨在讓用戶在瀏覽器中擁有與原生應用同樣的閱讀體驗。為了實現這個目標，開發團隊不得不在Web技術上有所突破以滿足原生應用對照版本的要求。Web版開發團隊的工程師Michael Johnston在Flipboard官方博客上 詳細說明 了他們面對的一些問題及解決之道。

開發團隊做出的第一個決定是Web版應該滾動展示而不是標準的翻頁展示，他們認為在Web環境下，對于用戶來說滾動看起來更自然；其次，他們希望用戶擁有每秒60幀的體驗，這意味著繪制時間應控制在16毫秒之內，且需要限制重排和重繪。因為存在 卡頓 的現象，所以在移動設備上很難做到這一點。在他們看來，DOM非常慢，而且與DOM的交互終將超過這個限制。

綜合考慮，他們最終決定使用Canvas，Michael解釋說：

Canvas是一個即時模式的繪制API，繪制層不保留繪入對象的信息，而保留模式恰恰相反，它是聲明式的API，管理繪入對象的層次結構。Canvas受益于即時模式方式允許直接給GPU發送繪制指令。

與HTML＋CSS技術相比，Canvas開發技術面臨的困難尤其突出：它每次只能繪制一行文本，圖像處理起來很復雜，重疊元素無法參考任何z-index屬性。盡管遇到這么多弊端和困難，團隊最終仍決定堅持Canvas技術，因為Michael認為：

你不可能在DOM中構建一個每秒60幀的滾動列表視圖，與此相反，現今的大多數設備都提供了硬件加速的Canvas實現，可以直接給GPU發送繪制指令。這意味著我們可以非常快地渲染元素；在許多場景下，我們說的是亞毫秒級范圍。

事實上，Canvas擁有非常小的API集，能夠減少不同瀏覽器間所現bug或不一致性的可能性。相對于處理繪制指令的嚴格順序，創建開發者可以處理節點樹的抽象層，無論如何都是更加必要的。為了完成這個庫，團隊實現了自己的滾動算法（加入了一些優化考慮，如使用脫屏canvas的重繪層），并在 React Canvas （一個React組件，能夠以更自然的方式進行Canvas開發）之下封裝所有功能。

社區對這次發布的反應褒貶不一，每一個人都贊揚團隊為這個項目做出的努力以及他們無私分享他們的決策，即使是那些有爭議者。一些人喜歡它的 簡潔設計 和 React Canvas的流暢性 ，而不喜歡團隊所做決定的其他人主要擔憂可訪問性的問題。Modernizr的作者Faruk Ate?在他的博客中寫到：

Flipboard是一個重點為文字內容的產品，這就是為工程團隊將可訪問性完全拋出窗外而深感遺憾的原因。整個“Web”版本竟然是在一個HTML5 Canvas元素中用偽DOM（文檔對象模型）實現。我也希望易用性是工程團隊下一個重大計劃──2.0版本發布時要解決的問題，如果你愿意的話。

Christian Heilmann 批評了團隊執著于每秒60幀以及無限滾動：

的確，我們需要有目標追求，也需要有可參照衡量的一些東西。但考慮到硬件的不統一，以及一個HTML5應用必須涉及的抽象層數量，定義一些類似每秒60幀基準的事情是相當幼稚的。

大量解決方案都涉及無限滾動，真的，通常這比分頁還煩人。

查看英文原文： Flipboard Pushing Boundaries With Its Web Version Release