性能優(yōu)化
代碼層面：
- 避免使用css表達(dá)式，避免使用高級選擇器，通配選擇器
1. 用`hash-table`來優(yōu)化查找
2. 少用全局變量
3. 用`innerHTML`代替`DOM`操作，減少`DOM`操作次數(shù)，優(yōu)化`javascript`性能
4. 用`setTimeout`來避免頁面失去響應(yīng)
5. 緩存DOM節(jié)點(diǎn)查找的結(jié)果
6. 避免使用CSS表達(dá)式
7. 避免全局查詢
8. 多個(gè)變量聲明合并
9. 盡量避免圖片和iFrame等的空src，空src會重新加載當(dāng)前頁面，影響效率
10. 盡量避免在html標(biāo)簽中寫style屬性
緩存利用
- 緩存ajax，使用cdn，使用外部js和css文件以便緩存，添加Expires頭，服務(wù)端配置Etag，減少DNS查找等
- 什么是Etag？
- 當(dāng)瀏覽器發(fā)送請求時(shí)，先會進(jìn)行瀏覽器緩存過期判斷，瀏覽器會根據(jù)緩存過期時(shí)間判斷緩存文件是否過期，若沒有過期則不會發(fā)送請求，直接使用緩存中的文件
- 只有g(shù)et請求才會緩存，post不會
請求數(shù)量
- 合并樣式和腳本，使用css圖片精靈圖，初始首屏之外的圖片資源按需加載，靜態(tài)資源延遲加載
請求帶寬
- 壓縮文件，開啟GZIP
總的來說
1. 減少HTTP的請求,壓縮js,css,圖片不宜過大
2. 少用全局變量、緩存DOM節(jié)點(diǎn)查找的結(jié)果。減少IO讀取操作
3. 避免在頁面的主體布局中使用table，table要等其中的內(nèi)容完全下載之后才會顯示出來
移動端性能優(yōu)化
- 盡量使用css3動畫，開啟硬件加速
- 適當(dāng)使用`touch`事件代替`click`事件
- 避免使用`css3`漸變陰影效果
- 不要濫用float，float在渲染時(shí)計(jì)算量比較大，盡量減少使用
- 不濫用web字體，web字體需要下載，解析，重繪當(dāng)前頁面
- 合理使用requestAnimationFrame動畫代替setTimeout
- css中的屬性(transforms,opacity,canvas,video)會觸發(fā)gpu渲染，合理使用
具體優(yōu)化
加號操作符
- 用push方法，因?yàn)閿?shù)組是連續(xù)的，可以省去很多步驟
- 涉及字符串拼接，通常先定義一個(gè)數(shù)組，再往數(shù)組中push字符串，最后通過數(shù)組join方法轉(zhuǎn)為字符串
-原因如下：
1. 加號操作非常耗時(shí)和內(nèi)存
2. 首先開辟一塊臨時(shí)空間，儲存字符串
3. 然后再開辟一塊空間
4. 將str中的字符串復(fù)制到剛剛開辟的空間中
5. 再把需要連接字符串復(fù)制到str后面
6. str指向這塊空間
7. 回收str原來的空間和臨時(shí)空間
事件委托
- 事件委托指的是不在事件發(fā)生地設(shè)立監(jiān)聽函數(shù)，而是在父級或者組級設(shè)立監(jiān)聽函數(shù)，主要是用到事件捕獲，大大提高性能，因?yàn)闇p少了綁定事件的元素，減少內(nèi)存的占用，提高效率。
避免重構(gòu) 回流
概念
- 重構(gòu)是指改變每個(gè)元素外觀觸發(fā)瀏覽器的行為,比如 顏色 背景樣式發(fā)生改變而重新構(gòu)造新外觀的過程。重構(gòu)不會引起瀏覽器重新布局頁面，不一定伴隨著回流。
- 回流指瀏覽器為了重新渲染頁面而重新計(jì)算元素的大小，位置等過程。這個(gè)過程開銷非常大，可以理解為整個(gè)dom樹重新計(jì)算渲染,一般最好觸發(fā)元素的重構(gòu),而避免元素的回流。比如，通過添加類添加css樣式,而不是直接在dom上添加,比如 當(dāng)操作某一塊元素的時(shí)候,先讓它脫離文檔流,例如定位等,這樣不會引起回流
瀏覽器渲染的過程
1. 首先是獲取html標(biāo)簽,建立dom樹
2. 其次根據(jù)css樣式建立reader樹,reader樹不包括定位和幾何信息
3. 最后構(gòu)建布局樹,布局樹包括定位和幾何信息
json與XML的區(qū)別
1. json數(shù)據(jù)體積相對XML小,傳輸速度快
2. json更加容易交互,解析
3. json的數(shù)據(jù)描述性比XML差
