前端性能優化

一、減小HTTP請求

基本原理

在瀏覽器（客戶端）和服務器發生通訊時，就已經消耗了大量的時間，尤爲在網絡狀況比較糟糕的狀況下

方法：

　　合併圖片（精靈圖）

　　合併css和js文件

　　圖片較多的也米娜也可使用lazyLoad等技術進行優化

二、正確理解Repaint和Reflow

repaint和relow也就是重繪和重排

基本原理

repaint就是在一個元素的外觀別改變 可是滅有改變佈局的i狀況下發生，如改變visibility背景等

reflow 若是在reflow的過於頻繁 CPU使用率會死命的網上飆

減小性能影響的方法

若是經過好色之style改變節點的樣式 每設置一次就會致使一次reflow 因此最好經過設置class的樣式

有動畫效果的元素 他的position數星星應當設爲flex貨absolute 這樣不會影響其餘元素的佈局

三、減小對DOM的操做

基本原理

對DOM訪問次數越多 與js的鏈接次數越多 簡介次數越多就須要更多的時間

解決辦法

合理使用js變量儲存內容 考慮大量DOM元素中循環的性能開銷 在循環結束時 一次性寫入 減小DOM元素的查詢和修改

查詢時能夠將其複製給局部變量

注意：在IE中hover會下降相應的速度

四、使用json格式進行數據交換

基本原理

json是一種輕量級的數據減緩格式，採用徹底獨立於語言的文本格式 是理想的數據交換格式

json也是js原生格式 也就是說明js處理json數據時不須要任何特殊的API或者工具包

json序列化後通常比XML序列化後數據體積小

五、高效使用HTML標籤和CSS樣式

六、使用CDN家督（內容分發網絡）

不足：實用性不太好

解決方法：在網絡內容發生變化時將新的網絡內容從服務器直接傳送到緩存器 或者當對網絡的內容訪問增長時

將數據源服務器的網絡內容儘量實時的複製到緩存服務器

七、將css和js放到外部文件中引用 css放頭 js放尾（即便用外部樣式引用文件而非直接使用內部樣式）