移動端Web App組件化開發(fā)與性能優(yōu)化.pdf

1、近年來，智能移動設(shè)備快速普及，移動互聯(lián)網(wǎng)迅猛發(fā)展，根據(jù)我國最新的互聯(lián)網(wǎng)發(fā)展狀況統(tǒng)計報告，截至2016年6月我國網(wǎng)民數(shù)量已經(jīng)達到7.10億，其中手機網(wǎng)民6.56億[1]。移動互聯(lián)網(wǎng)時代早已經(jīng)開啟，成為了互聯(lián)網(wǎng)行業(yè)的新戰(zhàn)場。為了適應(yīng)快速發(fā)展的移動端開發(fā)技術(shù)，基于HTML5技術(shù)的移動端Web App應(yīng)運而生。Web App是利用HTML5等新一代Web技術(shù)實現(xiàn)特定功能，并且運行于網(wǎng)絡(luò)和瀏覽器的移動端應(yīng)用程序。隨著設(shè)備性能的不斷提高，移動端We

2、b App的用戶體驗也漸漸逼近客戶端應(yīng)用。相對于已被人熟知的Android應(yīng)用和IOS應(yīng)用，移動端Web App最大的優(yōu)勢就是不需要下載安裝即可使用，用戶通過掃一掃二維碼，或者通過推送的URL即可打開應(yīng)用，又無需安裝、更新或卸載。并且移動端Web App開發(fā)過程高效，版本迭代迅速，具有支持跨平臺的內(nèi)在屬性。當然與客戶端應(yīng)用比起來，移動端Web App也存在穩(wěn)定性低，兼容性差等問題。
　　本論文所述的移動端Web App組件化開發(fā)，

3、是針對Web App開發(fā)而設(shè)計的一種快速開發(fā)模式。在大型軟件項目開發(fā)中，組件化開發(fā)能減少代碼變更代價，每次變更業(yè)務(wù)需求時甚至不需要修改代碼，僅僅是變更相關(guān)配置就可以實現(xiàn)新需求，可以大大提高開發(fā)效率，提高代碼重復(fù)利用率，降低維護成本。另外，移動端設(shè)備的電量、內(nèi)存等資源十分有限，提高移動端應(yīng)用性能的意義不言而喻。在移動端業(yè)務(wù)需求越來越復(fù)雜的情況下，Web App性能優(yōu)化的意義也越來越重要。
　　作者讀研期間，在騰訊科技（深圳）有限公司

4、-社交網(wǎng)絡(luò)事業(yè)群-社交平臺部做過一年軟件開發(fā)實習生。作者的主要工作就是參與Qzone移動端Web App基礎(chǔ)組件庫的構(gòu)建、維護，以及利用基礎(chǔ)組件庫快速開發(fā)手機版QQ空間客戶端內(nèi)嵌的各種Web App，并且對其進行必要的性能優(yōu)化。本論文所述的Web App組件化開發(fā)及性能優(yōu)化課題，是來源于實習期間所做項目。
　　本論文首先介紹了移動端Web App的發(fā)展背景與發(fā)展現(xiàn)狀，引入了Web App相關(guān)技術(shù)HTML5、CSS3、jQuery的

5、介紹。然后介紹了基礎(chǔ)組件庫和組件化開發(fā)模式，以Qzone業(yè)務(wù)為背景介紹了基礎(chǔ)組件庫的構(gòu)建過程，基礎(chǔ)組件庫主要包括滾屏組件、支付組件、抽獎組件、獲獎記錄組件、地址填寫組件和分享定制組件，并且以一個Web App的開發(fā)實例詳述了利用基礎(chǔ)組件庫進行組件化開發(fā)過程。隨后從腳本加載優(yōu)化、CSS圖像拼合技術(shù)優(yōu)化、Gzip壓縮技術(shù)優(yōu)化三個方面探討了WebApp性能優(yōu)化的方案。最后，論文總結(jié)并展望了Web App組件化開發(fā)技術(shù)和性能優(yōu)化技術(shù)，以及Web