javascript - Comparison of the running efficiency of these two pieces of JS code

Question

test environment

百度首页
谷歌浏览器控制台

The reason why this question is raised is because of a warning message from webstorm.

var startTime=new Date().getTime();
for(let i=0;i<10000;i++){
    console.log($('#result_logo').text());
    console.log($('#result_logo').html());
}
var endTime=new Date().getTime();
var myTime=endTime-startTime;
myTime;

The above code will report a warning at the end of webstorm, and the warning information is as follows:

Checks that jQuery selectors are used in an efficient way. 
It suggests to split descendant selectors which are prefaced with ID selector 
and warns about duplicated selectors which could be cached.

According to the error message, the solution I thought of was to use variables to replace the JS objects obtained by the same selector

var startTime=new Date().getTime();
for(let i=0;i<10000;i++){
    var result_logo=$('#result_logo');
    console.log(result_logo.text());
    console.log(result_logo.html());
}
var endTime=new Date().getTime();
var myTime=endTime-startTime;
myTime;

Of course there will be no warning.
Since the code mentions running efficiency, I also tested the running time of these two pieces of code.
The same operation was run 10,000 times and tested three times. The total running time of the first piece of code was 1372, 1339, 1423
The total running time of the second piece of code is 1407, 1277, and 1403 respectively.
After testing, although there is no warning, the running efficiency has not been improved.

And I was an intern at a company recently. I looked at the company's code, and there was nothing similar to my second code. There were countless codes that repeatedly performed selector operations.

My problem is: the optimization of my second code is not necessary at all. On the contrary, having one more variable virtually increases the difficulty of maintenance.

---

Read the answer below:
Add the test of the following code

var startTime=new Date().getTime();
for(let i=0;i<10000;i++){
    console.log($('#result_logo').text());
    console.log($('#result_logo').html());
}
var endTime=new Date().getTime();
var myTime=endTime-startTime;
myTime;

The results of the three tests are: 1338 1348 1404. Still no improvement.

Answer 1

What is wrong has been pointed out by other answers.
Let me say one thing, the reason why you don’t see a significant improvement in efficiency is because the compiler optimizes it for you. In fact, most of these low-level errors can be optimized away. For example, if you declare a variable repeatedly, it will be optimized to once if you declare it 100 million times. , there will be no difference when it comes to execution.
What can really affect the performance of js is not such a small point, but it does not mean that you can ignore it, because the improvement of coding thinking is much more important than that little performance improvement.

Answer 2

var result_logo=$('#result_logo') should be written outside the loop body. When writing js code, try to cache jquery objects that will not change.
Your project code has many repeated writing methods, which does not mean that it is optimal. Writing method

Answer 3

If you are like this:

var res = document.querySelector("#result_logo");
console.log(res.innerHTML);
console.log(res.outerHTml);

This can be optimized. But the variable you write is always a jquery object. Using variables and $() are the same

Answer 4

Modern browsers have all been optimized for you. To truly test the efficiency, you can try IE8 9 and 10 to see if the difference is big. In addition, your selector is an id selector, which is faster. If you change it to a class selector, the efficiency comparison will come out.

Answer 5

The things you print will be the same every time you operate, Chrome’s caching mechanism has been optimized

Answer 6

I think the reason for the error lies in this sentence: warns about duplicated selectors which could be cached., try writing the variable declaration outside the loop

Answer 7

You wrote the code for getting labels and declaring variables inside the loop body, which definitely didn’t improve things.

var startTime=new Date().getTime(),
    result_logo=$('#result_logo');
for(let i=0;i<10000;i++){
    console.log(result_logo.text());
    console.log(result_logo.html());
}
var endTime=new Date().getTime(),
    myTime=endTime-startTime;
myTime;

Theoretically, writing this way can improve things a bit, but your testing method is not scientific at all and cannot fully reflect the efficiency of the code. In addition to relying on code efficiency, it is also related to network speed, and the reflected results are not accurate.