最近專案客戶的新需求是在網站Header裡增加收合式Menu Bar的功能，第一個想到的是Adobe Dreamweaver所提供方便快速的Spry Framework。輕鬆幾個步驟自動產生基本功能的陽春Layout，接著在視覺美化上則透過熟悉的CSS語法配合新設計的圖檔加以重新定義成所需要的UI。在這一切都實作完成並進入測試時，卻發現美中不足的是----效能問題。
因為客戶網站為一電子商務網站，功能齊全。在複雜的企業規則與商業邏輯的程式運作上，再加上背後介接了數個系統，網站整體效能已經有點令人擔心。在此次Spry Framework的應用上，視覺效果的呈現明顯Lag。探究其原因主要在於客戶網站所套用的CSS檔案過多所造成。Spry Menu Bar是透過Spry Framework 的一支javascript檔去動態呼叫特定的CSS檔案產生效果並做支援跨browser的判斷處理，若實務應用在過於複雜、需要套用多支CSS檔案的網站，建議在實作前先進行簡單測試，評估是否在達成所需的視覺效果的同時有明顯的效能問題。
效能問題發生後，請教了幾位PG共同商議解決之道。最後是為求不更動現狀的考量下，放棄Spry Framework，而重新寫了一支純CSS的Menu Bar功能，並且符合客戶在支援跨4種Browser版本的要求。背後套用了Peter Nederlof所發表的一支behavior file，主要在解決IE6不支援清單 ‹li›‹/li›hover效果。而對於Absolute Position的 ‹div›碰上‹select›‹/select›element及Flash檔案所造成Layer被覆蓋的問題又另一解決方案issue。 有關Absolute Position的碰上‹select›‹/select›element及Flash檔案所造成Layer被覆蓋的問題，可以技巧性地透過‹iframe›‹/iframe›克服。Absolute Position的 ‹div›可覆蓋‹iframe›‹/iframe›，而‹iframe›‹/iframe›可覆蓋(或包覆住‹select›‹/select›element及Flash檔案，提供大家參考。
沒有留言:
張貼留言