JavaScript中的console.log延时计算 最后更新时间:2024年05月17日 #### console.log延时计算 试想一下以下代码在控制台中输出的结果: ```javascirpt const fn = function(length){ const o = { arr: [], key1: 'test', key2: 'test', key3: 'test', key4: 'test', key5: 'test', index: 0 }; console.log(JSON.stringify(o)); console.log(o); console.log('Handling data'); for(let i = 0; i < length; i++){ o.arr.push(i); } o.index = length; console.log(JSON.stringify(o)); console.log(o); }; fn(5); ``` 输出以后,我们展开一下第二行与第五行,会发现一个很奇怪的现象:展开第二行发现,arr里的长度是5,对象的index值居然是5! 定位上述的问题,只需要将鼠标移至行尾的蓝色info标记上,控制台会提示以下内容: `Value below was evaluated just now.` 这句话意味着,展开当前的object的时候,控制台才会去计算出这个对象的key-value,再反馈到控制台中显示。 原来使用Console打印的时候,若发现当前需要打印的内容是一个对象,会将其保存下来,在控制台中先输出一个简要的快照(Snapshot),待开发者需要查看其中详细内容时,再点击展开,返回内存中的值。 这个是控制台的一个已知的坑点,有可能设计该功能是为了避免控制台对大对象深复制输出,导致调试过慢,也有可能是为了方便查看原型链上的属性,但这无疑是开发者调试代码时需要避开的问题。 要避免这种调试问题,建议使用JSON.stringify()进行输出调试,而不是直接打印当前对象。 #### 内存泄漏问题 使用Console打印对象时,会将这个对象的引用保存下来。由于开发者工具在浏览器中默认开启,且默认了“开发者之后需要查看该对象”的行为,就会导致在Console中引入的对象是不会进入GC(垃圾回收)逻辑中的,这就引发了内存泄漏问题。 要避免内存泄漏问题,需要将开发环境与线上环境进行分离,线上环境中避免产生控制台打印的语句,亦可以在项目打包时,将ESLint中的no-console的开关打开 #### js获取不到dom元素问题 可能的情况是页面采用了iframe标签。导致内部嵌入了一个页面,因此js无法通过document获取到标签。 可以先获取到iframe元素。然后通过`contentWindow`方法来拿到内嵌页面的代码。 示例: ````javascript let iframe_box = document.getElementById("tab_b_156249"); let dc = iframe_box.contentWindow.document; let rbc = dc.getElementById("regist_blolk_c"); let title_doms = rbc.getElementsByClassName("content add_ds_class_box regist_blolk"); ````
Comments | NOTHING