作為一個前端工作人員，我們不可避免要進(jìn)行web的性能優(yōu)化。那么有哪些優(yōu)化的方法呢？

創(chuàng)新互聯(lián)服務(wù)項目包括新邱網(wǎng)站建設(shè)、新邱網(wǎng)站制作、新邱網(wǎng)頁制作以及新邱網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，新邱網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到新邱省份的部分城市，未來相信會繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

A、常規(guī)項

1 、減少HTTP請求，在網(wǎng)頁中圖片、css、javascript、flash等等，都會增加我們的HTTP請求，減少請求數(shù)能提高WEB的頁面響應(yīng)時間；

2、導(dǎo)入的css和js文件的位置，css放在head部分，js放在body的尾部；

3、js/css/html代碼的壓縮；

4、使用外部的 js/css，內(nèi)聯(lián)的css和js其實(shí)比外部文件反應(yīng)更快，那為什么要用外部呢？因?yàn)槭褂猛獠康腸ss和技術(shù)可以讓瀏覽器緩存它，這樣不僅HTML文檔大小減少，而且不會增加HTTP請求數(shù)量。另外，外部的 js/css可以提高代碼的重用性；

5、資源的延遲加載（懶加載）；

$("img").lazyload

6、預(yù)加載；

7、緩存處理，使用localStorage。

B、CSS項

1、避免使用css表達(dá)式，因?yàn)樗恢匦聵O端的次數(shù)相當(dāng)多；

2、避免使用@import ；

3、避免使用IE Filter；

4、避免使用后代選擇器 ul>li ;

5、利用css繼承機(jī)制；

6、避免使用通配符選擇器；

7、使用多重選擇器；

8、CSS Sprites技術(shù)

C、JavaScript項

1、使用臨時變量（或數(shù)組）存放dom節(jié)點(diǎn)；

2、批量操作時，使用字符串拼接，用innerHTML開銷更小，速度更快，同時內(nèi)存也更安全；

3、減少dom訪問，可以緩存已經(jīng)訪問過的元素，刪除dom節(jié)點(diǎn)中不必要的節(jié)點(diǎn)（remove熾熱的()）和對象；

4、創(chuàng)建dom節(jié)點(diǎn)，在執(zhí)行完 createElement 代碼后，應(yīng)該馬上添加（append）到dom樹中；

5、監(jiān)聽dom事件，監(jiān)聽父節(jié)點(diǎn)（事件冒泡）。

D、HTML項

1、避免使用iframe，因?yàn)樗鼤?dǎo)致頁面的重繪；

2、減少節(jié)點(diǎn)數(shù)量；

3、避免重繪和回流，布局變化引起重繪，元素變化（內(nèi)容、樣式）導(dǎo)致回流；

E、資源項

1、圖片

1-1、減少圖片數(shù)量（CSS Sprites）；

1-2、降低圖片質(zhì)量（減小圖片大?。?；

1-3、選擇適當(dāng)?shù)膱D片樣式（jpg主要是攝影級照相類圖像，gif主要是動畫圖片，png杜宇透明無損耗的小文件是不錯的選擇）；

1-4、圖片的轉(zhuǎn)碼Base64（src="data:image/jpg;base64,..."）；

2、避免使用flash，盡量用css3代替。

F、壓縮工具

1、jsmin壓縮代碼，不會驗(yàn)證代碼語法；

2、YUIcompressor 壓縮時會驗(yàn)證語法，代碼優(yōu)化。

G、CDN（內(nèi)容分發(fā)網(wǎng)絡(luò)）

CDN的好處在于

1、不用擔(dān)心自己網(wǎng)站訪客，在任何時間、任何地點(diǎn)、任何網(wǎng)絡(luò)運(yùn)營商，都能快速打開網(wǎng)站；

2、各種服務(wù)器虛擬主機(jī)帶寬等采購成本，包括后期運(yùn)維成本都會大大減少；

3、給網(wǎng)站直接帶來的好處：流量、咨詢量、客戶量、成單量。