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