【笔记】Chrome浏览器的性能调试(performance)工具使用和代码优化

简介

记录chrome性能页签的使用和代码优化

在RK3528上通过浏览器访问视频网站并播放视频, 但是由于性能问题, 加载界面缓慢, 视频播放卡顿(1-2帧每秒)

跟踪到下图2个方法时, 用时出现了分叉,点击右侧的代码行数链接跳转到具体的代码位置
一般会自动格式化, 如果没有, 可以点击左下角的花括号
开启资源覆盖功能: 如果Page旁边不是Overrides, 点击那2个大于符号后选择, 然后点击Select选择一个空白文件夹 注意是空白文件夹
在文件名上右键选择Override content, 就可以在右侧看到对应的文件列表
- 在打开控制台的情况下, 刷新界面会优先加载Override的内容
- 如果关闭控制台, 刷新界面则会加载网络的原始内容
并且文件上有个小圆圈, 点击文件名打开该文件, 可以查看到文件内容
- 后续如果不需要了, 可以在文件夹删除此文件
打开刚才选择的文件夹, 在里面找到该文件, 用记事本或其他软件打开 不要在上面显示的代码页签中直接编辑文件, chrome会保存美化后的代码, 导致刷新页面后解析文件时非常卡, 网页白屏
添加代码, 排查方法中各代码块运行耗时

js 复制代码

// 在方法开头添加
const startTime = performance.now();
// 在需要统计的位置添加用时记录
console.log(' code user', performance.now()-startTime);

用记事本打开该文件, 内容是压缩后的, 不便于查看和编辑, 可以只美化部分代码, 在方便查看的同时不会导致浏览器卡顿, 以前文截图中的ik方法为例:
- ik方法前有特殊字符串ih[wX(0x607)+'ve'](去掉空格后), 在记事本中搜索, 可找到代码的开始位置
- 返回控制台, 向下查看代码找到方法的结束位置, 找到另一个特殊字符串ih[wX(0x11bc)+wX(0x115c)]
- 返回记事本搜索该字符串找到结束位置
- 将这2个方法之间的代码替换为美化后的代码
经过排查, 发现以下问题
- 其中的for操作的Uint8Array对象长度非常大
- 对于相同的索引区间, 先进行置0, 再拷贝填充
- 调用wasm方法
解决方法
- 对于置0后无拷贝的代码块, 改用Uint8Array的fill方法
- 对于置0后拷贝的代码块, 改用Uint8Array的set方法
- 对于先创建数组后进行拷贝的代码块, 改用Uint8Array的slice方法
- wasm看不懂