Búsqueda solo con CSS*: ¡Mejora el rendimiento de filtrado en React con CSS!

Rate this content
Bookmark

Trabajando en emoji-picker-react me encontré con un desafío: filtrar la lista de 1800 emojis provocaba un retraso significativo debido a las nuevas renderizaciones.

¡Aprendamos cómo solucioné esto solo usando CSS!

11 min
12 Dec, 2023

AI Generated Video Summary

Evitar Alus, un ingeniero de frontend, comparte un truco para mejorar el rendimiento de búsqueda en las aplicaciones de React optimizando el algoritmo de búsqueda y reduciendo las actualizaciones del DOM. Los selectores de atributos CSS pueden usarse para filtrar y aplicar estilos basados en los valores de los emojis. Se puede crear un componente llamado Búsqueda CSS para mejorar el rendimiento de la búsqueda ocultando los emojis que no coinciden con la consulta de búsqueda. A pesar de algunas desventajas de rendimiento, esta solución funciona significativamente más rápido. Visita el sitio web de Evitar Alus o su cuenta de Twitter para ver más de su trabajo.

1. Mejorando el rendimiento de búsqueda en aplicaciones React

Short description:

Soy Evitar Alus, un ingeniero frontend en Meda en Tel Aviv y el autor del paquete de código abierto emoji-pkreact. Quiero compartir un truco para mejorar el rendimiento de búsqueda en las aplicaciones React. Inicialmente, enfrenté problemas de rendimiento debido al gran número de emojis y la compleja gestión del estado. La barra de búsqueda y los emojis estaban distantes en el árbol React, causando retrasos. Hice mejoras en el algoritmo de búsqueda y reduje las actualizaciones del DOM, lo que resultó en un rendimiento más rápido. Permíteme mostrarte la diferencia y explicar cómo lo logré.

Hola a todos. ¿Cómo están? Mi nombre es Evitar Alus. Soy un ingeniero frontend en Meda en Tel Aviv y soy el autor de varios paquetes de código abierto, uno de los cuales es este pequeño paquete genial llamado emoji-pkreact que te permite poner un emoji-pkreact directamente en tu aplicación React en la web con facilidad.

Y hoy quiero compartir con ustedes un pequeño truco que se me ocurrió para mejorar la búsqueda y el performance en las aplicaciones React y los paquetes React. Y cuando comencé a construir emoji-pkreact allá por 2017, pensé que sería bastante sencillo construir un componente emoji-pkreact con todas las características de un emoji-pkreact esperado que también fuera eficiente y fácil de usar. Y casi inmediatamente comencé a recibir problemas sobre el performance, por ejemplo, que la búsqueda es extremadamente lenta y, obviamente, mi respuesta fue que no se reproduce. Obviamente, eso estaba mal.

La búsqueda era realmente lenta. Y la razón es bastante comprensible. Verás, tenemos aproximadamente 1800 emojis diferentes que se muestran en el Emoji Picker. Y cuando interactúas con cada uno de ellos, tienes algunas actualizaciones de estado. Entonces, por ejemplo, cuando pasas el cursor o cuando escribes algo en la búsqueda, haces cambios en el DOM y en los elementos. Y cuando tratas con tantos elementos, y cuando tienen tantos estados diferentes en los que pueden estar, puede ser bastante intenso trabajar con ellos. Y especialmente aquí, vemos que la barra de búsqueda está aquí arriba y los emojis están allí. Lo que significa que están muy distantes en el árbol React. Lo que significa que tenemos que tener un estado de Emoji Picker React casi global para gestionar las capacidades de filtrado. Y luego, cuando escribimos algún carácter dentro del Emoji Picker, actualizamos el estado, ejecutamos algún algoritmo de búsqueda que intento hacer eficiente, y luego React va y hace la diferenciación del DOM y luego solo aplica los cambios al DOM, y cada uno de estos pasos lleva tiempo. Y cuando tratamos con 1800 emojis, eso lleva mucho tiempo.

Ahora, si miras ahora, parece bastante inmediato. Funciona bastante rápido, pero quiero mostrarte solo por un segundo cómo se sentía antes de que Emoji Picker React tuviera estas capacidades y la búsqueda mejorada. Así que escribiré algo y notarás un ligero retraso, incluso en mi MacBook Pro. ¿Lo sentiste? Hubo algún retraso entre mi carácter siendo escrito y los cambios apareciendo en la pantalla, y eso es un MacBook Pro de alta gama. Intentemos hacer algunas desaceleraciones, así que 6x de desaceleración para simular una máquina más antigua, o más lenta, y veamos cómo se siente realmente para un usuario en la naturaleza. ¿Y viste eso, verdad? Eso no es ideal. Tenemos que arreglar esto. Solo para mostrarte lo que realmente está pasando cuando escribimos cada carácter, cuando escribimos cada carácter, realmente salimos y volvemos a renderizar todo. Y la razón es, nuevamente, que tenemos ese estado de árbol de nivel superior y que realmente tenemos que modificar todos los elementos en el DOM. ¿Pero realmente tenemos que hacerlo? Y esto es lo que quería averiguar. ¿Realmente tengo que manipular el DOM y cambiar todos los emojis solo para hacerlos desaparecer? ¿O tal vez puedo de alguna manera saltármelo? Así que fui a mirar los elementos emoji reales que creé y lo que tengo aquí, cada emoji es un componente de botón o un elemento de botón y tienen una imagen dentro de ellos. A veces tienen un span con un carácter emoji.

2. Uso de selectores de atributos CSS para filtrar

Short description:

Depende de la configuración del usuario. Cada emoji tiene una etiqueta de área y un nombre completo para la accesibilidad y la búsqueda. Podemos usar selectores de atributos CSS para aplicar estilos basados en estos valores. Actualicemos nuestro componente de búsqueda para usar el estado local en lugar del estado global. Al establecer un valor, podemos aplicar filtros al selector de emojis.

Depende de la configuración del usuario. Pero cada uno de ellos tiene una etiqueta de área para accessibility, y también el nombre completo del emoji, porque un emoji puede tener varios nombres para la búsqueda. Y dado el hecho de que ya tengo toda esta información en el DOM, ¿quizás puedo hacer uso de ella para el filtrado también? Aparentemente puedo y aparentemente es bastante fácil.

En CSS tenemos algo que se llama un selector de atributos que nos permite seleccionar un atributo arbitrario y basado en su valor aplicar estilos a los elementos. Así que esto significa que puedo establecer un selector basado en el nombre completo, la propiedad data o basado en la etiqueta de área. Y solo quiero mostrarles cómo se hace y lo fácil que es implementarlo.

Así que aquí está nuestro componente de búsqueda. Actualmente funciona actualizando el estado global pero en lugar de hacer eso, no lo hagamos más. Y en su lugar, tengamos algunos estados locales. Así que importemos useState. Así que import useState de React y luego establezcamos este estado. Así que const value setValue equals useState. Debería ser indefinido y también inicialicémoslo a indefinido o string. Sí, genial. Y ahora todo lo que tenemos que hacer aquí es establecer un valor y si volvemos a mirar el selector de emojis veremos que escribir no hace nada más que ocultar las categorías. Y la razón es porque aún no aplicamos nada de él.

3. Mejorando el rendimiento de búsqueda con CSS

Short description:

Para mejorar el rendimiento de búsqueda en las aplicaciones de React, crea un componente llamado Búsqueda CSS que devuelve una etiqueta de estilo. Utiliza selectores de atributos CSS y una consulta de búsqueda para ocultar emojis que no coinciden con la consulta de búsqueda. Además, utiliza el pseudo selector CSS 'Has' para ocultar automáticamente las categorías sin emojis coincidentes. A pesar de las desventajas de rendimiento, esta solución funciona significativamente más rápido y es un buen compromiso. La estrangulación de la CPU y la ejecución del perfilador muestran retrasos y actualizaciones mínimas. Gracias por acompañarme y no dudes en visitar mi sitio web o cuenta de Twitter para ver más de mi trabajo.

Y lo que quiero hacer ahora es algo que todos te dirán que no hagas pero que en realidad funciona bastante bien. Es crear otro componente que devuelve una etiqueta de estilo. Sí, una etiqueta de estilo, un estilo CSS. Así que hagamos una función y llamémosla Búsqueda CSS. Y tomará el valor que es string o indefinido, ¿verdad? Sí, seguro.

Vale. Si no tenemos un valor, devolvamos null y de lo contrario devolvamos un elemento de estilo. Así que devolvamos el estilo y toma una cadena como su cadena de concha y tenemos que poner algo de estilo dentro y solo para hacer todo más limitado, primero tomemos el selector CSS o los nombres de clase para el selector de emojis solo para que apliquemos todo dentro del selector en sí y no fuera. Así que selector de emojis React y lista de selector de emojis. Así que ese es nuestro selector y también recortemos y pongamos en minúsculas esto y el valor de la búsqueda valor para que no tratemos con problemas de sensibilidad a mayúsculas y minúsculas.

Ahora necesitamos escribir una consulta de búsqueda y va a ser súper simple considerando el hecho de que ya conocemos el selector de atributos. Así que lo que podemos hacer es escribir una consulta de búsqueda. Um, que toma un botón y luego el nombre completo de data. De nuevo, ese es el que contiene o, uh, todos nuestros nombres de emojis y luego podemos hacer una coincidencia parcial significa que si tenemos como una parte del nombre o nuestra consulta de búsqueda está en la parte del nombre del emoji, como al principio en el medio o al final, todavía será coincidido, lo que sea que esté dentro. Así que por ejemplo, si hago sonrisa, si busco el emoji sonrisa, pero solo escribo el carácter I será coincidido. Así que esta es la consulta de búsqueda y lo que queremos hacer ahora es simplemente decirle a los emojis que se oculten si no coinciden con esto porque de lo contrario todos los demás emojis deberían mostrarse. Así que lo que podemos hacer es usar la consulta de búsqueda y decir que cada botón que no coincida la consulta de búsqueda debe establecerse en display none, lo que significa que cada emoji que no se ajuste a esto, nuestra consulta de búsqueda desaparecerá inmediatamente. Simplemente pongamos esto dentro de nuestro componente de búsqueda y veamos si funciona. Así que hagamos un valor, pásale el valor y vuelve al selector de emojis y escribiré K y empezamos a ver algo desapareciendo, un ING y están desapareciendo como búsqueda está funcionando. Probemos bicicleta y estoy viendo un pequeño problema aquí, ves, todas estas categorías vacías, no los teníamos anteriormente pero cuando teníamos JavaScript, simplemente eliminamos todos los elementos de las categorías vacías. ¿Qué podemos hacer ahora? Porque en este momento, solo estamos seleccionando en función del emoji en sí. Bueno, hace casi dos años, creo que obtuvimos un nuevo selector CSS y un nuevo pseudo selector CSS llamado Has que nos permite establecer la visibilidad o establecer cualquier estilo CSS para un elemento basado en sus hijos, basado en sus descendientes. Así que básicamente, lo que podemos hacer es buscar cada categoría que no tenga ningún emoji que coincida con la consulta de búsqueda. Esto significa que las categorías que no tienen emojis que coinciden con la consulta de búsqueda se ocultarán automáticamente. Si empezamos a escribir ahora, el malo era bicicleta, ¿verdad? Sí, sus categorías desaparecen y todo lo que hicimos fue agregar esta línea. Ahora, concedido, Has no es muy eficiente y Has y Not son aún más ineficientes. Pero dado el hecho de que funciona mucho más rápido de lo que lo hacía antes, creo que es un buen compromiso. Y solo para ser justos, veamos cómo funciona con la estrangulación antes de juzgarlo viendo cómo funciona en una máquina de gama baja. Y si empiezo a escribir, ves que casi no hay retraso en absoluto. Funciona inmediatamente incluso aunque estamos estrangulando la CPU. Y si ejecutamos el perfilador, veamos si realmente hace una actualización completa del estado o no. Estamos viendo que lo único que realmente se actualiza es la barra de búsqueda. Así que creo que es una solución bastante buena para nosotros. Y creo que eso es prácticamente todo. Muchas gracias por acompañarme hoy. Si quieres ver más de mi trabajo, deberías visitar mi sitio web o cuenta de Twitter. Muchas gracias. Espero que hayas aprendido algo nuevo hoy. Me divertí mucho. ¡Adiós!

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Summit 2022React Summit 2022
8 min
How to achieve layout composition in React
Using CSS in this age of components is difficult. Many tools have been created to help us with this problem, but they all fall short in the one problem that tooling can never solve: Which component should be in charge of which styles? In this talk, we will go over strategies on how to build layouts in a composable way.
React Summit 2023React Summit 2023
29 min
Moving on From Runtime Css-In-Js at Scale
In this talk, Siddharth shares the challenges his team faced with optimising runtime css in js (styled-components) for performance. At GitHub, there are about 4000 React components that contain styles, Siddharth dives into the reasons for rethinking styling architecture, the challenges faced and lessons learned by migrating a big application.
React Advanced Conference 2023React Advanced Conference 2023
19 min
Type-safe Styling for React Component Packages: Vanilla Extract CSS
Unlock the power of type-safe styling in React component packages with Vanilla Extract CSS. Learn how to effortlessly write scalable and maintainable styles, leveraging CSS-in-Typescript. Discover the seamless integration of Vanilla Extract CSS and take your React components to the next level.
React Summit 2023React Summit 2023
9 min
Building Pixel-Perfect UI Components Using CSS Variables
CSS variables have become so sophisticated in recent years that they now enable us to do things that aren't possible with JavaScript. In this lightning talk, I'll explain how MUI's engineers are leveraging the power of CSS variables in our new React component library, Joy UI, to deliver components that automatically adapt their style and structure to the context in which they're rendered.

Workshops on related topic