Introduction de l'article de wulin.com (www.vevb.com): Quelle est la profondeur de l'eau sur la page frontale?
Quiconque travaille sur Internet écrit essentiellement quelques lignes de HTML. Les gens qui ont utilisé des mots peuvent également fabriquer des pages régulières avec Dreamweaver, donc la plupart des gens penseront naturellement que le développement de pages n'a pas beaucoup de contenu technique et est très simple. Non seulement cette compréhension commune, mais il existe également de nombreux doutes pour les praticiens: il n'y a aucun problème à mettre en œuvre la page frontale; compatibilité, petits cas; L'intégration d'images, et elle a été utilisée tout le temps ... quels autres problèmes peuvent être trouvés? Les goulots d'étranglement, les plafonds, les transformations et les moyens de sortir sont largement discutés parmi les praticiens. N'y a-t-il vraiment pas de problème? Le NetEase Email Front-end Technology Center a été créé depuis plusieurs années, et il semble qu'il y ait des sujets sans fin à discuter, et il y a souvent de nouvelles idées pour remonter le moral. Alors, quelles sont les exigences pour le développement de pages et que faire d'autre, et la profondeur de l'eau ici, ramassons-la.La perception de l'extrémité avant de la page semble varier à différents moments. Au début d'Internet, les petites voitures étaient encore plus chères que les maisons, et les gâteaux de sésame et les vermicelli n'étaient utilisés que pour manger, et les chrysanthèmes n'étaient utilisés que pour faire du thé. À cette époque, le style de conception de la page était relativement unique et les exigences de page correspondantes étaient relativement simples. Le navigateur à l'époque était essentiellement le monde de IE6. JavaScript était juste synonyme d'effets spéciaux de la page Web. La page HTML elle-même n'a pas attiré beaucoup d'attention. Il semblait que tant que vous pouvez utiliser Div ou même Table pour ajouter CSS au positionnement auxiliaire de l'image, il serait acceptable de réserver le contenu de la page, et ce concept existait longtemps. Avec l'enrichissement du contenu de la page, le développement du style de conception, l'augmentation de la complexité d'interaction, l'application de l'AJAX et la mise à jour des navigateurs ont fait prêter attention à tout le monde à la page la plus élémentaire elle-même. Ensuite, ce qui est vivement discuté, c'est la compatibilité du navigateur. Lorsque vous rencontrez des problèmes, la chose la plus passionnée est de rechercher des hacks sur Internet, puis de gronder IE6 et 7 ... après avoir fait tout cela, il semble que j'ai rencontré à nouveau un goulot d'étranglement et j'ai commencé à trouver une issue. Commençons par cette étape.
La mise en œuvre des rendus est le travail le plus fondamental
Le projet visuel est exprimé via le code de page, qui comprend deux demandes de base: 1. Il peut vraiment refléter le projet visuel; 2. Il peut être compatible via le navigateur. Pour répondre à ces deux demandes, nous devons avoir une attitude de détail poursuivi et un certain degré de compétences de page. Si nous pouvons compléter ces deux contenus, nous pouvons entrer dans les rangs des praticiens à l'avant de la page, mais cela signifie que nous pouvons être compétents pour le développement de pages? Non, ça commence juste!
Communication avec les concepteurs et la participation du projet
La communication est importante. Permettez-moi d'abord de poser quelques questions: avons-nous discuté avec les concepteurs que certains effets ont un impact plus important sur l'efficacité du rendu des navigateurs bas de gamme? Avez-vous déjà discuté de certains effets qui peuvent être mis en œuvre dans CSS3 pour rendre la structure plus concise et plus claire? Avez-vous déjà poursuivi l'équilibre en code et en vision? Le développement du frontal de la page est destiné aux utilisateurs de base, et le code écrit est également directement appliqué au navigateur. Nous sommes obligés d'être responsables de la stabilité et de l'efficacité de la page. Nous rencontrons également souvent la conception du projet sous la pression globale de progrès et la conception est réalisée simultanément avec le développement frontal de la page. Pour le moment, il est plus nécessaire d'obtenir autant d'informations de projet que possible et de comprendre ce que nous devons faire. Ceux-ci peuvent nous aider à considérer pleinement la réutilisation et l'expansion du cadre.
Bonne structure de page
L'écriture de la structure des pages est comme la construction d'une fondation de construction. La qualité du code CSS, du développement JS, du développement des antécédents et de l'expansion future des pages, de l'itération et de l'ajustement des pages. Après avoir obtenu le projet visuel, ne soyez pas occupé à démarrer, observer et réfléchir plus. Analysez d'abord la mise en page, divisez le cadre, puis planifiez la structure et écrivez le code. En particulier dans les projets à grande échelle, l'utilisation rationnelle du développement modulaire présente des avantages considérables, qu'il soit effectué dans l'entretien global ou élargi.
À propos du piratage
De nombreux étudiants recherchent le plus en ligne des hacks lors du développement de pages. Que nous comprions entièrement sur les hacks pour atteindre la compatibilité des pages, la réponse est non. Les gens décrivent souvent IE6 comme disant que nous nous avons dit un mensonge, mais nous devons raconter encore cent mensonges pour réaliser ce mensonge. Ne pas nier que IE6 nous fait souvent vomir du sang dans nos bouches, mais cela ne signifie pas que nous pouvons nous sentir à l'aise en utilisant plus de mensonges pour compenser. Dans la plupart des cas, vous pouvez ajuster la structure HTML en modifiant vos idées ou utiliser des CSS qui sont inexpliqués mais relativement sûrs à tuer des hacks. Personne ne peut prédire lorsque l'utilisation de hack nous fera tomber en gros coup. Par exemple, le déclenchement de la disposition ou de la position: relative peut aider à résoudre de nombreux problèmes IE6.
Beau code
De nos jours, de nombreux projets Web ont des fonctions complexes et leur échelle de code deviendra énorme. Comment améliorer le développement et la maintenance collaboratifs est un problème auquel nous sommes confrontés. Nous devons envisager d'améliorer la planification unifiée, et nous devons développer de bonnes habitudes de développement de code afin d'être à l'aise lorsqu'ils sont confrontés à diverses situations. En parcourant le code de la page, en voyant une utilisation raisonnable d'étiquette, de bonnes annotations, une structure de code claire et un CSS précis ne sont pas seulement comme apprécier une œuvre d'art, mais aussi la réduction des coûts de communication pour le développement en aval et le développement collaboratif. Quelle raison avons-nous à ne pas faire cela? Pour donner un exemple négatif: la maltraitance des div est un problème typique maintenant. Comptez pour voir combien de balises vous utilisez? Différentes sémantiques doivent utiliser le code de balise correspondant, en particulier HTML5 fournit des balises sémantiques plus riches. Ils attendent tous la charge sur le champ de bataille. Laissons-les les libérer!
Développement de pages accessible
L'accessibilité et la facilité d'utilisation sont des choses très subjectives et conviviales. Les pages que les gens ordinaires semblent parfaitement présentées peuvent ne pas nécessairement apparaître si prévenus parmi les groupes spéciaux. Nous devons nous sentir coupables lorsque les aveugles utilisent un logiciel de lecture d'écran pour entrer dans une boucle dans une certaine zone de la page. On peut dire que les sites Web nationaux prêtent actuellement beaucoup moins d'attention à cela, ce qui nous oblige à travailler ensemble pour laisser plus de gens ressentir notre enthousiasme. >
Assurer l'efficacité
En tant que partie relativement frontière du développement du projet, le développement de pages peut devoir être achevé le plus tôt possible pour gagner du temps pour le projet, ce qui nous oblige à améliorer autant que possible l'efficacité. Si vous voulez bien le faire, vous devez d'abord affiner vos outils. En plus de la formation d'expérience pratique et d'habitudes de code qui peuvent nous aider à améliorer l'efficacité, si vous souhaitez améliorer votre capacité à contrôler les progrès de votre propre développement, il existe de nombreux outils auxiliaires qui peuvent nous aider à développer des pages. Par exemple, l'utilisation de moins ou SASS peut nous aider à développer et à organiser le CSS, améliorant considérablement l'efficacité d'écriture du CSS et augmentant la maintenabilité. Par exemple, vous pouvez utiliser l'achèvement automatique de Zen Coding et les blocs de code personnalisés pour vous permettre de pointer votre épée comme si vous volez. J'ai même vu des mots clés de blocage de code qui améliorent la vitesse de développement grâce à des méthodes d'entrée personnalisées. Si vous explorez plus, vous trouverez certainement l'outil le plus approprié pour vous-même.
Optimisation pour les serveurs
Le développement de pages nécessite également de comprendre l'optimisation du serveur et de minimiser le fardeau sur le serveur. Par exemple, CSS Sprite est un exemple typique de réduction du nombre de demandes de serveur. Dans la page e-mail de développement frontal de NetEase, nous effectuons constamment diverses optimisations, telles que la recherche constante d'un solde entre la taille du fichier et le numéro de demande de serveur; Afin d'améliorer autant que possible l'utilisation du cache, des mises à niveau de patch ont été adoptées; Les noms de classe ont été obscurcis et comprimés pour éviter la dénomination excessivement longue; Base64 a été utilisé pour réduire le nombre de demandes et d'autres mesures. Ce sont les résultats de compromis complets et les optimisations globales doivent être prises en compte dans tous les aspects. Parce que lorsque le nombre de visites de pages atteint un certain ordre de grandeur, même la plus petite optimisation obtiendra des résultats considérables, et même le plus petit problème peut former une énorme catastrophe.
Embrasser HTML5
C'est une époque pleine d'opportunités. L'avènement de l'ère HTML5 a créé de plus grandes opportunités avec la montée en puissance de l'Internet mobile, et il y a tellement de choses qui valent la peine d'être apprises et découvrir. HTML5 fournit une interface API JS riche, que nous devons étudier; La splendeur de CSS3 a attiré suffisamment d'attention, que nous devons étudier; Comment développer des pages plus adaptables sur les appareils mobiles nous oblige à étudier ...
Rester affamé, rester idiot
Plus j'ai ramassé l'eau, j'ai trouvé que le fond était encore profond et que le fond n'était pas en bas. Plus j'étudiais le contenu ci-dessus, plus je trouvais que plus de montagnes et de rivières devaient être grimpées. Restez faim, utilisez vos yeux pour découvrir et découvrir, et enrichir constamment vos compétences pour trouver la position et percer les goulots d'étranglement. Comme le dit le dicton, ce n'est qu'en construisant une maison de haut niveau que vous pouvez obtenir des résultats naturels. Cet article a été formé parce que j'ai déjà discuté du problème du goulot d'étranglement avec mes collègues. Je voulais trouver le positionnement pour moi-même et les étudiants à l'avant de la page pour trier mes idées. Prenez une peine du discours du PDG d'Apple à Stanford, restez affamé et restez stupide et partagez-le avec tout le monde.