Viele viele CSS-Hintergründe Leistung

Question

Ich versuche verschiedene Methoden, um ein Bild in divs umzuwandeln, die jeden einzelnen Pixel repräsentieren.

Eine Methode besteht darin, php imagecolorat zu verwenden, um divs mit einer background-color zu erstellen, was gut funktioniert.

Was ist jedoch, wenn ich tausende von divs width:1px;height:1px; hätte, von denen jedes dasselbe css background-image mit inkrementierter Hintergrundposition hat?

Welche Leistungseinbußen würde das haben? D. h. zeichnet der Browser das gesamte Bild viele Male oder nur den sichtbaren Teil als Hintergrund? Beachten Sie, dass das Originalbild mehrere hundert kb groß ist.

Vielen Dank

Answer 1

Nur der Abschnitt des Bildes sollte gezeichnet werden, jedoch wird die Zeichenoperation so oft aufgerufen, wie es Pixel gibt, was zu einer Leistungseinbuße führt. Haben Sie versucht, einen Testcode zu schreiben und zu messen, wie er funktioniert?

Answer 2

Tausende von

s werden unabhängig von allem Ihre Leistung beeinträchtigen, da der Browser jedes

parsen, es zum DOM hinzufügen und dann rendern muss.

Die tatsächliche Leistung wird je nach Browser unterschiedlich sein. Es wird nur der Teil des Bildes gezeichnet, der angefordert wird, aber die Rendering-Funktion, die das Bild zeichnet, wird für JEDES

aufgerufen. Vielmehr geht es darum, ob die spezielle Browserimplementierung ein Pixel eines Bildes schneller rendern kann oder ob ein String analysiert und das Bild gedruckt werden kann. Wenn der Browser das Bild im Speicher hat, könnte der Unterschied unbedeutend sein. Aber wenn der Browser jedes Mal die Bilddatei öffnen muss, wird der Festplattenzugriff Sie beeinträchtigen.

Das gesagt, ich wette, es gibt bessere Möglichkeiten, das zu tun, was Sie versuchen. Sie können mit JavaScript das Pixel bekommen, auf das die Maus geklickt/hovered/etc hat, und dann ein absolutes

an diesem spezifischen Punkt hinzufügen, um den von Ihnen erwähnten "Filter" zu erstellen. Darüber hinaus können Sie, wenn zwei benachbarte Pixel markiert werden, einfach das ehemalige

erweitern, anstatt ein neues zu erstellen, was die Leistung erheblich verbessern wird.

Mit anderen Worten, untersuchen Sie einfach das Laden des Bildes mit einem img-Tag und verwenden Sie dann JavaScript, um das zu tun, was Sie versuchen zu tun.