前端性能優化，是每個前端必備的技能，優化自己的代碼，使自己的網址可以更加快速的訪問打開，減少用戶等待，今天就會從幾個方面說起前端性能優化的方案，
看下面的一張圖，經常會被面試官問，從輸入URL到頁面加載完成，發生了什么？
2.瀏覽器通過DNS。吧url解析ip
3.和ip地址建立TCP連接，發送HTTP請求
4.服務器接收請求，查庫，讀文件等，拼接好 返回的HTTP響應
5.瀏覽器收到首屏html,開始渲染，
6.解析html位dom
7.解析css為css-tree
8.dom+css生成render-tree繪圖
9.加載script的js文件
10.執行js文件
瀏覽器緩存之客戶端緩存
無需請求的memory cache，disk cache；
需要發請求驗證的Etag、Last-Modified304；
H5新增的 localStorage、sessionStorage；
合理利用以上緩存，可以很大程度上提高前端性能。
2.加版本號 <script src="/a.js?_v=1.6"> 比如jq,vue公用庫，內容沒有改變 重新加載
3.加指紋 但是不產生新文件 <script src="/a.js?h=abcd12sa"> 不能清除Cdn緩存，但是生成新文件，會有問題（html,js那個先上）
4.最終，誕生最優的產生文件<script src="/a.abcd12sa.js">先上js，在上html webpack build 打包
1.如果不合並 === > 文件與文件之間有插入的上行請求，增加了N - 1 個網絡延遲；受丟包問題影響更嚴重；經過代理服務器時可能會被斷開
2.如果合並 === > 首屏渲染時間變長； 文件緩存大面積失效
3.公共庫合並、不同頁面的合並
4.使用在線網站進行文件合並、使用 nodejs 實現文件合並
2.expires: Mon, 16 Mar 2020 09:50:27 GMT
3.last-modified: Thu, 15 Feb 2018 14:17:52 GMT
Memory Cache
內存緩存，短命，比如常用數據js里，瀏覽器也有自己的策略，base64圖片，體積小的靜態資源
Service Worker Cache
是一種獨立於主干線程之外的javascript線程，它脫離於瀏覽器窗體，算是幕后工作，可以實現離線緩存，網絡代理等
圖片優化
2.png
因為 http 請求無狀態，所以需要 cookie 去維持客戶端狀態
cookie 生成方式：http response header 中的 set-cookie； js 中可以通過document.cookie讀寫cookie
使用：用於瀏覽器端和服務器端的交互；客戶端自身數據的存儲
過期時間：expire
存儲限制：作為瀏覽器存儲，大小4kb左右；需要設置過期時間 expire
cookie 存儲能力被 localstorage 代替
httponly 不允許 js 讀寫
cookie 中在相關域名下面 --- cdn的流量損耗 。 解決：cdn 的域名和主站的域名要分開
重繪與回流
// 函數節流 每隔多少時間執行一次 const throttle = (func ,wait = 100) =>{ // 無論調用多少次，函數都是100毫秒執行一次 let lastTime =0; return(...args) =>{ let now = new Date().getTime() if(now - lastTime >wait) { func.apply(this.args) lastTime = now } } } let i =1; window.addEventListener('scroll',throttle(()=>{ // 使用做圖片懶加載 console.log(i) i+=1 },350))
/*
校驗用戶是不是重復，用戶輸入完，向后端發送請求
如果用戶每次輸入，都發生請求，造成請求過多
用戶停止輸入字符串350毫秒，在發出
*/
const debounce = (func,wait = 350) =>{
let timer =0;
return (...args)=>{
if(timer) {
clearInterval(timer)
}
timer = setTimeout(() => {
func.apply(this,args)
}, wait);
}
}
let i =1;
window.addEventListener('scroll',debounce(()=>{
// 驗證
console.log(i)
i+=1
},350))
lazy-load
對於一些圖片多，頁面長的網頁來說，如果每次打開頁面加載全部的網頁內容，頁面加載速度勢必會受到影響，如果每次打開網頁只將網頁可視區域的內容加載給用戶 ，將大大提高網頁瀏覽速度，同時也減輕服務器負載，我們可以使用lazyload.js來實現對圖片的延遲加載，當網頁圖片進入到瀏覽器可視區域時，才會去請求服務器加載圖片。
// 獲取所有的圖片 const img = document.getElementsByTagName('img') // 獲取可視區域的高度 const viewHeight = window.innerHeight || document.documentElement.clientHeight; // num用於計算當前顯示到那一張圖片，避免每次都是從第一張開始檢查是否漏出 let num =0; function lazyload() { for(let i=num;i<img.length;i++) { // 用可是區域高度減去元素頂部距離可視區域頂部的高度 let distance = viewHeight - img[i].getBoundingClientRect().top // 如果可視區域高度大於等於元素頂部距離可視區域頂部的高度，說明元素露出 if(distance >=0) { // 給元素寫入真實的src，展示圖片 img[i].src = img[i].getAttribute('data-src') // 前i張圖片已經加載完畢，，下次從第i+1張開始檢查是否露出 num = i+1 } } } // 監聽scroll window.addEventListener('scroll',lazyload,false)
performance.getEntriesByType('navigation') 性能檢測
通過在瀏覽器控制台輸入這個命令，就可以檢測到網頁加載數據，檢測網頁加載性能
npm install -g lighthouse
安裝完之后運行，也是找的github網址，運行成功之后，會彈出一個生成的html頁面。
生成一個html文件，找到然后直接打開就行
瀏覽器渲染
