Menemui API Masa Resolusi Tinggi

mata teras

API Masa Resolusi Tinggi adalah antara muka JavaScript yang menyediakan masa semasa dengan resolusi submillisecond, tidak terjejas oleh sisihan atau pelarasan jam sistem, dan menyediakan pilihan pengukuran prestasi yang lebih dipercayai dan tepat daripada kaedah
• tradisional. Date.now()
API masa resolusi tinggi tidak disokong secara meluas oleh semua pelayar, terutamanya menyokong Internet Explorer 10, Firefox 15 (Unprefixed), dan Chrome 20 (dengan awalan "Webkit"). Adalah disyorkan untuk menggunakan fungsi untuk menguji sokongan penyemak imbas dan penggunaan awalan.
pemaju dengan mudah boleh mengintegrasikan API masa resolusi tinggi ke dalam kod mereka dengan menggantikan
• dengan Date.now(), dengan itu meningkatkan ketepatan pengukuran tanpa perubahan besar kepada struktur kod. performance.now()

Di dunia hari ini, prestasi adalah penting. Pemaju perlu dapat mengukur prestasi perisian mereka dengan tepat. Bagi mereka yang terlibat dalam pembangunan web, W3C menyediakan API jenama baru untuk jumlah masa yang boleh dipercayai, yang merupakan API masa resolusi tinggi. Artikel ini akan meneroka API masa resolusi tinggi dan menunjukkan cara menggunakannya.

Untuk mengukur prestasi fungsi, pemaju web digunakan untuk menggunakan kaedah JavaScript. Biasanya, kod masa kelihatan seperti ini:

Kaedah

Date.now() Mendapatkan setem masa semasa berdasarkan masa sistem. Malangnya, ketepatannya berbeza -beza antara agen pengguna yang berbeza dan oleh itu tidak boleh dipercayai. Untuk menyelesaikan masalah ini, W3C menyeragamkan API masa resolusi tinggi. API digambarkan sebagai "antara muka JavaScript yang menyediakan masa semasa resolusi submillisecond dan tidak terjejas oleh sisihan atau pelarasan jam sistem

". Pada 23 Oktober 2012, spesifikasi menjadi cadangan cadangan W3C -langkah terakhir sebelum menjadi cadangan. Pada 17 Disember, ia menjadi cadangan W3C (dikemas kini pada 17 Disember).

var startTime = Date.now();

// 一个耗时的函数
foo();
var test1 = Date.now();

// 另一个耗时的函数
bar();
var test2 = Date.now();

// 打印结果
console.debug("Test1 time: " + (test1 - startTime));
console.debug("Test2 time: " + (test2 - test1));

Date.now() bagaimana untuk bekerja dengan api masa resolusi tinggi

Saya harus mengakui bahawa ini adalah API paling mudah yang pernah saya baca kerana ia hanya mengandungi satu kaedah. API ini memanjangkan antara muka prestasi, yang juga digunakan oleh API masa navigasi. Jika anda tidak pernah mendengarnya, lihat API Masa Navigasi: Cara Menganalisis Page Memuat dengan berkesan. Satu -satunya cara untuk didedahkan ialah now(), yang mengembalikan DOMHighResTimeStamp yang menunjukkan masa semasa dalam milisaat. Timestamp sangat tepat, dengan ketepatan satu ribu milisaat. Perhatikan bahawa walaupun Date.now() mengembalikan bilangan milisaat yang berlalu sejak 00:00:00 UTC pada 1 Januari 1970, performance.now() mengembalikan bilangan milisaat yang dipanggil dari performance.timing.navigationStart() (navigasi dokumen bermula) Bahagian pecahan adalah mikroseconds. Satu lagi perbezaan penting antara performance.now() dan Date.now() adalah bahawa yang terakhir meningkat secara monotonik, jadi perbezaan antara kedua -dua panggilan tidak akan menjadi negatif. Mungkin anda tertanya -tanya bagaimana API Masa Resolusi Tinggi akan mengubah kod anda. Berita baiknya ialah ia tidak akan mengubah apa -apa. Anda boleh meningkatkan ketepatan pengukuran anda dengan hanya menggantikan performance.now() dengan Date.now(). Dengan ini, kod sebelumnya akan ditulis semula seperti berikut: performance.now()

var startTime = Date.now();

// 一个耗时的函数
foo();
var test1 = Date.now();

// 另一个耗时的函数
bar();
var test2 = Date.now();

// 打印结果
console.debug("Test1 time: " + (test1 - startTime));
console.debug("Test2 time: " + (test2 - test1));

keserasian

Pada masa ini, hanya beberapa pelayar yang menyokong API masa resolusi tinggi. Satu -satunya pelayar desktop yang menyokong API ini ialah Internet Explorer 10, Firefox 15 (Unprefixed), dan Chrome 20 (dengan awalan "WebKit",

). Chrome seolah -olah menggunakan versi yang tidak disusun bermula dengan versi 24. Pada masa penulisan, tiada pelayar mudah alih menyokong API ini. Oleh kerana julat sokongan tidak luas, fungsi pertama kali diperlukan untuk menguji situasi sokongan penyemak imbas dan sama ada ia diawali. Fungsi berikut akan mengembalikan rentetan kosong apabila penyemak imbas menggunakan versi API yang tidak disusun. Jika versi prefixed digunakan, awalan dikembalikan. Jika API tidak disokong, kembali NULL. performance.webkitNow()

var startTime = performance.now();

// 一个耗时的函数
foo();
var test1 = performance.now();

// 另一个耗时的函数
bar();
var test2 = performance.now();

// 打印更精确的结果
console.debug("Test1 time: " + (test1 - startTime));
console.debug("Test2 time: " + (test2 - test1));

Untuk penyemak imbas yang tidak menyokong API ini, anda boleh menggunakan shim. Penulis Shim Tony Gentilcore adalah salah satu penyumbang kepada API. Dalam jawatannya bertajuk "A Better Timer for JavaScript", Gentilcore menulis kod yang pertama mencari sokongan asli dan kemudian menggunakan kaedah

sebagai sandaran. Kodnya kelihatan seperti ini: Date.getTime()

function getPrefix() {
  var prefix = null;
  if (window.performance !== undefined) {
    if (window.performance.now !== undefined)
      prefix = "";
    else {
      var browserPrefixes = ["webkit","moz","ms","o"];
      // 测试所有厂商前缀
      for(var i = 0; i < browserPrefixes.length; i++) {
        if (window.performance[browserPrefixes[i] + "Now"] != undefined) {
          prefix = browserPrefixes[i];
          break;
        }
      }
    }
  }
  return prefix;
}

Mengintegrasikan semua Kandungan

Bahagian ini akan membimbing anda melalui halaman demo mudah. Demo akan terlebih dahulu menguji sokongan penyemak imbas, dan kemudian menggunakan fungsi yang dipanggil

yang bergantung pada dua fungsi maya untuk penanda aras menggunakan kaedah doBenchmark. Perhatikan bahawa saya memperkenalkan fungsi API performance.now(). Tujuannya adalah untuk mengelakkan pertindihan yang tidak perlu dan menjadikan kod lebih ringkas. Kod sumber untuk demonstrasi adalah seperti berikut: (kod sampel yang panjang ditinggalkan di sini kerana ia tidak sepadan dengan keperluan soalan dan terlalu panjang) getTime()

Kesimpulan

Dalam artikel ini, saya telah merangkumi API masa resolusi tinggi dan cara menggunakannya. Seperti yang saya nyatakan, ia belum disokong secara meluas, jadi untuk menguji aplikasi web anda dengan tepat, anda perlu menunggu seketika. Walau bagaimanapun, seperti yang anda lihat, API sangat mudah kerana ia hanya mengandungi satu kaedah. Oleh itu, apabila sokongan penyemak imbas diperbaiki, penghijrahan ke masa resolusi tinggi akan cepat dan mudah.

(bahagian Soalan Lazim ditinggalkan di sini kerana ia tidak sepadan dengan keperluan soalan dan terlalu panjang)

Atas ialah kandungan terperinci Menemui API Masa Resolusi Tinggi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!