Untuk proyek saya (lihat BigPictu.re atau bigpicture.js proyek GitHub ), saya harus berurusan dengan potensi yang sangat, sangat, sangat besar <div>kontainer.
Saya tahu ada risiko kinerja yang buruk dengan pendekatan sederhana yang saya gunakan, tetapi saya tidak berharap sebagian besar terjadi dengan ... Chrome saja!
Jika Anda menguji halaman kecil ini (lihat kode di bawah), panning (klik + drag) akan menjadi:
- Normal / mulus di Firefox
- Normal / mulus bahkan di Internet Explorer
- Sangat lambat (hampir mogok) di Chrome!
Tentu saja, saya dapat menambahkan beberapa kode (dalam proyek saya) untuk melakukan itu ketika Anda banyak memperbesar, teks dengan ukuran font yang berpotensi sangat besar akan disembunyikan. Tapi tetap saja, mengapa Firefox dan Internet Explorer menanganinya dengan benar dan bukan Chrome?
Apakah ada cara dalam JavaScript, HTML, atau CSS untuk memberi tahu browser agar tidak mencoba merender seluruh halaman (yang lebarnya 10.000 piksel di sini) untuk setiap tindakan? (hanya membuat viewport saat ini!)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
html, body {
overflow: hidden;
min-height: 100%; }
#container {
position: absolute;
min-height: 100%;
min-width: 100%; }
.text {
font-family: "Arial";
position: absolute;
}
</style>
</head>
<body>
<div id="container">
<div class="text" style="font-size: 600px; left:100px; top:100px">Small text</div>
<div class="text" style="font-size: 600000px; left:10000px; top:10000px">Very big text</div>
</div>
<script>
var container = document.getElementById('container'), dragging = false, previousmouse;
container.x = 0; container.y = 0;
window.onmousedown = function(e) { dragging = true; previousmouse = {x: e.pageX, y: e.pageY}; }
window.onmouseup = function() { dragging = false; }
window.ondragstart = function(e) { e.preventDefault(); }
window.onmousemove = function(e) {
if (dragging) {
container.x += e.pageX - previousmouse.x; container.y += e.pageY - previousmouse.y;
container.style.left = container.x + 'px'; container.style.top = container.y + 'px';
previousmouse = {x: e.pageX, y: e.pageY};
}
}
</script>
</body>
</html>sumber
Jawaban:
Mengubah menjadi
position: fixedtampaknya mempercepat segalanya.sumber
fixedjelas tidak terlalu rumit untuk ditata dan mungkin mereka dapat melakukan lebih banyak pengoptimalan. Tetapi saya belum melihat kode sumber mesin rendering jika yang Anda maksud ;-)Gunakan
transformalih-alihtop/left:Demo langsung di jsFiddle .
sumber
fixedmengeluarkan elemen dari aliran teks dan menghemat banyak rendering ulang. Dalam dokumentasitransformMDN mengatakan: "... konteks yang bertumpuk akan dibuat. Dalam hal ini objek akan bertindak sebagai blok berisi untuk posisi: elemen tetap yang dikandungnya."<div style="position:relative;min-height: 900px;">Your's divs</div>jsFiddle begitu jugaposition:relative, yang mirip dengan jawabanTetapi menggabungkan jawaban Teemu dan geert3 - menggunakan transform dan position: fixed, membuat chrome bekerja lebih cepat bahkan dengan font besar.
Ukuran font maksimum: http://jsfiddle.net/74w7yL0a/
sumber
font-sizedan ini bisa menjadi alasan tidak adanya kelambatan pada FF. Tapi seharusnya juga sangat lambat di IE, tapi tidak ... Aneh!Selain jawaban Teemu tentang penggunaan terjemahan:
Yang mana Anda juga harus menggunakan prefiks vendor lain, Anda dapat memperbaikinya dengan menggunakan ini di bagian tubuh:
dan ini di html:
ini akan, bagaimanapun, menonaktifkan pengguliran. Jadi apa yang akan saya lakukan adalah, menambahkan
mousedownacara ke tubuh dan menerapkan gaya tersebut menggunakan kelas css setiap kalimousedowndipicu, dan menghapus kelas itu padamouseup.sumber
style.transformatau dengan menggunakantransform?). Terima kasih atas jawaban Anda @Prisoner!Jawaban @Teemus hampir melakukan semuanya.
Gunakan
transformdengan,translate3dbukantop/left.translate3dmengaktifkan akselerasi perangkat keras.Demo langsung di jsFiddle .
sumber
Saya menganalisis ini dan saya menemukan bahwa masalah asli terkait dengan arsitektur tampilan Chrome, dan penggunaan utas latar belakang untuk merender halaman.
Jika Anda ingin rendering yang cepat, buka chrome: flags, gulir ke setelan Impl-side painting, dan setel "Disabled", lalu mulai ulang browser - gerakan mouse akan lancar.
Apa yang saya temukan adalah jika Anda mengaktifkan penghitung FPS, FPS yang dilaporkan dalam skenario ini masih sangat tinggi, meskipun kinerja layar sebenarnya sangat rendah. Penjelasan tentatif saya (bukan ahli arsitektur tampilan Chrome) adalah bahwa jika utas UI dan tampilan berada di utas terpisah, maka mungkin ada perselisihan dalam rendering div - dalam kasus di mana utas UI dan utas rendering ada di utas yang sama, utas UI tidak dapat mengirim pesan lebih cepat dari yang dapat dirender oleh utas UI.
Saya menyarankan bahwa ini harus diajukan sebagai bug Chrome.
sumber
Gunakan
display: tabledantable-layout:fixedpada div, atau tabel yang membungkus div. Dalam HTML:dan CSS:
Referensi
sumber