总所周知, VSCode是使用Electron进行开发的桌面端工具
在Electron的性能优化的过程中, 首先需要一个性能测量的标准和方式. 在测量到性能数据的情况下, 再去针对性的进行优化.
VSCode的性能测量
Node后台进程
function _definePolyfillMarks(timeOrigin) {
const _data = [];
if (typeof timeOrigin === 'number') {
_data.push('code/timeOrigin', timeOrigin);
}
function mark(name) {
_data.push(name, Date.now());
}
function getMarks() {
const result = [];
for (let i = 0; i < _data.length; i += 2) {
result.push({
name: _data[i],
startTime: _data[i + 1],
});
}
return result;
}
return { mark, getMarks };
}
渲染进程
{
mark(name) {
performance.mark(name);
},
getMarks() {
let timeOrigin = performance.timeOrigin;
if (typeof timeOrigin !== 'number') {
// safari: there is no timerOrigin but in renderers there is the timing-property
// see https://bugs.webkit.org/show_bug.cgi?id=174862
timeOrigin = performance.timing.navigationStart || performance.timing.redirectStart || performance.timing.fetchStart;
}
const result = [{ name: 'code/timeOrigin', startTime: Math.round(timeOrigin) }];
for (const entry of performance.getEntriesByType('mark')) {
result.push({
name: entry.name,
startTime: Math.round(timeOrigin + entry.startTime)
});
}
return result;
}
};
使用与上报
在每个节点中, 使用perf.mark('startTime');的方式进行标记, 然后在某个节点中, 使用perf.getMarks()获取到标记数据后, 上报到服务端. 完成当前周期的性能测量计算.