談一談前端經典問題---性能優化

性能優化是個最最最最最經典的面試問題了。如今不管打開拉勾網，Boos直聘等求職軟件。凡是前端的崗位，不管薪資多少都要求應聘者懂得「性能優化」

性能優化彷彿離咱們很遙遠。有些時候，咱們寫代碼只停留在「實現功能」就能夠了。可是若是你的頁面加載太慢，用戶體驗就會不好。本文着重講講幾個性能優化的關鍵點和入手點

稍安勿躁，咱們先了解一下瀏覽器是如何進行渲染的

用戶在地址欄輸入www.baidu.com -> 瀏覽器加載HTML -> 加載HTML靜態資源 -> 碰到JavaScript標籤/js代碼阻塞渲染

因此，咱們寫代碼最最最最重視的一點：Script標籤必定要放在最下面！！！CSS代碼必定要放在網頁頭部

假如js代碼阻塞，就會影響dom渲染

幾個關鍵點：

1. 多使用內存 緩存等其餘持久性數據的方法 

  應該算是原則性問題了。其餘的措施：減小CPU計算，網絡請求

2. CDN靜態資源加速

  啥？？你還不知道啥叫 CDN  ？？CDN就是內容分發網絡。通俗的講就是個分佈式的服務器。加載資源根據離你最近的服務器進行加載。減小網絡延時

例如jQuery的國內CDN：

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
複製代碼

把靜態資源（js，css，img）託管在CDN服務器上

3. 靜態資源合併壓縮

 最經典的就是jQuery的壓縮例子(jQuery.js有上百KB，.min.js只有30多KB)。儘可能將多個js合併爲一個進行一次性請求。

jquery.min.js // 84.8KB 壓縮版

jquery.js //265KB 未壓縮版複製代碼

4.使用SSR(服務端渲染)

後端渲染好像已經被拋棄了同樣....被看做是過期的技術。許多培訓機構也推崇用ajax進行異步獲取數據。可是異步獲取數據有個最最最最大的問題：

不便於搜索引擎抓取和頁面SEO優化！

搜索引擎對你的網站進行抓取，他不會去加載js去抓取。而是去抓取你網站的骨架。

後端渲染也會提升頁面加載速度。例如京東首頁就使用部分後端直出+模板引擎渲染的方式

5. 懶加載(lazy loading)

我認爲懶加載應該歸爲交互類(emm....)。先加載圖片標籤，而後延時加載/根據視口視角加載相應的圖片。可讓圖片與dom數異步加載。減緩瀏覽器壓力

下面是懶加載的原理。先指定一個通用背景圖片，而後讓js延時加載圖片的真實路徑

<img class="a" src="demo.png" data-src="a.png" />

<script type="text/javascript">
var imga =document.getElementByClassName('a');
imga.src =imga.getAttribute('data-src')
</script>複製代碼

6. DOM操做作緩存

 dom操做是很是珍貴的，對資源開銷也比較大。最好的辦法就是查詢一次保存在變量當中。而不要爲了節省內存開銷不去設置變量

7. JS節流 and 防抖

這個詞有些人沒據說過.....

節流的意思很明確，就是減小流量嘛。但並非減小「網絡流量」，而是減小「請求流量」

許多高頻率命中的事件（keyup，scroll監聽）等監聽事件，會在一段時間內高頻率觸發（飛速打字，頁面滾動）。這樣就會形成短期內js處理大量的監聽事件。致使「上一個沒有執行完畢，下一個又被觸發」（有些時候咱們也沒要求他必需要觸發完一個再執行下一個。例如字數統計的功能）

咱們找到了問題的「所在」，就能夠對每次事件觸發加定時器（20ms最佳）。每次新執行的時候清掉上一個定時器，而後從新計算時間。

固然，節流和防抖不止加延遲加載這一種方法。這裏不細說

8. 儘早執行操做

使用DomContentLoaded監聽方法進行加載。這個方法不一樣於window.load方法。window.load方法是等全部資源加載完畢（包括圖片視頻css等）

DomContentLoaded不一樣。當dom渲染完畢他就去觸發，不會在乎圖片視頻是否加載OK

好了，第一次寫Blog。我仍是個寶寶 ~~ 歡迎指出我文章內錯誤。未許可禁止轉載