移動Web前端性能與圖片優(yōu)化的研究

1、 泌峭?碩士學(xué)位論文移動前端性能與圖片優(yōu)化的研究論文作者:朱聚豹指導(dǎo)教師:鄭世玨教授學(xué)科專業(yè):計算機系統(tǒng)結(jié)構(gòu)研究方向:計算機網(wǎng)絡(luò)華中師范大學(xué)計算機學(xué)院年月何匆,彳勱綴豇.覷 :.碩士學(xué)位論文 華中師范大學(xué)學(xué)位論文原創(chuàng)性聲明和使用授權(quán)說明原創(chuàng)性聲明本人鄭重聲明:所呈交的學(xué)位論文,是本人在導(dǎo)師指導(dǎo)下,獨立進行研究工作所取得的研究成果。除文中已經(jīng)標明引用的內(nèi)容外,本論文不包含任何其他個人或集體已經(jīng)發(fā)表或撰寫過的研究成果。對本文的研究做出貢獻的個人和集體,均已在文中以明確方式標明。本聲明的法律結(jié)果由本人承擔。作者簽名:日期:,年/月弓日薯醐學(xué)位論文版權(quán)使用授權(quán)書學(xué)位論文作者完全了解華中師范大學(xué)有關(guān)保留

2、、使用學(xué)位論文的規(guī)定,即:研究生在校攻讀學(xué)位期問論文工作的知識產(chǎn)權(quán)單位屬華中師范大學(xué)。學(xué)校有權(quán)保留并向國家有關(guān)部門或機構(gòu)送交論文的復(fù)印件和電子版,允許學(xué)位論文被查閱和借閱;學(xué)?？梢怨紝W(xué)位論文的全部或部分內(nèi)容,可以允許采用影印、縮印或其它復(fù)制手段保存、匯編學(xué)位論文。保密的學(xué)位論文在解密后遵守此規(guī)定保密論文注釋:本學(xué)位論文屬于保密,在?年解密后適用本授權(quán)書。非保密論文注釋:本學(xué)位論文不屬于保密范圍,適用本授權(quán)書。導(dǎo)作者簽名:味象韻日日期.,;年月日本人已經(jīng)認真閱讀“高校學(xué)位論文全文數(shù)據(jù)庫發(fā)布章程”,同意將本人的學(xué)位論文提交“高校學(xué)位論文全文數(shù)據(jù)庫”中全文發(fā)布,并可按“章程”中的規(guī)定享受相關(guān)權(quán)益。

3、作者簽名:來日期:加,許碩士學(xué)位論文 摘要近年來,隨著智能移動設(shè)備的普及,移動互聯(lián)網(wǎng)成為了互聯(lián)網(wǎng)發(fā)展的新動力,同時也為移動學(xué)習(xí)的跨越式發(fā)展帶來了新契機。移動設(shè)備間的差異和無線網(wǎng)絡(luò)資源的稀缺決定在移動學(xué)習(xí)開發(fā)時必須關(guān)注應(yīng)用的性能問題。在紛繁復(fù)雜的移動學(xué)習(xí)站點中,用戶更傾向于使用可以迅速響應(yīng)、完美交互的優(yōu)秀產(chǎn)品。這就形成了對站點進行優(yōu)化的迫切需求。站點優(yōu)化可分為后端優(yōu)化和前端優(yōu)化兩部分。研究表明,用戶響應(yīng)時間中只有%是花在了下載文檔上,其余的時間則花在了下載頁面中的所有組件上。也就是說,如果關(guān)注前端性能并將其響應(yīng)時間減少一半,整體響應(yīng)時間可減少%;加之國內(nèi)在后端的優(yōu)化技術(shù)已經(jīng)比較成熟,所以本文專注

4、于前端的性能優(yōu)化。本文首先介紹了移動前端優(yōu)化的國內(nèi)外研究現(xiàn)狀,提出進行移動前端性能優(yōu)化的必要性。然后對的工作方式如協(xié)議、瀏覽器工作機制等和移動開發(fā)的特殊性進行介紹,工作方式構(gòu)成了在移動學(xué)習(xí)開發(fā)過程中進行性能優(yōu)化的現(xiàn)實依據(jù)和理論基礎(chǔ)。本文中間部分從、圖片和緩存五個方面,圍繞內(nèi)存和兩個核心主題,結(jié)合移動學(xué)習(xí)開發(fā)的實踐,分類展開了移動前端性能優(yōu)化方案的介紹。本文最后對圖片優(yōu)化方案之一,進行了制作時的再優(yōu)化?，F(xiàn)在每個網(wǎng)站都有大量圖片需要下載,而一個一個地下載不如整合到一塊下載來的迅速,這就是技術(shù)。 技術(shù)的出現(xiàn)在一定程度上加速了網(wǎng)站的響應(yīng)時問,從而可提供更好的用戶體驗。前端開發(fā)起步較晚,而圖片制作往往是

5、交互設(shè)計師的任務(wù),職能的細化造成了他們在實際工作中不能采用軟件工程師一樣的思維去用算法進行優(yōu)化。本文針對的制作,提出一個將多個具有不同寬度和高度的矩形圖像整合為一個矩形圖像時的優(yōu)化算法,并展示了此算法是如何達到最優(yōu)的一個過程。關(guān)鍵詞:移動學(xué)習(xí);前端;性能優(yōu)化; ,. ,., ,. .%, . % %,. ,.?, , .,/,.,., , . . , . . ?; ;: ;碩士學(xué)位論文 目 錄摘荽?.?.?.第一章緒論?.課題背景?。.國內(nèi)外現(xiàn)狀分析?。.國內(nèi)現(xiàn)狀.國外現(xiàn)狀?.:。.本文所做工作?一.論文章節(jié)安排第二章前端性能優(yōu)化概述.網(wǎng)站優(yōu)化?。.搜索引擎市場營銷?.網(wǎng)站性能優(yōu)化.前端性能優(yōu)

6、化。.站點頁面的組成.客戶端工作機制?.協(xié)議.移動開發(fā)的特殊性一.屏幕尺寸多樣化?。.設(shè)備性能?一.本章小結(jié)?.第三章移動前端性能優(yōu)化的方案. 的優(yōu)化處理.減少的重新布局與重繪?. 的合法性測試.的壓縮處理。.的優(yōu)化. 文件放在文檔頂部?。.編寫高校的選擇器?.利用的?碩士學(xué)位論文 .不要過分信任和濫用.的內(nèi)存控制?一.事件處理.數(shù)據(jù)訪問.算法優(yōu)化和流程控制?.的加載與執(zhí)行?.圖片的優(yōu)化.簡單的優(yōu)化處理?一.具體的無損圖像優(yōu)化?。. 及其優(yōu)化?。.移動設(shè)備對圖片的特殊要求?一.利用緩存技術(shù).本章小結(jié)?。第四章 制作算法的提出與優(yōu)化?.常規(guī)算法?.算法的平凡解一.常規(guī)算法?一.不重疊地放置矩形一

7、.算法改進?.減小閉合矩形的寬度時有效增加高度?一.無法放置所有的矩形時有效增加閉合矩形的高度.權(quán)衡外接矩形的大小與求解時間。.算法測試?.評測標準.測試結(jié)果.本章小結(jié)?第五章總結(jié)與展望?.總結(jié).展望.參考文獻?。攻讀碩士學(xué)位期間參與的項目?:謝碩士學(xué)位論文 第一章緒論.課題背景一個站點的訪問者,在獲得良好的用戶體驗前,首先要能夠快速地獲取想要瀏覽的網(wǎng)頁,才會有興致繼續(xù)停留在該站點進行其它操作。如果一個滾動條艱難爬行了秒還沒有劍達終點,大部分用戶會關(guān)閉這個網(wǎng)頁。而對各互聯(lián)網(wǎng)公司,尤其電商來說,丟失客戶就意味丟失利潤。來自、網(wǎng)站的數(shù)會導(dǎo)致用戶搜索請求據(jù)統(tǒng)計再次證明了這一點:網(wǎng)站訪問速度每慢下降.

8、%;.的加載時間每增加其收入下降%;網(wǎng)站若有延遲會導(dǎo)致流量下降%。提高網(wǎng)頁加載速度有助于提升用戶的滿意度,讓公司獲得更高的轉(zhuǎn)換率【】。截止年月底,我國域名總數(shù)為萬個,在中國境內(nèi)的網(wǎng)站數(shù)多達萬個,網(wǎng)頁數(shù)量為億個。年中國單個網(wǎng)站的平均網(wǎng)頁數(shù)和單個網(wǎng)頁的平均字節(jié)數(shù)均保持增長:平均網(wǎng)站的網(wǎng)頁數(shù)達.萬個,較上年同期增長.%;平均每個網(wǎng)頁的字節(jié)數(shù)為,增長.%;我國網(wǎng)民規(guī)模達.億,其中 網(wǎng)民數(shù)量為.億,占網(wǎng)民規(guī)模的.%。我國站點和用戶的規(guī)模已處于高位。網(wǎng)絡(luò)視頻、網(wǎng)絡(luò)購物、團購、電子支付、旅行預(yù)訂、 即時通信、社交網(wǎng)站等各類應(yīng)用方興未艾,科技正以前所未有的方式改變著人們的生活習(xí)慣。年我國用網(wǎng)人員平均每人每周上

9、網(wǎng)時長達到.小時。如今,云計算服務(wù)如火如荼,國外的、等代表著云計算的先驅(qū),國內(nèi)的阿里巴巴、百度、騰訊等公司也都開始運營商業(yè)化的云計算服務(wù)。用戶只需一個瀏覽器,就可完成多數(shù)工作。把所有的應(yīng)用通過/架構(gòu)來實現(xiàn),無論是對于服務(wù)器、網(wǎng)絡(luò)系統(tǒng)還是客戶端,都提出了很高的要求。伴隨著、 等移動產(chǎn)品的出現(xiàn)與普及,移動端的應(yīng)用呈現(xiàn)受到社會越來越多的重視。社交類移動應(yīng)用如新浪微博、騰訊微信,新聞客戶端類應(yīng)用如搜狐、網(wǎng)易,國內(nèi)公司都在向移動傾斜。年,我國移動端網(wǎng)站處于快速發(fā)展初期,端網(wǎng)站無線化速度加快,在總網(wǎng)站的比例高達%【。被稱為未來的學(xué)習(xí)模式的移動學(xué)習(xí),如能抓住這次移動互聯(lián)網(wǎng)高速發(fā)展的歷史機遇,必會成為教育界的

10、一次變革。移動互聯(lián)網(wǎng)雖然作為互聯(lián)網(wǎng)發(fā)展的新極點成為了公司角逐的戰(zhàn)場,移動設(shè)碩士學(xué)位論文 備的配置也日新月異,但用戶不再僅滿足于簡單地獲取信息,他們更希望通過移動設(shè)備獲得如同端一樣順暢、良好的用戶體驗【】。而移動聯(lián)網(wǎng)的整體仍有一定局限,如設(shè)備配置整體低、屏幕分辨率各異、網(wǎng)絡(luò)帶寬慢等,這對站點的優(yōu)化提出了更為迫切的需求。除此之外,移動設(shè)備間功能和尺寸各異,這也無疑增加了移動應(yīng)用推廣的難度。移動學(xué)習(xí)的推廣,面臨著同樣的問題。程序設(shè)計語言編移動應(yīng)用的實現(xiàn)現(xiàn)在主要有兩種模式,一種是用不具有平臺無關(guān)性,寫,一種是充分借鑒并利用萬維網(wǎng)已有經(jīng)驗和技術(shù)。更多的選擇的是后者。無論是端,還是移動設(shè)備上,作為在線應(yīng)用

11、,內(nèi)容都是存在服務(wù)器上的,客戶端通過協(xié)議向服務(wù)器發(fā)送請求,服務(wù)器處理后會在響應(yīng)中回送所請求的數(shù)據(jù)?？蛻舳撕头?wù)器構(gòu)成了萬維網(wǎng)的基本組件。服務(wù)器端和網(wǎng)絡(luò)系統(tǒng)通常被稱為“后端”,而客戶端則被稱為“前端。一次完整的交互包含后端和前端兩部分。自然站點性能優(yōu)化應(yīng)該包含后端性能優(yōu)化和前端性能優(yōu)化兩部分。不過事實上,只有%的最終用戶響應(yīng)時間消耗在從服務(wù)器獲取文檔并經(jīng)網(wǎng)絡(luò)傳送到瀏覽器這一過程中。而關(guān)于后端優(yōu)化,比如數(shù)據(jù)庫索引、內(nèi)存管理等一直以來都受到很大重視。在站點優(yōu)化中,更應(yīng)關(guān)注那剩余的%的最終用戶體驗。本論文主要就是針對移動客戶端的性能優(yōu)化,也即前端性能優(yōu)化。.國內(nèi)外現(xiàn)狀分析.國內(nèi)現(xiàn)狀國內(nèi)互聯(lián)網(wǎng)的生態(tài)環(huán)境

12、不容樂觀,中國互聯(lián)網(wǎng)低質(zhì)站點的比例很高。年中國低質(zhì)站點占/,低質(zhì)站點的泛濫給中文互聯(lián)網(wǎng)網(wǎng)站的運營發(fā)展產(chǎn)生的負面影響已日益突出。這些低質(zhì)站點,大多數(shù)為采集頁面或具有明顯的作弊行為,不僅內(nèi)容無甚價值,在用戶體驗上也是乏善可陳。而對優(yōu)質(zhì)站點的分析表明,用戶對高質(zhì)量視頻資源及圖片資源、商品供求類資源的需求明顯增長。在國內(nèi)互聯(lián)網(wǎng)界,站點優(yōu)化勢在必行。國內(nèi)部分優(yōu)秀的互聯(lián)網(wǎng)企業(yè)已經(jīng)認識到這個問題,并在網(wǎng)站布局中采取了優(yōu)化措施。阿里巴巴、百度、騰訊等公司已經(jīng)擁有自己獨立的用戶體驗師和前端工程師等,在網(wǎng)站性能優(yōu)化和用戶交互體驗上開始向優(yōu)秀標準靠攏;但多為照搬外國已有經(jīng)驗成果,在前端性能優(yōu)化意識上,和眾多中小型公

13、司一樣,依舊淡漠,很少能獨碩士學(xué)位論文 立發(fā)現(xiàn)并解決性能問題。國內(nèi)越來越容易更快地受到國外科技變化的影響。國外科技公司風云變化,當年的諾基亞在的沖擊下,沒幾年的時光就已然湮沒無聞。蘋果從當年的幾欲破產(chǎn),到后來發(fā)布一系列讓世人至今驚嘆不已的移動產(chǎn)品,智能 和平板電腦借著西風在全世界迅速擴張并普及。移動互聯(lián)網(wǎng)上似乎蘊含著一切的可能性。國內(nèi)公司都開始著手布局移動互聯(lián)網(wǎng),試圖搶占移動互聯(lián)網(wǎng)利益爭奪戰(zhàn)場的高地。移動學(xué)習(xí)也應(yīng)該重新思考并布局。移動學(xué)習(xí)不僅僅是把傳統(tǒng)的學(xué)習(xí)資料整理成能在移動設(shè)備上可呈現(xiàn)的方式,如今它更應(yīng)注重學(xué)習(xí)的社交化、碎片化、游戲化、即時化。移動意味著只要想起就可以拿起的便捷,但現(xiàn)在的智能

14、移動終端都有一個明顯的缺陷,就是電池續(xù)航能力弱。無論用戶通過移動瀏覽器實現(xiàn)什么,移動支付也好,移動學(xué)習(xí)也罷,都需要為剩余的電量提心吊膽。當瀏覽圖片內(nèi)容豐富的新聞網(wǎng)站時,當在學(xué)習(xí)論壇上進行一些簡單卻頻繁的交互時,電池電量正加倍損耗。即便電量問題在未來的某一天不再成為問題,但用戶也許仍要為用 打開一個個人主頁一半時卡掉而煩惱不已。這就要求在網(wǎng)站開發(fā)時考慮到移動接收端,進而進行相應(yīng)的優(yōu)化。而對于移動前端性能優(yōu)化的系統(tǒng)考慮與總結(jié),國內(nèi)更是稀少?，F(xiàn)在國內(nèi)公司對前端崗位的認識正在逐步轉(zhuǎn)化,并有了一個不錯的技術(shù)分享的氛圍。但在大學(xué)內(nèi),前端依舊更多地被認為是一個非技術(shù)流的學(xué)術(shù)方向而不被重視。很少有大學(xué)專門開設(shè)

15、前端相關(guān)課程,學(xué)生在前端方面的知識積累更多地源于從國外站點進行自學(xué)。技術(shù)在實踐中才能得到最好發(fā)展甚至創(chuàng)新,這句話在前端界甚是合適。而本文就是對目前參與項目詳見攻讀碩士學(xué)位期間參與的項目之三中遇到問題的總結(jié)、解決與創(chuàng)新。.國外現(xiàn)狀在國外,尤其是美國,前端性能優(yōu)化是一個非常重要的研究課題,被眾學(xué)者和工程師所重視,他們甚至?xí)嬢^到一個字節(jié)。他們在前端性能優(yōu)化方面做出的成果具有很大的借鑒意義。而 就是其中的佼佼者之一。性能布道者,也是前首席性能工程師。其是結(jié)合.以來開發(fā)領(lǐng)域的最新形勢和特點,系統(tǒng)提出了改善網(wǎng)站性能的條優(yōu)化原則,并開發(fā)了網(wǎng)頁性能分析插件,對于改善前端性能有很大輔助作用。現(xiàn)作為互聯(lián)網(wǎng)大佬,

16、也一直很重視網(wǎng)站優(yōu)化。它在年推出的是版本號更新最快的瀏覽器,其設(shè)計簡單而高效,的最新標準一般都可在該瀏引擎在解析速度上更是讓其他覽器上找到支持,而該款瀏覽器依賴的瀏覽器廠商只能望其項背。曾推出一款服務(wù)器組件,可有效改進服務(wù)器的服務(wù)器請求;推出的曲網(wǎng)頁圖像標準也比傳統(tǒng)的格式圖片更小加載更快。也推出一款網(wǎng)頁性能分析插件,名叫,它不僅給出了優(yōu)化建議,更量化地給出了如果采用了建議性能將得到的改善。但是以上內(nèi)容如同國內(nèi)現(xiàn)狀,多是針對傳統(tǒng)客戶端的前端性能優(yōu)化,移動前端性能優(yōu)化寥寥無幾。.本文所做工作針對國內(nèi)前端性能優(yōu)化意識淡薄、移動互聯(lián)網(wǎng)迅速崛起的現(xiàn)狀,本文首先闡述了站點優(yōu)化的概念,并著力闡述前端性能優(yōu)化

17、的基礎(chǔ)理論和移動開發(fā)的獨特性。然后從、圖片和緩存五個角度出發(fā),分析移動前端性能可優(yōu)化的環(huán)節(jié),并提出優(yōu)化方案。接下來,針對其中的圖片優(yōu)化,提出將多個具有不同寬度和高度的矩形圖像整合為一個矩形圖像時的優(yōu)化算法。.論文章節(jié)安排本文主要工作是對移動前端性能優(yōu)化問題進行總結(jié),并提出一種的優(yōu)化算法。共分五章,內(nèi)容如下:第一章緒論。闡述選題背景及研究內(nèi)容,概述本論文主要研究內(nèi)容及章節(jié)安排。第二章闡述移動前端優(yōu)化的基礎(chǔ)理論,包括協(xié)議、瀏覽器的渲染機制等,并分析了移動設(shè)備的特殊性,這些基礎(chǔ)理論和現(xiàn)實構(gòu)成了研究前端性能優(yōu)化時的基石。第三章分為六個小節(jié),從、圖片和緩存技術(shù)五個角度出發(fā),分別提出優(yōu)化方案,這些優(yōu)化方案

18、的提出,是第二章介紹的基礎(chǔ)理論的外在表現(xiàn),如果不能遵循或者利用正常的理論,那極有可能出現(xiàn)性能的虧損。第四章著重介紹針對將多個具有不同寬度和高度的矩形圖像整合為一個矩形圖像時的優(yōu)化算法,并展示了此算法是如何達到最優(yōu)的一個過程。這是對移動設(shè)備端比較重視的一個性能問題的探究。第五章總結(jié)本文所作的工作,在此基礎(chǔ)上提出有待進一步解決的問題,并對移動曲前端性能優(yōu)化進行展望。碩士學(xué)位論文 第二章前端性能優(yōu)化概述云計算和物聯(lián)網(wǎng)的發(fā)展如火如茶,科技生活必定會進步到“一網(wǎng)打天下”的一個時代。到那時,足不出戶,人們就可以通過電腦或者智能手持設(shè)備等終端實現(xiàn)遠程辦公、團購、旅游預(yù)訂、電子支付等,具體的實現(xiàn)操作對用戶來說

19、是透明的,實際上,用戶也無需關(guān)心這些功能實現(xiàn)細節(jié)。用戶感興趣的是這些應(yīng)用是否具有較好的可用性、流暢的交互操作。這便需要對網(wǎng)站進行優(yōu)化,以便更好地滿足用戶需求。.網(wǎng)站優(yōu)化關(guān)于網(wǎng)站優(yōu)化的本質(zhì),不同的人有不同的理解。網(wǎng)站優(yōu)化大師.認為,網(wǎng)站優(yōu)化 ,本質(zhì)上是一系列最大化網(wǎng)站投資收益的行為?？捎眯源髱焺t從用戶角度出發(fā),認為,網(wǎng)站優(yōu)化的最終目的是為了更好地服務(wù)用戶【。盡管在網(wǎng)站優(yōu)化的最終目的上意見分歧,但在對網(wǎng)站如何優(yōu)化上,學(xué)術(shù)界和工業(yè)界都保持了觀點上的一致性。網(wǎng)站優(yōu)化要使站點的一些評價指標達標,如,網(wǎng)站要易于發(fā)現(xiàn)【】、更方便使用、訪問速度更快、更有美感、運營費用更低以及更有吸引力【。從網(wǎng)站利益相關(guān)者出發(fā)

20、,便是要采取一些切實有效的方法實現(xiàn)這一系列的指標,從而為企業(yè)帶來更大經(jīng)濟效益。從用戶角度出發(fā),便是想用戶之所想、急用戶之所急,為用戶提供便捷、流暢而優(yōu)雅的服務(wù)。可分為兩個方向:搜索引擎市場營銷,和網(wǎng)站性能優(yōu)化。.搜索引擎市場營銷是為了提高網(wǎng)站的展現(xiàn)率而采取的一些措施,主要有使用自然搜索引擎優(yōu)化和點擊付費廣告,以及優(yōu)化轉(zhuǎn)化率。當用戶有需求時,經(jīng)常的操作是在搜索引擎的搜索框中鍵入幾個關(guān)鍵字,在搜索結(jié)果頁面中查找自己滿意的結(jié)果。讓站點獲得更高搜索引擎排名,從而更易被檢索到就顯得非常重要。這是因為大約四分之三的搜索者不會瀏覽第一頁以后的搜索結(jié)果¨。就是獲得高排名的過程。提高企業(yè)品牌知名度的有

21、效方法是廣告宣傳,在互聯(lián)網(wǎng)世界亦無例外。點擊付費或,廣告,是向網(wǎng)站導(dǎo)入流量的一種廣告模碩士學(xué)位論文 型,只有在廣告被點擊時,網(wǎng)站擁有者才向廣告提供商付費。這種方法費用很高,、百度競價,以及但是效果也很好?，F(xiàn)在有許多廣告商,如搜狐和新浪等門戶網(wǎng)站等。以上兩個都是為讓更多的用戶點擊站點而可采取的措施。然而網(wǎng)站,尤其是電子商務(wù)網(wǎng)站,它們不僅僅需要用戶瀏覽自己的站點,更需要采取多種不同技術(shù)將一般訪客變?yōu)橘I家。而這種途徑通常被稱為轉(zhuǎn)化率優(yōu)化,它也包括吸引訪問者帶來更多可以轉(zhuǎn)化成買家的訪問者【 。可實現(xiàn)最大轉(zhuǎn)化率的方法有很多,比如使用基于可信性的設(shè)計、增加網(wǎng)站的易用性、設(shè)計一個能引人注目的廣告語等。主要是

22、針對想要提高網(wǎng)站可見度和轉(zhuǎn)換率的網(wǎng)絡(luò)商家,三種措施的具體實施者各有不同?？梢杂蓪ｉT的專家來完成,有各種商家提供此服務(wù),則更多地涉及到應(yīng)用心理學(xué)和設(shè)計學(xué)。.網(wǎng)站性能優(yōu)化網(wǎng)站性能優(yōu)化是指改進網(wǎng)頁內(nèi)容、優(yōu)化服務(wù)器以更快地發(fā)送網(wǎng)頁。它包括前端性能優(yōu)化和后端性能優(yōu)化兩部分。當用戶點擊了搜索引擎結(jié)果頁面的鏈接,或直接在瀏覽器地址欄鍵入網(wǎng)站地址時,用戶便與目的網(wǎng)站開始了一次簡單的交互之旅。一次應(yīng)用程序請求,就是從瀏覽器發(fā)出一些參數(shù)到網(wǎng)站的服務(wù)器,然后服務(wù)器上的程序?qū)φ埱筮M行處理,再生成瀏覽器可識別的內(nèi)容,最后由瀏覽器將這些內(nèi)容渲染呈現(xiàn)給訪問者。人們將這一過程劃分為“后端”和“前端”。如圖.所示: 通常認為“

23、后端更具神秘性,更具影響力。程序員在后端已經(jīng)投入了很大精力,嘗試各種優(yōu)化方法,如大數(shù)據(jù)處理中數(shù)據(jù)庫的性能優(yōu)化、算法的改進、索引的定期維護等。在現(xiàn)在眾多用戶的海量需求面前,網(wǎng)站必須有運營良好的后臺做支撐。后端性能優(yōu)化是網(wǎng)站性能優(yōu)化不可或缺的重要組成部分。然而,事實上在后端消耗的時間只占整個流程的%。其余則全部消耗在了前端。前端性能的優(yōu)化,更利于網(wǎng)站整體性能的提升。.前端性能優(yōu)化在開展前端性能優(yōu)化之前,有必要理解下站點頁面的組成,客戶端的工作機制以及對性能的影響。.站點頁面的組成。一個網(wǎng)頁可分為結(jié)構(gòu)層、表現(xiàn)層、行為層三部分【結(jié)構(gòu)層給予內(nèi)容含義,是網(wǎng)頁最重要的基礎(chǔ)。表現(xiàn)層定義如何顯示。行為層則為頁面

24、增加交互。結(jié)構(gòu)層是一個網(wǎng)頁不可或缺的基礎(chǔ)。而和則都是可選項,它們的存在給頁面的顯示提供了更多的可能,并增加頁面的交互性。曲,和的規(guī)范主要由萬維網(wǎng)聯(lián)盟來維護。是下一個主要的修訂版本,現(xiàn)在仍處于完善階段。廣義上講時,實際指的是包括、在內(nèi)的一系列技術(shù)組合,。旨在減少瀏覽器對插件的利用時不損失甚至增強網(wǎng)頁的表現(xiàn)性能【.客戶端工作機制這里的客戶端特制的是瀏覽器。今天主流瀏覽器有、和】五種。瀏覽器的主要功能是呈現(xiàn)用戶選擇的資源。這要求瀏覽器首先向服務(wù)器發(fā)送請求,然后將響應(yīng)顯示在瀏覽器的窗口中。資源格式通常是的,但也有、圖片和其它種類的。資源的位置由用戶使用統(tǒng)一資源標識符來指定。瀏覽器如何解釋并呈現(xiàn)文件由和

25、規(guī)范決定。瀏覽器歷來是大佬們利益爭奪的重要焦點。在互聯(lián)網(wǎng)熱潮初期,微軟公司和網(wǎng)景公司就曾展開了長達年之久的瀏覽器之爭,最終以網(wǎng)景公司的失敗告終。微軟率先在上支持,但同時在其發(fā)展中加入了非標準的專屬標簽,令做出的網(wǎng)頁只適合使用瀏覽器。而且在年微軟取得競爭的勝利后,在很長的時間內(nèi)沒有更新瀏覽器碩士學(xué)位論文 的技術(shù)。目前的情況是,對于既有的和規(guī)范標準,現(xiàn)在各瀏覽器的支持程度會有不同,即便支持,對同一標簽的解釋和呈現(xiàn)方式有的也有不同。這為開發(fā)者帶來了嚴重的兼容性問題。但是各廠商的瀏覽器的工作原理大體是相似的。瀏覽器的結(jié)構(gòu)瀏覽器的主要構(gòu)件有【引:用戶界面 , :由地址欄、后退/前進按鈕、書簽菜單等構(gòu)成。

26、也就是瀏覽器窗口中除了顯示用戶請求的頁面的部分,其余皆是瀏覽器的用戶界面。瀏覽器引擎:在查詢和操作渲染引擎的接口。渲染引擎 :負責在窗口中顯示請求到的內(nèi)容,瀏覽器的靈魂。如果請求的內(nèi)容是文檔,那它就用來解析和,計算網(wǎng)頁的顯示方式,然后將內(nèi)容輸出呈現(xiàn)至屏幕上。所有的網(wǎng)頁瀏覽器、電子郵件客戶端以及其他需要編輯、顯示網(wǎng)頁內(nèi)容的應(yīng)用程序都需要渲染引擎。網(wǎng)絡(luò):用來調(diào)用網(wǎng)絡(luò),比如,丌請求。它的接口具有平臺無關(guān)性,可為每個平臺實現(xiàn)底層實現(xiàn)。后端 :用于繪制會話框、窗等諸如此類的基本組件。提供了平臺無關(guān)的通用接口,底層則采用操作系統(tǒng)的用戶界面方法。:用于解析和執(zhí)行代碼。查解析器數(shù)據(jù)存儲 。瀏覽器需要在本地硬盤

27、上保存各種數(shù)據(jù),如。定義了 技術(shù),這是一種輕量級的客戶端存儲技術(shù)。瀏覽器的渲染引擎對網(wǎng)站在客戶端的性能表現(xiàn)很重要。以下對此進行了深入分析。渲染引擎渲染引擎因瀏覽器而異。微軟的使用的是,使用的是,的和的使用的則是框架不過在最新的中,已采用自主瀏覽器引擎代替了引擎,曾使用自己的渲染引擎在年月號宣布將瀏覽器遷移到上。渲染引擎首先要從網(wǎng)絡(luò)層獲取所請求文檔的內(nèi)容。之后按圖.所示流程工作:碩士學(xué)位論文 渲染引擎首先要解析文檔,把其中的標簽轉(zhuǎn)換成相應(yīng)的節(jié)點,而節(jié)點則由父子關(guān)系、兄弟關(guān)系構(gòu)成樹。是文檔對象模型的縮寫,是文檔的對象表示,作為元素的外部接口供等調(diào)用。解析算法是用狀態(tài)機來描述的。當解析完成后,瀏覽器

28、將文檔標記為交互狀態(tài),并觸發(fā)一個事件;同時瀏覽器開始解析處于“延時”模式中的腳本,這些腳本只有在文檔解析完成后才執(zhí)行。是一種“軟性”的語法,它能包容語法上的錯誤,簡化網(wǎng)絡(luò)開發(fā)。如果文檔的格式正確,就直接解析;如果格式錯誤,出現(xiàn)了無效的代碼,解析器會在內(nèi)部進行一定的糾錯處理。雖然不同瀏覽器的錯誤處理機制相似,但錯誤修復(fù)的過程無疑增加了解析負擔,從而延長了解析時間。接著,開始解析外部文件和內(nèi)嵌元素中的樣式,樣式信息結(jié)合樹,最終構(gòu)建一個渲染樹。規(guī)范定義了的詞法和語法文法,渲染引擎會從語法文法中自動生成解析器,將每個文件解析成為樣式表對象,每個對象包含規(guī)則。規(guī)則對象則包含了選擇器和聲明對象,和其它一些

29、符合語法的對象。在此同時,如果解析器遇至標簽時,默認情況下會立即解析并執(zhí)行腳本。這會阻斷文檔的解析過程,直至腳本執(zhí)行完畢。如果腳本是外部的,文檔的解析過程同樣會被阻斷,直到從網(wǎng)絡(luò)獲取腳本完成后再繼續(xù)。在中如果將腳本標注為“”,這樣它會等到文檔解析結(jié)束后才執(zhí)行,從而不會阻斷文檔的解析過程。增加了一個選項,可將腳本標記為異步,這樣可以由其他線程解析和執(zhí)行圳。渲染樹由一些包含了顏色、大小等可視化屬性的矩形構(gòu)成,它們的順序決定了在屏幕呈現(xiàn)時的先后。渲染樹和樹是相對應(yīng)的,但并不是一一對應(yīng)的。不可見的元素不會被插入到渲染樹中,比如元素,屬性為“”的元素,但屬性值為“的元素仍舊會出現(xiàn)在渲染樹中。在構(gòu)建渲染樹

30、時,每個元素的可視化屬性通過對其樣式屬性的計算而得。樣式屬性的來源包括瀏覽器默認樣式表,網(wǎng)頁作者和用戶提供的樣式表等。樣式數(shù)據(jù)是非常大的結(jié)構(gòu),保存大量的樣式屬性會帶來內(nèi)存問題,而且為每個元素查找匹配的規(guī)則都需要遍歷整個樣式表。構(gòu)建完渲染樹后,渲染引擎就開始布局了。在這一過程中,每一個節(jié)點都會被分配上一組用以在顯示器上顯示的精確坐標。使用基于流的布局模型。它從根渲染對象開始,然后遞歸遍歷部分或所有的框架層次結(jié)構(gòu)。通常情況下,只需遍歷一遍就能計算出元素的幾何信息。處于流中較后位置的元素通常不會影響靠前位置元素的幾何特性。但中表格的計算就需要不止一次的遍歷。當一個渲染對碩士學(xué)位論文象發(fā)生了變化或被添

31、加或被刪除時,就可能引發(fā)該渲染對象或整個渲染樹的重新布局。如果變化只是發(fā)生在元素自身而并不干擾其他元素,那么布局并不從根開始。下一步,就是繪制渲染樹了,渲染引擎會遍歷渲染樹并利用后端繪制出來。結(jié)果就是瀏覽器窗口中的效果,或者是一個制作精美的富媒體網(wǎng)頁,或者是一個簡單的靜態(tài)網(wǎng)頁。和布局一樣,繪制也可以使全局或部分的。為了獲得更好的用戶體驗,渲染引擎并不會等到完全被解析完才開始創(chuàng)建并布局渲染樹。這是一個漸進的過程,渲染引擎總是試圖最早地將內(nèi)容呈現(xiàn)出來。也就是說,在渲染引擎的實際工作中,它是邊解析邊呈現(xiàn)的,甚至是同時還正在從網(wǎng)上下載網(wǎng)頁的其它組件。.協(xié)議客戶端的網(wǎng)絡(luò)構(gòu)件是用來調(diào)用網(wǎng)絡(luò)的,主要是進行丌

32、請求【】。號稱是因特網(wǎng)的多媒體信使,是現(xiàn)代全球互聯(lián)網(wǎng)中使用的公共語言。使用的是可靠的數(shù)據(jù)傳輸協(xié)議,可保證圖片、頁面、等資源從服務(wù)器到客戶端的迅速、便捷、可靠地遷移¨。當下采用的協(xié)議版本當下采用的協(xié)議有幾個版本,應(yīng)用程序需要盡量強健地支持多種不同協(xié)議。主要使用的版本是/.。該版本協(xié)議繼承自?/.,在其基礎(chǔ)上校正了設(shè)計中的結(jié)構(gòu)缺陷,明確語義,引入重要的性能優(yōu)化措施,并刪除了一些不好的特性。無奈的是,有些顯而易見的錯誤,無法矯正,比如首部的拼寫錯誤仍在沿用。不過已經(jīng)被廣泛使用,且無傷大雅,那就將錯就錯了。報文語法報文可分為兩類:請求報文 和響應(yīng)報文】。請求報文向.服務(wù)器請求一個動作,響應(yīng)報

33、文則攜帶請求結(jié)果返回給客戶端。請求報文和響應(yīng)報文的報文結(jié)構(gòu)基本類似。請求報文的格式:方法請求瓜版本號首部實體的主體部分響應(yīng)報文的格式:版本號狀態(tài)原因短語首部碩士學(xué)位論文 實體的主體部分方法是指瀏覽器希望服務(wù)器對資源執(zhí)行的動作。比如,等。請求是請求資源的位置表述。版本號是報文使用的曙版本,格式為/主版本號.次版本號。首部是一系列的鍵值對,可以有零個或多個首部。每個首部首先是一個名字,后跟著一個冒號,然后是一個可選的空格,接著是一個值,最后是一個空行。實體的主體部分包含一個由任意數(shù)據(jù)組成的數(shù)據(jù)塊。不是所有的報文都包含實體的主體部分。狀態(tài)碼描述了請求過程中發(fā)生的情況。由三個數(shù)字組成。原因短句是面向人

34、的,是數(shù)字碼的具體解釋。當在瀏覽器本文凡提到瀏覽器的,若不指明,均指地址欄輸入.并敲擊回撤鍵后,請求報文內(nèi)容沒有實體的主體部分如下:/.:.:.:.:/,/,/;.,?嚴;:.:/. ./. 刑,刪./.:,:,;.:;.,棗;.:一.;.?接收到的響應(yīng)報文內(nèi)容如下有實體的主體部分,但未錄:訂/. : :,:?/.?:/.:/;碩士學(xué)位論文 : :,: :,?:,:,:?:.的連接管理連接是報文傳輸?shù)年P(guān)鍵通道,由/承載,位于網(wǎng)絡(luò)協(xié)議棧的應(yīng)用層。如圖.所示,其中是的安全版本,就是在和之間加了一個密碼加密層。?的連接之于網(wǎng)頁就好比交通狀況之于汽車,對網(wǎng)頁下載速度有直接影響?；貞?yīng)用層叵應(yīng)用層叵安全層

35、田傳輸層傳輸層口網(wǎng)絡(luò)層口網(wǎng)絡(luò)層】圃數(shù)據(jù)鏈路層二困數(shù)據(jù)鏈路層圖. 和網(wǎng)絡(luò)協(xié)議棧傳送報文時,以流的形式將報文數(shù)據(jù)通過一條打開的連接按序傳輸。收到數(shù)據(jù)流之后,將數(shù)據(jù)流分成被稱為段的小數(shù)據(jù)塊,并將段封裝在分組中,經(jīng)由互聯(lián)網(wǎng)進行傳輸。啤位于的上層,因而舊事務(wù)的性能在很大程度上取決于底層通道的性能。在建立連接,傳送請求報文,處理和回送響應(yīng)報文的過程中,事務(wù)處理時間可能是很短的。除非瀏覽器或服務(wù)器超載,或正在處理復(fù)雜的動態(tài)資源,否則時延就是由網(wǎng)絡(luò)時延構(gòu)成的。與緩存相關(guān)的首部以下主要針對協(xié)議里與性能相關(guān)的部分進行剖析,而與性能相關(guān)的主要是緩存處理幽。如果有本地緩存文件,曙協(xié)議的緩存機制可以保證在本地緩存文件有

36、效期碩士學(xué)位論文 內(nèi)無需將,丌請求報文送至服務(wù)器端,而直接利用本地的緩存文件。這大大減少了網(wǎng)絡(luò)傳輸時間,從而可提高網(wǎng)絡(luò)性能。與緩存機制有關(guān)的首部主要有口:/.四:一個時間,試圖告訴瀏覽器,在此日期內(nèi),緩存可無需與服務(wù)器聯(lián)系而直接使用緩存中的副本。缺點是,絕對時間依賴于計算機始終的正確設(shè)置。/.:一個時間,標示被請求實體的最后修改時間,用來校驗其緩存副本是否過期。但緩存過期了并不意味著它和原始服務(wù)器上的文檔有實際的區(qū)別。為此,協(xié)議提供了五個條件方法用來緩存再驗證。.:最常見的緩存再驗證首部,如果自指定日期后,文檔被修改了,.條件為真,通常返回一個常規(guī)的請求的響應(yīng)。否則,返回一個 響應(yīng)報文。.:實

37、體標簽再驗證,如果服務(wù)器上的實體標簽已經(jīng)發(fā)生變化,服務(wù)器會在一個 響應(yīng)中返回新的內(nèi)容以及相應(yīng)的新的。:./.:對定義的唯一偽指令,效果等同于,丌/.的.:。./.:值有以下:僅在響應(yīng)首部里出現(xiàn),意識是任何途徑的緩存者,可以無條件地緩存該響應(yīng)。:告訴緩存者,只針對單個用戶緩存響應(yīng),且可以具體指定某個字段。.:在請求首部中出現(xiàn),是要告知緩存者,必須原封不動地轉(zhuǎn)發(fā)原始請求,不許使用任何緩存副本;若出現(xiàn)在響應(yīng)中,則允許緩存者緩存副本,只是在與原始服務(wù)器進行新鮮度再驗證前,緩存不能將其提供給客戶端使用。.可以出現(xiàn)在請求和響應(yīng)首部中,表示請求和響應(yīng)都禁止被緩存。.表示從服務(wù)器將文檔傳來之時起,可以認為此文

38、檔處于新鮮期的秒數(shù)。.移動開發(fā)的特殊性現(xiàn)在全球智能 和市場進入高速增長階段,平板電腦也開始在消費者里迅速蔓延。各種移動終端豐富了人們的生活,一定程度上也滿足了工作需求。但移動設(shè)備各公司軟硬件標準不一,屏幕大小多樣。這就形成了移動開發(fā)的獨特問題。.屏幕尺寸多樣化移動手持設(shè)備屏幕分辨率各異,即便是同一產(chǎn)品,其不同版本間也沒有統(tǒng)一標碩士學(xué)位論文 準。表.所示的是公司的幾種移動產(chǎn)品:表.幾種移動設(shè)備的屏幕分辨率 類型× ×屏幕分辨率考慮到移動設(shè)備除 之外,還有大量的平板電腦等,移動手持設(shè)備屏幕分辨率之雜可見一斑。這要求在網(wǎng)站制作時需要考慮到大多數(shù)情況。而這個問題是在傳統(tǒng)的網(wǎng)站開發(fā)中

39、不需考慮的。屏幕尺寸不同造成的影響是多方面的。為在不同設(shè)備上盡量呈現(xiàn)出相同的效果,首先要進行設(shè)備識別,而在移動端進行網(wǎng)頁布局時也采用不同與傳統(tǒng)前端工作的流體布局。在圖片載入上,工程師也需針對不同尺寸的設(shè)備制作不同大小的圖片。要綜合考量,保證各設(shè)備的兼容。.設(shè)備性能高端智能 和平板電腦的性能參數(shù)。型號 .雙核單核雙核. 四核.小米四核. 四核. .酷睿 智能 正在以空前的速度發(fā)展,但性能仍有一定局限,而且考慮到所有用戶,低中端設(shè)備的擁有者占多數(shù)。用戶交互,網(wǎng)頁從服務(wù)器端下載到本地需要占用一定內(nèi)存,而網(wǎng)頁的解析、渲染、布局、繪制等工作也必定消耗內(nèi)存。在移動設(shè)備中,系統(tǒng)資源分配給瀏覽器的資源是有限的

40、。這就要求在移動端編寫網(wǎng)頁,除了考慮各碩士學(xué)位論文 設(shè)備分辨率的兼容問題,還應(yīng)該考慮到設(shè)備性能問題。從問題本質(zhì)出發(fā),本論文認為在移動前端性能優(yōu)化中,必須堅持減少的實時運算消耗和減少內(nèi)存中存儲的內(nèi)容這一主題。.本章小結(jié)本章首先從站點優(yōu)化全局出發(fā),講述了前端性能優(yōu)化在站點優(yōu)化中的重要性和必要性。接著重點介紹了網(wǎng)頁的基本構(gòu)成、瀏覽器的工作機制、協(xié)議對性能的影響,這是接下來解決移動端性能問題的關(guān)鍵所在。而在本章最后,對當下移動設(shè)備進行分析,指出移動開發(fā)面臨的問題,并提出處理移動前端性能優(yōu)化的兩個核心:和內(nèi)存。碩士學(xué)位論文 第三章移動前端性能優(yōu)化的方案上一章節(jié)已指出移動性能優(yōu)化應(yīng)該關(guān)注的兩個核心問題是和

41、內(nèi)存,這也是移動學(xué)習(xí)在移動端實踐時應(yīng)該關(guān)注的兩個性能上的核心問題。頁面主要有、和組成閣。下面就針對這兩個核心,借鑒傳統(tǒng)性能優(yōu)化方法的同時,考慮到移動端的特殊性,分別從、和網(wǎng)絡(luò)性能出發(fā)提出相應(yīng)的優(yōu)化措施。.的優(yōu)化處理是網(wǎng)頁的結(jié)構(gòu)層,構(gòu)成了網(wǎng)頁的基礎(chǔ)架構(gòu)。中的標簽被解析成元素,元素操作不當會引發(fā)全局布局與重繪,從而造成嚴重的性能損耗。.減少的重新布局與重繪用進行操作以改變網(wǎng)貞部分元素的代價是很昂貴的,這是富應(yīng)用和移動開發(fā)常見的性能瓶頸。由第二章的瀏覽器的工作原理可知,的解析與執(zhí)行,同操作與渲染是由兩個不同的框架來完成的。這意味著,如果要利用去操作對象,就需要使兩個獨立的框架通過接口產(chǎn)生連接。而連接

42、通道的產(chǎn)生便產(chǎn)生內(nèi)存損耗。因此要盡量減少與的操作。另外元素的改變有可能引起局部布局甚至全局布局的改變,進而引發(fā)重繪操作。如果對操作次數(shù)很多的話,會造成更為嚴重的消耗。避免直接操作在需要訪問元素或者集合元素時,可使用局部變量指代元素。比如以下:.”;/.”;/在文檔外建立一個文檔片段,對其進行操作,并在最后將該片段加入到文檔中叨。代碼如下:.,”觚”,”】,;.;.”;】碩士學(xué)位論文 .;.;.;對需要修改的節(jié)點創(chuàng)建一個副本,對副本進行相應(yīng)操作,然后在操作完成后將副本代替原來的節(jié)點。.”,.,【”舡”】,;”;.”;.;.”;.;.;.,;利用瀏覽器的渲染機制,可以先將元素設(shè)為不可見,然后對其進

43、行各種操作,最后將元素設(shè)為可見。這樣也可以避免多次布局和重繪。代碼如下:.¨”;.”;.”;”;.”;或利用和字符串特性,先將修改的內(nèi)容處理為一個字符串,最后將字符串以被操作元素的形式添加進來。使元素脫離文檔流由瀏覽器工作機制得知,脫離文檔流的元素是不會影響文檔中其它元素的布局與渲染的。因此,可以將有可能改動的元素脫離文檔流。而脫離文檔流的常用方法是,設(shè)置元素的屬性為進行絕對定位,或設(shè)置為進行固定定位。另外,浮動元素在布局和渲染過程中也是完全脫離文檔流的。減少可能修改的元素的子代數(shù)量與深度元素被修改而需要重新布局和重繪時,其子代元素也會進行重新布局和碩士學(xué)位論文 重繪。因此,減少可能

44、修改的元素的子元素的數(shù)量,可減少重新布局和重繪的工作里減少影響元素布局位置的屬性的變動元素只有在影響位置的屬性,如寬高、外邊距、內(nèi)邊距等,改動時,會影響其他元素甚至整個文檔的布局,這是最壞的情況,這時需要重新全局布局與繪制。因此,應(yīng)盡量避免修改影響元素布局位置的屬性的變動。減少標簽的使用瀏覽器對標簽的布局與繪制過程需要反復(fù)遍歷,如果文檔中出現(xiàn)大量元素,網(wǎng)頁呈現(xiàn)與用戶可交互時間會被大大延遲。.的合法性測試雖然現(xiàn)代瀏覽器都有較好的容錯性,但如果站點中出現(xiàn)了標簽沒閉合、標簽丟失、標簽錯誤嵌套等情況時,輕者僅是增加瀏覽器的糾錯修復(fù)時間,嚴重的則會出現(xiàn)在不同瀏覽器出現(xiàn)不同顯示效果的局面。加上移動端尤其是

45、 端瀏覽器做的不如端瀏覽器功能強大與完善,在網(wǎng)站發(fā)布前,對其進行反復(fù)測試保證的合法性是最低的要求?，F(xiàn)在的測試框架有、等【】。. 的壓縮處理要盡可能地對文檔進行壓縮處理。用戶向服務(wù)器發(fā)送的請求首部中有個是,表示該瀏覽器支持哪種編碼轉(zhuǎn)換類型,服務(wù)器端可以用來壓縮文檔至相應(yīng)的格式以獲得更快的下載。目前的值包括:、和。是目前最流行和最有效的壓縮方法,壓縮后可減少%左右的響應(yīng)量【】。而在響應(yīng)首部中,有個的首部,表示針對中的某個值,服務(wù)器端采用了對應(yīng)的方法進行了壓縮。對統(tǒng)計的國內(nèi)網(wǎng)站進行分析后,如表.,從中可以看出各大網(wǎng)站對壓縮的重視。但并不是每個站點都注意到了這個問題,比如.。碩士學(xué)位論文 朊 壓縮方

46、壓縮方式壓縮方式式. .的優(yōu)化是網(wǎng)頁的表現(xiàn)層,.和新的標準規(guī)范的充分利用可以使應(yīng)用更加優(yōu)美,但是使用不當則會加劇內(nèi)存的損耗,從而有損于網(wǎng)頁的呈現(xiàn)。下面介紹的優(yōu)化方案。.文件放在文檔頂部這同樣與瀏覽器漸進渲染并顯示的工作方式相關(guān)。如果將文件放置在文檔底部,當瀏覽器下載并解析完文檔其它組件后,并不能進行顯示,必須等到文件下載并解析后,才能構(gòu)建出渲染樹,進而實現(xiàn)網(wǎng)頁內(nèi)容的布局與繪制。而如果將文件放置在文檔項部,則首先下載并解析文件,形成樣式表對象,并與之后瀏覽器下載的其它組件一起,構(gòu)建部分渲染樹,實現(xiàn)漸進渲染與顯示的結(jié)果。有時網(wǎng)頁本身就能夠顯示下載的進度,比如,當網(wǎng)絡(luò)速度慢時,網(wǎng)頁會一部分一部分地顯

47、示,直至全部元素顯示完畢。.編寫高效的選擇器在效率上,從最低開銷到最高開銷的順序講,選擇器的順序依次為:選擇器,選擇器,選擇器,相鄰兄弟選擇器,子選擇器,后代選擇器,通配符選擇器,屬性選擇器,偽類和偽元素【】。編寫高效選擇符有幾個通用規(guī)則【】:避免使用統(tǒng)配規(guī)則;碩士學(xué)位論文 不要限定選擇器,如是沒必要的;避免限定類選擇符,如,.比.效率高;,不如創(chuàng)建一個類,比如.,然盡量將規(guī)則細化,比如,與其后添加到適當?shù)脑厣?避免使用后代選擇器:通常使用后代選擇器的開銷是最高的,可以使用子選擇器代替;避免使用標簽標簽.子選擇器:比如這樣基于標簽的子選擇符,可以用.來代替;質(zhì)疑所有子選擇器的用途:盡可能用具

48、體的類來取代;依靠繼承:避免重復(fù)指定,也可減少文件大小。.利用的中新添加的特性,可實現(xiàn)針對不同屏幕大小的瀏覽器編寫?yīng)毩⒌臉邮奖?在無需改動和的基礎(chǔ)上靈活實現(xiàn)內(nèi)容的差異化布局。這樣,應(yīng)用更具針對性,在大小各異的屏幕上,開發(fā)人員能夠從可用性出發(fā),做出用戶體驗更佳的產(chǎn)品來。在 端的支持版本如下表.所示【截止日期:年月號:表.的支持情況空缺者表示不支持 版本. . . . . . . . . . .當日. .一. . . . . .版本碩士學(xué)位論文 在移動學(xué)習(xí)開發(fā)項目中,目標對象采用的系統(tǒng)主要是和,由上表可知,可以放心使用屬性。一個 包含一個類型和一個或多個用來檢測特定媒體特征的表達式。而在 之前,通

49、常還需要添加】這個標簽,該標簽最初由移動版的引進,現(xiàn)在其他 瀏覽器也基本支持。如下:項目中用到的針對移動網(wǎng)頁優(yōu)化過的最佳,?,在設(shè)計網(wǎng)頁時,按照高分辨度布局優(yōu)先,采取功能減法向低分辨率進行過渡。網(wǎng)頁設(shè)計師往往優(yōu)先考慮寬屏電腦進行原型設(shè)計,設(shè)計出的應(yīng)用原型視覺元素更多。而前端開發(fā)工程師在開發(fā)中,進行功能減法比加法容易。在向低分辨率過渡過程中,如有必要,只需適當刪減功能模塊即可完成移動端的網(wǎng)頁開發(fā)工作。當把安排到一個文件時,可采用如下方案:嚴普通電腦宰/及以下的平板電腦/?:嚴僅豎版幸/:/及以下幸/:產(chǎn)僅橫版宰/:?:產(chǎn)僅豎版幸/:.不要過分信任和濫用雖能便捷地實現(xiàn)一些較為絢麗的展示效果,但一方面,現(xiàn)在移動端瀏覽器對的支持度并不很好,另一個方面,的一些特性很耗電量。這些特性有,.、?等。尤其是網(wǎng)頁動畫效果。網(wǎng)頁動畫效果一般可由三種方法制作,的傳統(tǒng)組織,試的統(tǒng)計結(jié)果。碩士學(xué)位論文 表.對三種動畫制作方式的測試時間 平滑與否 時間 平滑度否 否否 是是 是否 否是 是是 是否 否是 是是 是其中和參評 都內(nèi)置有,硬件加速能很好地支持效果。但是不管是幾維效果,只要是動畫,都會加速移動設(shè)備電量的損耗。因此,要在移動開發(fā)時,盡量減少動畫效果。如果確實有動畫顯示的必要,盡量避免大批量同時應(yīng)用,且最好把動畫元素設(shè)置:,限制紋理繪制范圍。因為紋理的創(chuàng)建