Tengo el siguiente js en mi aplicación de electrones para cambiar el tamaño de las columnas de la tabla:
const resizerMouseDown = (e) => { let th = e.target.parentNode let startOffset = th.offsetWidth - ex window.addEventListener('mousemove', function (e) { if (th) { th.style.width = startOffset + ex + 'px' } }) window.addEventListener('mouseup', function () { th = undefined }) }Tabla de ejemplo: (las matrices de los archivos json completan el contenido de la tabla)
<table> <thead> <tr> <th> <div>Column 1</div> <button on:mousedown={resizerMouseDown} class="resizer"></button> </th> <th> <div>Column 2</div> <button on:mousedown={resizerMouseDown} class="resizer"></button> </th> </tr> </thead> <tbody> <tr> <td><input type="text" /></td> <td><input type="text" /></td> </tr> </tbody> </table>Cuando las filas de la tabla tienen más de 100, el cambio de tamaño de las columnas es muy lento. Ni siquiera voy a mencionar cuándo los archivos json son enormes (más de 1000 filas de tablas).
¿Alguna sugerencia para obtener un mejor rendimiento del código, o sería esto una limitación de electrones?
Cada vez que se mueve el mouse, está comprobando si se definió th . Esto no es particularmente eficiente, ya que solo desea que sus oyentes se ejecuten cuando se llamó a la función resizerMouseDown en primer lugar.
Para eludir esto (y no registrar el mismo oyente una y otra vez), sugiero limpiar los oyentes de eventos una vez que el mouse esté de vuelta usando window.removeEventListener() :
const resizerMouseDown = (e) => { let th = e.target.parentNode let startOffset = th.offsetWidth - ex const moveListener = e => { th.style.width = startOffset + ex + 'px' } const upListener = e => { th = undefined window.removeEventListener('mousemove', moveListener) window.removeEventListener('mouseup', upListener) } window.addEventListener('mousemove', moveListener) window.addEventListener('mouseup', upListener) }Además, vale la pena señalar que el detector de movimiento se activará cada vez que el navegador envíe la señal de que el mouse se movió. Sin embargo, cambiar el tamaño de la tabla en cada movimiento puede no ser muy eficiente y volver a dibujar más de 1000 filas una y otra vez es sin duda pesado para la CPU y la GPU. Por lo tanto, ¿qué hay de agregar un umbral y solo cambiar el tamaño cada 10 llamadas más o menos?
const resizerMouseDown = (e) => { let th = e.target.parentNode let startOffset = th.offsetWidth - ex var skipCount = 0 var isDirty = false var lastXValue = 0 const resize = xValue => { th.style.width = startOffset + xValue + 'px' isDirty = false } const moveListener = e => { skipCount++ if (skipCount >= 10) resize (ex) else { lastXValue = ex isDirty = true } } const upListener = e => { if (isDirty) resize (lastXValue) th = undefined window.removeEventListener('mousemove', moveListener) window.removeEventListener('mouseup', upListener) } window.addEventListener('mousemove', moveListener) window.addEventListener('mouseup', upListener) } (Como puede ver, en caso de que se omitiera el último cambio de tamaño antes de que el botón del mouse estuviera arriba, el detector de eventos para el evento mouseup lo detecta y cambia el tamaño de la columna por última vez). Sugiero jugar con los valores, especialmente el umbral de salto.
Aparte de esto, sí, cambiar el tamaño de tablas enormes es lento de forma predeterminada. El navegador deberá volver a calcular el ancho de cada celda de la tabla y, cuando haya muchas, se ralentizará considerablemente.
Una nota final: no he probado este código para ver su rendimiento. Esta respuesta se basa únicamente en la eficiencia general del código y en conjeturas sobre cuellos de botella en el rendimiento. Siéntase libre de analizar este código utilizando el generador de perfiles integrado de Chromium (también disponible en Electron); esto le dirá exactamente dónde puede optimizar aún más.