LinkedIn 5月2日發(fā)布了新的iPad版本，它基于HTML5制作，在體驗和界面上非常出色，在使用中可以發(fā)現它和原生應用基本沒(méi)有任何差別。

關(guān)于這個(gè)版本，有兩篇文章非常有價(jià)值，深入的介紹了Mobile Web App和HTML5移動(dòng)開(kāi)發(fā)的原理和方法。

第一篇《你絕對想不到的LinkedIn如何構建iPad新應用》主要包括三個(gè)方面的內容：

• LinkedIn and themobile web

LinkedIn開(kāi)始越來(lái)越多的采用HTML5來(lái)開(kāi)發(fā)移動(dòng)Web應用。

• Now, with more Node.js

大量使用了node.js。

• “Responsive design” just doesn’t work

他們認為響應式網(wǎng)頁(yè)設計對簡(jiǎn)單的、一次性的網(wǎng)站很有用，但是對應用或者社交網(wǎng)絡(luò )來(lái)說(shuō)，它沒(méi)有那么好。

-------- -------- -------- -------- 華麗的分隔線(xiàn)

而下面一篇文章講述了LinkedIn是如何使用HTML5在iOS中實(shí)現平滑無(wú)限滾動(dòng)以及內存和性能優(yōu)化的。

LinkedIn iPad版：用HTML5的5項技術(shù)實(shí)現無(wú)限平滑滾動(dòng)

作者：TrunalBhanse

譯者：蔣宇捷

這是在一系列博客文章中的第二篇，我們將聊聊LinkedIn新的iPad應用。在第一篇文章中，我們談到了如何使用HTML5本地存儲建立敏捷的移動(dòng)體驗，而這篇文章我要講講當實(shí)現一個(gè)無(wú)限翻頁(yè)的列表時(shí)所面臨的挑戰。

什么是“流”？

當iPad項目開(kāi)始時(shí)，我們考慮過(guò)如何才能為用戶(hù)創(chuàng )造一個(gè)引人入勝的內容消費體驗。我們決定以“流”的方式來(lái)展示文章、網(wǎng)絡(luò )更新，以及其他類(lèi)似的內容：一個(gè)可以無(wú)限翻頁(yè)的界面。這里是頁(yè)面流的第一頁(yè)：

移動(dòng)設備上無(wú)限列表的挑戰

和臺式機相比，移動(dòng)設備具有更少的內存和更低的CPU主頻。如果在HTML頁(yè)面中渲染很長(cháng)的列表，你會(huì )面臨運行設備崩潰的危險。這使得在移動(dòng)設備上構建大型的HTML5互動(dòng)應用成為一個(gè)挑戰。Native技術(shù)提供了UITableViewController來(lái)建立長(cháng)的，無(wú)限滾動(dòng)的列表。UITableView包含可復用的UITableViewCells來(lái)優(yōu)化內存，性能以及響應。而針對HTML5我們沒(méi)有任何現成解決方案。因此，我們將自己實(shí)現一個(gè)！

技巧1：移除圖像

UIWebView或者移動(dòng)Safari瀏覽器對圖像有嚴格限制。我們的頁(yè)面流里鋪滿(mǎn)了大尺寸圖像，所以很快就會(huì )達到上限。一種選擇是使用HTML5Canvas繪制圖像，不會(huì )帶來(lái)內存問(wèn)題。然而我們發(fā)現在畫(huà)布上繪制非常大的圖像相當緩慢，所以我們不得不采取另一種方法：當一副圖像完全“流”出屏幕時(shí)，用另一副非常小的圖像替換img標簽的“SRC”屬性。這能確保渲染大型圖像所使用的內存被定期釋放。此外，我們保證并沒(méi)有引入圖像空src屬性的錯誤。

技巧2：隱藏頁(yè)面

釋放圖像并沒(méi)有回收足夠的內存來(lái)防止崩潰。因此，我們開(kāi)始通過(guò)將CSS 的visibility屬性設置為hidden 來(lái)隱藏流的獨立頁(yè)面（圖2表示“隱藏”的頁(yè)面）。經(jīng)過(guò)這種調整，我們不僅看到了更多的內存被回收（這樣應用程序就不會(huì )崩潰），而且渲染速度也更快，因為瀏覽器不會(huì )為界面上“隱藏”的頁(yè)面進(jìn)行繪制。

技巧3：刪除頁(yè)面

采用隱藏的頁(yè)面可以覆蓋80％的情況。但是余下的20％仍然會(huì )導致應用程序崩潰！我們更進(jìn)一步，開(kāi)始刪除不需要的頁(yè)面。作為副作用，如果我們刪除當前頁(yè)面左側的頁(yè)面，頁(yè)面流會(huì )左移，而用戶(hù)將失去所在位置。為了保持滾動(dòng)位置，我們不得不在移除頁(yè)面時(shí)（即DOM節點(diǎn)）用同樣高度和寬度的空白頁(yè)面來(lái)取代（圖2中示意的“占位符”）。例如，如果用戶(hù)正在瀏覽第5頁(yè)，我們刪除第0頁(yè)，并用占位符取而代之。

采用了上述的3種技術(shù)，我們的流開(kāi)始類(lèi)似于下面圖里的樣子。 正如你可以在圖1中看到的一樣，如果用戶(hù)正在查看第3頁(yè)，前一頁(yè)和后一頁(yè)將完全加載。而當用戶(hù)決定向前或者向后翻頁(yè)時(shí)，他可以看到完全呈現的頁(yè)面。當用戶(hù)試圖滾動(dòng)時(shí)，我們開(kāi)始加載圖像并渲染頁(yè)面。它可以在iPad模擬器上完美運行，但在實(shí)際設備上，你可以看到滾動(dòng)性能的下降。

圖1

圖2

正如圖2所示，當用戶(hù)翻動(dòng)到第5頁(yè)，第0和第1頁(yè)將會(huì )被刪除，第2頁(yè)將會(huì )隱藏，而第3頁(yè)移除了所有圖像。此時(shí)，用戶(hù)可以繼續向前翻頁(yè)，其它頁(yè)面將根據它們和可見(jiàn)頁(yè)面之間的距離來(lái)決定是移除圖像、隱藏還是刪除自身。

我們不得不為不同版本的iPad使用一個(gè)可變大小的“窗口”。例如，iPad1內存最少，所以我們不得不給它一個(gè)非常小的窗口：

[html]

1. getConfig : function() {
2.  
3. //默認設置
4. var config = {
5. size : 3,
6. maxVisibleOnOneSide : 1,
7. };
8.  
9. //根據設備更新設置
10. if($isDesktop || $native.isNative() && $os.ipad) {
11. //檢測是ipad1還是ipad2
12. if($isDesktop || $native.getDeviceVersion() > 1) {
13. config.size = 7;
14. config.maxVisibleOnOneSide = 2;
15. }
16. }
17. return config;
18.  
19. }

 

技巧4：避免縮放和盒陰影

按照之前的經(jīng)驗，我們使用兩個(gè)HTML / CSS的優(yōu)化技巧來(lái)改善性能：

• 通過(guò)HTML IMG標簽中指定寬度和高度屬性來(lái)避免客戶(hù)端縮放圖像
• 避免CSS盒陰影：它在WebKit下很慢

技術(shù)5：減少DOM節點(diǎn)

經(jīng)過(guò)上述優(yōu)化，你是否預期應用再也不會(huì )崩潰？錯了！在測試過(guò)程中，上述技巧讓?xiě)贸绦蜻\行的時(shí)間更長(cháng)，但一段時(shí)間后它仍然會(huì )崩潰。

根據之前iPhone應用的經(jīng)驗，我們知道保持DOM節點(diǎn)最少是平滑滾動(dòng)和保證足夠內存的關(guān)鍵點(diǎn)。 記住這一點(diǎn)后，我們將所有占位所用的節點(diǎn)合并為一個(gè)虛擬的，相同大小的節點(diǎn)。結果是：不管我們滑動(dòng)到多少頁(yè)，頁(yè)面流不會(huì )在任何設備上崩潰！最終機制如圖3所示：

圖3

技術(shù)實(shí)現的視頻

這里有一個(gè)當用戶(hù)滑動(dòng)翻頁(yè)時(shí)，DOM所表現出來(lái)行為的視頻。左邊我們在Chrome窗口中加載頁(yè)面流。而在右邊，我們通過(guò)Chrome的開(kāi)發(fā)者工具來(lái)展示如何添加或刪除節點(diǎn)和通過(guò)虛擬頁(yè)面的寬度來(lái)填補被刪除的網(wǎng)頁(yè)。 請注意DOM節點(diǎn)是如何保持在一個(gè)恒定的數量的，以及UL 的第一個(gè)li節點(diǎn)（“虛擬”節點(diǎn)）大小是如何增長(cháng)的（你可能需要全屏播放視頻來(lái)看）。

失敗的嘗試

我們并沒(méi)有在第一時(shí)間得到正確的結果，所以必須要列出我們一些曾經(jīng)失敗的嘗試。我們最開(kāi)始使用多個(gè)UIWebViews來(lái)各自渲染一個(gè)頁(yè)面并用UISwipeGestureRecognizer來(lái)翻頁(yè)。 然而我們很快就意識到，在本地應用程序使用多個(gè)Web視圖在內存和性能方面是一種糟糕的方式。

隨后我們嘗試了和3-DIV類(lèi)似的方法。它可以工作，但是我們對滑動(dòng)翻頁(yè)的性能并不滿(mǎn)意。 有時(shí)如果用戶(hù)在翻頁(yè)，我們同時(shí)在渲染一個(gè)頁(yè)面，單線(xiàn)程的UIWebView 將無(wú)法添加到頁(yè)面流里面。

---