一绵疲、減少 HTTP 的請(qǐng)求次數(shù)和傳輸報(bào)文的大小
1、CSS SPRITE（雪碧圖、圖片精靈）技術(shù)
2忧换、使用字體圖標(biāo)（ICON FONT）或者 SVG 等矢量圖
? ? 1.會(huì)減少 HTTP 請(qǐng)求次數(shù)或者減少請(qǐng)求內(nèi)容的大小
? ? 2.渲染更快：因?yàn)樗麄兪腔诖a渲染的，而對(duì)于位圖（png/jpg/gif）是需要先把圖片編碼再渲染
? ? 3.不容易失真變形
? ? 4.也可以使用 webp 格式圖片向拆，這種格式要小一些（但是需要服務(wù)器端支持這種格式的請(qǐng)求處理）
3亚茬、圖片懶加載（延遲加載）技術(shù)
? ? 1.在第一次加載時(shí)候不給真實(shí)地址、圖片浓恳，提高了第一次渲染頁(yè)面的速度
? ? 2.當(dāng)頁(yè)面加載完刹缝，把出現(xiàn)在用戶(hù)視野區(qū)域中的圖片做真實(shí)加載，沒(méi)有出現(xiàn)的先不加載（節(jié)約流量颈将，也能減少對(duì)服務(wù)器的請(qǐng)求壓力）
? ? 3.對(duì)于數(shù)據(jù)我們也盡可能分批加載（不要一次請(qǐng)求過(guò)多的數(shù)據(jù)梢夯，例如分頁(yè)技術(shù)）
4、音視頻文件取消預(yù)加載（preload='none'）晴圾，增加第一次渲染頁(yè)面的速度
5颂砸、客戶(hù)端和服務(wù)器端的數(shù)據(jù)傳輸盡可能基于 JSON 格式完成，因?yàn)閄ML 格式比 JSON 格式要大一些（還可以基于二進(jìn)制編碼或者文件流格式死姚，這種格式比文件傳輸好很多）
6人乓、把頁(yè)面中的 CSS/JS/圖片等文件進(jìn)行合并壓縮
? ? 合并：爭(zhēng)取 CSS 和 JS 都只導(dǎo)入一個(gè)（webpack 可以實(shí)現(xiàn)自動(dòng)合并壓縮）
? ? 壓縮：基于 webpack 可以壓縮、對(duì)于圖片自己找工具先壓縮都毒、還可以使用服務(wù)器的 GZIP 壓縮
7色罚、使用圖片地圖
? ? 對(duì)于多次調(diào)取使用的圖片（尤其是背景圖），我們盡可能把它提取成為公共的樣式账劲，而不是每一次重新設(shè)置 background
8戳护、圖片可以使用 BASE64碼
? ? 優(yōu)點(diǎn)：用 BASE64 碼代表圖片金抡，減少了 HTTP請(qǐng)求，增加瀏覽器渲染的速度姑尺，所以真實(shí)項(xiàng)目中竟终，尤其是移動(dòng)端渲染效果明顯變快
? ? 缺點(diǎn)：BASE64碼 會(huì)導(dǎo)致文件中的代碼過(guò)多，不利于維護(hù)和開(kāi)發(fā)
二切蟋、設(shè)置各種緩存统捶、預(yù)處理和長(zhǎng)連接機(jī)制
1、把不經(jīng)常更改的靜態(tài)資源做緩存處理
? ? 可以304 HTTP協(xié)商緩存 或者 ETAG 等協(xié)商緩存
2柄粹、建立 Cache-Control 和 Expires HTTP 的強(qiáng)緩存
3喘鸟、DNS 緩存或者預(yù)處理（DNS PREFETCH），減少 DNS 的查找
4驻右、設(shè)置本地的離線(xiàn)存儲(chǔ)（manifest）或者把一些不經(jīng)常更改的數(shù)據(jù)做本地存儲(chǔ)（webstorage什黑、indexdb）等
5、建立 Connection:keep-alive TCP 長(zhǎng)連接
6堪夭、使用 HTTP2 版本協(xié)議（現(xiàn)在用的一般都是 HTTP1.1）
? ? HTTP2可以多條 TCP 通道共存
7愕把、分域：一個(gè)項(xiàng)目分為不同的域（不同的服務(wù)器）
? ? 例如：資源 WEB 服務(wù)器、數(shù)據(jù)服務(wù)器森爽、圖片服務(wù)器恨豁、視頻服務(wù)器等，這樣合理利用服務(wù)器資源
? ? 缺點(diǎn)：會(huì)導(dǎo)致過(guò)多的 DNS 解析
8爬迟、氪金大佬
? ? 1.CDN（地域分布式服務(wù)器）
? ? 2.加服務(wù)器
三橘蜜、代碼方面的性能優(yōu)化
1.減少對(duì)閉包的使用
? ? 1.過(guò)多使用閉包會(huì)產(chǎn)生很多不銷(xiāo)毀的內(nèi)存，內(nèi)存過(guò)多會(huì)導(dǎo)致內(nèi)存溢出“棧溢出”
? ? 2.減少閉包的嵌套（減少作用域鏈的查找層級(jí)）
2.項(xiàng)目中的動(dòng)畫(huà)需求付呕，盡量用CSS 解決
? ? 1.能夠用 transform 處理的计福，不用傳統(tǒng)的 css 樣式，因?yàn)?transform 開(kāi)啟硬件加速徽职，不會(huì)引發(fā)回流
? ? 2.CSS中使用定位的元素也會(huì)好很多象颖，定位脫離文檔流，不影響其他元素的位置
? ? 3.能用 requestAnimationFrame 解決的不用定時(shí)器姆钉，因?yàn)閞equestAnimationFrame當(dāng)頁(yè)面處于休眠無(wú)訪(fǎng)問(wèn)狀態(tài)说订，動(dòng)畫(huà)會(huì)自己暫停，直到恢復(fù)訪(fǎng)問(wèn)才開(kāi)始育韩，而定時(shí)器是不論什么狀態(tài)克蚂，只要不手動(dòng)處理就會(huì)執(zhí)行
3闺鲸、避免使用 iframe
? ? iframe 會(huì)嵌入其它頁(yè)面筋讨，父頁(yè)面渲染的時(shí)候，同時(shí)渲染子頁(yè)面摸恍，渲染進(jìn)度會(huì)變慢
4悉罕、減少直接對(duì) DOM 的操作(減少重繪和回流)
? ? 現(xiàn)在項(xiàng)目基本上都是基于 MVVM（Vue）赤屋、MVC（React）進(jìn)行數(shù)據(jù)驅(qū)動(dòng)視圖渲染，性能好于直接操作DOM
5壁袄、低耦合高內(nèi)聚
? ? 進(jìn)行方法类早、插件、組件嗜逻、框架涩僻、類(lèi)庫(kù)等封裝，減少頁(yè)面中的冗余代碼栈顷，提高代碼使用率
6逆日、盡可能使用事件委托
? ? 事件委托可以給動(dòng)態(tài)元素綁定事件，而且基于事件委托實(shí)現(xiàn)萄凤，整體性能會(huì)比一個(gè)一個(gè)綁定事件高50%
7室抽、避免出現(xiàn)死循環(huán)或者嵌套循環(huán)（嵌套循環(huán)會(huì)成倍增加循環(huán)的次數(shù)）
8、項(xiàng)目中盡可能使用異步編程來(lái)模擬出多線(xiàn)程的效果靡努，避免主線(xiàn)程阻塞（異步操作基于 PROMISE 設(shè)計(jì)模式來(lái)管理）
9坪圾、JS 中不要使用 with
10、避免使用 CSS 表達(dá)式
11惑朦、使用函數(shù)的防抖和節(jié)流
12兽泄、減少使用 eval
? ? 防止壓縮代碼時(shí)，由于符號(hào)書(shū)寫(xiě)不合規(guī)行嗤，導(dǎo)致代碼混亂
13已日、減少 filter 濾鏡的使用
14、盡可能減少CSS選擇器的層級(jí)
? ? CSS選擇器是從右向左解析 .box a{} 和 a{}
15栅屏、減少 TABLE 布局
16飘千、手動(dòng)回收堆棧內(nèi)存
? ? 將沒(méi)用的堆內(nèi)存賦值為null //=>obj=null
這些優(yōu)化方案都是我們上課時(shí)候老師帶同學(xué)們一起總結(jié)的，如果有什么不對(duì)的地方歡迎指出栈雳、歡迎補(bǔ)充
師承——北京珠峰培訓(xùn)：周?chē)[天
