Penyemak imbas moden jauh lebih efisien dalam menjadikan kod web HTML, CSS, dan JavaScript yang kompleks, menukar kod ke halaman yang tersedia hanya dalam beberapa milisaat.

Jadi, bagaimanakah pemaju depan dapat meningkatkan kelajuan penyemak imbas? Sebagai tambahan kepada amalan terbaik yang mudah dilupakan (terutamanya apabila kita mempunyai kawalan terhad ke atas kod yang dihasilkan), seperti menyelaraskan pemilih CSS, menjaga struktur HTML rata, dan berhati -hati untuk memanipulasi HTML dan CSS dalam JavaScript, kita juga boleh mengambil kesempatan daripada sifat -sifat CSS contain CSS.

contain harta membolehkan pemaju untuk menentukan sejauh mana unsur dan kandungannya bebas daripada seluruh pokok dokumen. Ini membolehkan penyemak imbas untuk mengira semula susun atur, gaya, lukisan, saiz, atau gabungannya hanya untuk kawasan terhad DOM (bukan keseluruhan halaman), menghasilkan peningkatan prestasi yang signifikan.

Ringkasnya, atribut contain boleh memberikan arahan untuk penyemak imbas mengenai hubungan antara unsur -unsur pada halaman, yang biasanya unsur kontena yang mengandungi kandungan, walaupun kandungannya dinamik. Sebagai contoh, dalam aplikasi halaman tunggal (SPA), kandungan dinamik sering dimasukkan dan dipadam di halaman, sering bebas daripada kandungan lain pada halaman.

Penyemak imbas tidak dapat meramalkan perubahan susun atur masa depan yang mungkin disebabkan oleh penyisipan dan penghapusan kandungan halaman JavaScript. Malah operasi mudah, seperti menambahkan nama kelas kepada unsur -unsur, unsur -unsur DOM yang menghidupkan, atau mendapatkan saiz elemen, boleh membawa kepada penyusunan semula halaman dan redrawing, yang mahal dan harus dielakkan atau dikurangkan sebanyak mungkin.

Pemaju boleh meramalkan kemungkinan perubahan masa depan berdasarkan pengalaman pengguna reka bentuk halaman. Sebagai contoh, apabila pengguna mengklik butang, data panggilan akan dimasukkan ke dalam elemen Div dalam paparan semasa. Kami tahu ini mungkin, tetapi penyemak imbas tidak. Kami juga tahu bahawa memasukkan data ke dalam elemen Div kemungkinan besar tidak akan mengubah kesan visual atau aspek lain unsur -unsur lain pada halaman.

Pemaju pelayar telah menghabiskan banyak masa mengoptimumkan penyemak imbas mereka untuk mengendalikan keadaan ini. Walaupun terdapat pelbagai cara untuk membantu penyemak imbas mengendalikan situasi ini dengan lebih cekap, lebih banyak petua langsung dapat lebih membantu. Harta contain memberikan kita satu cara untuk memberikan petunjuk ini.

Pelbagai penggunaan atribut contain

Atribut contain mempunyai tiga nilai, yang boleh digunakan secara bersendirian atau dalam kombinasi: size , layout , dan paint . Ia juga mempunyai dua nilai singkatan untuk kombinasi biasa: strict dan content . Mari kita faham maksud setiap nilai.

Harus diingat bahawa banyak peraturan dan kes kelebihan untuk setiap nilai dilindungi dalam spesifikasi. Dalam kebanyakan kes, peraturan ini mungkin tidak menarik banyak perhatian. Walau bagaimanapun, jika anda mendapat keputusan yang tidak dijangka, melihat dengan cepat spesifikasi mungkin membantu.

Terdapat juga gaya yang mengandungi jenis dalam spesifikasi, yang tidak akan diperkenalkan dalam artikel ini. Sebabnya ialah jenis inklusi gaya semasa dianggap sedikit nilai dan kini berisiko dikeluarkan dari spesifikasi.

size mengandungi

size mengandungi mudah dijelaskan. Apabila bekas yang mengandungi ini termasuk mengambil bahagian dalam pengiraan susun atur, penyemak imbas boleh melangkau sebahagian besar pengiraan kerana ia mengabaikan unsur -unsur kanak -kanak bekas. Bekas dijangka mempunyai ketinggian dan lebar yang ditetapkan; Jika tidak, ia akan runtuh, dan itu satu -satunya faktor yang perlu dipertimbangkan dalam susun atur halaman. Ia dianggap tidak mempunyai apa -apa.

Perhatikan bahawa elemen kanak -kanak boleh menjejaskan saiz bekas mereka, bergantung kepada gaya bekas. Ini mesti dipertimbangkan apabila mengira susun atur; Menggunakan kemasukan size , kemungkinan tidak akan dipertimbangkan. Sebaik sahaja bekas telah ditentukan berbanding dengan saiz halaman, susun atur elemen anaknya akan dikira.

Kemasukan size sendiri tidak memberikan banyak pengoptimuman. Ia biasanya digunakan dalam kombinasi dengan nilai lain.

Walau bagaimanapun, satu manfaat yang dapat diberikannya adalah untuk membantu menangani JavaScript yang mengubah elemen kanak -kanak kontena berdasarkan saiz kontena, seperti jenis pertanyaan kontena. Dalam sesetengah kes, menukar elemen kanak -kanak mengikut saiz bekas boleh menyebabkan bekas itu mengubah saiz selepas membuat perubahan kepada elemen kanak -kanak. Oleh kerana perubahan saiz kontena boleh mencetuskan perubahan lain kepada elemen kanak -kanak, anda mungkin berakhir dengan gelung perubahan. size yang mengandungi boleh membantu mencegah gelung ini.

Berikut adalah contoh buatan sepenuhnya mengenai konsep gelung saiz semula ini: (contoh kod harus dimasukkan di sini menunjukkan bagaimana size mengandungi cara untuk mengelakkan saiz semula gelung)

layout mengandungi

layout mengandungi susun atur yang memberitahu penyemak imbas bahawa unsur -unsur luaran tidak menjejaskan susun atur dalaman elemen kontena, dan tidak mempengaruhi susun atur dalaman elemen kontena mempengaruhi unsur -unsur luaran. Oleh itu, apabila penyemak imbas melakukan pengiraan susun atur, ia boleh mengandaikan bahawa mempunyai pelbagai elemen yang terkandung dalam layout tidak akan menjejaskan unsur -unsur lain. Ini dapat mengurangkan jumlah perhitungan yang perlu dilakukan.

Manfaat lain ialah jika bekas itu tidak skrin atau disekat, pengiraan yang relevan dapat melambatkan atau mengurangkan keutamaan. Contoh yang disediakan oleh spesifikasi adalah:

[...] contohnya, jika kotak masuknya berhampiran hujung bekas blok dan anda melihat permulaan bekas blok

Bekas dengan layout mengandungi menjadi blok elemen anak kedudukan mutlak atau tetap. Ini adalah sama seperti menggunakan kedudukan relatif kepada bekas. Oleh itu, ingat bagaimana untuk mempengaruhi elemen kanak -kanak bekas apabila menggunakan jenis kemasukan ini.

Begitu juga, bekas mendapat konteks penyusunan baru, jadi z-index digunakan dengan cara yang sama seperti aplikasi itu relatif, mutlak, atau tetap. Walau bagaimanapun, menetapkan atribut top , right , bottom , atau left tidak memberi kesan kepada bekas.

Berikut adalah contoh mudah: (Contoh kod harus dimasukkan di sini menunjukkan bagaimana layout mengandungi kesan susun atur dan menyusun konteks)

paint mengandungi

paint mengandungi memberitahu penyemak imbas bahawa unsur -unsur kanak -kanak bekas tidak akan ditarik di luar sempadan saiz kotak kontena. Ini sama dengan menetapkan overflow: hidden; pada bekas, tetapi dengan beberapa perbezaan.

Pertama, bekas itu dikendalikan dengan cara yang sama seperti di bawah layout : ia menjadi blok yang mengandungi dengan konteksnya sendiri. Oleh itu, unsur -unsur kanak -kanak yang diletakkan di dalam paint termasuk akan menghormati bekas dari segi kedudukan. Jika kita mahu menyalin layout di atas termasuk demo tetapi gunakan paint termasuk sebaliknya, hasilnya akan sama. Perbezaannya ialah apabila aplikasi mengandungi, garis ungu tidak melimpah bekas, tetapi dipotong di sempadan bekas.

Satu lagi manfaat menarik paint termasuk ialah jika penyemak imbas dapat mengesan bahawa bekas itu sendiri tidak dapat dilihat dalam viewport, ia dapat melangkau pengiraan lukisan unsur -unsur kanak -kanak elemen itu. Sekiranya bekas itu tidak berada di Viewport atau dihalang dalam beberapa cara, maka anak -anaknya dijamin tidak kelihatan. Sebagai contoh, pertimbangkan menu navigasi yang biasanya terletak di luar skrin di sebelah kiri halaman, yang meluncur apabila butang diklik. Apabila menu berada dalam keadaan luar skrin biasa, penyemak imbas hanya melangkau untuk menarik kandungannya.

Pelbagai kombinasi yang disertakan

Ketiga -tiga ini termasuk kaedah yang berbeza yang mempengaruhi pengiraan rendering yang dilakukan oleh penyemak imbas. size mengandungi memberitahu penyemak imbas bahawa bekas ini tidak boleh menyebabkan kedudukan diimbangi pada halaman apabila kandungannya berubah. layout mengandungi memberitahu penyemak imbas bahawa unsur -unsur kanak -kanak bekas ini tidak boleh menyebabkan perubahan susun atur dalam unsur -unsur di luar bekasnya, dan sebaliknya. paint mengandungi memberitahu penyemak imbas bahawa kandungan bekas ini tidak akan ditarik di luar saiz bekas dan jika bekas disekat, kandungannya tidak akan ditarik sama sekali.

Oleh kerana masing -masing termasuk menyediakan pengoptimuman yang berbeza, masuk akal untuk menggabungkan beberapa termasuk bersama. Spesifikasi sebenarnya membolehkan ini. Sebagai contoh, kita boleh menggunakan layout dan paint sebagai nilai yang contain harta seperti berikut:

 .el {
  Mengandungi: cat susun atur;
}

Oleh kerana ini adalah perkara yang sangat jelas, spesifikasi sebenarnya memberikan dua nilai singkatan:

Nilai content akan menjadi nilai yang paling biasa digunakan dalam projek web, yang mengandungi banyak elemen dinamik, seperti bekas besar yang mengubah kandungan dari masa ke masa atau aktiviti pengguna.

Nilai strict berguna untuk bekas dengan saiz yang ditetapkan yang tidak pernah mengubah saiz (walaupun kandungan berubah). Sekali di tempat, ia akan mengekalkan saiz yang diharapkan. Satu contoh mudah ialah div yang mengandungi kandungan pengiklanan luaran pihak ketiga, yang dimensinya ditakrifkan oleh industri dan tidak ada kaitan dengan unsur-unsur DOM lain di halaman.

Kelebihan prestasi

Bahagian artikel ini sukar dijelaskan. Masalahnya ialah tidak banyak kesan visual terhadap kelebihan prestasi. Kebanyakan faedah adalah pengoptimuman di belakang layar, membantu penyemak imbas memutuskan apa yang perlu dilakukan semasa susun atur atau lukisan perubahan.

Untuk menunjukkan kelebihan prestasi atribut contain , saya membuat contoh mudah, yang mengubah saiz fon elemen dengan pelbagai elemen kanak -kanak. Perubahan ini biasanya mencetuskan geganti, yang juga menyebabkan halaman itu direkodkan semula. Contoh ini contain nilai -nilai none , content dan strict . (Contoh kod dan keputusan ujian prestasi harus dimasukkan di sini)

Susun atur sekali, lukis dua kali

Sila dengar penjelasan saya dengan sabar. Saya berjanji akan masuk akal.

Saya akan menggunakan demonstrasi di atas sebagai asas untuk penerangan berikut. Jika anda ingin terus belajar, lawati versi penuh demo dan buka DevTools. Perhatikan bahawa selepas menjalankan alat Prestasi, anda perlu menghidupkan butiran "bingkai" dan bukannya garis masa "utama" untuk melihat apa yang akan saya jelaskan.

Saya sebenarnya mengambil tangkapan skrin dari versi "Fullpage", kerana DevTools berfungsi lebih baik dalam versi itu. Yang mengatakan, versi biasa "penuh" harus memberikan kira -kira idea yang sama.

Dalam log peristiwa tugas yang tidak termasuk, acara lukisan hanya dicetuskan sekali sahaja. Biasanya, peristiwa tidak mengambil masa terlalu lama, dari 0.2 milisaat hingga 3.6 milisaat. Butiran yang lebih mendalam adalah di mana ia menjadi menarik. Dalam butiran ini, ia menyatakan bahawa kawasan lukisan adalah keseluruhan halaman. Dalam log acara, DevTools juga menyoroti kawasan halaman yang ditarik jika anda melayang ke atas acara Draw. Dalam kes ini, saiznya akan menjadi saiz viewport penyemak imbas. Ia juga akan melihat akar lapisan yang ditarik.

Perhatikan bahawa kawasan halaman di sebelah kiri imej diserlahkan, bahkan di luar kotak ungu. Di sebelah kanan, adalah saiz yang ditarik ke skrin. Dalam kes ini, ia adalah kira -kira saiz viewport. Untuk perbandingan masa depan, sila perhatikan #Document sebagai akar lapisan.

Ingat bahawa penyemak imbas mempunyai konsep lapisan untuk unsur -unsur tertentu untuk membantu menarik. Lapisan sering digunakan untuk unsur -unsur yang mungkin bertindih antara satu sama lain kerana konteks penyusunan baru. Contohnya ialah memohon position: relative; dan z-index: 1; ke elemen akan menyebabkan penyemak imbas membuat elemen sebagai lapisan baru. contain harta mempunyai kesan yang sama.

Terdapat seksyen di Devtools yang dipanggil "Rendering" yang menyediakan pelbagai alat untuk melihat bagaimana pelayar menjadikan halaman tersebut. Apabila memilih kotak semak yang dipanggil "Layer Borders", kita dapat melihat kandungan yang berbeza bergantung kepada kemasukan. Apabila disertakan none , anda tidak boleh melihat lapisan di luar lapisan laman web statik biasa. Pilih content atau strict dan anda dapat melihat bahawa kotak ungu ditukar ke lapisan sendiri dan seluruh halaman berubah dengan sewajarnya. (Tangkapan skrin harus dimasukkan di sini untuk menunjukkan lapisan di bawah jenis inklusi yang berbeza)

Seperti yang saya nyatakan sebelum ini, kedua -dua content dan strict menyebabkan peristiwa menarik dipecat dua kali. Ini kerana dua proses lukisan yang berbeza dilakukan untuk dua sebab yang berbeza. Dalam demo saya, acara pertama adalah untuk kotak ungu dan acara kedua adalah untuk kandungan kotak ungu.

Biasanya, acara pertama akan menarik kotak ungu dan melaporkan dimensi kotak itu sebagai sebahagian daripada acara tersebut. Kotak ini kini lapisannya sendiri dan menikmati faedah yang digunakannya.

Acara kedua digunakan untuk kandungan kotak kerana mereka sedang menatal unsur -unsur. Seperti yang dijelaskan oleh spesifikasi; Kerana konteks penyusunan dijamin, elemen menatal boleh ditarik ke dalam lapisan GPU tunggal. Saiz yang lebih tinggi yang dilaporkan dalam acara kedua adalah ketinggian elemen tatal. Mungkin lebih sempit untuk memberi ruang untuk bar skrol.

Perhatikan perbezaan dimensi di sebelah kanan kedua -dua imej ini. Di samping itu, akar lapisan kedua -dua peristiwa adalah main.change dan bukannya #Document yang dilihat di atas. Kotak ungu adalah elemen utama, jadi hanya elemen yang ditarik bukannya seluruh dokumen. Anda boleh melihat kotak yang diserlahkan dan bukannya keseluruhan halaman.

Kelebihan ini ialah apabila unsur -unsur menatal biasanya dibuat apabila mereka memasuki bidang pandangan. Unsur -unsur tatal di dalam pembendungan telah ditarik, jadi mereka tidak perlu ditarik semula apabila memasuki bidang pandangan. Jadi kami juga mendapat beberapa pengoptimuman rolling.

Sekali lagi, ini dapat dilihat dalam demo. (Tangkapan skrin harus dimasukkan di sini untuk menunjukkan prestasi menatal di bawah jenis inklusi yang berbeza)

Penemuan yang tidak disengajakan yang menarik

Saya mempunyai masalah yang menarik apabila saya mencuba demo di atas dan memahami bagaimana aspek prestasi lukisan dan menatal berfungsi. Dalam satu ujian, saya mempunyai kotak mudah di tengah halaman, tetapi dengan gaya minimum. Ia pada dasarnya adalah elemen menatal dengan banyak kandungan teks. Saya menggunakan kandungannya kepada elemen kontena, tetapi saya tidak melihat kelebihan prestasi menatal yang diterangkan di atas.

Bekas ditandakan dengan overlay "Rat Repaints on Scroll" dan kelip lukisan adalah sama seperti yang disertakan tidak digunakan, walaupun saya tahu bahawa kandungan yang mengandungi sebenarnya digunakan pada bekas. Jadi saya mula membandingkan ujian mudah saya dengan versi yang lebih kaya dengan gaya yang dibincangkan di atas.

Saya akhirnya mendapati bahawa jika background-color bekas adalah telus, tidak ada kelebihan prestasi menatal kemasukan.

Saya menjalankan ujian prestasi yang sama di mana saya akan menukar saiz fon kandungan untuk mencetuskan penyebaran dan redraw. Hasil kedua-dua ujian adalah kira-kira sama, satu-satunya perbezaan adalah bahawa background-color ujian pertama adalah telus dan background-color ujian kedua adalah warna yang sesuai. Dari angka-angka, pengiraan di belakang layar masih lebih cekap; Hanya peristiwa perancangan yang berbeza. Nampaknya unsur-unsur tidak menjadi lapisan mereka sendiri dalam pengiraan lukisan dengan background-color yang telus.

Ujian pertama hanya mempunyai satu acara menarik dalam log acara. Ujian kedua dijalankan mempunyai dua peristiwa plot, seperti yang saya harapkan. Tanpa warna latar belakang itu, penyemak imbas seolah -olah memutuskan untuk melangkau aspek lapisan yang disertakan. Saya juga mendapati bahawa memalsukan ketelusan dengan menggunakan warna yang sama seperti yang di belakang elemen juga berfungsi dengan baik. Tebakan saya ialah jika latar belakang bekas adalah telus, maka ia mesti bergantung kepada apa -apa di bawah, yang menjadikannya mustahil untuk memisahkan bekas ke dalam lapisan lukisannya sendiri. (Tangkapan skrin harus dimasukkan di sini untuk menunjukkan hasil yang berbeza di bawah warna latar belakang telus dan warna latar legap)

Saya membuat satu lagi versi demo ujian yang mengubah background-color elemen kontena dari telus ke warna yang sama dengan warna latar belakang badan. Berikut adalah dua tangkapan skrin menggunakan pelbagai pilihan dalam panel "Rendering" di DevTools. (Tangkapan skrin harus dimasukkan di sini untuk menunjukkan hasil yang berbeza di bawah warna latar belakang telus dan warna latar legap)

Meringkaskan

Artikel ini memperkenalkan asas -asas CSS contain sifat, termasuk nilai, faedah, dan peningkatan prestasi yang berpotensi. Terdapat beberapa faedah untuk menggunakan atribut ini kepada unsur -unsur tertentu dalam HTML; Unsur -unsur yang perlu memohon atribut ini terpulang kepada anda. Sekurang -kurangnya, itulah yang saya faham, kerana saya tidak tahu panduan tertentu. Idea umum adalah untuk memohon kepada bekas unsur -unsur lain, terutama yang mempunyai beberapa aspek dinamik.

Beberapa senario yang mungkin: kawasan grid grid CSS, elemen yang mengandungi kandungan pihak ketiga, dan bekas dengan kandungan dinamik berdasarkan interaksi pengguna. Harus ada bahaya dalam menggunakan harta ini dalam kes -kes ini, dengan mengandaikan anda tidak cuba memasukkan elemen yang sebenarnya bergantung pada elemen lain di luarnya termasuk.

Sokongan penyemak imbas sangat kuat. Safari adalah satu -satunya penyemak imbas yang tidak disokong pada masa ini. Bagaimanapun, anda masih boleh menggunakan harta itu kerana jika penyemak imbas tidak memahami harta atau nilainya, ia hanya melangkau kod tanpa kesilapan.

Oleh itu, jangan ragu untuk memulakan kandungan anda!

Atas ialah kandungan terperinci Biarkan ' s menyelam mendalam ke dalam CSS mengandungi harta. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!