前端效能優化，我們可以做哪些？
1、雪碧圖技術
這個很簡單，把每個小圖示都整合到一張大圖上面，極大的減輕http請求數，同時能夠讓圖片快速載入進來。
考慮到當前的5g的發展前景，以後圖片不會造成載入延遲的現象。
2、瀏覽器渲染機制
輸入一個網址：我們得到服務端html檔案。
根據html檔案，從頭到尾的一個個的依次渲染頁面渲染頁面。
但是遇到圖片——不會等待圖片的載入完畢，會直接渲染下面的標籤。
如果圖片加載出來——根據圖片選擇，由於圖片要佔用空間，決定是否重新載入頁面，這個概念叫reflow。（優化的方式——給圖片寬高）。
reflow和什麼相關：佔位面積、定位方式、邊距。
對於樣式中的顏色變化，叫做repaint、這個就只需要把顏色改變。所以效能上來說，repaint稍微比reflow高點。
repaint和什麼相關：和顏色變化相關
3、webpack、gulp等打包工具的使用
壓縮程式碼，減少了程式碼體積。
可以把多個css檔案，多個js檔案，合併為一個css檔案/js檔案。
合併檔案，讓我們減少了http請求數。
4、避免頁面跳轉，也就是使用單頁面應用的開發。
每次頁面跳轉，就是一次html檔案的下載過程。而這個過程，我們首先從服務端下載網頁，再進行渲染，網頁效能體驗會很差。而單頁面應用，它從一開始，就把完整的網頁給載入到本地。
5、延遲載入、懶載入技術
什麼是懶載入技術：
- 原理：先將img標籤中的src連結設為同一張圖片（空白圖片），將其真正的圖片地址儲存再img標籤的自定義屬性中（比如data-src）。當js監聽到該圖片元素進入可視視窗時，即將自定義屬性中的地址儲存到src屬性中，達到懶載入的效果。
- 這樣做能防止頁面一次性向伺服器響應大量請求導致伺服器響應慢，頁面卡頓或崩潰等問題。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>懶載入技術</title>
<style>
li{
width: 300px;
height: 400px;
}
li img{
width: 100% 6、將css放在HEAD中
如果將 CSS放在其他地方比如 BODY中，則瀏覽器有可能還未下載和解析到 CSS就已經開始渲染頁面了，這就導致頁面由無 CSS狀態跳轉到 CSS狀態，使用者體驗比較糟糕。除此之外，有些瀏覽器會在 CSS下載完成後才開始渲染頁面，如果 CSS放在靠下的位置則會導致瀏覽器將渲染時間推遲。
7、Vue專案的按需載入
主要是在載入路由的時候，使用：
const Main = r => require.ensure([], () => r(require(‘../views/main/Main’)))
require.ensure就是webpack提供的非同步載入的方式。
8、關於React的效能優化
react中，進行效能優化的核心就是shouldComponentDidMount周期函式。
下面是我寫的效能優化的部落格：
react效能優化
9、設定合理的http快取
http請求中，我們可以合理的設定headers，就能達到快取的目的。
有兩種常見的快取，強制快取和對比快取：
第一種：強制快取。
直接訪問瀏覽器中的快取資料，如果存在，則直接使用瀏覽器中的資料。如果不存在，則再向伺服器傳送請求，然後得到伺服器的資料，再把這些資料存在瀏覽器中。
第二種：對比快取。
首先，獲取瀏覽器中的資料快取標識，再獲取伺服器上面的資料快取標識，如果相匹配，則直接從瀏覽器中獲取資料，如果不匹配，則從伺服器上獲取資料。
關於快取標識，有兩類標識：
第一類：
第一次請求，伺服器會返回一個Last-Modified。
下一次請求，瀏覽器會自動在headers中新增一條If-Modified-Since屬性，記錄的就是上一次資料發生修改的時間。
第二類：
第一次請求，服務端返回一個Etag資源唯一識別符號。
第二次請求，瀏覽器會自動攜帶一個If-None_Match識別符號。
應用程式快取
建立cache manifest檔案，通過給html檔案中的HTML標籤新增一個manifest屬性來實現的。
<!DOCTYPE HTML>
<html manifest="demo.appcache">
<body>
文件內容......
</body>
</html>