兩個(gè)基本點(diǎn)
1. 擇重避輕,有所取舍。
l 核心優(yōu)先
通常來(lái)講,系統(tǒng)是都是龐大的,不要太完美主義,先抓住重點(diǎn),理解那些是我們的核心頁(yè)面,那些頁(yè)面對(duì)我們來(lái)說(shuō)是最重要的,那些頁(yè)面訪(fǎng)問(wèn)量最高,核心優(yōu)先。
l 主要問(wèn)題在那,抓住瓶頸點(diǎn)。
治病要醫(yī)本。優(yōu)化前,需要進(jìn)行細(xì)致的分析,抓住主要瓶頸點(diǎn),對(duì)癥下藥。優(yōu)化那么多的方子,別全采用,通常幾個(gè)就能達(dá)到效果
2. 簡(jiǎn)單有效才是硬道理
越是簡(jiǎn)單的東西越容易控制,越不容易出錯(cuò),盡量避免將系統(tǒng)設(shè)計(jì)的過(guò)于龐大,過(guò)于復(fù)雜,記住,這是在做產(chǎn)品,而不是在搞研發(fā)。很多看似很蠢的方法,往往越是有效。
新技術(shù),新方法的引用是具備一定的風(fēng)險(xiǎn)的,要評(píng)估,要慎重。
Js處理
1. 盡量放到頁(yè)面尾部
Js的加載時(shí)阻塞頁(yè)面的,沒(méi)下載完畢后面的內(nèi)容不會(huì)出來(lái),所以盡量避免把JS放到頁(yè)面頭部,按照經(jīng)驗(yàn)估計(jì),整個(gè)頁(yè)面中所用的JS邏輯,90%都是可以放到頁(yè)面尾部。
2. 延遲加載(按需加載)
很多的業(yè)務(wù)邏輯并非每次都使用也不是要立即使用,首次加載過(guò)程中僅僅加載那些必須的,只有當(dāng)必要的條件觸發(fā),才去加載請(qǐng)求必要的JS.比如說(shuō)權(quán)限驗(yàn)證通過(guò),加載管理模塊。點(diǎn)擊發(fā)表文章按鈕,加載與發(fā)表文章有關(guān)的驗(yàn)證和處理函數(shù)。
如果寫(xiě)過(guò)C++的肯定會(huì)接觸過(guò)動(dòng)態(tài)庫(kù)和靜態(tài)庫(kù),這個(gè)與之類(lèi)似,什么時(shí)候需要什么時(shí)候再加載,首次打開(kāi)頁(yè)面肯定會(huì)清凈了許多,而且業(yè)務(wù)邏輯也由此分離開(kāi)來(lái),管理和維護(hù)也會(huì)方便很多,畢竟減少了那么多的耦合。
按照BBS項(xiàng)目經(jīng)驗(yàn)估計(jì),普通頁(yè)面的所有業(yè)務(wù)邏輯中需要在首次請(qǐng)求中加載的不到50%,我們的JS又由此砍掉了一半。
3. 合并JS,減少請(qǐng)求
請(qǐng)求多個(gè)小文件的效率遠(yuǎn)小于請(qǐng)求一個(gè)大文件的效率,因?yàn)樾枰啻?a href="http://m.448gfe.cn/tags-83.html" target="_blank">DNS解析,多次連接,瀏覽器和server端也需要進(jìn)行多次開(kāi)啟進(jìn)程、權(quán)限驗(yàn)證和預(yù)處理,以及 http請(qǐng)求在數(shù)據(jù)包傳遞上的一些問(wèn)題。
所以盡量避免在頁(yè)面中加載一堆的js 文件,需要先講需要的小的JS合并成一個(gè)大的JS文件統(tǒng)一輸出,頁(yè)面因此被卡住的時(shí)間肯定會(huì)減少很多。
為了提高開(kāi)發(fā)效率,合并建議不要每次都手動(dòng)來(lái)進(jìn)行,導(dǎo)致之后維護(hù)成本很大,相信些個(gè)XML配置文件,確定合并規(guī)則以及依賴(lài)關(guān)系后,用程序自動(dòng)合并效率會(huì)高很多,后面有我附上的一個(gè)配置示例,僅作參考形式不重要
4. JS壓縮
此手段屬前端特有,畢竟流量意味著速度,意味著金錢(qián)。是在降低代碼的可讀性為前提。但事物的兩面性告訴我們,可讀性差也意味著安全,而且可讀性可以通過(guò)保存壓縮前的源文件來(lái)解決。
所謂的壓縮,就是把場(chǎng)的變量名換成短的變量名,去掉沒(méi)用的空格和換行符,從而節(jié)省我們JS程序的長(zhǎng)度,不過(guò)目前這種處理已經(jīng)很成熟,通過(guò)搜索可以搜出很多相關(guān)的工具。不再細(xì)說(shuō)
經(jīng)驗(yàn)值,能壓縮50%以上,視程序與壓縮工具而論。
5. 盡量少用第三方庫(kù)
在我的印象中,很多框架都是很龐大20K以上,雖然很強(qiáng)大很方便,但如果不是做企業(yè)級(jí)應(yīng)用,不要用,因?yàn)槲覀円苍S只可能用到其中很少的一部分功能卻加載了整個(gè)框架。
不過(guò)框架中的很多方法是可以提取出來(lái)滴,或者精簡(jiǎn)成一個(gè)輕量級(jí)的框架,比如說(shuō)trimPath,完全可以精簡(jiǎn)到4k.
6. 合并ajax請(qǐng)求
Ajax請(qǐng)求的數(shù)據(jù),如果涉及請(qǐng)求多種數(shù)據(jù),盡量考慮到將其合并。
7. 合理的使用緩存
緩存視乎是server端的事,但是js中也是經(jīng)常用的。
一種是緩存在一個(gè)全局變量中,一些很復(fù)雜的計(jì)算和查找操作可以這樣做。如果大家在使用模板類(lèi)trimPath經(jīng)常是需要對(duì)模板進(jìn)行預(yù)處理,這種預(yù)處理的結(jié)果是可以被緩存的。這種緩存的缺點(diǎn)是頁(yè)面刷新后數(shù)據(jù)就會(huì)失效。
另外一種是緩存在window.name或cookie里面,經(jīng)常用來(lái)緩存一些AJAX調(diào)用的結(jié)果,避免反復(fù)請(qǐng)求server端,比如一些用戶(hù)的權(quán)限驗(yàn)證信息,就沒(méi)必要總是調(diào)用server端接口,緩存了也就減少了請(qǐng)求,提高了性能,但cookie大家要慎用,存于一些數(shù)據(jù)比較小的還行,每次http請(qǐng)求他是占用上行帶寬的。
還有一種緩存的實(shí)現(xiàn)是借助于flash或其他的第三方組件,特點(diǎn)是可以緩存超大的數(shù)據(jù),但是適應(yīng)場(chǎng)景優(yōu)先,需要特殊的平臺(tái)支持,不過(guò)FLASH目前已經(jīng)很通用了。
8. 能靜態(tài)化輸出,盡量少用JS渲染輸出
頁(yè)面制作
1. 素材合并
盡量把頁(yè)面中的圖片合并在一起,利用CSS sprite切割。這樣減少了請(qǐng)求的次數(shù)。通常合并成3長(zhǎng)大的圖片,一張是有固定寬高的(比如說(shuō)按鈕),另外兩張是分別橫向或縱向平鋪的1像素的小圖,用來(lái)做背景用。
2. CSS壓縮處理
道理同JS壓縮,也是有很多工具實(shí)用的可用。
3. 圖片背景切割與平鋪
切圖是很有講究的,很多區(qū)域能切成用1像素平鋪,盡量用1像素小圖平鋪,盡量用一個(gè)較大的圖片設(shè)置成背靜。
4. 少用iframe和frameset
首先一點(diǎn)frame會(huì)阻塞頁(yè)面,第二,產(chǎn)生額外的請(qǐng)求,第三,如果涉及交互,增加開(kāi)發(fā)維護(hù)成本,第四對(duì)搜索引擎優(yōu)化不好
5. CSS盡量放到頁(yè)面頭部
瀏覽器只有等CSS下載完畢后,才會(huì)真正的顯示頁(yè)面,所以為了讓頁(yè)面盡快有所輸出,把CSS放到頭部,而且瀏覽器對(duì)CSS的處理時(shí)并行的,不會(huì)像JS那樣會(huì)阻塞頁(yè)面。
Server處理
1. 啟用gzip壓縮,約能壓縮70%~80%
2. js,css,圖片添加過(guò)期頭,讓瀏覽器能緩存。能減少1/3以上的請(qǐng)求。
3. 靜態(tài)頁(yè)面、js、css等靜態(tài)文件單獨(dú)遷移
第一, 可以針對(duì)靜態(tài)文件做專(zhuān)門(mén)優(yōu)化,比如說(shuō)squid反向代理,nginx代替apache做靜態(tài)server。
第二, 便于管理和維護(hù),以后遷移和拓展方便。
4. js、css、圖片等靜態(tài)文件與當(dāng)前應(yīng)用放到不同的域名下。
不再傳遞那些無(wú)必要的cookie,減少傳輸。
5. 圖片服務(wù)器分多域名。
瀏覽器對(duì)同一域名的只允許使用2個(gè)并發(fā),如果頁(yè)面圖片過(guò)多,會(huì)由于并發(fā)排隊(duì)從而阻塞頁(yè)面。但域名也不能太多,會(huì)消耗DNS解析的時(shí)間,建議4個(gè)為佳。
附加
1. JS合并配置文件示例
<?xml version="1.0" encoding="gb2312" ?>
<root>
<include>
<list><![CDATA[qStandBottom_static]]></list>
</include>
<js>
<list><![CDATA[/lib/postJs.obj.js]]></list>
<list><![CDATA[/lib/JSON.obj.js]]></list>
<list><![CDATA[/qmeditor/qmeditor/qmeditor/editor.js]]></list>
<list><![CDATA[/control/subjectList/subjectWriteLib.js]]></list>
<list><![CDATA[/control/subjectList/subjectWriteVote.obj.js]]></list>
<list><![CDATA[/control/subjectList/naviFilter.obj.js]]></list>
<list><![CDATA[/control/subject/checkDomain.js]]></list>
<list><![CDATA[/control/subjectList/subjectWriteBottomGlobal.js]]></list>
<list><![CDATA[/control/subjectList/subjectWriteBottom_asyncDeclare.js]]></list>
<list><![CDATA[/control/subjectList/subjectWriterEditor.js]]></list>
<list><![CDATA[/control/subjectList/subjectWriteBottom.obj.js]]></list>
<list><![CDATA[/control/subjectList/subjectWritePhoto.js]]></list>
</js>
</root>
2. 常見(jiàn)分析與調(diào)試工具
IE Httpwatch
Firefox firebug
轉(zhuǎn)載請(qǐng)保留原文地址: http://m.448gfe.cn/show-305.html