技巧
-
將文件加入小黑盒，
f10、f11下一步時(shí)可跳過小黑盒文件
Sources菜單中找到j(luò)s文件，打開文件后，右鍵菜單中選擇Blackboxing script。
-
取消小黑盒文件
a、在Source菜單中找到j(luò)s文件，右鍵菜單選擇Stop Blackboxing。
b、ctrl+shift+p，然后輸入black，選擇Show Blackboxing。
第一步
第二步 -
由事件斷點(diǎn)尋找業(yè)務(wù)代碼
a、點(diǎn)擊click事件監(jiān)聽
b、點(diǎn)擊后，然后f11進(jìn)入業(yè)務(wù)代碼查看邏輯。 -
查看函數(shù)/方法調(diào)用先后關(guān)系
這個(gè)需要使用查看call stack（調(diào)用棧），假如A調(diào)用了B，B調(diào)用了C，C調(diào)用了D，則代碼暫停在D中的時(shí)候，call stack中就是排列著：
D
C
B
A
接著執(zhí)行完D后，返回到C中執(zhí)行，并暫停，call stack中就是排列著：
C
B
A
接著執(zhí)行完C后，返回到B中執(zhí)行，并暫停，call stack中就是排列著：
B
A
callStack調(diào)用演示.gif
可以執(zhí)行
Restart Frame直接回跳到某一個(gè)棧函數(shù)，重新執(zhí)行。
-
【Performance菜單】中，放大、縮小、左移、右移
選擇部分后，可以使用W、A、S 和 D鍵調(diào)整您的選擇。W和S分別代表放大和縮小。A和D分別代表左移和右移 -
【Performance菜單】頁面刷新時(shí)的節(jié)點(diǎn)
在火焰圖上看到一到三條垂直的虛線。藍(lán)線代表 DOMContentLoaded 事件。 綠線代表首次繪制的時(shí)間。 紅線代表 load 事件
-
合理使用will-change
CSS 屬性will-change為web開發(fā)者提供了一種告知瀏覽器該元素會(huì)有哪些變化的方法，這樣瀏覽器可以在元素屬性真正發(fā)生變化之前提前做好對(duì)應(yīng)的優(yōu)化準(zhǔn)備工作。 這種優(yōu)化可以將一部分復(fù)雜的計(jì)算工作提前準(zhǔn)備好，使頁面的反應(yīng)更為快速靈敏。
當(dāng)元素變化之前和之后通過腳本來切換 will-change 的值。
例如：
var el = document.getElementById('element');
// 當(dāng)鼠標(biāo)移動(dòng)到該元素上時(shí)給該元素設(shè)置 will-change 屬性
el.addEventListener('mouseenter', hintBrowser);
// 當(dāng) CSS 動(dòng)畫結(jié)束后清除 will-change 屬性
el.addEventListener('animationEnd', removeHint);
function hintBrowser() {
// 填寫上那些你知道的，會(huì)在 CSS 動(dòng)畫中發(fā)生改變的 CSS 屬性名們
this.style.willChange = 'transform, opacity';
}
function removeHint() {
this.style.willChange = 'auto';
}
-
手機(jī)的cpu和網(wǎng)速可能不如pc，要調(diào)低參數(shù)
image.png -
快速定位點(diǎn)擊事件對(duì)應(yīng)的代碼邏輯
1、F12打開devtool
2、切換到Source，選擇event listener breakpoints下的Mouse下的click事件
3、點(diǎn)擊按鈕，此時(shí)發(fā)現(xiàn)如果進(jìn)入jquery這樣的類庫(kù)，可以script blackbox加入黑盒，跳過此文件中的暫停。重新刷新頁面后，再次點(diǎn)擊，這次發(fā)現(xiàn)直接跳過了jquery。（注意：script blackbox加入黑盒的必須是jquery.min.js原版，而不是jquery.min.js:formatted版本。）
4、耐心的不斷的F11，知道進(jìn)入點(diǎn)擊代碼為止。 - 查看函數(shù)調(diào)用棧call stack
<button onclick="myFunction()">跟蹤軌跡</button>
<script>
function myFunction() {
myOtherFunction();
}
function myOtherFunction() {
console.trace();
}
</script>
控制臺(tái)輸出
- 代碼執(zhí)行計(jì)時(shí)器time和timeend
console.time('testForEach');
// (寫一些測(cè)試用代碼)
console.timeEnd('testForEach')
//輸出：testForEach: 0.00390625ms
- 以表格形式打印對(duì)象
json={a:1,b:2,c:{c1:1,c2:2,c3:3}}
console.table(json)
控制臺(tái)輸出
-
查看內(nèi)存使用情況
如果你發(fā)現(xiàn)性能問題很難分析，可能還要考慮是否有內(nèi)存泄露，你可以使用console.memory（注意memory是console的屬性，不是函數(shù)），來查看當(dāng)前的堆的使用情況。
usedJSHeapSize表示：JS 對(duì)象（包括V8引擎內(nèi)部對(duì)象）占用的內(nèi)存數(shù)
totalJSHeapSize表示：可使用的內(nèi)存
jsHeapSizeLimit表示：內(nèi)存大小限制
通常，usedJSHeapSize不能大于totalJSHeapSize，如果大于，有可能出現(xiàn)了內(nèi)存泄漏。
參考文檔
-
newwork中查看各請(qǐng)求資源的依賴關(guān)系
通過按住Shift并且把光標(biāo)移到資源名稱上，可以查看該資源是由哪個(gè)對(duì)象或進(jìn)程發(fā)起的（請(qǐng)求源）和對(duì)該資源的請(qǐng)求過程中引發(fā)了哪些資源（依賴資源）。在該資源的上方第一個(gè)標(biāo)記為綠色的資源就是該資源的發(fā)起者（請(qǐng)求源），有可能會(huì)有第二個(gè)標(biāo)記為綠色的資源是該資源的發(fā)起者的發(fā)起者，以此類推。
在該資源的下方標(biāo)記為紅色的資源是該資源的依賴資源。
-
代碼非正常結(jié)束，但是控制臺(tái)沒有報(bào)錯(cuò)
這種情況可能是錯(cuò)誤代碼被包含在了try catch中，可使用開啟控制臺(tái)異常捕獲斷點(diǎn)模式，
未開啟捕獲try中異常
開啟捕獲try中異常
常見優(yōu)化方案
下面是一些常見的CSS問題
-
大開銷樣式計(jì)算影響響應(yīng)或動(dòng)畫
任何會(huì)更改元素幾何形狀的 CSS 屬性，如寬度、高度或位置；瀏覽器必須檢查所有其他元素并重做布局。避免會(huì)觸發(fā)重排的CSS屬性 -
復(fù)雜的選擇器影響響應(yīng)或動(dòng)畫
嵌套選擇器強(qiáng)制瀏覽器了解與所有其他元素有關(guān)的全部?jī)?nèi)容，包括父級(jí)和子級(jí)。盡量在CSS中引用只有一個(gè)類的元素
