兩個(gè)基本點(diǎn)

　　1. 擇重避輕，有所取舍。

　　l 核心優(yōu)先

　　通常來講，系統(tǒng)是都是龐大的，不要太完美主義，先抓住重點(diǎn)，理解那些是我們的核心頁面，那些頁面對(duì)我們來說是最重要的，那些頁面訪問量最高，核心優(yōu)先。

　　l 主要問題在那，抓住瓶頸點(diǎn)。

　　治病要醫(yī)本。優(yōu)化前，需要進(jìn)行細(xì)致的分析，抓住主要瓶頸點(diǎn)，對(duì)癥下藥。優(yōu)化那么多的方子，別全采用，通常幾個(gè)就能達(dá)到效果

　　2. 簡單有效才是硬道理

　　越是簡單的東西越容易控制，越不容易出錯(cuò)，盡量避免將系統(tǒng)設(shè)計(jì)的過于龐大，過于復(fù)雜，記住，這是在做產(chǎn)品，而不是在搞研發(fā)。很多看似很蠢的方法，往往越是有效。

　　新技術(shù)，新方法的引用是具備一定的風(fēng)險(xiǎn)的，要評(píng)估，要慎重。

　　Js處理

　　1. 盡量放到頁面尾部

　　Js的加載時(shí)阻塞頁面的，沒下載完畢后面的內(nèi)容不會(huì)出來，所以盡量避免把JS放到頁面頭部，按照經(jīng)驗(yàn)估計(jì)，整個(gè)頁面中所用的JS邏輯，90%都是可以放到頁面尾部。

　　2. 延遲加載（按需加載）

　　很多的業(yè)務(wù)邏輯并非每次都使用也不是要立即使用，首次加載過程中僅僅加載那些必須的，只有當(dāng)必要的條件觸發(fā)，才去加載請(qǐng)求必要的JS.比如說權(quán)限驗(yàn)證通過，加載管理模塊。點(diǎn)擊發(fā)表文章按鈕，加載與發(fā)表文章有關(guān)的驗(yàn)證和處理函數(shù)。

　　如果寫過C++的肯定會(huì)接觸過動(dòng)態(tài)庫和靜態(tài)庫，這個(gè)與之類似，什么時(shí)候需要什么時(shí)候再加載，首次打開頁面肯定會(huì)清凈了許多，而且業(yè)務(wù)邏輯也由此分離開來，管理和維護(hù)也會(huì)方便很多，畢竟減少了那么多的耦合。

　　按照BBS項(xiàng)目經(jīng)驗(yàn)估計(jì)，普通頁面的所有業(yè)務(wù)邏輯中需要在首次請(qǐng)求中加載的不到50%，我們的JS又由此砍掉了一半。

　　3. 合并JS，減少請(qǐng)求

　　請(qǐng)求多個(gè)小文件的效率遠(yuǎn)小于請(qǐng)求一個(gè)大文件的效率，因?yàn)樾枰啻蜠NS解析，多次連接，瀏覽器和server端也需要進(jìn)行多次開啟進(jìn)程、權(quán)限驗(yàn)證和預(yù)處理，以及 http請(qǐng)求在數(shù)據(jù)包傳遞上的一些問題。

　　所以盡量避免在頁面中加載一堆的js 文件，需要先講需要的小的JS合并成一個(gè)大的JS文件統(tǒng)一輸出，頁面因此被卡住的時(shí)間肯定會(huì)減少很多。

　　為了提高開發(fā)效率，合并建議不要每次都手動(dòng)來進(jìn)行，導(dǎo)致之后維護(hù)成本很大，相信些個(gè)XML配置文件，確定合并規(guī)則以及依賴關(guān)系后，用程序自動(dòng)合并效率會(huì)高很多，后面有我附上的一個(gè)配置示例，僅作參考形式不重要

　　4. JS壓縮

　　此手段屬前端特有，畢竟流量意味著速度，意味著金錢。是在降低代碼的可讀性為前提。但事物的兩面性告訴我們，可讀性差也意味著安全，而且可讀性可以通過保存壓縮前的源文件來解決。

　　所謂的壓縮，就是把場的變量名換成短的變量名，去掉沒用的空格和換行符，從而節(jié)省我們JS程序的長度，不過目前這種處理已經(jīng)很成熟，通過搜索可以搜出很多相關(guān)的工具。不再細(xì)說

　　經(jīng)驗(yàn)值，能壓縮50%以上，視程序與壓縮工具而論。

　　5. 盡量少用第三方庫

　　在我的印象中，很多框架都是很龐大20K以上，雖然很強(qiáng)大很方便，但如果不是做企業(yè)級(jí)應(yīng)用，不要用，因?yàn)槲覀円苍S只可能用到其中很少的一部分功能卻加載了整個(gè)框架。

　　不過框架中的很多方法是可以提取出來滴，或者精簡成一個(gè)輕量級(jí)的框架，比如說trimPath，完全可以精簡到4k.

　　6. 合并ajax請(qǐng)求

　　Ajax請(qǐng)求的數(shù)據(jù)，如果涉及請(qǐng)求多種數(shù)據(jù)，盡量考慮到將其合并。

　　7. 合理的使用緩存

　　緩存視乎是server端的事，但是js中也是經(jīng)常用的。

　　一種是緩存在一個(gè)全局變量中，一些很復(fù)雜的計(jì)算和查找操作可以這樣做。如果大家在使用模板類trimPath經(jīng)常是需要對(duì)模板進(jìn)行預(yù)處理，這種預(yù)處理的結(jié)果是可以被緩存的。這種緩存的缺點(diǎn)是頁面刷新后數(shù)據(jù)就會(huì)失效。

　　另外一種是緩存在window.name或cookie里面，經(jīng)常用來緩存一些AJAX調(diào)用的結(jié)果，避免反復(fù)請(qǐng)求server端，比如一些用戶的權(quán)限驗(yàn)證信息，就沒必要總是調(diào)用server端接口，緩存了也就減少了請(qǐng)求，提高了性能，但cookie大家要慎用，存于一些數(shù)據(jù)比較小的還行，每次http請(qǐng)求他是占用上行帶寬的。

　　還有一種緩存的實(shí)現(xiàn)是借助于flash或其他的第三方組件，特點(diǎn)是可以緩存超大的數(shù)據(jù)，但是適應(yīng)場景優(yōu)先，需要特殊的平臺(tái)支持，不過FLASH目前已經(jīng)很通用了。

　　8. 能靜態(tài)化輸出，盡量少用JS渲染輸出

　　頁面制作

　　1. 素材合并

　　盡量把頁面中的圖片合并在一起，利用css sprite切割。這樣減少了請(qǐng)求的次數(shù)。通常合并成3長大的圖片，一張是有固定寬高的（比如說按鈕），另外兩張是分別橫向或縱向平鋪的1像素的小圖，用來做背景用。

　　2. CSS壓縮處理

　　道理同JS壓縮，也是有很多工具實(shí)用的可用。

　　3. 圖片背景切割與平鋪

　　切圖是很有講究的，很多區(qū)域能切成用1像素平鋪，盡量用1像素小圖平鋪，盡量用一個(gè)較大的圖片設(shè)置成背靜。

　　4. 少用iframe和frameset

　　首先一點(diǎn)frame會(huì)阻塞頁面，第二，產(chǎn)生額外的請(qǐng)求，第三，如果涉及交互，增加開發(fā)維護(hù)成本，第四對(duì)搜索引擎優(yōu)化不好

　　5. CSS盡量放到頁面頭部

　　瀏覽器只有等CSS下載完畢后，才會(huì)真正的顯示頁面，所以為了讓頁面盡快有所輸出，把CSS放到頭部，而且瀏覽器對(duì)CSS的處理時(shí)并行的，不會(huì)像JS那樣會(huì)阻塞頁面。

　　Server處理

　　1. 啟用gzip壓縮，約能壓縮70%~80%

　　2. js,css,圖片添加過期頭，讓瀏覽器能緩存。能減少1/3以上的請(qǐng)求。

　　3. 靜態(tài)頁面、js、css等靜態(tài)文件單獨(dú)遷移

　　第一， 可以針對(duì)靜態(tài)文件做專門優(yōu)化，比如說squid反向代理，nginx代替apache做靜態(tài)server。

　　第二， 便于管理和維護(hù)，以后遷移和拓展方便。

　　4. js、css、圖片等靜態(tài)文件與當(dāng)前應(yīng)用放到不同的域名下。

　　不再傳遞那些無必要的cookie，減少傳輸。

　　5. 圖片服務(wù)器分多域名。

　　瀏覽器對(duì)同一域名的只允許使用2個(gè)并發(fā)，如果頁面圖片過多，會(huì)由于并發(fā)排隊(duì)從而阻塞頁面。但域名也不能太多，會(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. 常見分析與調(diào)試工具

　　IE Httpwatch

　　Firefox firebug