Crime scene:

let timing = window.performance.timing,
    timingStr = JSON.stringify(timing),
    domContentLoadedEventStart = timing.domContentLoadedEventStart
    console.log("timing:", timing)
    console.log("timingStr:", timingStr)
    console.log("domContentLoadedEventStart:", domContentLoadedEventStart)
Copy the code

The above code execution results:

The value printed out in the three ways is unexpectedly different!

Inference evidence:

See the result: if the print timing object directly, you can get domContentLoadedEventStart value, and through JSON. The stringify or print is timing domContentLoadedEventStart, values are wrong.

  1. The performance. Timing (timing) values were changed during the execution of the three console.log() values, and the sequence of the three console.log() values was changed.
  2. : use the debugger to see real-time data and it’s been amazing debugger state three values are the same the way of printing, timing. DomContentLoadedEventStart is 0.
  3. Use setTimeOut delay and then use three printing methods, and all three values have values, and the same value.

All of this makes me wonder: Is console.log executed asynchronously?

The truth:

Sure enough, domContentLoadedEventStart values before and after different indeed as expected and the console. The log ().

Console.log () prints the object lazily, retrieving the property only when the user clicks to expand it. It explains why the timing we see in the console object domContentLoadedEventStart attribute has a value, and by way of string, or directly print the object when the value is 0. In addition, in the Chrome console, if you print an object whose value has been changed, there will be a clickable “I” next to the object. If you click on the “I”, you can clearly see that the value has been changed.

At last the truth came out. Console.log () is also a very useful tool for our debugger, but printing incorrect values can be misleading. Finally, I went to the CONSOLe.log () API on MDN, and it turns out that MDN already has instructions for special processing when printing objects.