1.減少HTTP請求

基本原理：

在瀏覽器（客戶端）和服務(wù)器發(fā)生通信時(shí)，就已經(jīng)消耗了大量的時(shí)間务热，尤其是在網(wǎng)絡(luò)情況比較糟糕的時(shí)候，這個(gè)問題尤其的突出。

一個(gè)正常HTTP請求的流程簡述：如在瀏覽器中輸入"www.xxxxxx.com"并按下回車浊仆，瀏覽器再與這個(gè)URL指向的服務(wù)器建立連接，然后瀏覽器才能向服務(wù)器發(fā)送請求信息豫领，服務(wù)器在接受到請求的信息后再返回相應(yīng)的信息抡柿，瀏覽器接收到來自服務(wù)器的應(yīng)答信息后，對這些數(shù)據(jù)解釋執(zhí)行等恐。

而當(dāng)我們請求的網(wǎng)頁文件中有很多圖片洲劣、CSS、JS甚至音樂等信息時(shí)课蔬，將會頻繁的與服務(wù)器建立連接囱稽，與釋放連接，這必定會造成資源的浪費(fèi)二跋，且每個(gè)HTTP請求都會對服務(wù)器和瀏覽器產(chǎn)生性能負(fù)擔(dān)战惊。

網(wǎng)速相同的條件下，下載一個(gè)100KB的圖片比下載兩個(gè)50KB的圖片要快扎即。所以吞获，請減少HTTP請求况凉。

解決辦法：

合并圖片（css?sprites），合并CSS和JS文件衫哥；圖片較多的頁面也可以使用?lazyLoad?等技術(shù)進(jìn)行優(yōu)化茎刚。

2.壓縮圖片和使用圖片Spirit技術(shù)

基本原理：

注：其實(shí)壓縮圖片和圖片精靈是兩個(gè)方面的技術(shù)，可是既然都是關(guān)于圖片的優(yōu)化還是放到一塊吧撤逢。

現(xiàn)在由于工作的細(xì)分膛锭，專業(yè)的前端工程師已經(jīng)少有機(jī)會去切圖了，可是關(guān)于圖片壓縮還是得略微了解蚊荣，一般圖片壓縮的方式有：

1.縮小圖片分辨率初狰；

2.改變圖片格式；

3.降低圖片保存質(zhì)量互例。

關(guān)于圖片精靈（Spirit）技術(shù)就和我們工作直接相關(guān)奢入，不管是在CSS中的圖片還是在HTML結(jié)構(gòu)中的圖片都會產(chǎn)生HTTP請求，前端優(yōu)化的第一條就是減少請求數(shù)媳叨，最直接有效的方法是使用圖片精靈（CSS?Spirit）腥光。圖片精靈就是把許多圖片放到一張大圖片里面，通過CSS來顯示圖片的一部分糊秆。

至于圖片精靈的操作細(xì)節(jié)就不多做介紹了武福，網(wǎng)上相關(guān)內(nèi)容很多。

3.請減少對DOM的操作

基本原理：

對DOM操作的代價(jià)是高昂的痘番，這在網(wǎng)頁應(yīng)用中的通常是一個(gè)性能瓶頸捉片。

天生就慢。比喻："把DOM看成一個(gè)島嶼汞舱，把JavaScript（ECMAScript）看成另一個(gè)島嶼伍纫，兩者之間以一座收費(fèi)橋連接"。所以每次訪問DOM都會教一個(gè)過橋費(fèi)昂芜，而訪問的次數(shù)越多莹规，交的費(fèi)用也就越多。所以一般建議盡量減少過橋次數(shù)泌神。

解決辦法：

修改和訪問DOM元素會造成頁面的Repaint和Reflow良漱，循環(huán)對DOM操作更是罪惡的行為。所以請合理的使用JavaScript變量儲存內(nèi)容腻扇，考慮大量DOM元素中循環(huán)的性能開銷债热，在循環(huán)結(jié)束時(shí)一次性寫入砾嫉。

減少對DOM元素的查詢和修改幼苛，查詢時(shí)可將其賦值給局部變量。

注：在IE中：hover會降低響應(yīng)速度焕刮。

4.將CSS和JS放到外部文件中引用舶沿，CSS放頭墙杯，JS放尾

放在下面避免影響網(wǎng)頁加載

基本原理：

注：這個(gè)是很基礎(chǔ)且必須遵循的知識點(diǎn)，引入外部文件好處是顯而易見的括荡，而且是項(xiàng)目稍稍復(fù)雜一點(diǎn)的時(shí)候就有必要了這樣做了高镐。

易維護(hù)、易擴(kuò)展畸冲，方便管理和重復(fù)利用嫉髓。

正確的方式：

JavaScript是瀏覽器中的霸主，為什么這么說邑闲，因?yàn)樵跒g覽器在執(zhí)行JavaScript代碼時(shí)算行，不能同時(shí)做其它事情，即《script》每次出現(xiàn)都會讓頁面等待腳本的解析和執(zhí)行（不論JavaScript是內(nèi)嵌的還是外鏈的）苫耸，JavaScript代碼執(zhí)行完成后州邢，才繼續(xù)渲染頁面。這個(gè)也就是JavaScript的阻塞特性褪子。

因?yàn)檫@個(gè)阻塞的特點(diǎn)量淌，建議把JavaScript代碼放到《/body》標(biāo)簽以前，這樣既能有效的防止JavaScript的阻塞嫌褪，又能使得頁面的HTML結(jié)構(gòu)能更快的釋放呀枢。

HTML規(guī)范清楚指出CSS要放包含在頁面的《head》區(qū)域內(nèi)

5.適當(dāng)使用圖片預(yù)加載和懶加載

懶加載：當(dāng)頁面被請求時(shí)，只加載可視區(qū)域的圖片渔扎，其它部分的圖片則不加載硫狞，只有這些圖片出現(xiàn)在可視區(qū)域時(shí)才會動態(tài)加載這些圖片

預(yù)加載：用不用都加載，輪播圖的時(shí)候先把所有圖片都加載出來晃痴，可以讓用戶有更好的體驗(yàn)残吩。

6.請正確理解?Repaint?和?Reflow

注：Repaint?和?Reflow?也就是重繪和重排，

基本原理：

Repaint（重繪）就是在一個(gè)元素的外觀被改變倘核，但沒有改變布局（寬高）的情況下發(fā)生泣侮，如改變visibility、outline紧唱、背景色等等活尊。

Reflow（重排）就是DOM的變化影響到了元素的幾何屬性（寬和高），瀏覽器會重新計(jì)算元素的幾何屬性漏益，會使渲染樹中受到影響的部分失效蛹锰，瀏覽器會驗(yàn)證DOM樹上的所有其它結(jié)點(diǎn)的visibility屬性，這也是Reflow低效的原因绰疤。如：改變窗囗大小铜犬、改變文字大小、內(nèi)容的改變、瀏覽器窗口變化癣猾，style屬性的改變等等敛劝。如果Reflow的過于頻繁，CPU使用率就會上漲纷宇，所以前端也就有必要知道?Repaint?和?Reflow的知識夸盟。

減少性能影響的辦法：

上面提到通過設(shè)置style屬性改變結(jié)點(diǎn)樣式的話，每設(shè)置一次都會導(dǎo)致一次reflow像捶，所以最好通過設(shè)置class的方式上陕；　有動畫效果的元素，它的position屬性應(yīng)當(dāng)設(shè)為fixed或absolute拓春，這樣不會影響其它元素的布局唆垃；如果功能需求上不能設(shè)置position為fixed或absolute，那么就權(quán)衡速度的平滑性痘儡。

重排一定會導(dǎo)致重繪辕万，重繪不一定會重排，重排對性能影響更大沉删。

總之渐尿，因?yàn)?Reflow?有時(shí)確實(shí)不可避免，所以只能盡可能限制Reflow的影響范圍矾瑰。

瀏覽器會先創(chuàng)建DOM樹砖茸，根據(jù)CSS規(guī)則（解析CSS規(guī)則樹）創(chuàng)建渲染樹，display=none會出現(xiàn)在渲染樹當(dāng)中殴穴。

7.高效使用HTML標(biāo)簽和CSS樣式

基本原理：

HTML是一門用來描述網(wǎng)頁的一種語言凉夯，它使用標(biāo)記標(biāo)簽來描述網(wǎng)頁，作為一名合格的前端開發(fā)采幌，你有必要去知道其常用標(biāo)簽代表的含義（SEO）和屬性（表現(xiàn)形式）劲够。

CSS指層疊樣式表?（Cascading?Style?Sheets），如果說把頁面想象成一個(gè)人休傍，HTML就是人的骨架征绎，CSS就是人的衣裝，一個(gè)人的品味從他的衣裝就能一目了然磨取。

一名專業(yè)的前端開發(fā)也是一名優(yōu)秀的重構(gòu)人柿，因?yàn)樵陧撁嬷薪?jīng)常會有各種不合理的嵌套和重復(fù)定義的CSS樣式，我不是要你重構(gòu)頁面忙厌，只是希望你在碰到這種情況的時(shí)候解決這些問題凫岖。如這樣的HTML：

<table> <tr> <td>

? ? ? ? ? ? <tatble><tr><td>

? ? ? ? ? ? ? ? `````````

? ? ? ? ? ? </td></tr></table>

?</td></tr></table>

或者這樣的CSS：

body?.box?.border?ul?li?p?strong?span{color：#000}

以上都是對HTML和CSS非常糟糕的使用方法。

正確理解：

HTML是一門標(biāo)記語言逢净，使用合理的HTML標(biāo)簽前你必須了解其屬性哥放，比如Flow?Elements扎阶，Metadata?Elements?，Phrasing?Elements婶芭。比較基礎(chǔ)的就是得知道塊級元素和內(nèi)聯(lián)元素、盒模型着饥、SEO方面的知識犀农。

CSS是用來渲染頁面的，也是存在渲染效率的問題宰掉。CSS選擇符是從右向左進(jìn)行匹配的呵哨，這里對css選擇符按照開銷從小到大的順序梳理一下：

ID選擇符?#box

類選擇符?.box

標(biāo)簽?div

偽類和偽元素?a:hover

當(dāng)頁面被觸發(fā)引起回流（reflow）的時(shí)候，低效的選擇符依然會引發(fā)更高的開銷轨奄，所以請避免低效孟害。

8.使用CDN加速（內(nèi)容分發(fā)網(wǎng)絡(luò)）

基本原理：

CDN的全稱是Content?Delivery?Network，即內(nèi)容分發(fā)網(wǎng)絡(luò)挪拟。

"其基本思路是盡可能避開互聯(lián)網(wǎng)上有可能影響數(shù)據(jù)傳輸速度和穩(wěn)定性的瓶頸和環(huán)節(jié)挨务，使內(nèi)容傳輸?shù)母臁⒏€(wěn)定玉组。通過在網(wǎng)絡(luò)各處放置節(jié)點(diǎn)服務(wù)器所構(gòu)成的在現(xiàn)有的互聯(lián)網(wǎng)基礎(chǔ)之上的一層智能虛擬網(wǎng)絡(luò)谎柄，CDN系統(tǒng)能夠?qū)崟r(shí)地根據(jù)網(wǎng)絡(luò)流量和各節(jié)點(diǎn)的連接、負(fù)載狀況以及到用戶的距離和響應(yīng)時(shí)間等綜合信息將用戶的請求重新導(dǎo)向離用戶最近的服務(wù)節(jié)點(diǎn)上惯雳。"

不足之處：

實(shí)時(shí)性不太好是CDN的致命缺陷朝巫。隨著對CDN需求的逐漸升溫，這一缺陷將得到改進(jìn)石景，使來自于遠(yuǎn)程服務(wù)器的網(wǎng)絡(luò)內(nèi)容網(wǎng)頁與復(fù)本服務(wù)器或緩存器中的網(wǎng)頁保持同步劈猿。解決方法是在網(wǎng)絡(luò)內(nèi)容發(fā)生變化時(shí)將新的網(wǎng)絡(luò)內(nèi)容從服務(wù)器端直接傳送到緩存器，或者當(dāng)對網(wǎng)絡(luò)內(nèi)容的訪問增加時(shí)將數(shù)據(jù)源服務(wù)器的網(wǎng)絡(luò)內(nèi)容盡可能實(shí)時(shí)地復(fù)制到緩存服務(wù)器潮孽。

9.精簡CSS和JS文件

基本原理：

有一條非常重要的準(zhǔn)則一直沒有提到揪荣，就是CSS和JavaScript的壓縮，直接減少下載的文件體積往史。我個(gè)人經(jīng)常使用的方式是使用?YUI?Compressor变逃，它的特點(diǎn)是：移除注釋；移除額外的空格怠堪；細(xì)微優(yōu)化揽乱；標(biāo)識符替換。

YUI?Compressor是java程序粟矿，如果你對java很熟悉的話可快速的上手使用yuicompressor.jar凰棉；如果你對java很陌生也沒關(guān)系，一樣可以使用YUI?Compressor陌粹，下面介紹其使用方式撒犀。

YUI?Compressor的配置和使用：

先配置使用環(huán)境：

1.先確保電腦中是否安裝了JDK

2.再配置必要的環(huán)境變量（設(shè)置可以搜索）

3.在cmd界面，輸入javac可測試是否安裝成功

使用方法可從cmd到進(jìn)入yuicompressor.jar所在磁盤，我以自己的yuicompressor-2.4.2.jar為例：

1.壓縮JS

java?-jar?yuicompressor-2.4.2.jar?api.js?>?api.min.js

2.壓縮CSS

java?-jar?yuicompressor-2.4.2.jar?style.css?>?style.min.css

10.注意控制Cookie大小和污染

基本原理和使用方法：

有關(guān)Cookie的基礎(chǔ)和高級知識可以看《JavaScript?操作?Cookie》或舞。

因?yàn)镃ookie是本地的磁盤文件荆姆，每次瀏覽器都會去讀取相應(yīng)的Cookie，所以建議去除不必要的Coockie映凳，使Coockie體積盡量小以減少對用戶響應(yīng)的影響胆筒；

使用Cookie跨域操作時(shí)注意在適應(yīng)級別的域名上設(shè)置coockie以便使子域名不受其影響

Cookie是有生命周期的，所以請注意設(shè)置合理的過期時(shí)間诈豌，合理地Expire時(shí)間和不要過早去清除coockie仆救，都會改善用戶的響應(yīng)時(shí)間。

11．避免重定向

曾經(jīng)有的資源矫渔，原來的地址被轉(zhuǎn)移到了新的地址彤蔽，如果不重定向，會404找不到庙洼，php里面header顿痪，location（具體的），重定向發(fā)送兩次請求油够，

301永久重定向员魏，302臨時(shí)重定向，先去別的服務(wù)器下面進(jìn)行配置叠聋，然后還能回到原來的地址撕阎。

12.適當(dāng)?shù)氖褂肅SS3動畫代替?zhèn)鹘y(tǒng)的定位

CSS3動畫會開啟GPU加速

利用事件委托為相同的子元素事件綁定，委托給父元素