基於WebSphere Commerce的電子商務應用效能最佳化(2) 店鋪頁面設計建議

店鋪頁面設計建議

隨著資訊量和網路規模在互連網上爆炸式的增長，網站的效能成為使用者的體驗和市場成敗的關鍵。與普通 軟體產品不同，Web 產品的效能提升和品質保證不僅僅依賴於開發後期和實施階段的測試和修改，而需要在網 頁設計和開發階段就在效能方面做足夠的考慮。

Yahoo 公司針對網站效能最佳化提出了一系列建議，成 為目前網頁開發人員普遍遵循的規則。這些規則都看起來簡單並易於實施，然而在實際的網頁設計中，尤其是在 設計適應中國市場需要的網站的時候，我們需要根據實際情況靈活的採取並且應用。

本文以 IBM WebSphere Commerce 產品中的中國樣本商店 （China Store MayUJoy 美易居）的具體實現為依據，從網站頁 面設計的後台和前台兩個角度，以開發與測試過程中的實際例子來展現與效能相關設計。重點考慮的方麵包括 後端的非同步、前端的延時載入（Lazy load）和 CSS Sprite、營運時的內容壓縮、動態緩衝等。在文章的最後 ，還對輔助頁面效能設計的自動化工具進行了介紹。

影響店鋪頁面效能的關鍵因素

頁面渲染是瀏覽器將 HTML 程式碼解析、載入並根據 CSS 定義的規則顯示在瀏覽器視窗中的整個過程。因此 ，為了明確頁面設計能夠改進哪些地方，我們有必要簡單瞭解一下瀏覽器渲染模型及其載入一個 HTML 頁面的 過程（以 FireFox 瀏覽器為例）：

使用者輸入網址，瀏覽器向伺服器發出請求，伺服器返回所請求文檔的內容；

瀏覽器開始載入 HTML 程式碼，解析並構建文檔樹（DOM 模型）

瀏覽器解析外部 CSS 檔案及 style 標籤中的樣式資訊，這些樣式資訊以及 HTML 中的可見度指令將被用 來構建另一棵樹——渲染樹（rendering）。渲染樹由一些包含有顏色和大小等視覺屬性的矩形元素組成，構 建這棵樹是為了以正確的順序繪製文檔內容。

渲染樹構建好了之後，將會執行版面配置階段（layout 或者 reflow），它將確定每個節點在螢幕上的確切坐 標。再下一步就是繪製，即遍曆渲染樹，並使用 UI 後端層繪製每個節點。

繪製過程是逐步完成的，為了更好的使用者體驗，渲染引擎將會儘可能早的將內容呈現到螢幕上，並不會等 到所有的 HTML 都解析完成之後再去構建和布局 render 樹。它是解析完一部分內容就顯示一部分內容，同時 ，可能還在通過網路下載其餘內容。

渲染引擎重新執行版面配置階段（reflow）是不可避免的，只要在頁面解析過程中遇到引起頁面某些元素佔位 面積、定位方式、邊距等屬性的變化的行為，都會引起它內部、周圍甚至整個頁面的重新渲染。一些常見的情 況如：頁面上滑鼠操作引起頁面動態效果的變化，或手動更新外部 CSS 檔案等。

在以上全部步驟中，我們將使用者花費時間等待的步驟和相關的最佳化技術措施一一列舉，並以 China Store 為例詳細介紹實現的原理和思路。其中包括：

步驟１中對於非首次訪問頁面的加速——動態緩衝

步驟 2 中對 HTML 程式碼的解析和載入——內容壓縮

步驟 5 中對多個 HTTP 要求的載入——非同步，消極式載入和 CSS Sprites

步驟 6 中對重新渲染的最佳化——圖片和 JavaScript 的最佳化

非同步

非同步和同步的概念與訊息的響應機制有關。所謂同步，就是在發出一個功能調用後，在沒有得到結果之前 ，該調用就不返回；而當一個非同步程序呼叫發出後，調用者不能立刻得到結果。實際處理這個調用的組件在完 成後，通過狀態、通知和回調來通知調用者。一般而言，我們在說同步、非同步時候，特指那些需要其他組件 協作或者需要一定時間完成的任務。

在 Web 開發領域中，非同步呼叫最大優勢是改善了前端使用者體驗， 使使用者不必等待伺服器響應，瀏覽器的地址欄和狀態列不顯示 “正在載入”狀態（轉動的小表徵圖），整個瀏 覽器也沒有“停頓”或“卡住”的感覺。後台應用程式在執行時，針對一些比較耗時的操作包括 IO 操作、數 據庫操作等，我們可根據當前應用情境來考慮是否採用非同步呼叫，而且可以根據用戶端對結果的關心程度，適 當更改服務的設計來提高系統響應速度。同時注意，不合理的非同步呼叫，會增加用戶端程式的複雜性，而且有 可能會影響系統效能。

電子商務網站上常見的非同步主要分為兩種： 一種為後端事件處理的非同步返回， 在本段落中會以訂單流程中 ERP 的處理為例具體講述；另一種為前端大的頁面（或請求）拆分為多個小的子 請求，通過 ajax 技術進行非同步呼叫，從而避免指令碼阻塞，加快頁面元素的渲染，本文會在後面的延時載入部 分具體詳述。

本文利用中國樣本商店訂單流程中訂單提交以後 ERP 系統的訂單非同步處理來講解相關的 實現。

使用者在店鋪中提交訂單，訂單系統將訂單儲存在電子商務系統中同時發往 ERP 系統；

使用者不需要等待 ERP 系統處理結果的返回，直接在商店中完成訂單，等待發貨等系統的下一步處理；同時 使用者可以在店鋪中進行其他動作；

ERP 系統接到訂單以後，對庫存進行更新、訂單進行狀態跟蹤處理，如收款、發貨、配送等等；

ERP 系統會根據系統設計（定時或者按需）對電子商務系統進行庫存和訂單的同步，使電子商務系統和 ERP 系統資料保持一致；

電子商務後台系統使用訊息機制發送通知、簡訊等使使用者得到訂單的最新狀態。

這種典型的 ERP 流程的非同步處理使使用者在前端商店中無阻塞的進行購物體驗，不需要關心背景處理邏輯 ，並且及時的得到訊息通知。