[[407593]]

如果頁面卡頓、或者半夜內(nèi)存飆升，你覺得可能是什么原因造成的?有什么辦法鎖定原因并解決嗎?(項(xiàng)目常用)

這是一個(gè)非常寬泛而又有深度的問題，涉及到很多的頁面性能優(yōu)化問題，我依稀還記得當(dāng)初面試被問到這個(gè)問題時(shí)是這么回答的：

1)先會檢查是否是網(wǎng)絡(luò)請求太多，導(dǎo)致數(shù)據(jù)返回較慢，可以適當(dāng)做一些緩存;

2)也有可能是某塊資源的bundle太大，可以考慮拆分一下;3)然后排查一下js代碼，是不是某處有過多循環(huán)導(dǎo)致占用主線程時(shí)間過長;

4)瀏覽器某幀渲染的東西太多，導(dǎo)致的卡頓;

5)在頁面渲染過程中，可能有很多重復(fù)的重排重繪;

后來了解到了，感官上的長時(shí)間運(yùn)行頁面卡頓也有可能是因?yàn)閮?nèi)存泄漏，內(nèi)存溢出引起的。

一、內(nèi)存溢出與內(nèi)存泄露

1、內(nèi)存溢出

1)一種程序運(yùn)行出現(xiàn)的錯(cuò)誤。

2)當(dāng)程序運(yùn)行所需內(nèi)存超過了計(jì)算機(jī)剩余的內(nèi)存時(shí)，程序崩潰并拋出內(nèi)存溢出的錯(cuò)誤。

例如：系統(tǒng)已經(jīng)不能再分配出你所需要的空間，比如你需要100M的空間，系統(tǒng)只剩90M了，這就叫內(nèi)存溢出。

2、內(nèi)存泄漏

1)指內(nèi)存被占用且沒有及時(shí)釋放。

2)內(nèi)存泄漏越多，計(jì)算機(jī)剩余的內(nèi)存就越小，此時(shí)越容易發(fā)生內(nèi)存溢出。

常見的內(nèi)存泄露情況：

1)意外的全局變量

2)未及時(shí)清理計(jì)時(shí)器或回調(diào)函數(shù)

3)閉包

例如：用資源的時(shí)候?yàn)樗_辟了一段空間，當(dāng)你用完時(shí)忘記釋放資源了，這時(shí)內(nèi)存還被占用著，一次沒關(guān)系，但是內(nèi)存泄漏次數(shù)多了就會導(dǎo)致內(nèi)存溢出。內(nèi)存泄漏是導(dǎo)致遲緩，崩潰的根本原因，甚至?xí)?dǎo)致其他應(yīng)用問題。

二、垃圾回收機(jī)制

垃圾回收機(jī)制(GC)

根據(jù)內(nèi)存泄漏的定義，有些變量或數(shù)據(jù)不再被使用或不需要了，那么它就是垃圾變量或垃圾數(shù)據(jù)，如果其一直保存在內(nèi)存中，最終可能會導(dǎo)致內(nèi)存占用過多的情況。那么此時(shí)就需要對這些垃圾數(shù)據(jù)進(jìn)行回收，這里引入了垃圾回收機(jī)制的概念。

1、GC定義與作用

GC 就是垃圾回收機(jī)制的簡寫;

GC 可以找到內(nèi)存中的垃圾、并釋放和回收空間;

2、GC里的垃圾是什么

1) 程序中不再需要使用對象

 

function func() { 
 name = 'lg' 
  return `${name} is a coder` 
} 
func() 

2) 程序中不再需要使用對象

 

function func() { 
  const name = 'lg' 
  return `${name} is a coder` 
} 
func() 

3、常見 GC 算法- 引用計(jì)數(shù)

引用計(jì)數(shù)算法實(shí)現(xiàn)原理

引用計(jì)數(shù)算法(重要)

• 核心思想：設(shè)置引用數(shù)，判斷當(dāng)前引用數(shù)是否為 0;
• 引用計(jì)數(shù)器;
• 引用關(guān)系改變時(shí)修改引用數(shù)字;
• 引用數(shù)字為0時(shí)立即回收;

 

const user1 = {age: 11} 
const user2 = {age: 22} 
const user3 = {age: 33} 
 
const nameList = [user1.age, user2.age, user3.age] 
 
function fn() { 
 const num1 = 1; 
  const num2 = 2; 
} 
fn(); 

說明：fn() 的num1,num2會被回收。

4、常見 GC 算法- 標(biāo)記清除

標(biāo)記清除算法實(shí)現(xiàn)原理

• 核心思想：分標(biāo)記和清除二個(gè)階段完成;
• 遍歷所有對象找標(biāo)記活動對象;
• 遍歷所有對象清除沒有標(biāo)記對象;
• 回收相應(yīng)的空間;

 

function speakLines(){ 
  let night="天黑";//做個(gè)標(biāo)記 ，進(jìn)入環(huán)境  
  let closeEyes="閉眼";//做個(gè)標(biāo)記 ，進(jìn)入環(huán)境  
  let speak=`開始狼人殺，${night}請${closeEyes}`;//做個(gè)標(biāo)記 ，進(jìn)入環(huán)境  
  console.log(speak); 
} 
speakLines() //代碼執(zhí)行完畢  里面被標(biāo)記過的變量，又被標(biāo)記 離開環(huán)境 最后被回收 

三、V8引擎- node內(nèi)存溢出

用戶反饋的說是半夜沒人用的時(shí)候內(nèi)存飆升了，node內(nèi)存的溢出的問題分析。

1、先期排查(重要)

先期排查的內(nèi)容，信息如下：

1) 日志：數(shù)據(jù)分析大小，內(nèi)存溢出日志。

2) 監(jiān)控：開啟Sentry監(jiān)控，Sonar代碼質(zhì)量，阿里云監(jiān)控。

1) 報(bào)錯(cuò)日志

a. 數(shù)據(jù)分析

 

 

 

 

b. 報(bào)錯(cuò)日志

 

2021-05-13 22:26:48:198S: FATAL ERROR:  
CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory 
 
2021-05-15 00:18:33:670S: FATAL ERROR:  
Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory 

2、問題分析 (重要)

1) V8引擎對Node.js(和Chrome V8)中的內(nèi)存限制大小。

2) 代碼分析：內(nèi)存泄漏出現(xiàn)情況(重要)

• redis服務(wù)(沒有使用去掉);
• 無用的node安裝依賴包;
• node的回收機(jī)制沒有開啟;
• websocket機(jī)制;
• socket在node里面是否銷毀;
• node端是否存儲了api返回的數(shù)據(jù)(導(dǎo)致內(nèi)存溢出);
• node代理的時(shí)候是否發(fā)送給dns，或者帶域名的地址(網(wǎng)絡(luò)慢導(dǎo)致代理失敗);

3、Nodejs內(nèi)存 - 擴(kuò)大容量

V8引擎對Node.js(和Chrome V8)中的內(nèi)存限制大小。

原因

因?yàn)樵贜ode中，通過JavaScript使用內(nèi)存時(shí)只能使用部分內(nèi)存(64位系統(tǒng)：1.4 GB，32位系統(tǒng)：0.7 GB)，這個(gè)時(shí)候，如果前端項(xiàng)目非常的龐大，Webpack編譯時(shí)就會占用很多的系統(tǒng)資源，如果超出了V8引擎對Node默認(rèn)的內(nèi)存限制大小時(shí)，就會產(chǎn)生內(nèi)存溢出的錯(cuò)誤。

解決方案一：通過 package.json 中的 "build" 加大內(nèi)存

 

"scripts": { 
    "dev": "node build/dev-server.js", 
    "start": "node build/dev-server.js", 
    "build": "set NODE_ENV=production && node --max_old_space_size=4096 build/build.js", 
    "e2e": "node test/e2e/runner.js", 
    "test": "npm run e2e" 
  }, 

解決方案二：安裝插件，加大內(nèi)存

第一步：在packagejson里添加這兩個(gè)插件

 

npm install -g increase-memory-limit 
npm install cross-env 

第二步：在package.json里的scripts里進(jìn)行配置

 

"scripts": { 
    "fix-memory-limit": "cross-env LIMIT=8192 increase-memory-limit" 
  }, 

LIMIT是你想分配的內(nèi)存大小，這里的8192單位是M也就是8G(具體的大小根據(jù)實(shí)際情況而定);

第三步：

 

npm run fix-memory-limit 

*說明：增加內(nèi)存限制大小，并不能夠?qū)嵸|(zhì)解決問題。

擴(kuò)展知識

1、認(rèn)識 V8

• V8 是一款主流的 JavaScript 執(zhí)行引擎
• V8 采用即時(shí)編譯
• V8 內(nèi)存設(shè)限

因?yàn)樵贜ode中，通過JavaScript使用內(nèi)存時(shí)只能使用部分內(nèi)存(64位系統(tǒng)：1.4 GB，32位系統(tǒng)：0.7 GB)

2、V8 垃圾回收策略

• 采用分代回收的思想
• 內(nèi)存分為新生代、老生代
• 針對不同對象采用不同算法

3、V8 如何回收新生代對象

• V8內(nèi)存分配
• V8內(nèi)存空間一分為二
• 小空間用于存儲新生代對象(32M | 16M)
• 新生代指的是存活時(shí)間較短的對象

V8 內(nèi)存分配

 

 

 

 

新生代對象回收實(shí)現(xiàn)

• 回收過程采用復(fù)制算法 + 標(biāo)記整理
• 新生代內(nèi)存區(qū)分為二個(gè)等大小空間
• 使用空間為 From，空閑空間為 To
• 活動對象存儲于 From 空間
• 標(biāo)記整理后將活動對象拷貝至 To
• From 與 To 交換空間完成釋放

回收細(xì)節(jié)說明

• 拷貝過程中可能出現(xiàn)晉升
• 晉升就是將新生代對象移動至老生代
• 一輪 GC 還存活的新生代需要晉升
• To 空間的使用率超過 25%

4、V8 如何回收老生代對象

老年代對象說明

• 老年代對象存放在右側(cè)老生代區(qū)域
• 64位操作系統(tǒng)1.4G，32操作系統(tǒng) 700M
• 老年代對象就是指存活時(shí)間較長的對象

老年代對象回收實(shí)現(xiàn)

• 主要采用標(biāo)記清除、標(biāo)記整理、增量標(biāo)記算法
• 首先使用標(biāo)記清除完成垃圾空間的回收
• 采用標(biāo)記整理進(jìn)行空間優(yōu)化
• 采用增量標(biāo)記進(jìn)行效率優(yōu)化

細(xì)節(jié)對比

• 新生代區(qū)域垃圾回收使用空間換時(shí)間
• 老生代區(qū)域垃圾回收不適合復(fù)制算法

標(biāo)記增量如何優(yōu)化垃圾回收

 

 

 

 

四、Chrome devTools查看內(nèi)存情況

監(jiān)控內(nèi)存的幾種方式(重要)

• 瀏覽器任務(wù)管理器
• Timeline 時(shí)序圖記錄
• 堆快照查找分離 DOM
• 判斷是否存在頻繁的垃圾回收

chrome內(nèi)存泄露、內(nèi)存泄漏分析工具

內(nèi)存分析使用的工具包括chrome任務(wù)管理器、chrome時(shí)間軸(低版本是Timeline，高版本對應(yīng)performance)、chrome memory(低版本是chrome profiles，主要用JS堆快照、JS堆動態(tài)分配時(shí)間軸)。

1) 使用Chrome任務(wù)管理器，了解網(wǎng)頁使用的內(nèi)存量。

2) 使用時(shí)間軸記錄可視化內(nèi)存使用。

3) 使用堆快照標(biāo)識分離的DOM樹(內(nèi)存泄漏的常見原因)。

4) 通過堆動態(tài)分配時(shí)間軸記錄了解在JS堆中分配及回收情況。

首先打開Chrome的無痕模式，這樣做的目的是為了屏蔽掉Chrome插件對我們之后測試內(nèi)存占用情況的影響。

 

 

 

 

然后打開開發(fā)者工具，找到Performance這一欄，可以看到其內(nèi)部帶著一些功能按鈕，例如：開始錄制按鈕;刷新頁面按鈕;清空記錄按鈕;記錄并可視化js內(nèi)存、節(jié)點(diǎn)、事件監(jiān)聽器按鈕;觸發(fā)垃圾回收機(jī)制按鈕等等。

 

 

 

 

簡單錄制一下百度頁面，看看我們能獲得什么，如下動圖所示：

 

 

 

 

從上圖中我們可以看到，在頁面從零到加載完成這個(gè)過程中JS Heap(js堆內(nèi)存)、documents(文檔)、Nodes(DOM節(jié)點(diǎn))、Listeners(監(jiān)聽器)、GPU memory(GPU內(nèi)存)的最低值、最高值以及隨時(shí)間的走勢曲線，這也是我們主要關(guān)注的點(diǎn)。再來看看開發(fā)者工具中的Memory一欄，其主要是用于記錄頁面堆內(nèi)存的具體情況以及js堆內(nèi)存隨加載時(shí)間線動態(tài)的分配情況

 

 

 

 

五、代碼優(yōu)化

代碼優(yōu)化介紹(重要)

• JavaScript中的內(nèi)存管理自動完成;
• 執(zhí)行引擎會使用不同的 GC 算法;
• 算法工作的目的是為了實(shí)現(xiàn)內(nèi)存空間良性循環(huán);
• Performance 工具監(jiān)測內(nèi)存變化;
• JavaScript 是單線程機(jī)制的解釋型語言;

 遞歸導(dǎo)致內(nèi)存溢出 (函數(shù)執(zhí)行中再次調(diào)用自己執(zhí)行)

 

// 下面案例是“死遞歸”  Uncaught RangeError: Maximum call stack size exceeded “內(nèi)存溢出” 
function fn(x) { 
    // console.log(x); 
    fn(x + 1); 
} 
fn(1);  

雖然JavaScript會自動垃圾收集，但是如果我們的代碼沒有及時(shí)清空一些被調(diào)用的東西，就會讓變量一直處于無法回收狀態(tài)。

 全局變量引起

 

function leaks(){   
    leak = 'xxxxxx';//leak 成為一個(gè)全局變量，不會被回收 
} 

 閉包

 

var leaks = (function(){   
    var leak = 'xxxxxx';// 被閉包所引用，不會被回收 
    return function(){ 
        console.log(leak); 
    } 
})() 

 被遺忘的計(jì)時(shí)器

 

var someResource = getData(); 
setInterval(function() { 
    var node = document.getElementById('Node'); 
    if(node) { 
        // Do stuff with node and someResource. 
        node.innerHTML = JSON.stringify(someResource)); 
    } 
}, 1000); 

 eval 使用

使用eval()函數(shù)會帶來安全隱患，eval()函數(shù)的作用是返回任意字符串，當(dāng)作js代碼來處理。

原來代碼：

 

this.formColor = eval('(' + resp.responsePageData.sysColor + ')'); 

 

 

 

 

處理后代碼：

 

this.formColor = JSON.parse(resp.responsePageData.sysColor); 

 

 

 

 

*總結(jié)

在項(xiàng)目過程中，如果遇到了某些性能問題可能跟內(nèi)存泄漏有關(guān)時(shí)，就可以參照本文方法去排查，一定能找到問題所在并給到解決辦法的。

雖然JavaScript的垃圾回收是自動的，但我們有時(shí)也是需要考慮要不要手動清除某些變量的內(nèi)存占用的，例如你明確某個(gè)變量在一定條件下再也不需要，但是還會被外部變量引用導(dǎo)致內(nèi)存無法得到釋放時(shí)，你可以用null對該變量重新賦值就可以在后續(xù)垃圾回收階段釋放該變量的內(nèi)存了。