Html5-boilerplate: Tambahkan `white-space: nowrap` ke .visuallyhidden untuk rendering yang lebih cepat

Ini adalah tampilan yang sangat menarik di visuallyhidden class, terima kasih, Tomasz.

Saya juga melihat pena James Curd di klip rect tidak digunakan lagi dan
mungkin mengganti dengan clip-path: inset(0 1px 1px 0)
https://codepen.io/aminimalanimal/pen/wMedpo

Hasil pengujian saya (hanya diuji di Chrome)

Tes

Rendering

Total:

Dasar dengan klip rect

3912ms

2521m AVG 3027

2649ms

4.85 detik

3,33 detik AVG 3,87

3.44 detik

Tambahkan spasi putih

2590ms

2207ms AVG 2450

2554ms

3,79 detik

2,98 detik AVG 3,35

3,29 detik

Tambahkan spasi, hapus klip rect

2820ms

2424ms AVG 2520

2317ms

4.32 detik

3,65 detik AVG 3,83

3.53

Tambahkan spasi putih, hapus klip persegi, tambahkan jalur klip

* perlu awalan vendor!

2820ms

1845ms _AVG 2241_

2057ms

4.32 detik

3.20 detik _AVG 3.63_

3,37 detik

Ringkasan: Ada rentang yang cukup besar dalam tes individu. NS
pengujian keempat tampak terbaik di Chrome, tetapi penghematan untuk produksi "nyata"
halaman yang hanya memiliki beberapa elemen tersembunyi mungkin tidak sebanding dengan biayanya
mengubah kelas css.

*(Saya menemukan clip-path membutuhkan awalan vendor!)

--Scott Davis--

Pada Wed, Jul 6, 2016 at 04:20, Tomasz W. [email protected] menulis:

Sebelum:

.visual tersembunyi {
batas: 0;
klip: persegi(0 0 0 0);
tinggi: 1 piksel;
margin: -1px;
melimpah: tersembunyi;
bantalan: 0;
posisi: mutlak;
lebar: 1 piksel;
}

Setelah:

.visual tersembunyi {
batas: 0;
klip: persegi (0 0 0 0);
tinggi: 1 piksel;
margin: -1px;
melimpah: tersembunyi;
bantalan: 0;
posisi: mutlak;
spasi putih: tanpa bungkus;
lebar: 1 piksel;
}

Codepen: https://codepen.io/tomasz86/pen/pbwQqV
Codepen (debug): https://s.codepen.io/tomasz86/debug/pbwQqV

Menambahkan spasi putih: tanpa bungkus membuat perbedaan positif yang besar dalam rendering
kecepatan.

Saya telah menguji kode di IE11, versi terbaru Firefox dan Chrome,
dan juga Opera 12 lama (satu-satunya browser dengan profiler CSS yang tepat).
Kode berjalan lebih cepat di semuanya. Ada perbedaan mencolok keduanya
di IE11 dan Firefox. Opera 12 menunjukkan perbedaan 400ms antara keduanya.
Chrome benar-benar hang ketika mencoba merender versi tanpa
ruang putih pada PC Windows 7 saya tetapi membuat yang lain dengan sangat cepat.

—
Anda menerima ini karena Anda berlangganan utas ini.
Balas email ini secara langsung, lihat di GitHub
https://github.com/h5bp/html5-boilerplate/issues/1874 , atau bisukan
benang
https://github.com/notifications/unsubscribe/ACKY8sYNxXJ6f9HLoTgQIKGkVDcHcnzDks5qS3NOgaJpZM4JF5XK
.

Terima kasih telah melakukan tes tambahan :)

Saya belum mempertimbangkan clip-path sama sekali hanya karena kompatibilitas browser yang hebat clip (hingga IE 4!). Ini mungkin sudah usang tetapi berfungsi dengan sempurna di semua browser yang bukan hal yang umum.

Kembali ke intinya - dalam pengujian lokal saya di Opera 12 perbedaannya selalu sekitar 400 ms. Saya sebenarnya menemukan ini secara tidak sengaja ketika menguji contoh yang lebih nyata dengan 400 elemen semu ditambahkan dengan cara ini. Rendering dari elemen-pseudo itu sendiri secara umum lambat, jadi saya bertanya-tanya apakah ada yang bisa dilakukan tentang hal itu, dan sangat terkejut bahwa hanya dengan menambahkan white-space: nowrap mengurangi waktu rendering sebesar 40 ms. Ini mungkin tidak tampak seperti perbedaan yang besar tetapi mudah terlihat ketika seluruh situs dirender dalam 360 md (dan 320 md dengan white-space ).

Perbedaannya mungkin tidak signifikan dalam banyak kasus ketika hanya beberapa elemen yang ada, namun akan membantu orang-orang seperti saya dengan ratusan elemen tersebut. Saya juga tidak berpikir ada kerugian atau risiko dengan menambahkan white-space: nowrap . Jika kinerja dapat ditingkatkan dengan cara ini tanpa biaya tambahan, mengapa tidak melakukannya?

Saya pikir pengujian lebih lanjut harus dilakukan, baik di browser dan sistem operasi yang berbeda.

Saya mendukung perubahan ini. mau ngerjain PR?

Apakah masalah ini sudah ditutup?

Ya! ditutup melalui #1900