網(wǎng)站建設(shè)-提升Web應(yīng)用程序性能的最佳實(shí)踐
分享 2011.09.20 瀏覽次數(shù):6659次
導(dǎo)讀:作為開(kāi)發(fā)人員,Web頁(yè)面加載或刷新的速度對(duì)其網(wǎng)站至關(guān)重要。在瀏覽器中調(diào)整性能問(wèn)題比在Java應(yīng)用程序中更難。開(kāi)發(fā)人員在各種瀏覽器中調(diào)試JavaScript的方法要少得多。比如,在Mozilla Firefox中,可以使用Firebug調(diào)試JavaScript,但仍然不能調(diào)整很多性能問(wèn)題,如瀏覽器呈現(xiàn)消耗時(shí)間。為了解決這些問(wèn)題,有必要開(kāi)發(fā)瀏覽器插件來(lái)監(jiān)控時(shí)間響應(yīng),以及確定其他對(duì)應(yīng)解決方案如部分呈現(xiàn)或延時(shí)加載。
本文節(jié)選自IBM developerWorks 提升Web應(yīng)用程序的性能的系列文章,該文通過(guò)Web應(yīng)用程序性能的最佳實(shí)踐案例,幫助開(kāi)發(fā)者更好地理解影響Web應(yīng)用程序性能的因素,學(xué)習(xí)如何診斷Web應(yīng)用程序中的性能問(wèn)題,找到客戶端內(nèi)容中的瓶頸,并確定解決方案。
一、提升Web應(yīng)用程序性能的6種基本方式
1.減少HTTP請(qǐng)求數(shù)
每個(gè)HTTP請(qǐng)求都有開(kāi)銷(xiāo),包括查找DNS、創(chuàng)建連接及等待響應(yīng),因此削減不必要的請(qǐng)求數(shù)可減少不必要的開(kāi)銷(xiāo)。要減少請(qǐng)求數(shù):
合并文件。將總是同時(shí)使用的腳本合并到同一個(gè)文件中,不會(huì)減小總大小,但將會(huì)減少請(qǐng)求數(shù)。還可以同樣方法合并CSS文件和圖片。可以實(shí)現(xiàn)文件自動(dòng)合并:在構(gòu)建階段。用標(biāo)記,通過(guò)運(yùn)行Ant合并文件。在運(yùn)行時(shí)階段。啟用mod_concat模塊。如果httpServer是Apache,用pack:Tag作為JSP標(biāo)簽庫(kù)來(lái)合并JavaScript和樣式表文件。(pack:Tag是一個(gè)JSP-Taglib,可縮減、壓縮及合并資源,如JavaScript和CSS,并將它們?cè)趦?nèi)容或普通文件中緩存。)使用CSS Sprites。將背景圖片合并成一個(gè)圖片,并使用CSS background-image和background-position屬性來(lái)顯示所需圖片部分。還可使用內(nèi)聯(lián)圖片減少請(qǐng)求數(shù)。
2.后置加載組件
只呈現(xiàn)需要的組件;其余可等待。最好不要一次呈現(xiàn)太多組件。
某些情況下,可使用后置加載。由于瀏覽器可視區(qū)域外的組件可以后置加載,當(dāng)這些組建進(jìn)入可視區(qū)域不久后,初始呈現(xiàn)就會(huì)失效。
有些JavaScript可以在onload事件后后置加載,如JavaScript中初始呈現(xiàn)后拖動(dòng)某個(gè)元素。
3.前置加載組件
通過(guò)前置加載組件,可以利用瀏覽器的空閑時(shí)間請(qǐng)求將來(lái)會(huì)用到的組件(如圖像、樣式和腳本)。當(dāng)用戶訪問(wèn)下個(gè)頁(yè)面時(shí),如果大多數(shù)組件都已在緩存中加載,那頁(yè)面加載會(huì)快得多。
有兩種前置加載:
無(wú)條件:一旦觸發(fā)onload,就取得一些額外組件。
有條件:根據(jù)用戶的動(dòng)作,推測(cè)用戶下一步的方向并進(jìn)行相應(yīng)的前置加載。
4.將腳本放在底部
腳本可能會(huì)產(chǎn)生問(wèn)題,因?yàn)樗鼈兛赡軙?huì)阻礙并行下載。當(dāng)下載腳本時(shí),瀏覽器不會(huì)再啟動(dòng)其他下載,即使那些位于不同主機(jī)。將腳本,如樣式表,放在底部,以保證它們?cè)谄渌螺d完成后再下載。
也可以使用延時(shí)腳本,這只有Internet Explorer支持。DEFER屬性表示腳本不含document.write()。這就告訴瀏覽器他們可以持續(xù)呈現(xiàn)。
5.使用無(wú)cookie域組件
當(dāng)瀏覽器發(fā)出對(duì)靜態(tài)圖片的請(qǐng)求,并隨之發(fā)送cookie時(shí),服務(wù)器不會(huì)使用那些cookie。由于這些cookie只會(huì)造成不必要的網(wǎng)絡(luò)流量,確保用無(wú)請(qǐng)求來(lái)請(qǐng)求靜態(tài)組件。然后使用子域和主機(jī)保存這些靜態(tài)組件。
6.將JavaScript和CSS放在外部
現(xiàn)實(shí)世界中使用外部文件通常會(huì)使頁(yè)面運(yùn)行更快,因?yàn)镴avaScript和CSS文件被瀏覽器緩存。HTML文檔內(nèi)的JavaScript和CSS會(huì)在每次請(qǐng)求HTML文檔時(shí)被下載。這減少了需要請(qǐng)求的HTTP的數(shù)量,但增加了HTML文檔的大小。另一方面,如果JavaScript和CSS在被瀏覽器緩存的外部文件中,就會(huì)減小HTML文檔大小,而不會(huì)增加請(qǐng)求數(shù)。
二、改進(jìn)RIA小部件性能方法
主流RIA Ajax框架,如ExtJS、YUI、Dojo及其他,都提供一些精巧的小部件庫(kù),以增強(qiáng)用戶體驗(yàn)。與其他框架相比,Dojo在企業(yè)開(kāi)發(fā)領(lǐng)域更強(qiáng)大,這是由于:
Object-oriented programming(OOP)編碼跨平臺(tái)本地?cái)?shù)據(jù)存儲(chǔ)的Dojo離線API支持DataGrid、2D和3D圖形(圖表組件提供了在瀏覽器展示報(bào)表更簡(jiǎn)單的方法)
Dojo在很多網(wǎng)站廣泛使用。這里將使用Dojo舉例,分析RIA小部件的性能??筛鶕?jù)具體情況使用Dojo小部件調(diào)整工具,有Page Speed、Rock Star Optimizer及Jiffy。強(qiáng)烈建議使用YSlow和Firebug。
YSlow
YSlow根據(jù)一組高性能Web頁(yè)面準(zhǔn)則,通過(guò)檢查頁(yè)面上所有組件,包括由JavaScript創(chuàng)建的,來(lái)分析Web頁(yè)面性能。YSlow是一個(gè)集成了Firebug Web開(kāi)發(fā)工具的Firefox插件;它可提供提升頁(yè)面性能的建議、總結(jié)組件性能、顯示頁(yè)面統(tǒng)計(jì)數(shù)據(jù)并提供用于性能分析的工具。
圖中顯示的是YSlow Grade選項(xiàng)卡上的信息。
YSlow的Web頁(yè)面建立在22條可測(cè)試的規(guī)則基礎(chǔ)上,這些規(guī)則在下方按重要性和效果排列。研究顯示,按照以下規(guī)則,Web頁(yè)面響應(yīng)時(shí)間可提升25%到50%:
盡量減少HTTP請(qǐng)求數(shù)。使用內(nèi)容發(fā)布網(wǎng)絡(luò)(CDN)。添加Expires或Cache-Control頭部。用Gzip壓縮內(nèi)容。將樣式表放在頂部。將腳本放在底部。避免使用CSS表達(dá)式。將JavaScript和CSS放在外部。減少DNS搜索。精簡(jiǎn)JavaScript和CSS。避免使用重定向。刪除重復(fù)的腳本。配置ETags。使Ajax可緩存。使用GET進(jìn)行Ajax請(qǐng)求。減少DOM元素?cái)?shù)。消除404錯(cuò)誤。減小cookie大小。對(duì)組件使用無(wú)cookie的域。避免使用過(guò)濾器。不在HTML中測(cè)量圖片大小。使favicon.ico盡可能小,可緩存。
如圖:圖中的YSlow Statistics,對(duì)空緩存的訪問(wèn)用戶和之前訪問(wèn)過(guò)頁(yè)面的用戶的頁(yè)面大小做了對(duì)比。
Components選項(xiàng)卡顯示了每個(gè)組件及相關(guān)的性能信息。例如,如果組件被gzip壓縮,或ETag有內(nèi)容(如果的話),都能看到。組件大小和超期時(shí)間也顯示在Components選項(xiàng)卡中,如圖所示。
Firebug
Firebug與Mozilla Firefox集成,在瀏覽網(wǎng)站時(shí)有大量開(kāi)發(fā)工具隨手可用??梢约磿r(shí)編輯、調(diào)試、監(jiān)控Web頁(yè)面中的CSS、HTML和JavaScript。
可以使用Firebug Net面板,如圖所示,監(jiān)控Web頁(yè)面產(chǎn)生的HTTP流量。它向用戶展示了所有收集到的和計(jì)算出的信息。每個(gè)條目表示頁(yè)面的一個(gè)請(qǐng)求/響應(yīng)來(lái)回。
Firebug Console面板,如圖所示,提供了兩種監(jiān)控代碼性能的方法。
Profile
對(duì)于某個(gè)特定的函數(shù),使用Profiler。JavaScript Profiler是能用來(lái)測(cè)量每個(gè)JavaScript代碼執(zhí)行時(shí)間的Firebug特性。使用JavaScript Profiler來(lái)提升代碼的性能,或是查看為什么某個(gè)函數(shù)運(yùn)行時(shí)間過(guò)長(zhǎng)。它與console.time();類(lèi)似,但JavaScript Profiler能提供更多代碼內(nèi)部過(guò)程細(xì)節(jié)。
console.time()
對(duì)于特定代碼段,使用console.time()??刂婆_(tái)會(huì)顯示您輸入到命令行的命令的結(jié)果??梢允褂胏onsole.time(timeName)函數(shù)測(cè)量某個(gè)特定代碼或函數(shù)執(zhí)行多長(zhǎng)時(shí)間。該特性對(duì)于提升JavaScript代碼的性能非常有用,樣例顯示:
var timeName = 'measuringTime'; console.time(timeName); //start of the timer for(var i=0;i<1000;i++){ //do something console.timeEnd(timeName); //end of the timer
measuringTime:xxms將顯示在控制臺(tái)。
結(jié)束語(yǔ)
文中,開(kāi)發(fā)者學(xué)習(xí)了如何識(shí)別Web應(yīng)用程序中的一些問(wèn)題或瓶頸。開(kāi)發(fā)者們應(yīng)了解一些工具、竅門(mén)和技巧,以用于調(diào)整和改善對(duì)用戶的性能。
標(biāo)簽:杭州網(wǎng)站建設(shè)
-
杭州網(wǎng)站設(shè)計(jì)公司:品牌網(wǎng)站開(kāi)發(fā)助力企業(yè)成長(zhǎng)
日期:2024-12-20瀏覽次數(shù):724次
-
杭州網(wǎng)站建設(shè)公司:商城網(wǎng)站建設(shè)的六大關(guān)鍵步驟
日期:2024-12-18瀏覽次數(shù):764次
-
杭州網(wǎng)站制作:醫(yī)院網(wǎng)站設(shè)計(jì)與域名備案的復(fù)雜性探討
日期:2024-12-18瀏覽次數(shù):757次
-
杭州網(wǎng)站制作公司:打造安全可靠的醫(yī)院網(wǎng)站
日期:2024-12-11瀏覽次數(shù):934次
-
杭州網(wǎng)站設(shè)計(jì)公司:數(shù)據(jù)庫(kù)在高端網(wǎng)站制作中的關(guān)鍵作用
日期:2024-12-11瀏覽次數(shù):905次
相關(guān)新聞
整合同類(lèi)新聞,相關(guān)新聞一手掌握
-
在荊門(mén)做網(wǎng)站,網(wǎng)站頁(yè)面排版布局,必須要知道四大技巧
日期:2023-02-10瀏覽次數(shù):1785次
-
在荊門(mén), 做網(wǎng)站設(shè)計(jì)框架類(lèi)型有哪些
日期:2023-02-10瀏覽次數(shù):1664次
-
荊門(mén)做網(wǎng)站:影響網(wǎng)站設(shè)計(jì)美觀度的兩大要素
日期:2023-02-10瀏覽次數(shù):1707次
-
荊門(mén)定制app到底有哪些意義?
日期:2020-11-03瀏覽次數(shù):2175次
-
移動(dòng)醫(yī)療類(lèi)荊門(mén)app開(kāi)發(fā)該如何做?
日期:2020-11-03瀏覽次數(shù):2135次
最新新聞
與互聯(lián)網(wǎng)同行,實(shí)時(shí)掌握網(wǎng)建行業(yè)最新動(dòng)態(tài)
-
阿里回應(yīng)" 以4%折扣向機(jī)構(gòu)詢價(jià)“;滴滴再調(diào)順風(fēng)車(chē)服務(wù)用戶時(shí)間
日期:2019-11-08瀏覽次數(shù):4893次
-
美容護(hù)膚APP開(kāi)發(fā)及介紹
日期:2021-02-06瀏覽次數(shù):1959次
-
杭州小程序開(kāi)發(fā),報(bào)價(jià)一般是多少?
日期:2021-02-20瀏覽次數(shù):5537次
-
寵物類(lèi)杭州定制app是否有充足的市場(chǎng)前景?
日期:2021-09-13瀏覽次數(shù):3633次
-
境外游杭州app開(kāi)發(fā)制作注意事項(xiàng)
日期:2021-11-10瀏覽次數(shù):3536次
隨機(jī)新聞
新聞新動(dòng)態(tài),您需要的新聞管家
洞悉市場(chǎng)趨勢(shì)演變讓傳播回歸社會(huì)
免費(fèi)獲取網(wǎng)站建設(shè)與網(wǎng)絡(luò)推廣方案報(bào)價(jià)
-
關(guān)于我們
杭州帷拓科技有限公司,是一家新型的全案網(wǎng)絡(luò)開(kāi)發(fā)公司,作為以互聯(lián)網(wǎng)高端網(wǎng)站建設(shè)、APP開(kāi)發(fā)、小程序開(kāi)發(fā)為核心的專(zhuān)業(yè)網(wǎng)絡(luò)技術(shù)服務(wù)供應(yīng)商,帷拓科技致力于全面分析市場(chǎng)環(huán)境、衡量與預(yù)測(cè)市場(chǎng)需求、整合區(qū)別于行業(yè)競(jìng)爭(zhēng)對(duì)手的絕對(duì)優(yōu)勢(shì),結(jié)合品牌理念深度挖掘項(xiàng)目?jī)?yōu)勢(shì)和產(chǎn)品價(jià)值,提升客戶品牌認(rèn)知、認(rèn)可度。
-
我們的客戶
帷拓科技?xì)v經(jīng)十年沉淀,與國(guó)內(nèi)外上千家客戶達(dá)成合作關(guān)系,其中穩(wěn)定合作的公司有:浙江華為、浙江移動(dòng)、浙江5G產(chǎn)業(yè)聯(lián)盟、浙江省社科院、綠城足球俱樂(lè)部、娃哈哈雙語(yǔ)學(xué)校、健康中國(guó)杭州峰會(huì)、科雷機(jī)電等,帷拓科技始終堅(jiān)持“帷有專(zhuān)業(yè),才能拓展無(wú)限”的服務(wù)理念,堅(jiān)持“認(rèn)真堅(jiān)持細(xì)節(jié)”的優(yōu)質(zhì)服務(wù)理念,不斷完善自身,成就企業(yè),最終實(shí)現(xiàn)共贏。
-
我們的業(yè)務(wù)
帷拓科技主營(yíng)業(yè)務(wù)范圍包含互聯(lián)網(wǎng)高端網(wǎng)站建設(shè)、APP開(kāi)發(fā)、小程序開(kāi)發(fā)、商城網(wǎng)站建設(shè)、公眾號(hào)運(yùn)營(yíng)以及數(shù)字營(yíng)銷(xiāo)等,涵蓋了服務(wù)、房產(chǎn)、數(shù)碼、服裝、物流貿(mào)易等行業(yè),根據(jù)品牌現(xiàn)狀,為每個(gè)客戶量身定制項(xiàng)目整體服務(wù)方案,以敏銳的市場(chǎng)洞察力、創(chuàng)新的市場(chǎng)策劃能力,全面把握市場(chǎng)變化,為客戶實(shí)現(xiàn)從企業(yè)到消費(fèi)者的價(jià)值轉(zhuǎn)換。