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