性能加載時(shí)的優(yōu)化
第一點(diǎn)：減少HTTP請(qǐng)求
??一個(gè)完整的 HTTP 請(qǐng)求需要經(jīng)歷 DNS 查找，TCP 握手，瀏覽器發(fā)出 HTTP 請(qǐng)求，服務(wù)器接收請(qǐng)求，服務(wù)器處理請(qǐng)求并發(fā)回響應(yīng)，瀏覽器接收響應(yīng)等等一系列復(fù)雜的過程。當(dāng)你請(qǐng)求較多時(shí)，直接體現(xiàn)在了消耗性能上面，這就是為什么要將多個(gè)小文件合并為一個(gè)大文件，從而減少 HTTP 請(qǐng)求次數(shù)的原因。
第二點(diǎn)：使用服務(wù)器端渲染SSR
??我們知道，當(dāng)客戶端渲染時(shí)，他是獲取 HTML 文件，根據(jù)需要下載 JavaScript 文件，運(yùn)行文件，生成 DOM，再渲染。這個(gè)在無形之中會(huì)拖慢我們的性能。
??那么服務(wù)器端渲染又是怎么一回事呢？他就是，服務(wù)端返回 HTML 文件，客戶端只需解析HTML即可，并且可以更好的SEO。
第三點(diǎn)：靜態(tài)資源使用 CDN
??什么是CDN，CDN就是，內(nèi)容分發(fā)網(wǎng)絡(luò)，它是一組分布在多個(gè)不同地理位置的 Web 服務(wù)器。我們都知道，當(dāng)服務(wù)器離用戶越遠(yuǎn)時(shí)，延遲越高。CDN 就是為了解決這一問題，在多個(gè)位置部署服務(wù)器，讓用戶離服務(wù)器更近，從而縮短請(qǐng)求時(shí)間。
CDN原理：
當(dāng)用戶訪問一個(gè)網(wǎng)站時(shí)，如果沒有 CDN，過程是這樣的：
1.瀏覽器要將域名解析為 IP 地址，所以需要向本地 DNS 發(fā)出請(qǐng)求。
2.本地 DNS 依次向根服務(wù)器、頂級(jí)域名服務(wù)器、權(quán)限服務(wù)器發(fā)出請(qǐng)求，得到網(wǎng)站服務(wù)器的 IP 地址。
3.本地 DNS 將 IP 地址發(fā)回給瀏覽器，瀏覽器向網(wǎng)站服務(wù)器 IP 地址發(fā)出請(qǐng)求并得到資源。
如果用戶訪問的網(wǎng)站部署了 CDN，過程是這樣的：
1.瀏覽器要將域名解析為 IP 地址，所以需要向本地 DNS 發(fā)出請(qǐng)求。
2.本地 DNS 依次向根服務(wù)器、頂級(jí)域名服務(wù)器、權(quán)限服務(wù)器發(fā)出請(qǐng)求，得到全局負(fù)載均衡系統(tǒng)（GSLB）的 IP 地址。
3.本地 DNS 再向 GSLB 發(fā)出請(qǐng)求，GSLB 的主要功能是根據(jù)本地 DNS 的 IP 地址判斷用戶的位置，篩選出距離用戶較近的本地負(fù)載均衡系統(tǒng)（SLB），并將該 SLB 的 IP 地址作為結(jié)果返回給本地 DNS。
4.本地 DNS 將 SLB 的 IP 地址發(fā)回給瀏覽器，瀏覽器向 SLB 發(fā)出請(qǐng)求。
5.SLB 根據(jù)瀏覽器請(qǐng)求的資源和地址，選出最優(yōu)的緩存服務(wù)器發(fā)回給瀏覽器。
6.瀏覽器再根據(jù) SLB 發(fā)回的地址重定向到緩存服務(wù)器。
7.如果緩存服務(wù)器有瀏覽器需要的資源，就將資源發(fā)回給瀏覽器。如果沒有，就向源服務(wù)器請(qǐng)求資源，再發(fā)給瀏覽器并緩存在本地。
第四點(diǎn)：CSS 寫頭部，JavaScript 寫底部
??所有放在 head 標(biāo)簽里的 CSS 和 JS 文件都會(huì)堵塞渲染。如果這些 CSS 和 JS 需要加載和解析很久的話，那么頁面就空白了。所以 JS 文件要放在底部，等 HTML 解析完了再加載 JS 文件。 那為什么 CSS 文件還要放在頭部呢？ 因?yàn)橄燃虞d HTML 再加載 CSS，會(huì)讓用戶第一時(shí)間看到的頁面是沒有樣式的、“丑陋”的，為了避免這種情況發(fā)生，就要將 CSS 文件放在頭部了。 另外，JS 文件也不是不可以放在頭部，只要給 script 標(biāo)簽加上 defer 屬性就可以了，異步下載，延遲執(zhí)行。
第五點(diǎn)：字體圖標(biāo)代替圖片圖標(biāo)
??字體圖標(biāo)就是將圖標(biāo)制作成一個(gè)字體，使用時(shí)就跟字體一樣，可以設(shè)置屬性，例如 font-size、color 等等，非常方便。并且字體圖標(biāo)是矢量圖，不會(huì)失真。還有一個(gè)優(yōu)點(diǎn)是生成的文件特別小,推薦阿里矢量圖庫，需要先把圖標(biāo)設(shè)置為SVG在上傳。
為了解決兼容問題，一般Expires和Cache-Control是同時(shí)設(shè)置的。在支持Cache-Control的http協(xié)議中，Cache-Control的優(yōu)先級(jí)更高。
第六點(diǎn)：利用緩存不重復(fù)加載相同的資源
??Expires ：為了避免用戶每次訪問網(wǎng)站都得請(qǐng)求文件，我們可以通過添加 Expires 來控制這一行為。Expires 設(shè)置了一個(gè)時(shí)間，只要在這個(gè)時(shí)間之前，瀏覽器都不會(huì)請(qǐng)求文件，而是直接使用緩存，在Ngnix設(shè)置，
??Cache-Control：是http1.1提出的新強(qiáng)緩存規(guī)范，它的值是一個(gè)相對(duì)時(shí)間，例如Cache-Control: max-age=90，代表該資源的有效時(shí)間是第一次獲取資源后90秒失效。（也是現(xiàn)在最常用的強(qiáng)緩存控制字段）。
第七點(diǎn)：圖片優(yōu)化
??這里分為幾個(gè)小點(diǎn)，
??(1).圖片延遲加載；就是在頁面中，先不給圖片設(shè)置路徑，只有當(dāng)圖片出現(xiàn)在瀏覽器的可視區(qū)域時(shí)，才去加載真正的圖片，這就是延遲加載。對(duì)于圖片很多的網(wǎng)站來說，一次性加載全部圖片，會(huì)對(duì)用戶體驗(yàn)造成很大的影響，所以需要使用圖片延遲加載。
??(2).降低圖片質(zhì)量；圖片100% 的質(zhì)量和 90% 的質(zhì)量通?？床怀鰜韰^(qū)別，尤其是用來當(dāng)背景圖的時(shí)候。我們可以在用 PS 切背景圖時(shí)， 將圖片切成 JPG 格式，并且將它壓縮到 60% 的質(zhì)量，這樣基本看不出來區(qū)別。
??(3).盡可能利用 CSS3 效果代替圖片；有很多圖片使用 CSS 效果（漸變、陰影等）就能畫出來，這種情況選擇CSS3 效果更好。因?yàn)榇a大小通常是圖片大小的幾分之一甚至幾十分之一。最后一個(gè)就是，使用雪碧圖，相信大家也都明白。
第八點(diǎn)：通過 webpack 按需加載代碼
??懶加載或者按需加載，是一種很好的優(yōu)化網(wǎng)頁或應(yīng)用的方式。這種方式實(shí)際上是先把你的代碼在一些邏輯斷點(diǎn)處分離開，然后在一些代碼塊中完成某些操作后，立即引用或即將引用另外一些新的代碼塊。這樣加快了應(yīng)用的初始加載速度，減輕了它的總體體積，因?yàn)槟承┐a塊可能永遠(yuǎn)不會(huì)被加載。
運(yùn)行時(shí)的優(yōu)化
第一點(diǎn)：減少重繪重排
??用 JavaScript 修改樣式時(shí)，最好不要直接寫樣式，而是替換class 來改變樣式。再一個(gè)就是，如果要對(duì)DOM 元素執(zhí)行一系列操作，可以將 DOM 元素脫離文檔流，修改完成后，再將它帶回文檔。推薦使用隱藏元素（display:none）或文檔碎片，都能很好的實(shí)現(xiàn)這個(gè)方案。
第二點(diǎn)：使用事件委托
??事件委托利用了事件冒泡，只指定一個(gè)事件處理程序，就可以管理某一類型的所有事件。所有用到按鈕的事件（多數(shù)鼠標(biāo)事件和鍵盤事件）都適合采用事件委托技術(shù)， 使用事件委托可以節(jié)省內(nèi)存。
第三點(diǎn)：if-else 對(duì)比switch
??當(dāng)判斷條件數(shù)量越來越多時(shí)，越傾向于使用 switch 而不是 if-else。不過，switch 只能用于case 值為常量的分支結(jié)構(gòu)，而 if-else 更加靈活。
第四點(diǎn)：不要覆蓋原生方法
??無論你的 JavaScript 代碼如何優(yōu)化，都比不上原生方法。因?yàn)樵椒ㄊ怯玫图?jí)語言寫的，并且被編譯成機(jī)器碼，成為瀏覽器的一部分。當(dāng)原生方法可用時(shí)，盡量使用它們，特別是數(shù)學(xué)運(yùn)算和 DOM 操作。
第五點(diǎn)：降低CSS 選擇器的復(fù)雜性
??瀏覽器讀取選擇器，遵循的原則是從選擇器的右邊到左邊讀取。所以，盡可能的降低CSS 選擇器的復(fù)雜性
第六點(diǎn)：使用 flexbox 布局
??在早期的 CSS 布局方式中我們能對(duì)元素實(shí)行絕對(duì)定位、相對(duì)定位或浮動(dòng)定位。而現(xiàn)在，我們有了 flexbo布局方式，它比起早期的布局方式來說更有優(yōu)勢(shì)，那就是性能比較好。不過 flexbox 兼容性還是有點(diǎn)問題，不是所有瀏覽器都支持它，所以要謹(jǐn)慎使用。
第七點(diǎn)：用 transform 和 opacity 屬性更改來實(shí)現(xiàn)動(dòng)畫
??在 CSS 中，transforms 和 opacity 這兩個(gè)屬性更改不會(huì)觸發(fā)重排與重繪，它們是可以由合成器單獨(dú)處理的屬性。
