javascript - Perbandingan kecekapan berjalan kedua-dua keping kod JS ini

Question

Persekitaran ujian

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

Sebab mengapa saya menimbulkan soalan ini adalah kerana mesej amaran daripada 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;

Kod di atas akan melaporkan amaran pada akhir ribut web, dan maklumat amaran adalah seperti berikut:

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.

Menurut mesej ralat, penyelesaian yang saya buat ialah menggunakan pembolehubah untuk menggantikan objek JS yang diperolehi oleh pemilih yang sama

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;

Sudah tentu tiada amaran dengan cara ini.
Memandangkan kod tersebut menyebut kecekapan larian, saya juga menguji masa larian bagi kedua-dua keping kod ini
Operasi yang sama dijalankan sebanyak 10,000 kali dan diuji tiga kali Jumlah masa larian bagi sekeping kod pertama ialah masing-masing 1372, 1339, 1423.
Sekeping kod kedua Jumlah masa berjalan masing-masing ialah 1407, 1277, dan 1403 Selepas ujian, walaupun tiada amaran, kecekapan operasi tidak dipertingkatkan.

Dan saya baru-baru ini telah menjalani latihan di sebuah syarikat. Saya melihat kod syarikat itu, dan tiada kod yang serupa dengan kod kedua saya.

Masalah saya ialah: pengoptimuman kod kedua saya tidak diperlukan sama sekali. Sebaliknya, mempunyai satu lagi pembolehubah hampir meningkatkan kesukaran penyelenggaraan.

---

Baca jawapan di bawah:

Tambah ujian untuk kod berikut

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;

Keputusan tiga ujian itu ialah: 1338 1348 1404. Masih tiada peningkatan.

Answer 1

Apa yang salah telah ditunjukkan oleh jawapan lain.
Biar saya katakan satu perkara, sebab mengapa anda tidak melihat peningkatan yang ketara dalam kecekapan adalah kerana pengkompil mengoptimumkannya untuk anda Malah, kebanyakan ralat peringkat rendah ini boleh dioptimumkan, contohnya, jika anda mengisytiharkan pembolehubah berulang kali, ia akan dioptimumkan kepada sekali jika anda mengisytiharkannya 100 juta kali , tidak akan ada perbezaan apabila ia berkaitan dengan pelaksanaan.
Apa yang benar-benar boleh menjejaskan prestasi js bukanlah perkara kecil, tetapi ini tidak bermakna anda boleh mengabaikannya, kerana peningkatan pemikiran pengekodan adalah lebih penting daripada peningkatan prestasi kecil itu.

Answer 2

var result_logo=$('#result_logo') hendaklah ditulis di luar badan gelung Apabila menulis kod js, cuba cache objek jquery yang tidak akan berubah
Kod projek anda mempunyai banyak kaedah penulisan berulang, yang tidak bermakna ia adalah kaedah penulisan

Answer 3

Jika anda begini:

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

Ini boleh dioptimumkan. Tetapi pembolehubah yang anda tulis sentiasa objek jquery Menggunakan pembolehubah dan $() adalah sama

Answer 4

Pelayar moden semuanya telah dioptimumkan untuk anda Untuk benar-benar menguji kecekapan, anda boleh mencuba IE8 9 dan 10 untuk melihat sama ada perbezaannya adalah besar. Selain itu, pemilih anda ialah pemilih id, yang lebih pantas Jika anda menukarnya kepada pemilih kelas, perbandingan kecekapan akan keluar.

Answer 5

Perkara yang anda cetak akan menjadi sama setiap kali anda beroperasi, mekanisme caching Chrome telah dioptimumkan

Answer 6

Saya rasa sebab ralat terletak pada ayat ini: warns about duplicated selectors which could be cached., cuba tulis pengisytiharan berubah di luar gelung

Answer 7

Anda menulis kod untuk mendapatkan label dan mengisytiharkan pembolehubah di dalam badan gelung, yang pastinya tidak menambah baik keadaan.

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;

Secara teorinya, menulis dengan cara ini boleh menambah baik sedikit, tetapi kaedah ujian anda tidak saintifik sama sekali dan tidak dapat menggambarkan kecekapan kod sepenuhnya. Selain bergantung pada kecekapan kod, ia juga berkaitan dengan kelajuan rangkaian, dan hasil yang dicerminkan tidak tepat.