Artikel Einführung von Wulin.com (www.vevb.com): Wie tief ist das Wasser auf der Front-End-Seite?
Jeder, der im Internet arbeitet, schreibt im Grunde ein paar HTML -Zeilen. Menschen, die Wort verwendet haben, können auch regelmäßige Seiten mit Dreamweaver herstellen, sodass die meisten Menschen natürlich denken, dass die Entwicklung von Seiten nicht viel technische Inhalte hat und sehr einfach ist. Dieses gemeinsame Verständnis gibt es nicht nur, sondern es gibt auch viele Zweifel für Praktiker: Es gibt kein Problem bei der Implementierung der Front-End-Seite; Kompatibilität, kleine Fälle; Bildintegration, und sie wurde ständig verwendet ... Welche anderen Probleme können gefunden werden? Engpässe, Decken, Transformationen und Wege werden unter den Praktikern weithin diskutiert. Gibt es wirklich kein Problem? Das Netease-E-Mail-Front-End-Technologiezentrum ist seit mehreren Jahren eingerichtet, und es scheint, dass es endlose Themen gibt, und es gibt oft neue Ideen, um alle aufzumuntern. Was sind also die Anforderungen an die Seitenentwicklung und was ist noch zu tun und wie tief das Wasser hier ist, lassen Sie es uns schöpfen.Die Wahrnehmung des vorderen Ende der Seite scheint zu unterschiedlichen Zeiten unterschiedlich zu sein. In den frühen Tagen des Internets waren kleine Autos immer noch teurer als Häuser, und Sesamkuchen und Vermicelli wurden nur zum Essen verwendet, und Chrysanthemen wurden nur zur Herstellung von Tee verwendet. Zu diesem Zeitpunkt war der Seiten -Design -Stil relativ Single und die entsprechenden Seitenanforderungen waren relativ einfach. Der Browser zu dieser Zeit war im Grunde die Welt des IE6. JavaScript war nur ein Synonym für Webseiten -Spezialeffekte. Die HTML -Seite selbst hat nicht viel Aufmerksamkeit erregt. Es schien, dass es in Ordnung wäre, den Seiteninhalt zu reservieren, solange Sie DIV oder sogar Tabelle verwenden können, um der Hilfspositionierung des Bildes CSS hinzuzufügen, und dieses Konzept für lange Zeit existierte. Mit der Anreicherung von Seiteninhalten, der Entwicklung des Designstils, der Zunahme der Interaktionskomplexität, der Anwendung von AJAX und der Aktualisierung von Browsern hat alle dazu geführt, dass alle wieder auf die grundlegendste Seite selbst achten. Dann wird die Browserkompatibilität heiß besprochen. Bei Problemen, die auf Probleme stoßen, ist es am leidenschaftlichsten, im Internet nach Hacks zu suchen und dann IE6 und 7 zu schimpfen ... nachdem ich all dies getan habe, scheint es, dass ich wieder auf einen Engpass gestoßen bin und angefangen habe, einen Ausweg zu finden. Beginnen wir mit dieser Phase.
Das Implementieren von Renderings ist der grundlegendste Job
Der visuelle Entwurf wird über den Seitencode ausgedrückt, der zwei grundlegende Anforderungen enthält: 1. Er kann den visuellen Entwurf wirklich widerspiegeln; 2. Es kann durch den Browser kompatibel sein. Um diese beiden Anforderungen zu erfüllen, müssen wir eine detaillierende Einstellung und ein gewisses Maß an Seitenfähigkeiten verfolgen. Wenn wir diese beiden Inhalte vervollständigen können, können wir am vorderen Ende der Seite in die Ränge der Praktizierenden eingeben, aber dies bedeutet, dass wir für die Seitenentwicklung kompetent sein können? Nein, es fängt gerade an!
Kommunikation mit Designer und Projektbeteiligung
Kommunikation ist wichtig. Lassen Sie mich zuerst ein paar Fragen stellen: Haben wir mit Designer besprochen, dass einige Effekte einen größeren Einfluss auf die Rendering-Effizienz von Browsern mit niedrigem Ende haben? Haben Sie jemals einige Effekte besprochen, die in CSS3 implementiert werden können, um die Struktur prägnanter und klarer zu machen? Haben Sie jemals das Gleichgewicht in Code und Vision verfolgt? Die Entwicklung des Front-Ends der Seite gilt für grundlegende Benutzer, und der geschriebene Code wird auch direkt auf den Browser angewendet. Wir sind verpflichtet, für die Stabilität und die Rendern der Effizienz der Seite verantwortlich zu sein. Wir begegnen auch häufig auf die Gestaltung des Projekts unter dem Gesamtfortschrittsdruck und das Design wird gleichzeitig mit der Front-End-Entwicklung der Seite durchgeführt. Zu diesem Zeitpunkt ist es mehr notwendig, so viele Projektinformationen wie möglich zu erhalten und zu verstehen, was wir tun müssen. Diese können uns helfen, die Wiederverwendung und Rahmenerweiterung vollständig in Betracht zu ziehen.
Gute Seitenstruktur
Das Schreiben der Seitenstruktur ist wie der Bau einer Gebäudestiftung. Die Qualität des CSS -Codes, der JS -Entwicklung, der Hintergrundentwicklung und der zukünftigen Seitenerweiterung, Iteration und Seitenanpassung. Nachdem Sie den visuellen Entwurf erhalten haben, sollten Sie nicht mit dem Start beschäftigt, beobachten und denken Sie mehr nach. Analysieren Sie zuerst das Layout, teilen Sie das Framework auf, planen Sie dann die Struktur und schreiben Sie den Code. Insbesondere in groß angelegten Projekten hat die rationale Verwendung modularer Entwicklung erhebliche Vorteile, unabhängig davon, ob sie in der Gesamt- oder erweiterten Wartung durchgeführt werden.
Über Hack
Viele Schüler suchen bei der Entwicklung von Seiten am meisten online nach Hacks. Ob wir uns ausschließlich auf Hacks verlassen, um die Seitenkompatibilität zu erreichen, die Antwort lautet Nein. Die Leute beschreiben den IE6 oft, dass wir uns eine Lüge erzählt haben, aber wir müssen noch hundert Lügen erzählen, um diese Lüge zu erfüllen. Wenn wir nicht leugnen, dass IE6 uns oft zum Blut in unseren Mund erbricht, bedeutet es nicht, dass wir uns wohl fühlen können, indem wir mehr Lügen verwenden, um dies auszugleichen. In den meisten Fällen können Sie die HTML -Struktur anpassen, indem Sie Ihre Ideen ändern oder einige CSS verwenden, die unerklärt, aber relativ sicher sind, um Hacks zu töten. Niemand kann vorhersagen, wenn wir Hack verwenden, lässt uns in einen großen Schlag fallen. Zum Beispiel kann Layout oder Position ausgelöst werden: Verwandter kann dazu beitragen, viele IE6 -Probleme zu lösen.
Schöner Code
Heutzutage haben viele Webprojekte komplexe Funktionen und ihre Codeskala wird enorm. Die bessere kollaborative Entwicklung und Wartung ist ein Problem, mit dem wir konfrontiert sind. Wir müssen in Betracht ziehen, die einheitliche Planung zu verbessern, und wir müssen gute Code -Entwicklungsgewohnheiten entwickeln, um sich in verschiedenen Situationen wohl zu fühlen. Wenn Sie den Seitencode durchsehen, eine angemessene Verwendung von Etiketten, gute Anmerkungen, klare Codestruktur und genaue CSS sehen, sind sie nicht nur ein Kunstwerk zu schätzen, sondern auch die Kommunikationskosten für die nachgelagerte Entwicklung und die kollaborative Entwicklung zu verringern. Welchen Grund müssen wir das nicht tun? Um ein negatives Beispiel zu geben: Der Missbrauch von Div ist jetzt ein typisches Problem. Zählen Sie, um zu sehen, wie viele Tags Sie verwenden? Unterschiedliche Semantik sollten den entsprechenden Tag -Code verwenden, insbesondere HTML5 bietet reichhaltigere semantische Tags. Sie warten alle auf die Anklage auf dem Schlachtfeld. Lassen Sie uns sie befreien!
Zugängliche Seitenentwicklung
Zugänglichkeit und Benutzerfreundlichkeit sind sehr subjektive und benutzerfreundliche Dinge. Seiten, auf denen normale Menschen perfekt präsentiert aussehen, erscheinen nicht unbedingt so rücksichtsvoll unter besonderen Gruppen. Wir sollten uns schuldig fühlen, wenn blinde Personen die Bildschirm -Lese -Software verwenden, um in einem bestimmten Bereich der Seite in eine Schleife zu gelangen. Es kann nur gesagt werden, dass inländische Websites derzeit weit weniger Aufmerksamkeit schenken, was es erfordert, dass wir zusammenarbeiten, damit mehr Menschen unsere Begeisterung spüren. >
Effizienz gewährleisten
Als relativ Grenzbestand der Projektentwicklung muss die Seitenentwicklung möglicherweise so früh wie möglich abgeschlossen werden, um Zeit für das Projekt zu gewinnen, wodurch wir die Effizienz so weit wie möglich verbessern müssen. Wenn Sie es gut machen möchten, müssen Sie zuerst Ihre Werkzeuge schärfen. Zusätzlich zur Bildung praktischer Erfahrungen und Codegewohnheiten, die uns helfen können, die Effizienz zu verbessern, gibt es, wenn Sie Ihre Fähigkeit verbessern möchten, den Fortschritt Ihrer eigenen Entwicklung zu kontrollieren, viele Hilfstools, die uns helfen können, Seiten zu entwickeln. Beispielsweise kann die Verwendung weniger oder SASS uns helfen, CSS zu erweitern und zu organisieren, wodurch die Schreibeffizienz von CSS erheblich verbessert und die Wartbarkeit erhöht wird. Beispielsweise können Sie die automatische Abschluss- und benutzerdefinierte Codeblöcke von Zen Coding verwenden, damit Sie Ihr Schwert so verweisen können, wie Sie fliegen würden. Ich habe sogar Code -Block -Schlüsselwörter gesehen, die die Entwicklungsgeschwindigkeit durch benutzerdefinierte Eingabemethoden verbessern. Wenn Sie mehr erkunden, finden Sie auf jeden Fall das am besten geeignete Werkzeug für sich.
Optimierung für Server
Die Seitenentwicklung erfordert auch das Verständnis der Serveroptimierung und die Minimierung der Belastung des Servers. Zum Beispiel ist CSS Sprite ein typisches Beispiel für die Reduzierung der Anzahl der Serveranforderungen. In der Front-End-Entwicklung der Netase-E-Mail-Seite führen wir ständig verschiedene Optimierungen durch, z. Um die Cache -Nutzung so weit wie möglich zu verbessern, wurden Patch -Upgrades eingesetzt. Die Klassennamen wurden verschleiert und komprimiert, um übermäßig lange Benennung zu vermeiden; Base64 wurde verwendet, um die Anzahl der Anfragen und andere Maßnahmen zu reduzieren. Dies sind die Ergebnisse umfassender Kompromisse und allgemeine Optimierungen müssen in allen Aspekten berücksichtigt werden. Denn wenn die Anzahl der Seitenbesuche eine bestimmte Größenordnung erreicht, erzielt selbst die kleinste Optimierung erhebliche Ergebnisse, und selbst das kleinste Problem kann eine große Katastrophe bilden.
Umarmung HTML5
Dies ist eine Ära voller Möglichkeiten. Das Aufkommen der HTML5 -Ära hat mit dem Aufstieg des mobilen Internets größere Chancen geschaffen, und es gibt so viele Dinge, die es wert sind, zu lernen und zu entdecken. HTML5 bietet eine reichhaltige JS -API -Schnittstelle, die wir studieren müssen. Die Pracht von CSS3 hat genug Aufmerksamkeit erregt, was wir studieren müssen. Wie man anpassungsfähigere Seiten auf mobilen Geräten entwickelt, müssen wir studieren ...
Bleibt hungrig, bleibt dumm
Je mehr ich das Wasser schaufelte, stellte ich fest, dass der Boden immer noch tief war und der Boden nicht ausgebrochen war. Je mehr ich den oben genannten Inhalt studierte, desto mehr mussten ich festgestellt, dass mehr Berge und Flüsse bestiegen werden mussten. Bleiben Sie hungrig, verwenden Sie Ihre Augen, um zu entdecken und zu entdecken und Ihre Fähigkeiten ständig zu bereichern, um die Position zu finden und Engpässe durchzubrechen. Wie das Sprichwort sagt, können Sie nur durch den Bau eines hochrangigen Hauses natürliche Ergebnisse erzielen. Dieser Artikel wurde gebildet, weil ich zuvor das Engpass -Problem mit meinen Kollegen besprochen habe. Ich wollte die Positionierung für mich und die Schüler am vorderen Ende der Seite finden, um meine Ideen zu klären. Nehmen Sie einen Satz von Apple CEOs Rede in Stanford, bleiben Sie hungrig und bleiben Sie dumm und teilen Sie sie mit allen.