This is the 19th day of my participation in the Genwen Challenge

Console console.log() prints a lot of logs. Does it affect browser lag?

Why do I write this article? I took over an old project and needed to optimize the performance of the project. When I opened F12, I found that console.log() had written too much content, which you couldn’t imagine. After CTRL+SHIFT+DELETE, the speed is fast again. There are signs that there must be a memory leak, because it is the old system, the front and back end is not separate, first need to convince the responsible person, the online code to DELETE console.log, today will not explain how to DELETE console.log, first analysis. Why does the online code delete console.log

Console.log () is intended to print information to the browser console, which is often used for debugging and analysis during development, but many people forget to turn it off in the live code, resulting in a constant output of printout information.

(1) console.log: may cause memory leaks. (2) console.log: the object passed to console.log cannot be garbage collected. (3) console.log: it is a macro task and takes time to executeCopy the code

Check Memory and compare console.log with output without console.log: It is best not to output console.log large objects in the page, which will affect the overall performance of the page.

1, console.time

Usually we look at the execution time of a piece of code for performance debugging analysis.

First remember: console.log objects are not collected by the browser garbage collection mechanism and cause browser stutteringCopy the code
Console.time () corresponds to the start button in the stopwatch console.timelog () corresponds to the turn-by-turn/point-by-turn timing in the stopwatch console.timeend () corresponds to the end of the timerCopy the code
Parse (json.stringify (new Object()))) console.timeEnd('time')) Print: time: 1.572021484375 msCopy the code
console.time('time')
setTimeOut(() = > {
   console.timeEnd('wait')},1000)

wati: 1000ms
Copy the code

2, console.count

This is a counter that passes the name of a function and prints the number of times that function has been called

Let a = () => {console.count(' call a')} let b = () => {console.count(' call b')} a() b() Input: Call a:1 Call b:1Copy the code

3, console.assert

If I guess the expression is true or false, I can type my message

Console. assert(parameter 1, parameter 2), which takes two arguments:

The first argument is the assertion condition, which is what should happen.

The second parameter is a printed prompt if the assertion condition is not met.

console.assert(a === 3."The value of A is not 3!");
Copy the code

Assertion functions are useful, if not for unit testing purposes, but for your own code to ensure correctness. It makes our output cleaner. Of course, you can also write if statements.

4, console.clear

This function is often used in multi-person projects, especially if many project team members like to print console.log. You can use console.clear when debugging, especially if you don’t want to see their results.

console.clear()
console.log(data)
Copy the code

5, console.dir

In most cases, console.dir() and console.log() look similar, and when you print DOM element information, you’ll notice that dir is more verbose

Let element = document.getelementById ('root')Copy the code

console.log(element)

<div class="root">
   <img class="ssse" src="https:/xxxx">
    <meta itemprop="commentCount" content="24"></meta>
    <div class="ble">
      <div class="Rtr">
        <span class="Rix">Vue</span><span class="p">.</span>
      </div>
    </div
</div>   
Copy the code

console.dir(element)

div#root
accessKey: ""
align: ""
assignedSlot: null
attributeStyleMap: StylePropertyMap {size: 0}
attributes: NamedNodeMap {0: id, id: id, length: 1}
autocapitalize: ""
baseURI: "https://www.zhihu.com/question/61986999"
childElementCount: 1
childNodes: NodeList [div]
children: HTMLCollection [div]
classList: DOMTokenList [value: ""]
className: ""
clientHeight: 2763
clientLeft: 0
clientTop: 0
clientWidth: 743
contentEditable: "inherit"
dataset: DOMStringMap {}
dir: ""
draggable: false
firstChild: div
firstElementChild: div
hidden: false
id: "root"
innerHTML: "<div><div class="LoadingBar"></div><div><header ro"
inputMode: ""
isConnected: true
isContentEditable: false
lang: ""
lastChild: div
lastElementChild: div
localName: "div"
namespaceURI: "http://www.w3.org/1999/xhtml"
nextElementSibling: script#js-clientConfig
nextSibling: script#
Copy the code

6, console.warn

The only difference is that the output text is yellow. Specifically, if the error level is defined for the log, the output is at the warning level, not the information level, making it stand out from the output of many logs

console.warn('This is a warning.') the output is: yellow font, which is a warning ⚠️Copy the code

Console. log, debugger differences

These can all be used for debugging.

Debuuger: In the specified code, add the debugger, or open the browser F12, add F12 in the pointing place, through the execution of the project, step by step to observe the execution of variables and functions

Console.log: Add console.log to the functions and variables in the pointer, dayin the results to the browser Console, and do process analysis, both of which speed up our development

In terms of accuracy, console.. Log is more accurate than debugger, because in our code, there are a lot of asynchronous events, there are also a lot of listening methods, or life cycle functions, their execution order or determine the storage of the value of the variable, affect different execution results, debugger can not see the code execution order. You can cause yourself unimaginable problems, and I’ve been on the wrong end of this a few times, because calling the Debugger speeds up some asynchronous requests that would not actually complete without the Debugger. This will lead to normal functions when we develop, why there will be problems after testing or production

You can use the browser debugger breakpoint to view complex functions, such as asynchronous requests, event listeners, or lifecycle functions. The best way to debug is to use console.log.Copy the code

Eight,

For code that has passed the test and is about to be sent to the production environment, avoid large amounts of console.log, which may affect page performance and may cause memory leaks. Develop the habit of using console.log during development. Try not to use the debugger to troubleshoot problems.