Para un proyecto mío (ver BigPictu.re o proyecto GitHub bigpicture.js ), tengo que lidiar con un <div>contenedor potencialmente muy, muy, muy grande .
Sabía que existía el riesgo de un rendimiento deficiente con el enfoque simple que uso, pero no esperaba que estuviera presente principalmente con ... ¡Solo Chrome!
Si prueba esta pequeña página (consulte el código a continuación), la panorámica (haga clic + arrastre) será:
- Normal / suave en Firefox
- Normal / suave incluso en Internet Explorer
- ¡Muy lento (casi fallando) en Chrome!
Por supuesto, podría agregar algún código (en mi proyecto) para hacer eso cuando se acerca mucho, el texto con un tamaño de fuente potencialmente muy grande estaría oculto. Pero aún así, ¿por qué Firefox e Internet Explorer lo manejan correctamente y no Chrome?
¿Hay alguna forma en JavaScript, HTML o CSS de decirle al navegador que no intente representar la página completa (que tiene 10000 píxeles de ancho aquí) para cada acción? (¡renderiza solo la ventana gráfica actual!)
<!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>