Artikeleinführung von Wulin.com (www.vevb.com): Vor- und Nachteile von CSS Sprites.
Vor- und Nachteile von CSS Sprites
In Bezug auf diese Technologie sind die größten Vorteile die folgenden:
1. Reduzieren Sie die Anzahl der HTTP -Anforderungen, wenn die Webseite geladen wird. Diese Situation scheint nur für Fälle zu gelten, in denen die Ressourcen von der Serverseite wiederhergestellt werden müssen, wie z. B. anfängliche Belastung. Aber egal was passiert, es ist immer noch sehr nützlich für eine Webseite mit hohem Verkehr oder häufiges Nachladen.
2. Bei der Erstellung eines Hintergrundbildes für den Link kann es verhindern, dass Hintergrundflackern durch das Laden des Hintergrundbildes bei a: schweben. Ich persönlich denke, dass dies für die Verbesserung der Benutzererfahrung von großer Bedeutung ist.
3. Bilder sind einfach zu verwalten. Die Prämisse ist, dass die Bilder der Nähte bestimmte Regeln haben. Wie im Bild unten gezeigt, handelt es sich um ein Bild des Schaltflächenhintergrunds, der von allen Websites verwendet wird. Auf diese Weise können Sie alle Schaltflächenstile in der Website intuitiv sehen. (Ich persönlich mag es, Bilder nach bestimmten Attributen des Bildes zu buchstabieren. Ein Bild ist ein Symbol oder ein BTN -Hintergrund ... Auf diese Weise können die Bilder übrigens verwaltet werden, und die Bilder mit bestimmten Regeln können verfolgt werden, die einfacher zu arrangieren sind. Offensichtlich manchmal entscheiden Sie sich entscheiden, ein Bild nach dem Modul zu spleißen. Es kann das Problem des Aufrufens des gesamten großen Bildes effektiv verhindern, indem nur ein kleines Symbol verwendet wird.)
CSS Sprites -Anwendungsbereich:
1. Die Beschleunigung der Webseite muss abgeschlossen werden, indem die Anzahl der HTTP -Anforderungen reduziert wird.
2. Die Webseite enthält eine große Anzahl kleiner Symbole. Oder einige Symbole sind sehr vielseitig.
3.. Es gibt Bilder, die auf der Webseite vorinstalliert werden müssen. Es bezieht sich hauptsächlich mit A und A: Hover -Hintergrundbild. Wenn die Hintergrundbilder von A und A: Hover separat geladen werden, wechselt die Maus des Benutzers zu einer Taste, und der Hintergrund der Taste verschwindet plötzlich und erscheint dann einen Blitz. Wenn die Textfarbe der Schaltfläche der gleiche oder ähnlich dem Hintergrund ist, ist dies noch peinlicher, was die Menschen dazu bringen kann, dass die Schaltfläche verschwunden ist.
Bedingungen zu treffen
Auf Webseiten ist es am besten, eine Regel für Bilder zu haben, die durch diese Technologie zusammengestellt werden. Breite oder Höhe einstellen. Es ist am besten, die Breite und Größe zu setzen. Bilder, die gefliest erfordern, sind offensichtlich nicht für Sprite geeignet.
Wie im obigen Bild gezeigt, werden die Schaltflächen durch die Situation der festen Breite und der Höhe bestimmt.
Bei fester Breite können mehrere kleine Bilder parallel angeordnet werden. Wenn die Höhe festgelegt ist, sind die kleinen Bilder vertikal angeordnet.
Wenn der Hintergrund weder eine feste Breite noch eine feste Höhe ist, kann die CSS -Sprites -Technologie bei weder fester Breite noch fester Höhe verwendet werden. Es ist einfach, den Status von Bildern zu erstellen, die nicht auf der Seite erscheinen sollten. Wenn die Höhe gewaltsam eingestellt ist, wird sie für die zukünftige Wartung sehr ungünstig sein.
Zusammenfassen
Ob diese Technologie gut oder schlecht ist, kann nicht verallgemeinert werden. Es hängt von der spezifischen Situation der Website ab. Entscheiden Sie bei der Analyse zuerst, ob Sie es benötigen oder nicht, und integrieren Sie auch Entwicklungskosten, Wartungskosten und andere Probleme. Finden Sie einen Plan, der der tatsächlichen Situation entspricht, bevor Sie eine Entscheidung treffen. Verwenden Sie Sprites rechtzeitig und es wird empfohlen, keine Bilder von verschiedenen Größen, Ausrichtungen und Verwendung auf extreme Weise zu platzieren, um sie zu warten. Solche Extreme reduzieren möglicherweise nicht die Anzahl der HTTP -Anforderungen, sondern legt stattdessen versteckte Gefahren für die zukünftige Wartung.