Cara Mengelakkan Dom menyekat oleh LocalStorage dan penyebab lain

mata utama

Menyelaraskan operasi JavaScript seperti pengkomputeran, kemas kini DOM, menyimpan dan mengambil data menggunakan blok LocalStorage atau IndexedDB DOM dan mempengaruhi prestasi front-end.
Pekerja web boleh digunakan untuk mengendalikan proses jangka panjang. Mereka membenarkan aplikasi penyemak imbas utama untuk melancarkan skrip latar belakang dan berkomunikasi menggunakan acara mesej, tetapi mereka tidak mempunyai akses langsung ke DOM atau LocalStorage.
Animasi CSS yang dipercepatkan perkakasan dijalankan dalam lapisan mereka sendiri, yang meningkatkan kelancaran animasi dan tidak disekat oleh pelayar yang paling moden.
Penyimpanan memori menyediakan kemas kini data yang lebih cepat daripada mekanisme penyimpanan berasaskan cakera. Adalah disyorkan untuk menggunakan objek memori untuk meningkatkan prestasi dan menyimpan data secara kekal apabila ia mudah.

Program JavaScript dalam persekitaran berjalan seperti pelayar dan node.js dijalankan pada satu benang. Apabila kod itu dilaksanakan dalam tab Penyemak Imbas, semua operasi lain berhenti: Perintah menu, muat turun, penulisan, kemas kini DOM dan juga animasi GIF.

Pengguna jarang melihat ini kerana pemprosesan berjalan dengan cepat di blok kecil. Sebagai contoh: mengklik butang, membuang acara, menjalankan fungsi, melakukan pengiraan dan mengemas kini DOM. Setelah selesai, penyemak imbas boleh memproses item seterusnya dalam barisan.

Kod JavaScript tidak boleh menunggu sesuatu yang berlaku; Oleh itu, kod JavaScript menggunakan acara dan panggilan balik untuk beroperasi: Mengarahkan proses penyemak imbas atau sistem operasi untuk memanggil fungsi tertentu selepas operasi selesai dan hasilnya siap.

Dalam contoh berikut, apabila peristiwa klik butang berlaku, fungsi pengendali dilaksanakan yang menghidupkan kelas CSS. Apabila animasi selesai, panggilan balik tanpa nama akan memadamkan kelas:

// 单击按钮时引发事件
document.getElementById('clickme').addEventListener('click', handleClick);

// 处理按钮单击事件
function handleClick(e) {

  // 获取要设置动画的元素
  let sprite = document.getElementById('sprite');
  if (!sprite) return;

  // 动画结束时删除“animate”类
  sprite.addEventListener('animationend', () => {
    sprite.classList.remove('animate');
  });

  // 添加“animate”类
  sprite.classList.add('animate');
}

ES2015 memberikan janji, ES2017 memperkenalkan async/menunggu untuk memudahkan pengekodan, tetapi masih menggunakan panggilan balik di bawah permukaan. Untuk maklumat lanjut, lihat "Kawalan Proses dalam JS Moden".

menghalang faktor

Malangnya, beberapa operasi JavaScript akan sentiasa disegerakkan, termasuk:

Jalankan pengiraan
Kemas kini Dom
Penyimpanan dan Ambil Data Menggunakan LocalStorage atau IndexedDB.

Contoh berikut menunjukkan penceroboh yang menggunakan animasi CSS untuk pergerakan dan JavaScript untuk melambai anggota badan. Imej di sebelah kanan adalah gif animasi asas. Klik butang "Tulis" menggunakan operasi 100,000 sessionStorage lalai:

[Codepen Sample Link - CodePen Embed Code hendaklah dimasukkan di sini]

Semasa operasi ini, kemas kini DOM disekat. Dalam kebanyakan pelayar, penceroboh berhenti atau terjebak. Animasi tertentu GIF animasi akan dijeda. Peranti yang lebih perlahan boleh memaparkan amaran "skrip tidak responsif".

Ini adalah contoh yang kompleks, tetapi ia menunjukkan bagaimana operasi asas mempengaruhi prestasi front-end.

Pekerja web

Satu penyelesaian untuk proses jangka panjang ialah pekerja web. Ini membolehkan aplikasi penyemak imbas utama untuk memulakan skrip latar belakang dan berkomunikasi menggunakan peristiwa mesej. Contohnya:

// 单击按钮时引发事件
document.getElementById('clickme').addEventListener('click', handleClick);

// 处理按钮单击事件
function handleClick(e) {

  // 获取要设置动画的元素
  let sprite = document.getElementById('sprite');
  if (!sprite) return;

  // 动画结束时删除“animate”类
  sprite.addEventListener('animationend', () => {
    sprite.classList.remove('animate');
  });

  // 添加“animate”类
  sprite.classList.add('animate');
}

skrip pekerja web:

// main.js
// 是否支持 Web Workers？
if (!window.Worker) return;

// 启动 Web Worker 脚本
let myWorker = new Worker('myworker.js');

// 从 myWorker 接收消息
myWorker.onmessage = e => {
  console.log('myworker sent:', e.data);
}

// 向 myWorker 发送消息
myWorker.postMessage('hello');

Pekerja juga boleh menjana pekerja lain untuk mensimulasikan operasi berulir kompleks. Walau bagaimanapun, fungsi pekerja sengaja terhad, dan pekerja

tidak dapat mengakses DOM atau LocalStorage secara langsung (berbuat demikian sebenarnya akan berbilang javascript dan mengganggu kestabilan penyemak imbas). Oleh itu, semua mesej dihantar sebagai rentetan, yang membolehkan lulus objek yang dikodkan JSON, tetapi tidak membenarkan lulus nod DOM. Pekerja boleh mengakses sifat tetingkap tertentu, WebSockets, dan IndexDB, tetapi mereka tidak memperbaiki contoh yang ditunjukkan di atas. Dalam kebanyakan kes, pekerja digunakan untuk pengiraan jangka panjang-seperti pengesanan sinar, pemprosesan imej, perlombongan bitcoin, dan banyak lagi.

(node.js menyediakan proses kanak -kanak, yang serupa dengan pekerja web, tetapi mempunyai pilihan untuk menjalankan executable yang ditulis dalam bahasa lain.)

Animasi Percepatan Perkakasan

Pelayar yang paling moden tidak menyekat animasi CSS yang dipercepatkan perkakasan yang berjalan dalam lapisan mereka sendiri.

Secara lalai, contoh di atas menggerakkan penceroboh dengan menukar margin kiri. Harta ini dan sifat yang serupa seperti kiri dan lebar menyebabkan penyemak imbas untuk menyiarkan semula dan menarik semula keseluruhan dokumen dalam setiap langkah animasi.

Kecekapan haiwan lebih cekap apabila menggunakan sifat transformasi dan/atau opacity. Ini sebenarnya meletakkan unsur -unsur ke dalam lapisan komposisi yang berasingan supaya GPU dapat menghidupkannya secara individu.

Klik kotak semak "Percepatan Perkakasan" dan animasi akan segera menjadi lebih lancar. Sekarang cuba sessionStorage menulis; Perhatikan bahawa pergerakan anggota masih akan dijeda kerana ini dikawal oleh JavaScript.

Penyimpanan memori

Mengemas kini objek dalam ingatan jauh lebih cepat daripada menggunakan mekanisme penyimpanan yang ditulis ke cakera. Dalam contoh di atas, pilih jenis penyimpanan objek dan klik Tulis. Hasilnya akan berbeza, tetapi ia harus kira -kira 10 kali lebih cepat daripada operasi sessionStorage yang setara.

Memori tidak menentu: Menutup tab atau meninggalkan navigasi akan menyebabkan semua data hilang. Perdagangan yang baik adalah menggunakan objek memori untuk meningkatkan prestasi dan kemudian menyimpan data secara kekal apabila ia mudah - contohnya apabila Page Uninstallation:

Aplikasi permainan atau satu halaman mungkin memerlukan pilihan yang lebih kompleks. Sebagai contoh, titik masa apabila data disimpan:

// myworker.js
// 接收消息时启动
onmessage = e => {
  console.log('myworker received:', e.data);
  // ...长时间运行的进程...
  // 发送回消息
  postMessage('result');
};

tiada aktiviti pengguna (tetikus, sentuhan atau peristiwa papan kekunci) untuk tempoh masa

• jeda permainan atau tag aplikasi di latar belakang (lihat API Penglihatan Halaman)
• Terdapat jeda semulajadi -seperti kematian pemain, menyelesaikan tahap, bergerak di antara skrin rumah, dll.

Prestasi Web

Prestasi web adalah topik hangat. Pemaju kurang ketat oleh sekatan penyemak imbas, dan pengguna mengharapkan prestasi aplikasi seperti sistem operasi yang cepat.

Lakukan sedikit pemprosesan yang mungkin, DOM tidak akan dapat disekat. Nasib baik, terdapat beberapa pilihan apabila tugas lama tidak dapat dielakkan.

Pengguna dan pelanggan mungkin tidak pernah melihat pengoptimuman kelajuan anda, tetapi mereka selalu mengadu apabila aplikasi melambatkan!

Soalan Lazim Mengenai Penyekatan Dom (Soalan Lazim)

apa yang menyekat Dom dan mengapa masalahnya?

blocking dom bermaksud bahawa penyemak imbas tidak boleh menjadikan halaman web kerana ia sedang menunggu skrip untuk melengkapkan beban. Ini akan mengurangkan kelajuan pemuatan laman web, mengakibatkan pengalaman pengguna yang lemah. Penyemak imbas mesti membina pokok DOM dengan menguraikan tag HTML. Semasa proses ini, jika skrip ditemui, ia mesti dihentikan dan dilaksanakan untuk diteruskan. Ini kerana skrip boleh mengubah struktur pokok Dom dan penyemak imbas perlu memastikan ia mempunyai pandangan terkini.

Bagaimana untuk mengelakkan penyekatan DOM?

Terdapat beberapa cara untuk mengelakkan penyekatan DOM. Salah satu cara yang paling berkesan ialah menggunakan skrip pemuatan tak segerak. Ini bermakna skrip akan dimuatkan di latar belakang, manakala seluruh halaman akan terus dimuatkan. Pendekatan lain adalah untuk menangguhkan skrip, yang bermaksud mereka hanya akan dilaksanakan selepas dokumen HTML dihuraikan sepenuhnya. Akhirnya, anda juga boleh memindahkan skrip ke bahagian bawah dokumen HTML supaya mereka adalah kandungan yang dimuatkan terakhir.

Apakah perbezaan antara skrip segerak dan skrip tak segerak?

skrip segerak blok dom membina sehingga ia dimuatkan sepenuhnya dan dilaksanakan. Ini bermakna jika skrip dimuatkan untuk masa yang lama, ia menangguhkan keseluruhan laman web. Sebaliknya, skrip tak segerak tidak menghalang pembinaan dom. Mereka memuat di latar belakang dan boleh dilaksanakan sebaik sahaja mereka siap, walaupun DOM tidak dibina sepenuhnya.

Apakah atribut "menangguhkan" dalam tag skrip?

harta "menangguhkan" dalam tag skrip digunakan untuk menunjukkan bahawa skrip harus dilaksanakan selepas dokumen HTML dihuraikan sepenuhnya. Ini bermakna skrip tidak menghalang pembinaan DOM, dengan itu mempercepatkan masa pemuatan halaman web. Walau bagaimanapun, ini juga bermakna skrip mungkin tidak siap apabila DOM dibina, jadi ia hanya boleh digunakan dengan skrip yang tidak mengubah struktur DOM.

Bagaimanakah ia berguna untuk memindahkan skrip ke bahagian bawah dokumen HTML?

Skrip bergerak ke bahagian bawah dokumen HTML memastikan bahawa mereka adalah kandungan terakhir yang dimuatkan. Ini bermakna bahawa seluruh laman web boleh diberikan tanpa menunggu skrip untuk melengkapkan pemuatan. Walau bagaimanapun, kaedah ini hanya boleh digunakan dengan skrip yang tidak mengubah struktur DOM, kerana mereka mungkin tidak bersedia apabila DOM dibina.

Apakah atribut "async" dalam tag skrip?

atribut "async" dalam tag skrip digunakan untuk menunjukkan bahawa skrip harus dimuatkan secara asynchronously. Ini bermakna skrip akan dimuatkan di latar belakang, manakala seluruh laman web akan terus dimuatkan. Skrip ini boleh dilaksanakan dengan segera apabila siap, walaupun DOM tidak dibina sepenuhnya. Ini dapat meningkatkan masa pemuatan laman web, tetapi ia hanya boleh digunakan untuk skrip yang tidak mengubah struktur DOM.

Apakah kesan penyekatan DOM pada SEO?

Blocking DOM boleh mengurangkan kelajuan pemuatan halaman web, yang akan menjejaskan kedudukan SEOnya secara negatif. Enjin carian seperti Google Regard laman web memuatkan kelajuan sebagai salah satu faktor ranking. Oleh itu, mengelakkan penyekatan DOM sangat penting untuk memastikan bahawa halaman anda berada di kedudukan tinggi dalam hasil enjin carian.

Apakah dom maya dan bagaimana ia membantu?

Maya DOM adalah konsep yang digunakan dalam kerangka JavaScript moden seperti React. Ia adalah satu salinan DOM sebenar, dan perubahan dibuat terlebih dahulu dalam DOM maya, bukan dalam DOM sebenar. Sebaik sahaja semua perubahan selesai, DOM maya akan disegerakkan dengan DOM sebenar melalui proses yang dipanggil koordinasi. Ini mengurangkan bilangan operasi langsung pada DOM sebenar, dengan itu mempercepatkan masa pemuatan laman web.

Bagaimana untuk memeriksa sama ada laman web saya mempunyai masalah menyekat DOM?

Anda boleh menggunakan alat seperti PageSpeed ​​Insights Google untuk memeriksa sama ada laman web anda mempunyai masalah menyekat DOM. Alat ini menganalisis laman web anda dan menyediakan laporan terperinci mengenai prestasi mereka, termasuk sebarang isu yang berpotensi seperti Blocking DOM.

Adakah CSS juga menyebabkan penyekatan DOM?

Ya, CSS juga boleh menyebabkan penyekatan DOM. Apabila penyemak imbas menemui fail CSS, ia mesti berhenti dan memuatkannya untuk terus membuat laman web. Ini kerana fail CSS mungkin mengandungi gaya yang mengubah penampilan laman web. Untuk mengelakkan ini, anda boleh menggunakan kaedah seperti CSS kritikal dan menangguhkan CSS yang tidak kritikal.

Atas ialah kandungan terperinci Cara Mengelakkan Dom menyekat oleh LocalStorage dan penyebab lain. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!