Web前端---性能優化

前端性能優化的總結👇

1. 減小 HTTP 的請求次數和傳輸報文的大小

• CSS SPRITE（雪碧圖、圖片精靈）技術
• 使用字體圖標（ICON FONT）或者 SVG 等矢量圖 + 減小 HTTP 請求次數或者減小請求內容的大小 + 渲染更快：由於他們是基於代碼渲染的，而對於位圖（png/jpg/gif）是須要先把圖片編碼再渲染 + 不容易失真變形 + 也可使用 webp 格式圖片，這種格式要小一些（可是須要服務器端支持這種格式的請求處理）
• 圖片懶加載（延遲加載）技術 + 第一次加載頁面的時候不去請求真實的圖片，提升第一次渲染頁面的速度 + 當頁面加載完，把出如今用戶視野區域中的圖片作真實加載，沒有出現的先不加載（節約流量，也能減小對服務器的請求壓力） + 對於數據咱們也儘量分批加載（不要一次請求過多的數據，例如分頁技術）
• 音視頻文件取消預加載（preload='none'），這樣能夠增長第一次渲染頁面的速度，當須要播放的時候再加載
• 客戶端和服務器端的數據傳輸儘量基於 JSON 格式完成，XML 格式比 JSON 格式要大一些（還能夠基於二進制編碼或者文件流格式，這種格式比文件傳輸好不少）
• 把頁面中的 CSS/JS/圖片等文件進行合併壓縮 + 合併：爭取 CSS 和 JS 都只導入一個（webpack 能夠實現自動合併壓縮） + 壓縮：基於 webpack 能夠壓縮、對於圖片本身找工具先壓縮、還可使用服務器的 GZIP 壓縮
• 圖片地圖：對於屢次調取使用的圖片（尤爲是背景圖），咱們儘量把它提取成爲公共的樣式，而不是每一次從新設置 background
• 圖片 BASE64（用 BASE64 碼錶明圖片，減小 HTTP 請求，增長瀏覽器渲染的速度，因此真實項目中，尤爲是移動端，若是圖片加載緩慢，可能 BASE64 一下就行了；可是，BASE64 會致使文件中的代碼超級噁心，不利於維護和開發，因此少使用；webpack 中能夠配置圖片的 BASE64；）

2. 設置各類緩存、預處理和長鏈接機制

• 把不常常更改的靜態資源作緩存處理（通常作的是 304 或者 ETAG 等協商緩存）
• 創建 Cache-Control 和 Expires HTTP 的強緩存
• DNS 緩存或者預處理（DNS PREFETCH），減小 DNS 的查找
• 設置本地的離線存儲（manifest）或者把一些不常常更改的數據作本地存儲（webstorage、indexdb）等
• 有錢就作 CDN（地域分佈式服務器），還有一個財大氣粗的方式：加服務器
• 創建 Connection:keep-alive TCP 長鏈接
• 使用 HTTP2 版本協議（如今用的通常都是 HTTP1.1） + 能夠多條 TCP 通道共存 =>管道化連接 + 思考題：HTTP VS HTTPS + 思考題：HTTP1 VS HTTP2
• 一個項目分爲不一樣的域（不一樣的服務器），例如：資源 WEB 服務器、數據服務器、圖片服務器、視頻服務器等，這樣合理利用服務器資源，可是致使過多的 DNS 解析

3. 代碼方面的性能優化

• 減小對閉包的使用（由於過多使用閉包會產生不少不銷燬的內存，處理很差的話，會致使內存溢出「棧溢出」），減小閉包的嵌套（減小做用域鏈的查找層級）

//=>棧溢出：死遞歸
function func(){
	func();
}
func();
//=>解決方案
function func(){
	setTimeout(func,0);
}
func();

//=>相互引用：引用類型之間的相互調用，造成嵌套式內存
let obj1={
	name:'OBJ1'
};
let obj2={
	name:'OBJ2',
	x:obj1
};
obj1.x=obj2;
複製代碼

• 對於動畫來講：能用 CSS 解決的不用 JS（可以用 transform 處理的，不用傳統的 css 樣式，由於 transform 開啓硬件加速，不會引起迴流，再或者使用定位的元素也會好不少，由於定位的元素脫離文檔流，不會對其它元素的位置形成影響），能用 requestAnimationFrame 解決的不用定時器 + requestAnimationFrame 還有一個好處，當頁面處於休眠無訪問狀態，動畫會本身暫停，直到恢復訪問纔開始，而定時器是不論什麼狀態，只要頁面無論，就一直處理
• 避免使用 iframe（由於 iframe 會嵌入其它頁面，這樣父頁面渲染的時候，還要同時把子頁面也渲染了，渲染進度會變慢）
• 減小直接對 DOM 的操做（緣由是減小 DOM 的迴流和重繪...），當代項目基本上都是基於 mvvm/mvc 數據驅動視圖渲染的，對 DOM 的操做框架自己完成，性能要好不少
• 低耦合高內聚（基於封裝的方式：方法封裝、插件、組件、框架、類庫等封裝，減小頁面中的冗餘代碼，提升代碼使用率）
• 儘量使用事件委託
• 避免出現死循環或者嵌套循環（嵌套循環會成倍增長循環的次數）
• 項目中儘量使用異步編程來模擬出多線程的效果，避免主線程阻塞（異步操做基於 PROMISE 設計模式來管理）
• JS 中不要使用 with
• 避免使用 CSS 表達式
• 函數的防抖和節流
• 減小使用 eval（主要緣由是防止壓縮代碼的時候，因爲符號書寫不合規，致使代碼混亂）
• 減小 filter 濾鏡的使用
• 儘量減小選擇器的層級（選擇器是從右向左解析） .box a{} 和 a{}
• 儘量減小 TABLE 佈局
• 手動回收堆棧內存（賦值爲 null）