- Animasi penuh halaman boleh dibuat menggunakan transformasi CSS 3D dan 2D dan animasi CSS, menyediakan alternatif yang lebih berprestasi dan fleksibel untuk animasi berasaskan skrip tradisional untuk kandungan web. Elemen HTML boleh diubah menggunakan animasi CSS untuk mencapai kesan ini.
- Untuk memastikan hasil yang konsisten apabila menggunakan CSS berubah menjadi elemen, tanpa mengira saiz kandungannya, saiz elemen badan boleh diperbaiki dengan tetingkap dan kandungan penyemak imbas boleh dilampirkan di dalam pembungkus. Pendekatan ini juga boleh menutup sebarang rendering progresif, bayaran semula atau beban sumber yang boleh berlaku dengan kandungan yang kompleks.
- Animasi boleh ditubuhkan pada masa -masa strategik semasa pengalaman melayari untuk memberikan penampilan kandungan peralihan ke dalam pandangan apabila halaman beban dan keluar dari pandangan apabila pengguna mengklik pada pautan. Tempat yang optimum untuk menubuhkan animasi yang memindahkan kandungan halaman ke pandangan adalah sejajar di bahagian atas elemen. Acara AnimationEnD boleh digunakan untuk mengesan apabila animasi selesai dan kemudian mencetuskan peristiwa navigasi.
Saya telah bercakap tentang cara membina dengan transformasi CSS 3D serta animasi dan peralihan CSS dalam artikel sebelumnya. Dalam artikel ini, saya ingin memperkenalkan kes penggunaan yang lebih "tidak konvensional" untuk teknologi ini dengan menerangkan konsep "animasi penuh halaman" yang boleh digunakan semasa proses navigasi untuk menambah ketidakstabilan dan kesinambungan untuk melayari. Sasaran kami adalah untuk mencapai pengalaman melayari yang lancar di mana kandungan lancar muncul apabila pengguna melawat halaman dan peralihan ketika dia mengklik pautan atau melakukan tindakan yang relevan.
Kesan ini boleh dicapai dengan mengubah elemen HTML
Mengubah keseluruhan kandungan halaman
transformasi CSS ditakrifkan pada sifat gaya elemen HTML DOM. Sebagai contoh, markup untuk berputar elemen 45 darjah di sepanjang paksi Znya akan kelihatan seperti ini:
#element { transform: rotateZ(45deg); }
Melampirkan transformasi ke elemen
dokumen HTML anda berfungsi dengan cara yang sama. Oleh itu, lakukan untuk menambah kesan yang sama pada dokumen anda boleh melakukan sesuatu seperti ini:body { transform: rotateZ(45deg); }
mari kita lihat pukulan sebelum dan selepas halaman apabila menggunakan transformasi ke elemen badan:
Memohon Rotatez (45Deg) Transform ke elemen badan dokumen.
Untuk transformasi tiga dimensi, CSS mengubah spesifikasi mentakrifkan harta perspektif yang boleh ditentukan pada induk elemen yang kita ubah. Apabila mengubah elemen
kandungan anda, ia perlu digunakan untuk elemen yang berada di atasnya dalam hierarki DOM. Berbuat demikian adalah mudah:html { perspective: 500px; }
menggabungkan ini dengan perubahan rotatey (45deg) pada elemen
menghasilkan hasil berikut:
Memohon Putar (45Deg) Transform ke dengan Perspektif: 500px ditetapkan pada .
kita boleh memanipulasi sifat asal transformasi pada elemen badan untuk hasil yang menarik. Mari kita lihat beberapa contoh:
body { transform-origin: 50% 100%; transform: rotateX(45deg); }
markup di atas menetapkan putaran di sepanjang x untuk elemen badan sambil mengalihkan asal putaran ke bahagian bawah elemen menggunakan asal transformasi. Secara berkesan ini berputar kandungan dokumen "ke" skrin seperti ini:
3 kita juga boleh memanipulasi sifat asal-usul perspektif pada elemen akar dokumen kami untuk mencapai kesan unjuran luar paksi. Menukar gaya untuk ke:
Halaman kami sekarang kelihatan seperti ini:
html { perspective: 500px; perspective-origin: 90% 50%; }Dengan menggunakan transformasi CSS, kita dapat dengan mudah memanipulasi penampilan visual keseluruhan kandungan halaman kami. Oleh kerana susun atur biasa dan peraturan saiz masih berlaku, beberapa mengubah pada elemen badan (terutamanya yang menggunakan nilai peratusan atau bergantung pada harta transformasi-asal) boleh mengakibatkan kesan visual yang berbeza bergantung kepada kandungan halaman kami. Ingat contoh Rotatex (45Deg) sebelumnya dengan transformasi-asal ditetapkan kepada 50% 100%.
di bawah anda dapat melihat hasilnya sebelum dan selepas transformasi digunakan.
Perhatikan bagaimana kandungannya sebenarnya tidak berputar di bahagian bawah tetingkap tetapi pada satu ketika di luar viewport. Ini dijangka tingkah laku untuk transformasi CSS:
Jadi bagaimana kita menangani kandungan bersaiz sewenang -wenangnya apabila menggunakan transformasi ke elemen badan kita? Adat menyesuaikan semua kandungan untuk memastikan saiz badan tidak berkembang lebih daripada jumlah tertentu mungkin tidak realistik. Sebaliknya, kita boleh menggunakan corak HTML/CSS yang mudah yang membolehkan kita menetapkan saiz elemen badan ke tetingkap penyemak imbas dan menambah kandungan di dalam pembungkus
#element { transform: rotateZ(45deg); }
Ilustrasi di bawah menunjukkan apa yang berlaku apabila halaman ditatal secara menegak dan kami menggunakan rotatey (45deg) berubah menjadi elemen
dokumen kami secara langsung (kiri) dan menggunakan corak pembungkus (kanan):
dengan menggunakan corak di atas dan menubuhkan CSS berubah dengan nilai peratusan apabila mungkin, kita boleh menjejaskan elemen kita dengan cara yang konsisten, tanpa mengira saiz kandungannya.
dari transformasi ke animasi
Setelah menyusun selok -belok penggunaan CSS berubah menjadi elemen , animasi CSS adalah langkah seterusnya. Dengan mengikuti prinsip -prinsip yang diterangkan di atas, kita boleh membuat animasi yang membawa kandungan web kita ke dalam pandangan (atau mengeluarkannya dari pandangan) dengan cara yang menarik.
Pertimbangkan peraturan asas @keyframes ini:
body { transform: rotateZ(45deg); }Apabila digunakan pada elemen, animasi ini akan menyebabkannya berputar di sebelah kirinya. Apabila digunakan untuk elemen yang menggunakan corak pembalut kami, hasil visual lebih menarik. Dokumen itu sebenarnya akan berputar dari luar kawasan yang kelihatan dari tetingkap penyemak imbas dan ke pandangan penuh:
Begitu juga, kita dapat menyusun animasi yang membuang kandungan web kami dari pandangan. Sebagai contoh, jika kita mahu halaman kita hilang ke jarak semasa berputar, kita boleh menggunakan sesuatu seperti ini:
#element { transform: rotateZ(45deg); }
dengan hasil visual adalah:
melampirkan animasi ke
Matlamat kami adalah untuk menggunakan animasi pencetus pada masa strategik semasa pengalaman penyemak imbas untuk memberikan kemunculan kandungan peralihan ke dalam pandangan apabila halaman beban dan di luar pandangan apabila pengguna mengklik pada pautan.
Tempat intuitif pertama untuk menambah animasi ke elemen badan akan menjadi acara JavaScript onload. Walau bagaimanapun, ternyata menambah animasi apabila kebakaran onload sebenarnya terlambat. Acara ini sebenarnya mencetuskan apabila keseluruhan kandungan di halaman kami telah selesai memuatkan (termasuk mana-mana imej atau sumber yang berintensifkan jalur lebar lain). Melampirkan animasi ke Onload pada halaman intensif jalur lebar akan mengakibatkan kandungan kami memaparkan "biasanya," diikuti dengan animasi yang mencetuskan dan menghidupkan semula kandungan ke dalam pandangan. Tidak betul -betul kesan yang kami targetkan.
Sebagai alternatif, kita boleh menggunakan acara domcontentloaded yang mencetuskan apabila penyemak imbas telah menyelesaikan struktur DOM kandungan kami (tetapi berpotensi sebelum sumber telah selesai dimuatkan). Demo DOMContentLoaded Drive DomContentLoad IE menggambarkan perbezaan antara kedua -dua peristiwa ini. Walau bagaimanapun, dalam kes -kes kandungan web yang kompleks, pelayar moden boleh memilih untuk melakukan "progresif", memaparkan halaman sebelum keseluruhan pokok Dom telah dimuatkan. Dalam situasi ini, hasil visual akan sama dengan senario onload.
Tempat yang optimum untuk menubuhkan animasi yang memindahkan kandungan halaman kami dalam pandangan adalah sejajar di bahagian atas elemen
. Ini memastikan bahawa animasi akan bermula dengan betul kerana kandungannya diberikan (dan kedudukan permulaan kandungannya akan menjadi dari kerangka utama animasi yang dipilih kami). Kesan sampingan yang menyenangkan dari pendekatan ini adalah bahawa animasi sebenarnya boleh menutup sebarang rendering progresif, bayaran semula atau beban sumber yang boleh berlaku dengan kandungan kompleks.Menyediakan animasi yang memindahkan kandungan kami dari pandangan juga menarik. Seseorang boleh mengandaikan bahawa kita boleh melampirkan pengendali onclick kepada semua elemen yang menarik dalam kandungan kami (contohnya semua tag ) dan hanya menetapkan sifat animasi yang relevan (nama animasi, penahan animasi, dan lain-lain) dalam fungsi panggil balik . Walau bagaimanapun, jika kita tidak menangguhkan navigasi daripada berlaku, kita tidak akan melihat peralihan cecair yang dijangkakan.
Ini adalah peluang yang baik untuk menggunakan peristiwa animasi yang diterangkan dalam spesifikasi animasi CSS. Khususnya, kita boleh menggunakan acara AnimationEnD untuk mengesan apabila animasi telah selesai dan kemudian mencetuskan navigasi (dengan menetapkan window.location.href, misalnya). Oleh itu, onclick kami akan mencetuskan animasi "mengalih keluar-dari-pandangan" dan mendaftarkan pengendali untuk AnimationEnD pada
yang akan memastikan bahawa peristiwa navigasi berlaku. Demo live Tersedia Kami telah mencipta demonstrasi dan tutorial untuk membawa halaman hidup dengan CSS Transforms & Animations yang memberikan kedalaman dan contoh melebihi apa yang telah kami tunjukkan di sini. Tutorial itu sendiri menggunakan animasi halaman penuh semasa navigasi halaman yang berfungsi di Internet Explorer 10 pada Windows 8 serta versi terkini Chrome dan Firefox.
hanya menikmati animasi halaman-ke-halaman, melangkah melalui halaman tutorial menggunakan pautan "Teruskan ..." di sudut kanan bawah setiap halaman.
Pada akhir tutorial kami menyediakan beberapa panduan tambahan dan kod sampel mengenai cara menggabungkan animasi ini dengan kandungan web anda sendiri.
membungkusnya
CSS Transforms dan CSS animasi adalah dua ciri-ciri yang kuat yang membolehkan pengalaman web yang lebih kaya dan lebih mendalam. Dengan sedikit usaha, anda boleh membuat laman web (walaupun statik) yang memberikan pengalaman navigasi cecair dan hampir seperti aplikasi.
Jika anda suka membaca siaran ini, anda akan suka dipelajari; Tempat untuk mempelajari kemahiran dan teknik segar dari Sarjana. Ahli mendapat akses segera ke semua ebook SitePoint dan kursus dalam talian interaktif, seperti CSS praktikal.
soalan yang sering ditanya mengenai animasi CSS penuh halaman
Apakah perbezaan utama antara animasi CSS dan animasi JavaScript? Animasi CSS lebih mudah dan mudah dilaksanakan, terutamanya untuk animasi mudah. Mereka juga lebih mesra prestasi kerana mereka dikendalikan oleh enjin rendering pelayar. Walau bagaimanapun, animasi CSS mempunyai kawalan dan fleksibiliti terhad berbanding dengan animasi JavaScript. Animasi JavaScript, sebaliknya, menawarkan lebih banyak kawalan dan fleksibiliti, yang membolehkan animasi kompleks. Mereka boleh dijeda, dibalikkan, atau dimanipulasi dalam masa nyata, dan juga boleh bertindak balas terhadap interaksi pengguna. Unit seperti peratusan atau unit viewport dan bukan unit mutlak seperti piksel. Ini memastikan bahawa skala animasi dengan betul tanpa mengira saiz skrin. Anda juga boleh menggunakan pertanyaan media untuk menyesuaikan animasi berdasarkan saiz skrin tertentu atau jenis peranti.
Bolehkah saya menggunakan animasi CSS dengan svg?
Ya, animasi CSS boleh digunakan dengan SVG (grafik vektor berskala). SVG mempunyai set sifat CSS tersendiri yang boleh animasi, seperti mengisi, strok, dan transformasi. Ini membolehkan animasi yang lebih kompleks dan menarik berbanding dengan menghidupkan elemen HTML biasa. Sebagai contoh, Internet Explorer tidak menyokong harta animasi-masa. Untuk memastikan keserasian silang pelayar, anda boleh menggunakan awalan vendor seperti -webkit-, -moz-, -o-, dan -ms- sebelum sifat animasi. Anda juga boleh menggunakan alat seperti AutoPrefixer untuk menambahkan awalan ini secara automatik. Ciri -ciri animasi, terutamanya yang mencetuskan susun atur berubah seperti lebar, ketinggian, dan margin. Sebaliknya, gunakan sifat yang hanya mencetuskan perubahan komposit seperti transformasi dan kelegapan. Anda juga boleh menggunakan harta yang akan berubah untuk memberitahu penyemak imbas mengenai sifat-sifat yang mungkin akan dihidupkan. Jadilah animasi dengan CSS. Ini kerana ia tidak mempunyai keadaan pertengahan antara nilai -nilainya. Walau bagaimanapun, anda boleh mencapai kesan yang sama dengan menghidupkan sifat kelegapan dan penglihatan. -Penghitungan harta-kiraan. Dengan menetapkan nilainya kepada Infinite, animasi akan diulangi selama-lamanya. harta. Harta ini mentakrifkan tempoh masa yang diperlukan oleh animasi untuk menyelesaikan satu kitaran.
Bagaimana saya boleh menjeda animasi CSS? . Dengan menetapkan nilainya kepada Jeda, animasi akan berhenti berjalan.
Bolehkah saya menghidupkan harta latar belakang dengan CSS? Walau bagaimanapun, anda boleh mencapai kesan yang sama dengan memudar antara pelbagai imej latar belakang menggunakan harta kelegapan.
hanya menikmati animasi halaman-ke-halaman, melangkah melalui halaman tutorial menggunakan pautan "Teruskan ..." di sudut kanan bawah setiap halaman.
Pada akhir tutorial kami menyediakan beberapa panduan tambahan dan kod sampel mengenai cara menggabungkan animasi ini dengan kandungan web anda sendiri.
membungkusnya
CSS Transforms dan CSS animasi adalah dua ciri-ciri yang kuat yang membolehkan pengalaman web yang lebih kaya dan lebih mendalam. Dengan sedikit usaha, anda boleh membuat laman web (walaupun statik) yang memberikan pengalaman navigasi cecair dan hampir seperti aplikasi.
Jika anda suka membaca siaran ini, anda akan suka dipelajari; Tempat untuk mempelajari kemahiran dan teknik segar dari Sarjana. Ahli mendapat akses segera ke semua ebook SitePoint dan kursus dalam talian interaktif, seperti CSS praktikal.
soalan yang sering ditanya mengenai animasi CSS penuh halamanApakah perbezaan utama antara animasi CSS dan animasi JavaScript? Animasi CSS lebih mudah dan mudah dilaksanakan, terutamanya untuk animasi mudah. Mereka juga lebih mesra prestasi kerana mereka dikendalikan oleh enjin rendering pelayar. Walau bagaimanapun, animasi CSS mempunyai kawalan dan fleksibiliti terhad berbanding dengan animasi JavaScript. Animasi JavaScript, sebaliknya, menawarkan lebih banyak kawalan dan fleksibiliti, yang membolehkan animasi kompleks. Mereka boleh dijeda, dibalikkan, atau dimanipulasi dalam masa nyata, dan juga boleh bertindak balas terhadap interaksi pengguna. Unit seperti peratusan atau unit viewport dan bukan unit mutlak seperti piksel. Ini memastikan bahawa skala animasi dengan betul tanpa mengira saiz skrin. Anda juga boleh menggunakan pertanyaan media untuk menyesuaikan animasi berdasarkan saiz skrin tertentu atau jenis peranti.
Bolehkah saya menggunakan animasi CSS dengan svg?
Ya, animasi CSS boleh digunakan dengan SVG (grafik vektor berskala). SVG mempunyai set sifat CSS tersendiri yang boleh animasi, seperti mengisi, strok, dan transformasi. Ini membolehkan animasi yang lebih kompleks dan menarik berbanding dengan menghidupkan elemen HTML biasa. Sebagai contoh, Internet Explorer tidak menyokong harta animasi-masa. Untuk memastikan keserasian silang pelayar, anda boleh menggunakan awalan vendor seperti -webkit-, -moz-, -o-, dan -ms- sebelum sifat animasi. Anda juga boleh menggunakan alat seperti AutoPrefixer untuk menambahkan awalan ini secara automatik. Ciri -ciri animasi, terutamanya yang mencetuskan susun atur berubah seperti lebar, ketinggian, dan margin. Sebaliknya, gunakan sifat yang hanya mencetuskan perubahan komposit seperti transformasi dan kelegapan. Anda juga boleh menggunakan harta yang akan berubah untuk memberitahu penyemak imbas mengenai sifat-sifat yang mungkin akan dihidupkan. Jadilah animasi dengan CSS. Ini kerana ia tidak mempunyai keadaan pertengahan antara nilai -nilainya. Walau bagaimanapun, anda boleh mencapai kesan yang sama dengan menghidupkan sifat kelegapan dan penglihatan. -Penghitungan harta-kiraan. Dengan menetapkan nilainya kepada Infinite, animasi akan diulangi selama-lamanya. harta. Harta ini mentakrifkan tempoh masa yang diperlukan oleh animasi untuk menyelesaikan satu kitaran.
Bagaimana saya boleh menjeda animasi CSS? . Dengan menetapkan nilainya kepada Jeda, animasi akan berhenti berjalan.
Atas ialah kandungan terperinci Cara membuat animasi penuh halaman menggunakan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Alat AI Hot

Undress AI Tool
Gambar buka pakaian secara percuma

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Clothoff.io
Penyingkiran pakaian AI

Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Mekanisme pengumpulan sampah JavaScript secara automatik menguruskan memori melalui algoritma pembersihan tag untuk mengurangkan risiko kebocoran ingatan. Enjin melintasi dan menandakan objek aktif dari objek akar, dan tidak bertanda dianggap sebagai sampah dan dibersihkan. Sebagai contoh, apabila objek tidak lagi dirujuk (seperti menetapkan pembolehubah kepada null), ia akan dikeluarkan dalam pusingan seterusnya kitar semula. Punca kebocoran memori yang biasa termasuk: ① Pemasa atau pendengar peristiwa yang tidak jelas; ② Rujukan kepada pembolehubah luaran dalam penutupan; ③ Pembolehubah global terus memegang sejumlah besar data. Enjin V8 mengoptimumkan kecekapan kitar semula melalui strategi seperti kitar semula generasi, penandaan tambahan, kitar semula selari/serentak, dan mengurangkan masa menyekat benang utama. Semasa pembangunan, rujukan global yang tidak perlu harus dielakkan dan persatuan objek harus dihiasi dengan segera untuk meningkatkan prestasi dan kestabilan.

Terdapat tiga cara biasa untuk memulakan permintaan HTTP dalam node.js: Gunakan modul terbina dalam, axios, dan nod-fetch. 1. Gunakan modul HTTP/HTTPS terbina dalam tanpa kebergantungan, yang sesuai untuk senario asas, tetapi memerlukan pemprosesan manual jahitan data dan pemantauan ralat, seperti menggunakan https.get () untuk mendapatkan data atau menghantar permintaan pos melalui .write (); 2.AXIOS adalah perpustakaan pihak ketiga berdasarkan janji. Ia mempunyai sintaks ringkas dan fungsi yang kuat, menyokong async/menunggu, penukaran JSON automatik, pemintas, dan lain -lain. Adalah disyorkan untuk memudahkan operasi permintaan tak segerak; 3.Node-Fetch menyediakan gaya yang serupa dengan pengambilan penyemak imbas, berdasarkan janji dan sintaks mudah

Jenis data JavaScript dibahagikan kepada jenis primitif dan jenis rujukan. Jenis primitif termasuk rentetan, nombor, boolean, null, undefined, dan simbol. Nilai -nilai tidak berubah dan salinan disalin apabila memberikan nilai, jadi mereka tidak mempengaruhi satu sama lain; Jenis rujukan seperti objek, tatasusunan dan fungsi menyimpan alamat memori, dan pembolehubah menunjuk objek yang sama akan mempengaruhi satu sama lain. Typeof dan Instanceof boleh digunakan untuk menentukan jenis, tetapi memberi perhatian kepada isu -isu sejarah TypeOfNull. Memahami kedua -dua jenis perbezaan ini dapat membantu menulis kod yang lebih stabil dan boleh dipercayai.

Helo, pemaju JavaScript! Selamat datang ke berita JavaScript minggu ini! Minggu ini kami akan memberi tumpuan kepada: Pertikaian tanda dagangan Oracle dengan Deno, objek masa JavaScript baru disokong oleh pelayar, kemas kini Google Chrome, dan beberapa alat pemaju yang kuat. Mari mulakan! Pertikaian tanda dagangan Oracle dengan percubaan Deno Oracle untuk mendaftarkan tanda dagangan "JavaScript" telah menyebabkan kontroversi. Ryan Dahl, pencipta Node.js dan Deno, telah memfailkan petisyen untuk membatalkan tanda dagangan, dan dia percaya bahawa JavaScript adalah standard terbuka dan tidak boleh digunakan oleh Oracle

Rangka kerja JavaScript mana yang terbaik? Jawapannya ialah memilih yang paling sesuai mengikut keperluan anda. 1. REACT adalah fleksibel dan bebas, sesuai untuk projek sederhana dan besar yang memerlukan penyesuaian tinggi dan keupayaan seni bina pasukan; 2. Angular menyediakan penyelesaian lengkap, sesuai untuk aplikasi peringkat perusahaan dan penyelenggaraan jangka panjang; 3. Vue mudah digunakan, sesuai untuk projek kecil dan sederhana atau perkembangan pesat. Di samping itu, sama ada terdapat timbunan teknologi sedia ada, saiz pasukan, kitaran hayat projek dan sama ada SSR diperlukan juga faktor penting dalam memilih rangka kerja. Singkatnya, tidak ada kerangka terbaik, pilihan terbaik adalah yang sesuai dengan keperluan anda.

IIFE (Segera Dilanjutkan FunctionExpression) adalah ekspresi fungsi yang dilaksanakan dengan segera selepas definisi, digunakan untuk mengasingkan pembolehubah dan mengelakkan mencemarkan skop global. Ia dipanggil dengan membungkus fungsi dalam kurungan untuk menjadikannya ungkapan dan sepasang kurungan segera diikuti olehnya, seperti (fungsi () {/code/}) ();. Penggunaan terasnya termasuk: 1. Elakkan konflik berubah -ubah dan mencegah pertindihan penamaan antara skrip berganda; 2. Buat skop peribadi untuk menjadikan pembolehubah dalaman tidak kelihatan; 3. Kod modular untuk memudahkan permulaan tanpa mendedahkan terlalu banyak pembolehubah. Kaedah penulisan biasa termasuk versi yang diluluskan dengan parameter dan versi fungsi anak panah ES6, tetapi perhatikan bahawa ungkapan dan ikatan mesti digunakan.

Janji adalah mekanisme teras untuk mengendalikan operasi tak segerak dalam JavaScript. Memahami panggilan rantaian, pengendalian ralat dan gabungan adalah kunci untuk menguasai aplikasi mereka. 1. Panggilan rantai mengembalikan janji baru melalui .then () untuk merealisasikan persamaan proses tak segerak. Setiap .then () menerima hasil sebelumnya dan boleh mengembalikan nilai atau janji; 2. Pengendalian ralat harus menggunakan .catch () untuk menangkap pengecualian untuk mengelakkan kegagalan senyap, dan boleh mengembalikan nilai lalai dalam tangkapan untuk meneruskan proses; 3. Gabungan seperti janji.all () (berjaya hanya berjaya selepas semua kejayaan), janji.race () (penyempurnaan pertama dikembalikan) dan janji.allsettled () (menunggu semua penyelesaian)

CACHEAPI adalah alat yang disediakan oleh penyemak imbas kepada permintaan rangkaian cache, yang sering digunakan bersempena dengan ServiceWorker untuk meningkatkan prestasi laman web dan pengalaman luar talian. 1. Ia membolehkan pemaju menyimpan sumber secara manual seperti skrip, helaian gaya, gambar, dan lain -lain; 2. Ia boleh memadankan tindak balas cache mengikut permintaan; 3. Ia menyokong memotong cache tertentu atau membersihkan seluruh cache; 4. Ia boleh melaksanakan keutamaan cache atau strategi keutamaan rangkaian melalui perkhidmatan pekerja yang mendengar acara mengambil; 5. Ia sering digunakan untuk sokongan luar talian, mempercepat kelajuan akses berulang, sumber utama dan kandungan kemas kini latar belakang; 6. Apabila menggunakannya, anda perlu memberi perhatian kepada kawalan versi cache, sekatan penyimpanan dan perbezaan dari mekanisme caching HTTP.
