javascript - content - Un div muy, muy, muy grande
javascript change text (7)
Para un proyecto mío (vea
BigPictu.re
o
bigpicture.js proyecto GitHub
), tengo que lidiar con un contenedor
<div>
potencialmente muy, muy, muy grande.
Sabía que había un riesgo de bajo rendimiento con el enfoque simple que uso, pero no esperaba que estuviera presente principalmente con ... ¡Chrome solo!
Si prueba esta página pequeña (vea el código a continuación), la panorámica (clic + arrastrar) será:
- Normal / suave en Firefox
- Normal / suave incluso en Internet Explorer
- ¡Muy lento (casi fallando) en Chrome!
Por supuesto, podría agregar algo de código (en mi proyecto) para hacer eso cuando te acercas mucho, el texto con un tamaño de fuente potencialmente muy muy grande estaría oculto. Pero aún así, ¿por qué Firefox e Internet Explorer lo manejan correctamente y no Chrome?
¿Hay alguna manera en JavaScript, HTML o CSS para decirle al navegador que no intente procesar la página completa (que tiene 10000 píxeles de ancho aquí) para cada acción? (¡solo renderiza 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>
- Responde a la primera búsqueda "por qué". Uno de los problemas es el tamaño de la fuente . tiene un tamaño de fuente de 600000 px, la mayoría de los navegadores lo verá demasiado alto y se reducirá, mientras que Chrome intentará representar el tamaño original. Parece que Chrome no puede volver a pintar letras tan grandes con los estilos solicitados muy rápido.
Pero la combinación de las respuestas Teemu y geert3, utilizando la transformación y la posición: fija, hace que Chrome funcione mucho más rápido incluso con fuentes grandes.
- Responda a la segunda pregunta: "¿Hay alguna forma ... de no intentar representar la página completa"? Puede intentar aplicar la acción del mouse para elementos en el contenedor, no para el contenedor completo.
Tamaños máximos de fuente: http://jsfiddle.net/74w7yL0a/
firefox 34 - 2 000 px
chrome 39 - 1 000 000 px
safari 8 - 1 000 000 px
ie 8-11 - 1 431 700 px
Además de la respuesta de Teemu de usar el traductor:
container.style.transform = ''translate('' + container.x + ''px, '' + container.y + ''px)'';
Que también debe usar otros prefijos de proveedor, simplemente puede solucionar esto usando esto en el cuerpo:
height: 100%;
width: 100%;
position: relative;
overflow: hidden;
y esto en html:
height: 100%;
esto, sin embargo, deshabilitará el desplazamiento.
Entonces, lo que haría es agregar un evento de
mousedown
al cuerpo y aplicar esos estilos usando una clase css cada
mousedown
se activa el
mousedown
, y eliminar esa clase en el
mouseup
.
Analicé esto y descubrí que el problema original estaba relacionado con la arquitectura de visualización de Chrome y su uso de hilos de fondo para representar la página.
Si desea una representación rápida, vaya a chrome: flags, desplácese a la configuración Pintura del lado de Impl y configure "Desactivado", luego reinicie el navegador; el movimiento del mouse será suave.
Lo que descubrí es que si habilita el contador de FPS, el FPS informado en este escenario sigue siendo muy alto, aunque el rendimiento real en pantalla es muy bajo. Mi explicación tentativa (no ser un experto en arquitectura de pantallas de Chrome) es que si el subproceso y la pantalla de la interfaz de usuario están en subprocesos separados, entonces puede haber contención en la representación del div, en el caso de que el subproceso de la interfaz de usuario y el subproceso de representación estén en el mismo hilo, el hilo de la interfaz de usuario no puede enviar mensajes más rápido que el hilo de la interfaz de usuario puede procesar.
Sugeriría que esto se presente como un error de Chrome.
Cambio de
position: fixed
parece acelerar las cosas.
La respuesta de @Teemus casi lo hace todo.
Use
transform
con
translate3d
lugar de
top/left
.
translate3d
habilita la aceleración de hardware.
container.style.transform = ''translate3d('' + container.x + ''px, '' + container.y + ''px, 0)'';
Utilice
transform
lugar de
top/left
:
container.style.transform = ''translate('' + container.x + ''px, '' + container.y + ''px)'';
Utilice
display: table
y
table-layout:fixed
en el div, o una tabla que envuelva el div.
En HTML:
El modelo de tabla HTML se ha diseñado de modo que, con la asistencia del autor, los agentes de usuario pueden representar las tablas de forma incremental (es decir, a medida que llegan las filas de la tabla) en lugar de tener que esperar todos los datos antes de comenzar a renderizar.
Para que un agente de usuario formatee una tabla en una sola pasada, los autores deben decirle al agente de usuario:
El número de columnas en la tabla. Consulte la sección sobre el cálculo del número de columnas en una tabla para obtener detalles sobre cómo proporcionar esta información. Los anchos de estas columnas. Consulte la sección sobre el cálculo del ancho de las columnas para obtener detalles sobre cómo proporcionar esta información.
Más precisamente, un agente de usuario puede representar una tabla en una sola pasada cuando los anchos de columna se especifican usando una combinación de elementos COLGROUP y COL. Si alguna de las columnas se especifica en términos relativos o porcentuales (consulte la sección sobre el cálculo del ancho de las columnas), los autores también deben especificar el ancho de la tabla.
Para una visualización incremental, el navegador necesita el número de columnas y sus anchos. El ancho predeterminado de la tabla es el tamaño de la ventana actual (ancho = "100%"). Esto puede modificarse estableciendo el atributo de ancho del elemento TABLE. De manera predeterminada, todas las columnas tienen el mismo ancho, pero puede especificar anchos de columna con uno o más elementos COL antes de que comiencen los datos de la tabla.
El problema restante es el número de columnas. Algunas personas han sugerido esperar hasta que se haya recibido la primera fila de la tabla, pero esto podría llevar mucho tiempo si las celdas tienen mucho contenido. En general, tiene más sentido, cuando se desea una visualización incremental, hacer que los autores especifiquen explícitamente el número de columnas en el elemento TABLE.
Los autores aún necesitan una forma de decirle a los agentes de usuario si deben usar la visualización incremental o ajustar el tamaño de la tabla automáticamente para que se ajuste al contenido de la celda. En el modo de tamaño automático de dos pasadas, el número de columnas está determinado por la primera pasada. En el modo incremental, el número de columnas debe indicarse por adelantado (con elementos COL o COLGROUP).
y CSS:
17.5.2.1 Diseño de tabla fijo
Con este algoritmo (rápido), el diseño horizontal de la tabla no depende del contenido de las celdas; solo depende del ancho de la tabla, el ancho de las columnas y los bordes o el espacio entre celdas.
El ancho de la tabla puede especificarse explícitamente con la propiedad ''ancho''. Un valor de ''auto'' (para ''display: table'' y ''display: inline-table'') significa usar el algoritmo de diseño de tabla automático. Sin embargo, si la tabla es una tabla de nivel de bloque (''display: table'') en flujo normal, un UA puede (pero no tiene que) usar el algoritmo de 10.3.3 para calcular un ancho y aplicar un diseño de tabla fijo, incluso si el ancho especificado es ''auto''.
Referencias