Jadikan halaman web anda lebih cepat

Apakah itu DOM? Apa yang ia makan?

DOM (Model Objek Dokumen) ialah asas halaman web dan membangunkannya. Ia adalah antara muka pengaturcaraan untuk dokumen HTML dan XML, yang mewakili struktur dokumen dalam objek seperti pokok. Dengan dahan dan daun. Setiap elemen, atribut dan sekeping teks dalam dokumen menjadi nod dalam pokok ini. Ia membolehkan JavaScript berinteraksi dengan elemen HTML, mengubah suainya atau menambah elemen baharu. Ini adalah ringkasan kasar tentang perkara yang dialami setiap orang di web, interaksi, kebolehubahan, isyarat dan elemen visual dinamik. Apabila anda mengklik butang atau menu berkilat, otak anda menjangkakan sesuatu akan berlaku. Kepada ayat untuk ditukar, kepada halaman baharu untuk dimuatkan atau ke pop timbul dengan tanda semak hijau memberitahu kami bahawa pesanan dalam talian kami telah berjaya dibayar.

Memanipulasi DOM terlalu pantas, setiap saat, adalah suatu larangan yang besar untuk pengekalan pengguna atau interaksi asas daripada pengguna. Walaupun dengan semua tingkah laku dinamik yang boleh kami cipta dan meluaskan pengalaman pengguna, penggunaan manipulasi DOM yang berlebihan boleh menjadi sangat mengecewakan. Dan pepatah terakhir sentiasa dari pengguna. Jika anda mempunyai operasi penting yang berlaku di latar belakang halaman anda, seperti pengambilan data, tetapi prestasi hanya meningkat dan menjadi lebih teruk pada minit selepas pengguna berinteraksi dengannya, ia boleh menjadi sangat sukar dan menakutkan untuk menentukan titik tercekik.

Contoh cara mudah menggunakan cara asas melakukan sesuatu dan melakukannya dengan lebih pantas, ialah menggunakan textContent daripada vanilla js. Ya, saya tahu. Selalunya kita memerlukan kitaran hidup yang kompleks untuk komponen yang sangat dinamik dan boleh berubah sehinggakan kita perlu menggunakan pengurusan negeri dan sebagainya. Tetapi itu tidak selalu berlaku. Jika anda hanya menukar beberapa teks atau mengemas kini kuki sekali setiap sesi, adakah anda benar-benar perlu menggunakan logik yang kompleks dan pilihan yang haus sumber?

Fungsi textContent ialah yang terpantas dalam js untuk memanipulasi teks jika dibandingkan dengan pilihan fungsi yang serupa, contohnya, kaedah innerHtml yang lebih popular. Lihat ujian bermasa ini untuk rujukan.

kenapa?

Anda boleh menjimatkan memori mesin pengguna untuk operasi lain yang lebih berkesan. Kadangkala boleh diakses dan agak pantas dalam peranti android atau epal yang benar-benar lama, sebagai contoh, adalah suatu kemestian. Atau mungkin panggilan API anda mengembalikan JSON yang begitu besar sehingga anda memerlukan beberapa saat untuk menghurai dan manipulasi yang betul. Jadi setiap saat pengguna tidak mendapat maklum balas atau terperangkap menonton animasi CSS pada skrin, dikira.

Banyak yang saya pelajari baru-baru ini ialah dengan pengekodan dalam JavaScript tanpa kebergantungan, sebagai cabaran dan pengalaman pembelajaran. Seperti mengambil data dan mencipta apl untuk melakukan dengan hanya HTML, CSS dan JavaScript. Tiada npm, tiada perpustakaan. Dan saya dapati sekumpulan kaedah dan objek Web API yang tidak pernah saya dengar sebelum ini, seperti objek DocumentFragment. Ia mencipta 'serpihan' kosong struktur DOM dan membolehkan anda memanipulasinya dan mengisinya sebelum benar-benar menukar DOM halaman. Oleh itu, anda memuatkan objek dengan senarai menu anda atau tajuk alat berkuasa AI anda yang sangat mewah, dan selepas anda selesai dengan operasi penambahan dan teg bersarang, anda menampalnya ke DOM sekali. Dengan cara sedemikian sehingga penghuraian hanya berlaku sekali, sekali gus, bukannya melakukan gelung for dengan banyak panggilan yang serupa dan memerlukan penghuraian baharu pokok pada penghujung setiap panggilan.

Jadi, katakan saya mengklik butang dengan sangat pantas, kerana bekas penggunaan saya memerlukan pemaparan dengan sangat pantas, lebih daripada 1 kali sesaat. Menggunakan pustaka pengurusan negeri kegemaran anda boleh mencipta beberapa jenis halangan dalam kes ini, kerana selepas setiap klik terdapat peristiwa baharu yang dicetuskan, jadi ia mesti dimatikan sebelum memulakan contoh kedua acara dalam timbunan, secara lalai. Bergantung pada kerumitan atau keperluan operasi async, itu boleh mengambil masa lebih daripada satu saat. Dalam kes penggunaan ini, adalah pemecah perjanjian. Jadi, memilih alat yang betul boleh menjadi lebih mudah, lebih pendek dan lebih pantas. Pada masa kini terdapat pilihan yang ditawarkan oleh perpustakaan popular untuk menyelesaikan isu ini, seperti menghentikan pelaksanaan pemaparan semula apabila peristiwa serupa baharu dicetuskan baru-baru ini. Tetapi maksud saya di sini ialah, bukan untuk mengejar aplikasi web yang cantik dan moden. Tetapi untuk menjadikan hidup anda lebih mudah dengan membuat penyelenggaraan yang paling mudah anda boleh dan tidak menembak diri sendiri dengan membuta tuli mempercayai potongan kod yang seseorang menulis dan mengatakan itu adalah pilihan terbaik.

Jika anda sudah memasang pakej dan perpustakaan ini untuk melancarkan projek anda, mengapa tidak menyiasat mengapa ralat dan pengecualian mengeluarkan panggilan fungsi yang tidak diketahui atau mesej samar pada konsol?

結論ととりとめのない余談

クラウドまたは非常に一般的なサービスでサービスを無料で立ち上げて実行することは、今日では非常に迅速かつ簡単に行うことができます。出発点のようなボイラー プレートを使用すると、非常に役立ち、非常に基本的な繰り返しのタスクを心配する必要がなく、時間を節約できます。ターミナルに 1 つのコマンドを入力するだけで、ベース ルーティングと hello world ページがローカル サーバー上で実行されます。

決定されたライブラリやフレームワーク全体が内部で何をしているのかを常に知ることは、インターネット上のどこにもありませんが、物事がどのように機能するかを知れば知るほど、より多くの情報に基づいて決定を下し、効率的に作業できるようになります。

Web 開発用の最も一般的なフレームワークは、実際に再レンダリングを最適化したり、仮想 DOM などのリソースを使用して DOM を操作したり、データを取得する非常に要求の厳しい操作のためにある種の永続性を実装したりするという非常に優れた機能を果たします。

ここでは、選択した Web ブラウザーの Web 開発者ツールがあなたの親友です。これらのツールの新しいバージョンでは、テレメトリが提供され、コードのどの部分またはどの呼び出しがパフォーマンスの妨げになる可能性があるかを示すこともできます。

JavaScript 言語がどのように機能するか、またはその動作方法がどのように実装されているかを知ることで、お気に入りのライブラリからすぐに使用できる関数を使用することで、より肥大化したコード ベースの作成を余儀なくされ、問題の解決に集中できなくなる可能性がある状況を簡単に特定できます。問題。自分が何百回も書いたコードを複製することに注意が奪われてしまうかもしれません。また、生産性を向上させるために AI を使用したとしても、人工の仲間が提案したソリューションを使用するという罠に陥る可能性があり、実際には将来の保守が困難になるだけです。

心配しないでください。私たちにはよくわからないこともあります。先ほども言いましたが、誰も常にすべてを知ることはできません。

より寛容な瞬間に実験して間違いを犯すことは、あなたにとって大きな助けとなり、より良い仕事をするために必要なツールを与えてくれます。次回、静的ファイル サーバーをデプロイしたり、非常に特殊なユースケースに非常に複雑なロジックをコーディングしたりするなど、単純なことを行うことに遭遇したとき、基本を知っていれば、かなり遠くまで到達し、キャリアの中で新しい問題に直面するときにより明確になります。

Web API のドキュメントを確認することを強くお勧めします。同様に、オンライン ブログ、ソーシャル メディア、または Web 開発に焦点を当てたリソースを見て回ってください。

もし私が間違いを犯した場合は、おそらくそれをコメントで知らせてください。批判や新しいアイデアは大歓迎ですので、よろしければシェアしてください!

Atas ialah kandungan terperinci Jadikan halaman web anda lebih cepat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!