About JS console Log() is a problem caused by synchronous or asynchronous

Find the problem

I'm learning 《Vue.js Design and implementation 》 In the renderer section , It was found that the virtual... Was modified after the rendering function was called DOM Value , What you get in the rendering function is a new virtual DOM.

const vnode = {
    
    type: "div",
    children: [
        {
    
            type: "p",
            children: "text",
        },
    ],
};
const app = document.querySelector("#app");
renderer.render(vnode, app);
vnode.children = [
    {
    
        type: "input",
        props: {
    
            value: " Please enter keywords ",
        },
    },
];

• Print the virtual in the render function DOM Value , The findings are
  

Change virtual DOM The code to put setTimeout Function

setTimeout(() => {
    
    vnode.children = [
        {
    
            type: "input",
            props: {
    
                value: " Please enter keywords ",
            },
        },
    ];
});

It is found that the print result has not changed, and it is still a modified virtual DOM.
then setTimeout The callback time of is modified to 2000 ms, Just got the result I wanted .

From this, it can be inferred that , There is code in the rendering function that causes asynchronous operation .

Location problem

According to the rendering process , Found code in the code that could cause asynchrony ：

1. document.createElement(localName, options);
2. insertBefore(node, child)

Then go Dom Standard Find the specific definitions of these two methods in ：
stay createElement Step 6 of returns to creating an element Result

So I went to check creating an element The definition of ：

But there is no information about asynchronous operation found in the definition .
Then go and check insertBefore The detailed definition of , The result is the same , There is no evidence that insertBefore Asynchronous operation is involved .
Then synchronous operation leads to asynchronous result , Then the problem is probably not in the rendering function , So I use console.log() Print virtual DOM, Sure enough , Get the latest virtual DOM：

console.log(vnode);
setTimeout(() => {
    
    vnode.children = [
        {
    
            type: "input",
            props: {
    
                value: " Please enter keywords ",
            },
        },
    ];
});

After checking some posts, I found that someone mentioned in 《 You don't know JavaScript Medium volume 》 The answer to the question in ：

Asynchronous console

There is no specification or set of requirements to specify console.* How method families work —— They're not JavaScript A formal part , But by the host environment ( Please refer to “ Type and grammar ” part ) Add to JavaScript Medium . therefore , Different browsers and JavaScript The environment can be achieved as it wishes , Sometimes it causes confusion .
In particular , on certain conditions , Some browsers console.log(…) It doesn't output the incoming content immediately . The main reason for this is , In many programs ( It's not just JavaScript) in ,I/O It's a very slow blocking part . therefore ,( From page /UI From the perspective of ) The browser processes the console asynchronously in the background I/O Can improve performance , At this point, users may not even realize that it happened .

give an example

At the same time, the book gives the solution ：

If we encounter this rare situation , The best choice is JavaScript Use breakpoints in debugger , Don't rely on console output . The suboptimal solution is to serialize the object into a string , To enforce once “ snapshot ”, Such as through JSON.stringify(…).

Problem solving ：

let vnodeStr = JSON.parse(JSON.stringify(vnode));
console.log(vnodeStr);

Reference material

1. Dom Standard
2. console.log Is an asynchronous flow ？ I feel like I stepped on a pit
3. 《 You don't know JavaScript Medium volume 》