你踩过console.log的坑吗?从performace说起

问题

笔者最近在自己搭建一个基于rxjs的插件化前端监控平台,其中在统计页面导航数据时,用到了performace进行统计,简化代码如下

逻辑上,没有问题,本地调试一下,控制台输出

好像时间信息也都算出来了,等等,ssl是0理解,,tcp是0理解,但是为啥fullLoad会是0啊?,不可能页面加载不耗时啊?! 数据都是从entry中拿的,打印一下

不是哥们entry.loadEventStart - entry.startTime也不是0啊!!! 我眼睛有问题还是代码有问题?之前一直这么写的啊!不行,就算是闹鬼了我也得解决!

真相

经过一番排查,原因竟然是性能条目采集时机 和你最常用的console.log 的问题! 首先,在代码中通过const entries = performance.getEntriesByType("navigation");去访问导航条目时,因为,这些数据获取有先后,所以浏览器是动态向entries中填充的各种数据,也就是说entry中的类似fetchStartloadEventStart这两个属性被复制的时间是不同的,他们随着时间被先后填充,当在代码中访问的时候loadEventStart还没有被浏览器赋值,此时去计算entry.loadEventStart - entry.startTime拿的是运行到这行代码时的快照值!

不对啊?我console.log中不是有吗?

这就是最逆天的了,console.log是同步运行的,chrome 的控制台对应引用类型的数据读取是默认值读取一层数据,当你点击展开时,会再去堆内存中读取属性值和下一层的数据。

javascript 复制代码
const obj = { a: 1 };
console.log(obj);
obj.a = 2;

猜猜上面这三行代码在控制台怎么打印的?

我给他点开呢?

你最信任的console.log也欺骗了你!

希望大家阅读本文能有所收获!笔者目前还是大二的小白,见识短浅,若有错误还请评论区指出 想要讨论前端react技术站相关技术或者单纯想交个朋友的可以加笔者的联系方式:

VX:hutianyv869170

QQ:1394139263

相关推荐
子兮曰6 小时前
Bun v1.3.14 深度解析:Image API、HTTP/3、全局虚拟存储与五十项变革
前端·后端·bun
kyriewen7 小时前
今天,百年巨头一次砍了9200人,而一个离职科学家的实话让全网睡不着觉
前端·openai·ai编程
问心无愧05137 小时前
ctf show web 入门42
android·前端·android studio
kyriewen7 小时前
老板逼我上AI,我偷偷在浏览器里跑LLaMA,省下20万API费
前端·react.js·llm
Beginner x_u8 小时前
前端八股整理(手写 02)|数组转树、数组扁平化、随机打乱一个数组
前端·数组·数组转树·数组扁平化
KaMeidebaby8 小时前
卡梅德生物技术快报|禽类成纤维细胞 FISH 实验:鸟类性别染色体基因定位技术实现与数据验证
前端·数据库·其他·百度·新浪微博
天若有情6738 小时前
前端高阶性能优化:跳出传统懒加载与预加载,基于用户行为做轻量预判加载
前端·性能优化
小小小小宇8 小时前
前端转后端:SQL 是什么
前端
张元清9 小时前
React Observer Hooks:7 种监听 DOM 而不写样板代码的方式
前端·javascript·面试
广州华水科技9 小时前
单北斗GNSS变形监测是什么?主要有怎样的应用与优势?
前端