Per un mio progetto (vedi BigPictu.re o bigpicture.js progetto GitHub ), devo occuparmi di un <div>contenitore potenzialmente molto, molto, molto grande .
Sapevo che c'era il rischio di prestazioni scadenti con il semplice approccio che utilizzo, ma non mi aspettavo che fosse presente principalmente con ... solo Chrome!
Se provi questa piccola pagina (vedi codice sotto), la panoramica (clic + trascina) sarà:
- Normale / liscio su Firefox
- Normale / fluido anche su Internet Explorer
- Molto lento (quasi in crash) su Chrome!
Ovviamente, potrei aggiungere del codice (nel mio progetto) per farlo quando ingrandisci molto, il testo con dimensioni del carattere potenzialmente molto grandi sarebbe nascosto. Ma ancora, perché Firefox e Internet Explorer lo gestiscono correttamente e non Chrome?
Esiste un modo in JavaScript, HTML o CSS per dire al browser di non tentare di eseguire il rendering dell'intera pagina (che è larga 10000 pixel qui) per ogni azione? (renderizza solo la vista corrente!)
<!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>