Conocimientos básicos de la página de inicio de Taobao
Muchas personas usan Taobao, pero no conocen la página de inicio de Taobao. Estoy aquí para brindarles una explicación de un diseñador de la página de inicio de Taobao, con la esperanza de brindarles 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, con la entrada de casi todos los comerciantes de Taobao y un gran tráfico de 100 millones de unidades. 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 (no se puede llamar un cambio en la actualidad, principalmente terminales inalámbricos), por lo que el tráfico de la página de inicio de PC de Taobao también ha disminuido, pero incluso por lo tanto, 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. El marco y el sistema más recientes se probarán en la página de inicio de Taobao. Imagínense, si se lanzó una medida de actualización u optimización que necesita ser promocionada en la página de inicio de Taobao y se obtuvieron buenos datos y estabilidad, ¿por qué no intentar cambiar a otros comerciantes? Al mismo tiempo, el equipo de arquitectura técnica que todavía estaba trabajando en el front-end de Taobao el año pasado naturalmente tomará la iniciativa de enviar contenido experimental a los comerciantes.
Las páginas del sitio web de Taobao incluyen la página de inicio, otras páginas de canales, páginas de eventos, etc. No todas estas páginas están codificadas línea por línea en la interfaz de Taobao. Hay demasiados comerciantes, e incluso si el número de personas se duplicara, todavía estarían demasiado ocupados. De hecho, la mayoría de las páginas dependen de plataformas de construcción internas, creadas mediante métodos de operación de módulos o construcción front-end. El objetivo del front-end es construir la plataforma en sí, garantizar la versatilidad y reutilización de los módulos y, por supuesto, hay algunas cuestiones de ingeniería.
Para las páginas creadas en la plataforma, la interfaz solo necesita considerar el desarrollo de los módulos atómicos que componen la página, y el script unificado proporcionado por la plataforma es totalmente responsable de la representación general. 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.
En segundo lugar, el cambio general de la página de inicio de Taobao
Como se mencionó anteriormente, la página de inicio de Taobao se basa en la plataforma interna y sus cambios siguen naturalmente los cambios en el sistema del edificio.
1. Página de inicio de Taobao en PHP
No mucho después de hacerse cargo de la página de inicio de Taobao, se encontró con una revisión anual, que todavía se estaba ejecutando 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 y no tratarán directamente con la base de datos.
Fuente de datos
El primer paso es operar los datos poblados. En forma de excavación inicial, las fosas se reservan para operaciones de obtención de datos de llenado.
La operación de rellenar estos huecos generará los datos correspondientes a esta plantilla PHP, y finalmente un fragmento HTML completo (renderizado en tiempo real).
En el antiguo sistema constructivo, así se construían los submódulos. Lo he descrito de manera muy simple, pero como plataforma, hay muchas cosas que deben considerarse, como el control de secuencia de datos, la publicación programada, el mecanismo de reversión, el mecanismo de filtrado, el mecanismo de filtrado, la sincronización de datos, la actualización de datos, el control de versiones y los permisos. control, etc. Referencias del sistema, etc.
El segundo son los datos que proporciona el backend o plataforma de personalización. Diferentes negocios tienen diferentes necesidades. Algunas empresas tienen sus propios servidores y necesitan utilizar los datos generados por su propia empresa; algunos servicios esperan que los usuarios vean contenido diferente, y miles de personas esperan acceder al algoritmo; algunas empresas tratan directamente con los vendedores y esperan hacerlo; utilizar datos de inversión; algunas empresas esperan operar los datos filtrados del grupo de datos... En resumen, la página de inicio de Taobao necesita conectarse a varios sistemas e 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 es, naturalmente, la primera opción. Sin embargo, la representación de algunos sistemas especiales, como los anuncios, no es una simple solicitud JSONP. También puede interferir con todo el proceso de representación de anuncios, como cargar su JS y entregar el control de representación.
La estructura de la página
La fuente de datos y la estructura de los submódulos se presentaron anteriormente, entonces, ¿cómo se forma toda la página? Hay dos tipos de construcción de módulos. Uno es la construcción visual. El operador o la interfaz pueden arrastrar y soltar el módulo desarrollado (o el módulo seleccionado de la biblioteca de módulos) en el contenedor para formar una página:
Por supuesto, la imagen de arriba es solo un modelo. Como sistema, hay muchas cuestiones que deben considerarse, 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.
El módulo se introduce a través de la identificación del módulo y se agregan algunas etiquetas similares a lazyload para facilitar el control del ritmo de renderizado y la entrada de datos. La diferencia entre la creación de código fuente y la creación de módulos es que la primera facilita el control de la estructura del módulo y el orden de representación del módulo.
Fuentes de datos dinámicas
La página de inicio enfrenta muchas interfaces y plataformas, y conectar docenas de partes comerciales es un gran problema. Debido a las diferencias en los sistemas backend, básicamente no hay forma de unificar el formato de las fuentes de datos. Una vez que de repente quiera cambiar a un sistema con el que se sienta más cómodo o que tenga mejores datos, se estima que los extremos frontal y posterior tendrán que comunicarse y conectarse varias veces.
La plataforma tiene la capacidad de acceder a fuentes de datos, lo que significa que los pozos que cavamos no solo permiten a los operadores completar datos, sino también importar datos directamente de varias fuentes de datos. Por supuesto, aquí se requiere la conversión del mapeo de los campos de datos.
Después del enlace, 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 los costos de comunicación front-end y back-end.
Sin embargo, cabe señalar aquí que, aunque las interfaces de la página se clasifican a través de la plataforma a la vez, 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 al backend. La plataforma tiene La capacidad de soportar el estrés es muy exigente.
2. Cambios de PHP a Node
Los requisitos diarios promedio de la página de inicio de Taobao no pueden ser resistidos por más de diez o veinte servidores. Para admitirlo, debe haber un clúster de servicios.
Cada nodo CDN tiene capacidades de renderizado PHP. Cuando se publica la página, sincronizamos todos los módulos y datos de la página con todos los nodos CDN. Este es probablemente el patrón básico. Se ve bastante bien, pero después de un período de operación y mantenimiento, gradualmente surgieron muchos problemas de seguridad y rendimiento:
Problemas de rendimiento. Cada página PHP contiene varios submódulos y los submódulos también pueden hacer referencia a otros submódulos. La operación de inclusión de PHP es muy costosa y cada referencia es una E/S de disco. Miles de páginas PHP similares a la página de inicio de Taobao se ejecutan en un nodo de representación, y la eficiencia es imaginable.
Problema en el mecanismo de empuje. La sincronización de archivos es un mecanismo repugnante. Primero, el tiempo es incontrolable. Se necesitan unos segundos para que un archivo se sincronice con todos los nodos, o más de uno o dos minutos si es lento. Y el proceso de sincronización puede fallar y el costo de los controles de salud es bastante alto. Cuando la publicación es compacta, hay más archivos que deben sincronizarse, lo que puede provocar fácilmente la acumulación de colas y agravar la mala experiencia de sincronización.
Problemas de demanda en tiempo real. Antes de enviar los archivos, es posible que pasen por algunos sistemas de interfaz de usuario. Cuanto más largo sea el enlace de publicación, más lento será el tiempo de validez en línea. Tarda unos cinco minutos en surtir efecto lentamente. Este tipo de retraso es completamente inaceptable para requisitos con altos requisitos de tiempo real (como picos).
Por supuesto, hay muchos otros problemas, como mayores costos de operación y mantenimiento, mayores riesgos de seguridad y reservas insuficientes de talentos senior de PHP. Por lo tanto, el destino del contenedor de renderizado PHP es acabar.
El clúster de servicios es una CDN de almacenamiento en caché. Solo tiene capacidades de procesamiento de archivos estáticos y no tiene las capacidades de renderizado de PHP/Node. Por lo tanto, tiene una alta eficiencia de procesamiento, buen rendimiento y una fuerte resistencia a la presión. Aún puedes gastar dinero para comprarlo cuando no puedas soportar los servicios, ampliando el grupo de caché.
Cuando un usuario accede a la CDN, Nginx almacena en caché la CDN y regresa directamente a la caché si llega, o regresa al servidor de origen si no llega a la caché. El servidor de origen es un servicio de nodo con capacidades de representación de módulos. Puede hacer muchas cosas:
Controlar los encabezados de respuesta del almacenamiento en caché, controlar cuánto tiempo se almacena en caché la página en el cliente y en el caché mediante max-age y s. -tiempo máximo. Este tiempo de caché se puede ajustar en cualquier momento según las necesidades, como cuando se mejora considerablemente;
Controlar el entorno de red interno y externo y el estado de la prueba AB;
Integrar front- Finalizar cadenas de herramientas relacionadas, como detección y compresión, filtrado, etc.
Tiene muchas ventajas, que no se enumeran aquí. En este modo, se agrega una capa de recuperación ante desastres. El servidor de origen envía los datos al servidor de respaldo en la misma sala de computadoras que el caché a intervalos regulares. Si el servidor de origen muere, puede tolerar automáticamente el desastre de 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. Al mismo tiempo, también elimina los diversos mecanismos de detección necesarios para la sincronización, lo que ahorra más de un millón de costos cada año. Las ventajas son bastante obvias.
3. Nodos, diferentes modos
En el módulo PHP anterior, solo hablamos de HTML y datos. Los lectores atentos deberían haber notado que no se mencionan recursos estáticos como CSS y JS. ¿Cómo se representa la página?
La antigua página PHP introdujo directamente un CSS y un JS, y Taobao usó la versión iterativa de git. Estos recursos estáticos se colocan directamente en el repositorio de git. Eso es todo:
Cada vez que publiques un archivo git, modifícalo. 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.
El CSS/JS de un módulo se coloca junto con la plantilla, 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 ejecutarse por completo, lo que favorece más la reutilización del módulo.
La minería de módulos también es independiente de las plantillas y el formato de datos se define en forma de esquema JSON:
Los módulos están aislados entre sí, por lo que habrá cierta redundancia, pero Los módulos están desacoplados. Los beneficios van mucho más allá de esta redundancia. De hecho, gestionamos cada módulo a través de un almacén. La presentación de la página es relativamente sencilla. El contenedor del nodo de origen fusionará todos los index.xtpl en un page.xtpl y fusionará css y js en un archivo para reducir las solicitudes de página.
La página estará al tanto de cualquier actualización del módulo. La próxima vez que ingrese al sistema, se le preguntará si necesita actualizar el módulo y la página.
En tercer lugar, optimización del rendimiento de la página de inicio de Taobao
Hay muchos módulos en la página de inicio. Si lo escupe de una vez, la cantidad de DOM definitivamente excederá los 4k y el resultado será un tiempo de primera 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 combo js y css. Cuando se carga la página de inicio, no todos los index.js se ejecutarán de una vez; de lo contrario, la congestión de la página será grave al principio.
La lógica de representación de la página
Atraviesa todos los módulos TMS (incluido un gancho de J_Module);
Algunos módulos TMS no tienen contenido js, sino un índice. está cargado. js, agregue una clase tb-pass al módulo para omitir la ejecución del módulo JS;
Divida la página en dos partes, la primera pantalla es una sola parte y toda la que no es la primera. La pantalla es la segunda pieza. Primero, agregue el primer módulo de pantalla al monitoreo de carga diferida;
Cuando se carga el primer módulo de pantalla o cuando el usuario maneja las interacciones de la página (desplazamiento, movimiento del mouse, etc.). ), agregue módulos que no sean de primera pantalla al monitoreo de carga diferida;
Procese algunos módulos especiales, que comenzarán a cargar cientos de píxeles antes de ingresar a la ventana;
Supervise el desplazamiento, siga las Módulo de representación lógica anterior;
Incluso si se ejecutan algunos módulos, es posible que no se representen porque la prioridad no es alta. Se agrega monitoreo de eventos dentro del módulo, como esperar hasta que se active el evento de carga/desplazamiento del mouse. antes de reproducir estos contenidos.
La optimización del rendimiento del código es un trabajo delicado. Si desea realizar una optimización del rendimiento en una página enorme no optimizada, es posible que tenga que refactorizar el código. El artículo anterior mencionaba la optimización de los detalles internos de la página, pero no mencionaba la estandarización en el proceso de desarrollo y la optimización de cada enlace en el canal de acceso online.
Cuarto, la 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 accidental que se encuentre durante el proceso de desarrollo debe solucionarse. llamar la atención. Sin embargo, muchos problemas incidentales no se pueden encontrar en nuestro entorno de prueba, como problemas geográficos (como un nodo CDN en Shanghai que cuelga), problemas de atributos del usuario (como el tragaluz con la letra S en el último apodo de la página del usuario). y problemas con los complementos del navegador, problemas con la inyección de publicidad del operador, etc.
Es difícil considerar todas las cuestiones antes de conectarse, pero hay dos cosas que se deben hacer bien: recuperación ante desastres + monitoreo y alerta temprana.
1. Mecanismo de recuperación ante desastres
Hay dos cosas a las que prestar atención en la recuperación ante desastres:
Errores de solicitud de interfaz asincrónica, incluidos errores de formato de datos de interfaz, interfaz solicitar tiempos de espera, etc.
Representación sincronizada, la página de origen se muestra incorrectamente.
Las solicitudes de interfaz asincrónicas involucran principalmente sistemas backend. Hay muchos sistemas de acoplamiento y cada sistema tiene diferente estabilidad y resistencia a la presión.
Hay muchas opciones para garantizar esto.
Cada solicitud de datos se almacena en caché localmente y cada interfaz proporciona un fondo rígido. Otra opción es "Reintentar". Si la primera solicitud no tiene éxito, solicite una segunda vez.
Para la representación sincrónica, solo se requieren plantillas de página y datos de sincronización. Si hay algún error en alguno de ellos, el origen informará del error. En este punto, lo que devuelve la fuente es una página de error con un código de estado de 5xx. Este error no es necesariamente causado por el desarrollador, pero puede ser causado por una excepción de sincronización o un enlace del sistema desconectado.
Una vez que ocurre una 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, distribución de solicitudes de interfaz, detección de tragaluz de módulo, etc. ;
Supervise la página, agregue etiquetas especiales a la página y regrese periódicamente a todos los nodos CDN para verificar si la etiqueta especial existe.
Todavía hay mucha supervisión a nivel de módulo. Cuantos más puntos y más detallado sea el seguimiento, mayor será la eficacia para localizar el problema al final. Por ejemplo, en módulos un poco más complejos, ocultaré estos puntos de monitoreo:
Error de formato de solicitud de interfaz, falla de solicitud, tiempo de espera de solicitud, al menos tres puntos ocultos;
Parte inferior dura la solicitud de datos no pudo enterrar los puntos;
El módulo no contó los puntos enterrados durante 5 segundos después de renderizar;
Los enlaces y las listas de imágenes en blanco y negro en el módulo coinciden con los puntos enterrados agujas.
Algunos de estos monitores también manejarán automáticamente errores obvios, como imágenes http que aparecen en páginas https; estos monitores manejarán automáticamente estos problemas de inmediato.
3. Detección automática antes de conectarse
Esto es parte de todo el entorno de ingeniería de Taobao, pruebas frontales automáticas. Generalmente, estos problemas se abordarán antes de conectarse:
Compruebe si el HTML cumple con las especificaciones.
Detectar actualización https.
Comprueba la legalidad de los enlaces
Comprueba la legalidad de los recursos estáticos
Detecta errores de JavaScript
Comprueba si hay una ventana emergente cuadro cuando se carga la página
Detecta si la página llama a la consola. *
Registro de memoria de la página JS
Por supuesto, también puede agregar sus propios casos de prueba, como la detección del formato de datos de la interfaz y problemas de tragaluz del módulo. La detección automática también puede configurar el regreso programado, lo cual es relativamente seguro.
5. Medidas ágiles para la página de inicio de Taobao
1. Control de estado
Hay muchos módulos de página. Para realizar un seguimiento de los cambios de cada punto de la página, realicé estadísticas detalladas en cada aspecto de la solicitud y la representación.
Una vez que falla la solicitud de la interfaz, o la interfaz tiene lógica de recuperación ante desastres, o el módulo se procesa durante más de 5 segundos, aparecerá una alarma amarilla en la consola. Por supuesto, en este momento, las estadísticas de alarma se han enviado al servidor.
2. Interface Hub
Interface Hub es una herramienta de gestión de solicitudes de datos.
Muchos módulos de la página requieren más de una fuente de datos para su renderización. Una vez que ocurre una anomalía en los datos de representación de la página de comentarios de la operación, los datos se pueden encontrar directamente a través del Hub, lo que acelera la eficiencia de la localización de errores. Al mismo tiempo, Hub también se puede utilizar para cambiar de entorno, cambiando solicitudes de una interfaz a interfaces en entornos diarios o previos al lanzamiento, lo cual es una herramienta poderosa para la depuración.
3. Acceso directo
Coloqué un acceso directo antes y después de la ejecución del script de la página. Una vez que encuentre problemas de emergencia en línea, como desorden y desbordamiento de estilo, errores de interfaz que causan tragaluces, etc. Puedo 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 canal sólo es adecuado para reparaciones de problemas urgentes. Después de todo, insertar código JS a voluntad es muy arriesgado.
；