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