Cómo lograr una interfaz de usuario suave como la seda (60 fps) en la aplicación react / redux

Reaccione y reduzca las bibliotecas extremadamente rápidas y no debería tener problemas con las actuaciones. Sin embargo, puede haber algunas aplicaciones r que sean lentas.

Primero, evite las imágenes grandes y, en su lugar, use un formato y resolución de imagen mucho más pequeños. Además de reemplazar imágenes con estilos CSS simples cuando puedas.

En segundo lugar, minimiza tu aplicación. Si tiene un proyecto de 1 MB de tamaño, puede reducirlo fácilmente a 100 KB (reducción del 90%)

Para esto, agregue estos complementos de paquete web a su aplicación, así como ejecute npm run build en create-react-app.

complementos: [
nuevo webpack.DefinePlugin ({// <- clave para reducir el tamaño de React
‘process.env’: {
‘NODE_ENV’: JSON.stringify (‘producción’)
}
}),
nuevo webpack.optimize.DedupePlugin (), // deducir código similar
nuevo webpack.optimize.UglifyJsPlugin (), // minimiza todo
nuevo webpack.optimize.AggressiveMergingPlugin () // Fusionar fragmentos
],

Por último, recomendaría que evite ciertas bibliotecas como material-UI y evite usar otros marcos en conjunto para reaccionar.

Tiene menos que ver con tu JavaScript que con tu CSS. Use transiciones y animaciones CSS en lugar de equivalentes de JavaScript, a menos que esté dibujando con .

Defina tamaños fijos para elementos en la página, para evitar nuevos cálculos de diseño. No use el desbordamiento a menos que lo necesite absolutamente. No use posicionamiento fijo a menos que lo necesite absolutamente. No agregue eventos de desplazamiento a menos que los necesite absolutamente. Evite un gran número de nodos DOM y evite cambiar muchas cosas a la vez.

No es posible hacer una lista de cada hacer y no hacer, simplemente porque hay muchas cosas que pueden hacer que una página sea lenta. Básicamente, mantenga su página lo más tonta posible. Cuantas menos cosas cambien y menos cálculos realice en su JavaScript, mejor. Cada página comienza a una gloriosa 60 fps; todo lo que agregue que procese números, movimientos, clips o cambios de alguna manera le quita eso.