“2G不給力哇,百度文庫都這么慢?” ……,“人品大爆發?一下變的如此神速。”。
這兩句話皆出自一位百度文庫的手機端用戶,只是,曾經的牢騷變成了如今的稱贊。百度文庫的手機使用體驗有了很大改善,不僅閱讀體驗更加舒適,且載入速度也更加流暢。俗話說,臺上一分鐘,臺下十年功,對于一個動不動就有幾M甚至幾十M大塊頭文檔載入的移動端產品,百度知識搜索部的前端研發團隊,通過什么實現了加載速度的提升呢?這還得從領導“踢館”說起。
“小林同志,有人來踢館。”
“誰啊,不想混了吧~”
“一個咱們的忠實粉絲,說百度文庫移動版載入速度不夠快,特別是2G環境下,比在北京開車還肉!” ;
……
其實,這個“踢館”粉絲就是百度知識搜索部前端團隊的領導,“用戶體驗永遠第一,無論是2G還是3G環境中,一定要保證瀏覽速度!”就這樣,團隊成員們開始對導致慢速的原因進行排查。他們發現,由于閱讀器上按鈕圖標較多,同時分為日夜模式兩種顏色,存到CSS(風格樣式表)后,占用了較大體積,導致加載速度緩慢。
“看來關鍵問題就是要優化CSS。”經過對數十款手機數千次的測試,團隊成員們最終找出了最為優化的解決方案——他們將圖標做成可縮放矢量圖形的字體文件,再通過網絡字體的方式引入,這樣,不但壓縮了大小,還實現了一套圖標的黑白變色。而處理后的CSS大小由原先的150K降到40K,大大降低了流量消耗和加載時間,讓用戶感受到了“秒殺”的體驗。
類似的故事在百度知識搜索部前端團隊經常上演,通過技術創新讓用戶得到最佳產品體驗這個理念,也早已經深入團隊每一位成員的心中。為了讓手機用戶可以離線閱讀百度文庫,團隊成員共同協作,攻克了manifest技術只能按文章鏈接緩存靜態頁面的技術難關,實現靜態文件更新,將頁面緩存到本地制作離線應用,每篇下載的文章就像一本電子書一樣成為一個單獨的應用,用戶在不聯網的情況下也可以直接閱讀。該團隊資深前端研發工程師梁東杰介紹道:“雖然 manifest技術已經不是什么新鮮事了,但我們這次可以說是做出了這項技術的最佳實踐。”
對于全新的HTML5技術,產品經理、設計等非研發人員往往對其了解偏少,這成為了影響開發的重要因素。而百度知識搜索部前端團隊卻摸索出了新的思路——差異化。在近期舉辦的第三十期百度技術沙龍上,梁東杰與現場的前端工程師分享了如何應用瀏覽器增強技術以及通過差異化的思路進行新技術實踐。他認為差異化開發解決了各類瀏覽器的適應性問題,在具體項目中,可通過功能上的加減法,讓產品經理接受新技術功能;也可以通過效果上的加減法,讓用戶體驗設計師接受交互創意推介。在這個思路下,應用瀏覽器增強技術,就能使低端瀏覽器對新特性實現自動化兼容,可以展現CSS3代碼效果,讓低端瀏覽器用戶也能獲得最佳體驗。
瀏覽器增強-差異化前端開發框架思路1.0
梁東杰透露,百度知識搜索部前端團隊不但技術過硬,在創新意識上也是獨樹一幟。他們搭建了“瀏覽器云測試平臺”、“運營自動化開發平臺”,不僅為多瀏覽器測試提供了半自動化環境和工具,還可增加內容的復用率,大大提高專題頁面的開發效率。此外,開源的CSS 3增強開發工具color stone(五彩石),因為改進前端開發開發效率,讓前端工程師開發css代碼時更輕松而受到了極大的好評。為了使社區類產品可以支持多國語言而提出的國際化開發前端解決方案,面世后不久就已經實現了泰語,阿拉伯語,越南語等多個語種的版本。
談到未來,梁東杰對自己的團隊充滿了信心:“在這個依舊‘百花齊放’的‘準HTML5時代’,我們將繼續‘兼容并蓄’的為各類平臺用戶提供優質的前端體驗,為迎接HTML5的崛起做好更加充分的準備。”
附:
第30期百度技術沙龍資料觀看/下載地址:http://pan.baidu.com/share/link?shareid=60469&uk=1308863905
百度技術沙龍新浪微博:http://weibo.com/baidutech
推薦閱讀
蘋果當地時間周一宣布了管理層調整,iOS移動軟件高級副總裁ScottForstall將于明年離職,零售部門主管JohnBrowett已經離職。 蘋果當地時間周一宣布了管理層調整,iOS移動軟件高級副總裁Scott Forstall將于明年離職,零>>>詳細閱讀
地址:http://www.xglongwei.com/a/xie/20120301/116171.html