Cómo desarrollar e implementar código front-end

Primero implemente la página y luego implemente los recursos: durante el intervalo de tiempo entre las dos implementaciones, si el usuario accede a la página, los recursos antiguos se cargarán en la nueva estructura de la página y la versión anterior de los recursos se almacenarán en caché Para la nueva versión, el resultado es: el usuario accede a una página con el estilo incorrecto. A menos que se actualice manualmente, la página continuará ejecutándose incorrectamente hasta que caduque el caché de recursos.

Primero implemente recursos, luego implemente páginas: durante el intervalo de implementación, si un usuario con un caché local de una versión anterior del recurso visita el sitio web, el navegador usará el caché local directamente porque la página solicitada es una versión antigua y la referencia del recurso no ha cambiado, por lo que el navegador utilizará el caché local directamente, en cuyo caso la página se mostrará normalmente, si no hay un caché local o si un usuario con un caché caducado visita el sitio web; , la página se mostrará como la anterior cargada con la nueva versión de la página del recurso, lo que provocará errores de ejecución de la página. Sin embargo, cuando un usuario visita el sitio web sin un caché local o con un caché desactualizado, la versión anterior de la página cargará la nueva versión del recurso, provocando errores de ejecución de la página.

Bien, lo que el análisis anterior quiere ilustrar es: ¡implementar a alguien primero no funcionará! Todo esto puede provocar problemas de desalineación de páginas durante la implementación. Por lo tanto, cuando el número de visitas al proyecto no es muy grande, puede dejar que los estudiantes de I + D sufran un poco. Espere hasta la medianoche para conectarse en secreto, cargar recursos estáticos primero y luego implementar la página. ser más pequeño.

Pero las grandes empresas son súper anormales. No existe tal "período de pico absolutamente bajo", sólo "período de pico relativamente bajo". Por lo tanto, para estabilizar los servicios, ¡debemos seguir buscando la perfección!

Este extraño problema surge de la liberación superpuesta de recursos. Los recursos a liberar cubren los recursos ya liberados, y se produce este problema. La solución es implementar publicaciones sin cobertura.

lt;img src="/50/9b3a9df114d14a14130a70abf5733837_hd.jpg" data-rawwidth="631" data-rawheight="456" class="origin_image zh- lightbox-thumb" width="631" data -original="/9b3a9df114d14a14130a70abf5733837_r.jpg"gt;

Mire la imagen de arriba, cambie el nombre del archivo de recursos con la información de resumen del archivo y coloque la información de resumen en la ruta de publicación del archivo de recursos. para que el recurso modificado El contenido se convierta en un archivo nuevo y se publique en línea, y los archivos de recursos existentes no se sobrescribirán. Durante el proceso en línea, primero se implementaron completamente los recursos estáticos y luego las páginas se implementaron en escala de grises. Todo el problema se resolvió de manera relativamente perfecta.

Por lo tanto, el plan de optimización de recursos estáticos de las grandes empresas básicamente necesita lograr los siguientes puntos:

Configurar un caché local ultralargo: ahorrar ancho de banda y mejorar el rendimiento.

¿Utiliza resúmenes de contenido como base para las actualizaciones de caché? -- Control de caché preciso

¿Implementación de CDN de recursos estáticos?--Optimizar las solicitudes de red

¿Más rutas de liberación de recursos sin superposición de liberaciones?--Actualización sin problemas

Totalmente completado Esta es una solución de control de caché de recursos estáticos relativamente completa. Cabe señalar que el control de caché de recursos estáticos requiere que todos los recursos estáticos se carguen en la ubicación del front-end.

¡Sí, todos! No hace falta decir que js y css también incluyen archivos js y css a los que se hace referencia en la ruta del recurso. Dado que se trata de información de resumen, la información de resumen del recurso al que se hace referencia también hará que el contenido del archivo al que se hace referencia cambie, formando así una cascada. Resumen de cambios de la fórmula, el diagrama aproximado es:

lt; img src="/50/ edf10bb428d39d721e36760a86d2641e_hd.jpg" data-rawwidth="709" data-rawheight="371" class="origin_image zh -lightbox -thumb" width="709" data-original="/edf10bb428d39d721e36760a86d2641e_r.jpg"gt;

Bien, por ahora, hemos enseñado una lección sobre los problemas que enfrenta el almacenamiento en caché de recursos estáticos en el frente -Fin del proyecto. Una lección rápida sobre cuestiones de optimización e implementación, y aquí viene la nueva pregunta: ¿Qué es esto? ¿Cómo se consigue que los ingenieros escriban código?

Explique la idea de combinar optimización y procesamiento de ingeniería, y planteará un montón de problemas de ingeniería relacionados con el desarrollo modular, la carga de recursos, la fusión de solicitudes, el marco frontal, etc. Al principio, la solución es la esencia, pero hay mucho que decir, así que lo ampliaré lentamente cuando tenga tiempo. O puedes ir a mi blog para ver algo de desmantelamiento: fouber/blog-GitHub En resumen, ¡la optimización del rendimiento del front-end es definitivamente un problema de ingeniería!

Lo anterior no es mi YY. Puede observar las páginas y los códigos fuente de recursos estáticos de Baidu o Facebook para ver el procesamiento de la ruta de referencia de sus recursos y la solicitud de red de la parte de control de caché de recursos estáticos. Una vez más lamenté el nivel de ingeniería y construcción de Facebook y quedé muy impresionado.

Se recomienda que los ingenieros de front-end presten más atención al campo de la ingeniería de front-end. Algunas personas pueden pensar que sus productos son pequeños y no hay necesidad de ser tan anormales, pero es posible. que algún día quizás necesites hacer ese cambio. Además, si podemos llevar algo al extremo, ¿por qué no hacerlo?

Además, no crea que estos problemas deban ser resueltos por ingenieros de operaciones o de backend. Si estos problemas se dejan en manos de otros roles para que los resuelvan, y las personas siempre plantean problemas que no les importan a los demás, entonces el proceso de desarrollo de los ingenieros de front-end se verá muy restringido, y esta situación incluso en algunas grandes empresas ¡No es infrecuente!