Introducción al artículo de Wulin.com (www.vevb.com): ¿Qué tan profunda es el agua en la página frontal?
Cualquiera que trabaje en Internet básicamente escribe algunas líneas de HTML. Las personas que han usado palabras también pueden hacer páginas regulares con Dreamweaver, por lo que la mayoría de las personas pensarán naturalmente que el desarrollo de páginas no tiene mucho contenido técnico y es muy simple. Esta comprensión común no solo, sino que también hay muchas dudas para los profesionales: no hay ningún problema en la implementación de la página de front-end; compatibilidad, casos pequeños; Integración de imágenes, y se ha utilizado todo el tiempo ... ¿Qué otros problemas se pueden encontrar? Los cuellos de botella, los techos, las transformaciones y las formas de salir se discuten ampliamente entre los profesionales. ¿Realmente no hay problema? El Centro de Tecnología del Front-end de NetEase se ha establecido durante varios años, y parece que hay interminables temas para discutir, y a menudo hay nuevas ideas para animar a todos. Entonces, ¿cuáles son los requisitos para el desarrollo de la página y qué más hacer, y cuán profundo es el agua aquí, vamos a obtenerlo?La percepción de la parte delantera de la página parece estar variada en diferentes momentos. En los primeros días de Internet, los autos pequeños aún eran más caros que las casas, y los pasteles de sésamo y los vermicélicos solo se usaban para comer, y los crisantemos solo se usaban para hacer té. En ese momento, el estilo de diseño de la página era relativamente único, y los requisitos de página correspondientes eran relativamente simples. El navegador en ese momento era básicamente el mundo de IE6. JavaScript fue solo sinónimo de efectos especiales de la página web. La página HTML en sí no atrajo mucha atención. Parecía que mientras pueda usar Div o incluso tabla para agregar CSS al posicionamiento auxiliar de la imagen, estaría bien reservar el contenido de la página, y este concepto existió durante mucho tiempo. Con el enriquecimiento del contenido de la página, el desarrollo del estilo de diseño, el aumento en la complejidad de la interacción, la aplicación de AJAX y la actualización de los navegadores han hecho que todos presten atención a la página más básica nuevamente. Entonces, lo que se discute acaloradamente es la compatibilidad del navegador. Al encontrar problemas, lo más apasionado es buscar hacks en Internet, y luego regañar IE6 y 7 ... Después de hacer todo esto, parece que he encontrado un cuello de botella nuevamente y comencé a encontrar una salida. Comencemos con esta etapa.
Implementar representaciones es el trabajo más básico
El borrador visual se expresa a través del código de página, que incluye dos demandas básicas: 1. Realmente puede reflejar el borrador visual; 2. Puede ser compatible a través del navegador. Para lograr estas dos demandas, necesitamos tener una actitud detallada y un cierto grado de habilidades de página. Si podemos completar estos dos contenidos, podemos ingresar a las filas de los profesionales en el frente de la página, pero esto significa que podemos ser competentes para el desarrollo de la página. ¡No, está comenzando!
Comunicación con diseñadores y participación del proyecto
La comunicación es importante. Permítanme hacer algunas preguntas primero: ¿Hemos discutido con los diseñadores que algunos efectos tienen un mayor impacto en la eficiencia de representación de los navegadores de gama baja? ¿Alguna vez ha discutido algunos efectos que se pueden implementar en CSS3 para hacer que la estructura sea más concisa y clara? ¿Alguna vez ha seguido el equilibrio en código y visión? El desarrollo del front-end de la página es para usuarios básicos, y el código escrito también se aplica directamente al navegador. Estamos obligados a ser responsables de la estabilidad y la eficiencia de representación de la página. También a menudo encontramos el diseño del proyecto bajo la presión de progreso general y el diseño se lleva a cabo simultáneamente con el desarrollo front-end de la página. En este momento, es más necesario obtener la mayor cantidad de información del proyecto como sea posible y comprender lo que debemos hacer. Estos pueden ayudarnos a considerar completamente la reutilización y la expansión del marco.
Buena estructura de página
La redacción de la estructura de la página es como construir una base de construcción. La calidad del código CSS, el desarrollo JS, el desarrollo de antecedentes y la futura expansión de la página, la iteración y el ajuste de la página. Después de obtener el borrador visual, no esté ocupado comenzando, observe y piense más. Primero analice el diseño, divida el marco, luego planifique la estructura y escriba el código. Especialmente en proyectos a gran escala, el uso racional del desarrollo modular tiene beneficios considerables si se lleva a cabo en el mantenimiento general o ampliado.
Acerca de Hack
Muchos estudiantes buscan la mayor cantidad de hacks en línea al desarrollar páginas. Ya sea que confiemos completamente en los trucos para lograr la compatibilidad de la página, la respuesta es no. La gente a menudo describe que IE6 dice que nos hemos dicho una mentira, pero tenemos que decir otras cien mentiras más para cumplir esta mentira. No negar que IE6 a menudo nos hace vomitar sangre en nuestras bocas, pero no significa que podamos sentirnos a gusto usando más mentiras para compensarla. En la mayoría de los casos, puede ajustar la estructura HTML cambiando sus ideas o usar algunos CSS que son inexplicables pero relativamente seguros para matar hacks. Nadie puede predecir cuando usar Hack nos hará caer en un gran golpe. Por ejemplo, desencadenar el diseño o la posición: el relativo puede ayudar a resolver muchos problemas de IE6.
Hermoso código
Hoy en día, muchos proyectos web tienen funciones complejas y su escala de código se volverá enorme. Cómo mejorar el desarrollo y el mantenimiento de colaboración es un problema que enfrentamos. Necesitamos considerar mejorar la planificación unificada, y debemos desarrollar buenos hábitos de desarrollo de código para estar a gusto cuando enfrentamos diversas situaciones. Mirar el código de página, ver un uso razonable de etiquetas, buenas anotaciones, estructura de código clara y CSS preciso no solo es como apreciar una obra de arte, sino también reduciendo los costos de comunicación para el desarrollo posterior y el desarrollo colaborativo. ¿Qué razón tenemos para no hacer esto? Para dar un ejemplo negativo: el abuso Div es un problema típico ahora. ¿Cuenta para ver cuántas etiquetas usas? Diferentes semánticas debe usar el código de etiqueta correspondiente, especialmente HTML5 proporciona etiquetas semánticas más ricas. Todos están esperando el cargo en el campo de batalla. ¡Liberemos los liberamos!
Desarrollo de página accesible
La accesibilidad y la facilidad de uso son cosas muy subjetivas y fáciles de usar. Las páginas que las personas comunes se ven perfectamente pueden no parecer necesariamente consideradas entre los grupos especiales. Deberíamos sentirnos culpables cuando las personas ciegas usan el software de lectura de pantalla para entrar en un bucle dentro de un área determinada de la página. Solo se puede decir que los sitios web nacionales actualmente prestan mucha menos atención a esto, lo que requiere que trabajemos juntos para que más personas sientan nuestro entusiasmo. >
Garantizar la eficiencia
Como parte relativamente fronteriza del desarrollo del proyecto, el desarrollo de la página puede necesitar completarse lo antes posible para ganar tiempo para el proyecto, lo que requiere que mejoremos la eficiencia tanto como sea posible. Si desea hacerlo bien, primero debe afilar sus herramientas. Además de la formación de la experiencia práctica y los hábitos de código que pueden ayudarnos a mejorar la eficiencia, si desea mejorar su capacidad para controlar el progreso de su propio desarrollo, hay muchas herramientas auxiliares que pueden ayudarnos a desarrollar páginas. Por ejemplo, el uso de Less o Sass puede ayudarnos a expandir y organizar CSS, mejorando en gran medida la eficiencia de escritura de CSS y aumentando la mantenimiento. Por ejemplo, puede usar la finalización automática de Zen Coding y los bloques de código personalizados para permitirle señalar su espada como si estuviera volando. Incluso he visto palabras clave de bloqueo de código que mejoran la velocidad de desarrollo a través de métodos de entrada personalizados. Si explora más, definitivamente encontrará la herramienta más adecuada para usted.
Optimización para servidores
El desarrollo de la página también requiere comprender la optimización del servidor y minimizar la carga en el servidor. Por ejemplo, CSS Sprite es un ejemplo típico de reducir el número de solicitudes de servidor. En el desarrollo front-end de la página de correo electrónico NetEte, estamos constantemente haciendo varias optimizaciones, como buscar constantemente un saldo entre el tamaño del archivo y el número de solicitud del servidor; Para mejorar la utilización de caché tanto como sea posible, se adoptaron actualizaciones de parches; Los nombres de clases fueron ofuscados y comprimidos para evitar nombres excesivamente largos; Base64 se utilizó para reducir el número de solicitudes y otras medidas. Estos son los resultados de compensaciones integrales y las optimizaciones generales deben considerarse en todos los aspectos. Porque cuando el número de visitas de página alcanza un cierto orden de magnitud, incluso la optimización más pequeña logrará resultados considerables, e incluso el problema más pequeño puede formar un gran desastre.
Abrazar html5
Esta es una era llena de oportunidades. El advenimiento de la era HTML5 ha creado mayores oportunidades con el surgimiento de Internet móvil, y hay muchas cosas que vale la pena aprender y descubrir. HTML5 proporciona una rica interfaz API JS, que necesitamos estudiar; El esplendor de CSS3 ha atraído suficiente atención, que necesitamos estudiar; Cómo desarrollar páginas más adaptables en dispositivos móviles requiere que estudiemos ...
Quédense hambrientos quédense tontos
Cuanto más sacaba el agua, descubrí que la parte inferior todavía estaba profunda y que el fondo no estaba con fondo. Cuanto más estudiaba el contenido anterior, más encontraba que más montañas y ríos necesitaban ser escalados. Manténgase hambriento, use sus ojos para descubrir y descubrir, y enriquecer constantemente sus habilidades para encontrar la posición y romper los cuellos de botella. Como dice el dicho, solo construyendo una casa de alto nivel puede lograr resultados naturales. Este artículo se formó porque discutí el tema del cuello de botella con mis colegas antes. Quería encontrar el posicionamiento para mí y los estudiantes en la parte delantera de la página para resolver mis ideas. Tome una frase del discurso del CEO de Apple en Stanford, mantén hambre y manténgase en tonos y compártala con todos.