Conocimientos básicos de la página de inicio de Taobao
Conocimientos básicos sobre la página de inicio de Taobao
Mucha gente usa Taobao, pero no saben mucho sobre la página de inicio de Taobao. Traeré aquí una explicación de un diseñador de la página de inicio de Taobao. Puede ser útil. Permitirle tener una comprensión básica de la página de inicio de Taobao.
1. Introducción de antecedentes relevantes
La página de inicio de Taobao es la cara de Taobao y lleva la entrada a casi todas las empresas de Taobao, con gran tráfico y pedidos. unidades de magnitud Por miles de millones. En los últimos años, con el auge de los terminales inalámbricos, el foco del negocio ha comenzado a desplazarse hacia los terminales inalámbricos (ahora no se puede llamar un cambio, es básicamente inalámbrico), por lo que el tráfico de la página de inicio de PC de Taobao también se ha reducido, pero aun así, su PV promedio diario sigue siendo bastante alto.
La página de inicio de Taobao siempre ha sido un campo de pruebas para plataformas y tecnologías internas, y siempre está cambiando. Los marcos y sistemas más recientes se probarán en la página de inicio de Taobao. Imagínese, si se ha lanzado una determinada medida de actualización u optimización que debe promoverse en la página de inicio de Taobao y se han obtenido buenos datos y estabilidad, ¿por qué otras empresas no la utilizarían? ¿Qué pasa con los intentos y cambios? Al mismo tiempo, el equipo de arquitectura técnica que trabajó en el front-end de Taobao el año pasado naturalmente tomó la iniciativa de introducir contenido experimental en el negocio.
Demasiado ocupado. De hecho, la mayoría de las páginas se construyen en función de la plataforma de construcción interna: operación o front-end a través de la construcción de módulos. El enfoque del front-end está en la construcción de la plataforma en sí y en garantizar la versatilidad y la tasa de reutilización. módulos, por supuesto, y algunas cosas de ingeniería.
Para las páginas creadas utilizando una plataforma de construcción, el front-end solo necesita considerar el desarrollo de los módulos atómicos que componen la página. La representación general es totalmente responsable del script unificado proporcionado por la plataforma de construcción. . En la página de inicio de Taobao, considerando la gran cantidad de módulos de página y la pequeña cantidad de comunicación entre departamentos y equipos, el modelo de representación es ligeramente diferente.
2. Los cambios generales de la página de inicio de Taobao
Como se mencionó anteriormente, la página de inicio de Taobao se basa en una plataforma de construcción interna, y sus cambios seguirán naturalmente los cambios en el sistema de construcción.
1. Página de inicio de Taobao en PHP
Poco después de hacerse cargo de la página de inicio de Taobao, se encontró con una revisión anual. En ese momento, todavía se ejecutaba en un entorno PHP. Lo que hay que explicar aquí es que todos los códigos de la página de inicio de Taobao están completamente controlados por la interfaz. La interfaz no trata directamente con la base de datos y sus fuentes de datos se dividen en dos partes.
Fuente de datos
Primero, los datos rellenados por operaciones. En forma de excavación frontal, los pozos están reservados para que los operadores obtengan y completen datos.
Cuando los operadores completen estos pozos, se generarán los datos correspondientes a esta plantilla PHP y la representación final. Será un fragmento HTML completo (renderizado en tiempo real).
En la versión antigua del sistema constructivo, se construía un submódulo de esta manera. Lo describí de manera muy simple, pero como plataforma necesita considerar muchas cosas, como control de secuencia de datos, lanzamiento programado, mecanismo de reversión, mecanismo de filtrado, sincronización de datos, actualización de datos, control de versiones, controles de permisos, referencias a otros sistemas, etc. .
El segundo son los datos que proporciona el backend o plataforma de personalización. Diferentes negocios tienen diferentes demandas. Algunas empresas tienen sus propios servidores y requieren el uso de datos producidos por sus propias empresas; algunas esperan que los usuarios vean contenido diferente y esperan estar conectados al algoritmo; algunas empresas tratan directamente con los vendedores y esperan utilizarlo; promoción de inversiones Datos; y algunas empresas esperan utilizar datos filtrados del grupo de datos... En resumen, la página de inicio de Taobao necesita conectarse a varios sistemas y tiene muchas interfaces. La integración de fuentes de datos dinámicas se mencionará más adelante.
Y los nombres de dominio correspondientes a estos sistemas son diferentes, por lo que el formato JSONP naturalmente se convierte en la primera opción.
Pero para algunos sistemas especiales, como los anuncios, su representación no es una simple solicitud JSONP. También puede intervenir en todo el proceso de representación de anuncios, como cargar su JS y entregar el control de representación.
Estructura de la página
Lo anterior presenta la fuente de datos y la estructura de los submódulos, entonces, ¿cómo se compone toda la página? Hay dos tipos de construcción de módulos, uno es la visualización. Construir, operar o el front-end puede arrastrar y soltar el módulo desarrollado (o el módulo seleccionado en la biblioteca de módulos) en el contenedor para formar una página:
Por supuesto, la imagen de arriba es solo un modelo, ya que necesidades de un sistema Hay muchas más cuestiones a considerar, como el diseño de la página, la adaptación de múltiples terminales, la ocultación temporal de módulos, el ajuste de posición, la selección de máscaras, la duplicación de módulos, etc.
Introduzca el módulo a través de la identificación del módulo y agregue algunas etiquetas como lazyload para facilitar el control del ritmo de renderizado y la entrada de datos. La diferencia entre la construcción del código fuente y la construcción del módulo es que en la primera es más fácil controlar la estructura del módulo y el orden de representación del módulo.
Fuente de datos dinámica
La página de inicio enfrenta muchas interfaces y plataformas, y se conecta con docenas de partes comerciales. Las interfaces son un gran problema debido a las diferencias en el back-end. sistemas, básicamente no hay solución Unificar el formato de la fuente de datos Una vez que el operador de repente quiere cambiar a un sistema que considera más cómodo de usar o que tiene mejores datos, el front-end y el back-end probablemente tendrán que comunicarse. conectar varias veces.
La plataforma tiene la capacidad de acceder a fuentes de datos, lo que significa que los pozos que excavamos no solo pueden permitir que las operaciones completen datos, sino que también importen directamente datos de varias fuentes de datos. Por supuesto, un proceso de datos. aquí se requiere la conversión de mapeo de campos.
Después de la vinculación, los datos se pueden generar de forma sincrónica o asincrónica. Estas son capacidades proporcionadas por la plataforma. Esta solución básicamente resuelve el problema de los cambios de interfaz/sistema back-end y reduce el costo de comunicación entre el front-end y el back-end.
Sin embargo, lo que hay que tener en cuenta aquí es que, aunque las interfaces de la página están unificadas a través de la plataforma, esto también significa que todas las solicitudes de la página fluirán primero a través de la plataforma y luego se distribuirán a varios backends. La plataforma La capacidad de soportar el estrés es muy exigente.
2. La transición de PHP a Node
La solicitud diaria promedio en la página de inicio de Taobao no puede ser retenida por más de diez o veinte servidores. Para admitirla, debe haber un clúster de servicios. .
Cada nodo CDN tiene capacidades de renderizado PHP. Cuando se publica una página, sincronizamos todos los módulos y datos de la página con todos los nodos CDN. Se ve bastante bien, pero después de un período de operación y mantenimiento, poco a poco surgieron muchos problemas de seguridad y rendimiento:
Problemas de rendimiento. Cada página PHP contiene múltiples submódulos, y los submódulos también pueden hacer referencia a otros submódulos. La operación de inclusión de PHP es costosa. Cada referencia es un disco IO, y miles de ellos se ejecutan en un nodo de representación. Se puede imaginar que una página PHP similar a la página de inicio de Taobao. ser altamente eficiente.
Problema en el mecanismo de empuje. La sincronización de archivos es un mecanismo bastante desagradable. En primer lugar, no hay control sobre el tiempo. Un archivo se puede sincronizar con todos los nodos en unos pocos segundos, o más de uno o dos minutos. Además, el proceso de sincronización puede fallar y el costo de las pruebas de estado también es considerable. alto. Cuando la publicación es relativamente compacta, hay muchos archivos que deben sincronizarse, lo que fácilmente puede provocar la acumulación de colas y empeorar la mala experiencia de sincronización.
Problemas con fuertes requisitos en tiempo real. Antes de enviar el archivo, también puede pasar por algunos sistemas front-end. Cuanto más largo sea el enlace de publicación, más lento será el tiempo efectivo en línea. Cuando es lento, tarda unos cinco minutos en surtir efecto. -Rendimiento en el tiempo (como las ventas flash). Esto es completamente inaceptable en términos de demanda.
Por supuesto, hay muchos otros problemas, como mayores costos de operación y mantenimiento, mayores riesgos de seguridad, reservas insuficientes de talento senior de PHP, etc. Entonces, el destino del contenedor de renderizado PHP es matarlo.
El clúster de servicios es Cache CDN, que solo tiene capacidades de procesamiento de archivos estáticos y no tiene las capacidades de renderizado de PHP/Node, por lo que tiene una alta eficiencia de procesamiento, buen rendimiento y una fuerte resistencia a la presión. Puede gastar dinero para comprar servicios y expandir el clúster de caché.
Cuando un usuario visita, Nginx va a Cache CDN. Si accede al caché, regresa directamente. Si no hay ningún acceso, regresa al servidor de origen. El servidor de origen es un servicio de nodo con capacidades de representación de módulos. Puede hacer muchas cosas:
· Controlar el encabezado de respuesta de la caché y controlar el tiempo de caché de la página en el cliente y en la caché a través de max-. age y s-maxage El tiempo de caché, este tiempo de caché se puede ajustar en cualquier momento según las necesidades, como aumentarlo a un tiempo más largo durante promociones importantes
· Controlar el entorno de red interno y externo; y estado de la prueba AB;
· Integración Cadenas de herramientas relacionadas con el front-end, como detección, compresión, filtrado, etc.
Tiene muchas ventajas, que no se enumeran aquí. Este modelo también agrega una capa de recuperación ante desastres. El servidor de origen envía datos al servidor de respaldo en la misma sala de computadoras que el caché a intervalos regulares. Si el servidor de origen falla, la recuperación ante desastres se puede transferir automáticamente a los datos de respaldo.
El cambio de modelo no solo supone un gran avance en la operación y el mantenimiento, sino que también reduce el riesgo de seguridad cuando la CDN es atacada. También elimina la necesidad de varios mecanismos de detección requeridos por la sincronización, lo que ahorra millones. costos anuales Arriba, las ventajas son bastante obvias.
3. Nodo, diferentes modos
En el módulo PHP anterior, solo hablamos de las partes HTML y de datos. Los lectores atentos deberían haber descubierto que los recursos estáticos como CSS y JS son. No se menciona, ¿cómo se representa la página?
En la versión anterior de la página PHP, introdujimos directamente un CSS y un JS. Taobao usa la versión iterativa de git, y estos recursos estáticos se colocan. directamente en un repositorio de git. Es decir:
Cada vez que publique el archivo git, modifique el número de versión de PHP y luego publique el código PHP. Por supuesto, también se han realizado optimizaciones relevantes, como actualizar automáticamente el número de versión al lanzar git, etc.
Junte el CSS/JS y la plantilla de un módulo, y el CSS/JS y los recursos estáticos de otros módulos en la página son independientes entre sí. El propósito es esperar que un solo módulo pueda hacerlo. ejecutarse por completo, lo que es más propicio para la reutilización del módulo.
La excavación del módulo también es independiente de la plantilla y el formato de datos se define en forma de esquema JSON:
Los módulos son independientes y están aislados entre sí, por lo que no habrá Puede haber un cierto grado de redundancia, pero los beneficios del desacoplamiento del módulo son mucho mayores que esta redundancia. De hecho, gestionamos módulos individuales a través de un almacén. La representación de páginas es relativamente simple. El contenedor del nodo de origen fusionará todos los index.xtpl en un solo page.xtpl. Para reducir las solicitudes de páginas, css y js también se combinarán en un solo archivo.
La página estará al tanto de cualquier actualización de módulo. La próxima vez que ingrese al sistema, se le preguntará si necesita actualizar módulos y páginas.
3. Optimización del rendimiento de la página de inicio de Taobao
Hay muchos módulos de página de inicio. Si los escupe de una vez, la cantidad de DOM definitivamente excederá los 4k y el resultado será. un primer tiempo de pantalla extremadamente largo. De acuerdo con las especificaciones de desarrollo de TMS, cada módulo de TMS contiene un index.js y un index.css, y finalmente se muestran dos combinaciones de js y css. Cuando se carga la página de inicio, no todos los index.js se ejecutarán a la vez; de lo contrario, el bloqueo de la página será muy grave al principio.
Lógica de representación de páginas
· Recorrer todos los módulos TMS (incluido un gancho J_Module
· Algunos módulos TMS no tienen contenido JS, pero uno está cargado en el índice); .js, agregue la clase tb-pass al módulo, que se usa para omitir la ejecución del JS del módulo
· Divida la página en dos partes, la primera pantalla es una y la otra; la primera pantalla es el segundo bloque, primero agregue el primer módulo de pantalla al monitoreo de carga diferida;
· Después de cargar el primer módulo de pantalla, o el usuario maneja la interacción de la página (desplazamiento, movimiento del mouse, etc.), agregue el módulo que no es la primera pantalla al monitoreo de carga diferida
· Maneje algunos módulos especiales, que comenzarán a cargar unos cientos de píxeles antes de ingresar a la ventana
· Supervise el desplazamiento y renderice los módulos de acuerdo con la lógica anterior;
p>
· Incluso si se ejecutan algunos módulos, es posible que no se rendericen porque su prioridad no es alta. módulo, como esperar hasta que se active el evento de carga/desplazamiento del mouse antes de representar el contenido.
La optimización del rendimiento del código es un trabajo delicado. Si desea realizar la optimización del rendimiento en una página enorme no optimizada, es posible que se enfrente a una reconstrucción del código. El artículo anterior menciona la optimización de los detalles internos de la página, pero no menciona la estandarización y estandarización en el proceso de desarrollo, así como la optimización de cada enlace en la ruta de acceso en línea.
4. Garantía de estabilidad de la página de inicio de Taobao
Con mucho tráfico, cualquier pequeño problema se convertirá en un gran problema, por lo que cualquier problema ocasional que surja durante el proceso de desarrollo debe resolverse. atención a. Sin embargo, muchos problemas esporádicos no se pueden encontrar en nuestro entorno de prueba, como problemas relacionados con la región (como un nodo CDN en Shanghai está inactivo), problemas de atributos del usuario (como el tragaluz de la página del usuario cuyo último apodo es la letra s). , problemas con los complementos del navegador, problemas con la inyección de anuncios del operador, etc.
Es difícil considerar todas las cuestiones antes de conectarse, pero hay dos cosas que se deben hacer bien: recuperación y monitoreo de desastres y alerta temprana.
1. Mecanismo completo de recuperación ante desastres
Hay dos niveles de consideraciones para la recuperación completa ante desastres:
· Errores de solicitud de interfaz asincrónica, incluidos errores de formato de datos de la interfaz. interfaz Solicitud de tiempo de espera, etc.
· Representación sincrónica, error de representación de la página de origen.
Las solicitudes de interfaz asincrónicas involucran principalmente sistemas de back-end. Hay muchos sistemas de acoplamiento y cada sistema tiene una estabilidad y resistencia a la presión diferentes.
Cada solicitud de datos se almacena en caché localmente y se proporciona un fondo rígido para cada interfaz. Otra solución es "volver a intentarlo". Si la solicitud falla una vez, solicítela una segunda vez.
Para la representación sincrónica, solo requiere la plantilla de página y los datos de sincronización. Si hay un error en cualquiera de ellos, el sitio de origen informará un error. En este momento, el contenido devuelto al origen. una página de error con un código de estado de 5xx. Este error no es necesariamente causado por el desarrollador. Puede ser una anomalía de sincronización o un problema de interrupción en el enlace del sistema.
Una vez que hay alguna anomalía en el sitio de origen, Nginx irá al espejo de la página de inicio en la misma sala de computadoras que Cache CDN. El contenido de este espejo es el código fuente de respaldo HTML de la página de inicio de Taobao.
2. Mecanismo de monitoreo y alerta temprana
El monitoreo también tiene dos niveles:
· Monitoreo a nivel de módulo, ubicación de solicitud de interfaz, detección de tragaluz de módulo, etc. ;
· Monitoreo de página, agregue etiquetas especiales en la página, regrese a todos los nodos CDN regularmente para verificar si la etiqueta especial existe.
El monitoreo a nivel de módulo tiene bastante contenido. Cuanto más puntos de monitoreo y más detallado sea, más eficiente será localizar problemas al final, por ejemplo, en un módulo ligeramente complejo. Enterraré estos puntos de monitoreo:
· Error de formato de solicitud de interfaz, falla de solicitud, tiempo de espera de solicitud, al menos tres puntos ocultos
· Puntos ocultos de falla de solicitud de datos de tapa dura;
· El módulo no se ha renderizado en 5 segundos.
· Los enlaces del módulo coinciden con las listas de imágenes en blanco y negro.
Parte del monitoreo también manejará automáticamente los errores claros. Por ejemplo, si aparecen imágenes http en una página https, estos problemas se manejarán automáticamente de inmediato.
3. Pruebas automatizadas antes de conectarse.
Esto es parte de todo el entorno de ingeniería de Taobao, pruebas automatizadas de front-end. Generalmente, estos problemas se abordarán antes de conectarse:
· Detectar si el HTML cumple con las especificaciones
· Detectar la situación de actualización de https
· Detectar la legalidad del enlace
· Detectar la legalidad de los recursos estáticos
· Detectar errores de JavaScript
· Detectar si hay un cuadro emergente cuando la página está cargado
· Detecta si la página llama a la consola *
· Registro de memoria de la página JS
Por supuesto, también puedes agregar casos de prueba tú mismo, como por ejemplo. detectar el formato de datos de la interfaz, problemas con la claraboya del módulo, etc. La detección automática también puede configurar una regresión programada, que es relativamente segura.
5. Medidas ágiles para la página de inicio de Taobao
1. Comprobación de estado
Hay muchos módulos de página para poder realizar un seguimiento de los cambios de cada pequeño. punto en la página, I Se realizan estadísticas detalladas sobre cada aspecto de la solicitud y la prestación.
Una vez que la solicitud de la interfaz falla, o la interfaz pierde la lógica de recuperación ante desastres, o el módulo se procesa durante más de 5 segundos, aparecerá una alerta amarilla en la consola. Por supuesto, en este momento, las estadísticas de alerta tienen. También se ha enviado al servidor.
2. Interface Hub
Interface Hub es una herramienta de gestión de solicitudes de datos.
La representación de muchos módulos de la página requiere más de una fuente de datos. Una vez que los datos de representación de la página de comentarios de operación son anormales, los datos se pueden encontrar directamente a través del Hub para acelerar la eficiencia de la localización de errores. Al mismo tiempo, Hub también se puede utilizar para cambiar de entorno y cambiar solicitudes de una interfaz a una interfaz en un entorno diario o previo al lanzamiento. Es una herramienta poderosa para la depuración.
3. Canal rápido
Puse un canal de operación rápida antes y después de que se ejecute el script de la página. Una vez que se encuentra un problema de emergencia en línea, como confusión de estilo y desbordamiento, error de interfaz. causando tragaluz, etc., puede modificar directamente el CSS y JS de la página a través del canal de acceso directo y estará en línea en dos minutos.
Sin embargo, este tipo de canal solo es adecuado para reparar problemas de emergencia. Después de todo, insertar código JS a voluntad es muy arriesgado. ;