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