Heim > Artikel > Web-Frontend > Ausführliche Erläuterung der Leistungsoptimierung in HTML5
Ausführliche Erläuterung der Leistungsoptimierung in HTML5
- 黄舟Original
- 2017-07-27 09:56:101746Durchsuche
HTML5-Leistungsoptimierung
--Neuzeichnen reduzieren
Nachdem die HTML-Seite angezeigt wurde, führt das dynamische Ändern von Seitenelementen oder Anpassen von CSS-Stilen dazu, dass der Browser neu gezeichnet wird. Der Leistungsverlust hängt direkt vom Umfang der dynamischen Änderungen ab: Wenn Sie nur Informationen wie die Farbe eines Elements ändern, wird nur das Element neu gezeichnet, und wenn Sie Knoten hinzufügen oder löschen oder die Knotenposition anpassen, werden auch seine Geschwisterknoten neu gezeichnet neu gezeichnet werden.
Das Reduzieren des Neuzeichnens bedeutet nicht, nicht neu zu zeichnen, sondern auf den Neuzeichnungsbereich zu achten: ① Je tiefer das DOM-Element geändert wird, desto geringer sind die Auswirkungen. Versuchen Sie daher, tiefere Knotenänderungen vorzunehmen. ② Wie schwer ist es? Das Gewicht einiger DOM-Stile sollte so weit wie möglich zusammengeführt und geändert werden.
Nehmen Sie als Beispiel die Änderung der Hintergrundfarbe, -breite und -farbe eines 3499910bf9dac5ae3c52d5ede7383485-Tags.
<a href="javascript:void(0);" id="example">传统的代码</a>
<script>
var example = document.getElementById("example");
example.ondblclick = function() {
example.style.backgroundColor = "red";
example.style.width = "200px";
example.style.color = "white";
}
</script>
Das Obige wird dreimal neu gezeichnet, aber wenn es mehrmals über CSS anstelle von Javascript ausgeführt wird, wird nur ein Neuzeichnen durchgeführt.
<style>
.dblClick {
width: 200px;
background: red;
color: white;
}
</style>
<a href="javascript:;" id="example">CSS优化的代码</a>
<script>
var example = document.getElementById("example");
example.ondblclick = function() {
example.className = "dblClick";
}
</script>Vermeiden Sie das Blockieren des Ladens von Skripten
, wenn der Browser reguläre Skript-Tags analysiert muss warten, bis das Skript heruntergeladen ist, bevor es analysiert und ausgeführt wird, während der nachfolgende HTML-Code nur warten kann. Die Einleitung der CSS-Datei sollte im Header 93f0f5c25f18dab9d176bd4f6de5d30e platziert werden, da dies ein notwendiges Element für die HTML-Wiedergabe ist. Um ein Blockieren des Ladens zu vermeiden, sollte das Skript am Ende des Dokuments und das CSS am Kopf platziert werden!
<head> <link rel="stylesheet" href="common.css">......<script src="example.js"></script> </body>
--Vermeiden Sie eine Verschachtelung von Knoten auf tiefer Ebene.
Verschachtelte Knoten auf tiefer Ebene werden häufig zu Beginn benötigt build Es nimmt mehr Speicher in Anspruch und ist beim Durchlaufen von Knoten langsamer. Dies hängt mit dem Mechanismus des Browsers zum Erstellen von DOM-Dokumenten zusammen. Der Browser speichert die Struktur des gesamten HTML-Dokuments als DOM-„Baum“-Struktur. Wenn die Verschachtelungsebene der Dokumentknoten tiefer ist, ist die Ebene des erstellten DOM-Baums tiefer.
Der folgende Code kann eines der Tags e388a4556c0f65e1904146cc1a846bee vollständig entfernen.
<p>
<span>
<label>嵌套</label>
</span>
</p>
Seiten-Cache
Wenn der Cache nicht gesetzt ist, wird die Seite normalerweise erneut gelesen Bei jeder Aktualisierung der Seite werden Dateien vom Server abgerufen. Wenn der Cache eingerichtet ist, können alle Dateien lokal abgerufen werden, was die Seiteneffizienz offensichtlich erheblich verbessert.
Wir können die Ablaufzeit der Seite definieren, indem wir im Seitenkopf die Ablaufzeit festlegen. Indem wir die Ablaufzeit verlängern, können wir eine „permanente“ Zwischenspeicherung erreichen.
<meta http-equiv="expires" content="Sunday 26 October 2099 01:00 GMT" />
Wenn sich Ihr Projektcode ändert, ist die neueste Datei natürlich nicht verfügbar, da der Client die Datei zwischenspeichert, was unweigerlich zu Anzeigefehlern führt. Die Lösung für dieses Problem besteht darin, der verknüpften Datei einen Zeitstempel hinzuzufügen. Wenn sich der Zeitstempel ändert, geht der Browser davon aus, dass es sich um eine neue Datei handelt, und fordert die neueste Datei vom Server an.
<script src="example2014-6-17.js">
</script>//如果是JSP，可以用EL表达式来取时间戳信息，这样管理更加方便
<script src="example${your time param}.js">
</script>//或者这样的写法更优秀：
<script src="example.js?time=2014-6-7"></script>
<script src="example.js?time=${your time param}"></script>
Zusammengeführte Dateien komprimieren
Alle Dateien mit Anforderungsdaten sollten so weit wie möglich komprimiert werden, z B. Javascript-Dateien, CSS-Dateien und Bilddateien, insbesondere Bilddateien. Wenn keine hohe Auflösung erforderlich ist, können sie vor der Verwendung komprimiert werden.
Eine kleine Anzahl großer Dateien wird schneller geladen als eine große Anzahl kleiner Dateien. Daher können Sie manchmal erwägen, mehrere JS-Dateien und mehrere CSS-Dateien zusammenzuführen.
Neben der Reduzierung der Größe von HTML-Dokumenten können Sie auch die folgenden Methoden anwenden:
① Löschen Sie Leerzeichen, Leerzeilen und Kommentare, die keinen Einfluss auf die Ausführungsergebnisse von HTM-Dokumenten haben
②Vermeiden Sie das Tabellenlayout
③Verwenden Sie HTML5
--HTML+CSS3+Javascript erfüllen ihre eigenen Aufgaben
Lassen Sie die drei Elemente wirken Ihre eigenen Aufgaben Erstellen Sie leistungsstarke Webseiten: HTML ist die Grundlage der Seite und die Quelle des Inhalts. Damit kann CSS3 als Meister der Präsentation bezeichnet werden, und das immer leistungsfähigere CSS kann Javascript ersetzen, um viele dynamische Dinge wie Farbverläufe, mobile und andere dynamische Effekte auszuführen. Alte Browser verließen sich auf js, um die Anzeige dynamischer Effekte zu vervollständigen, aber jetzt kann CSS auch die Arbeit von js vervollständigen Versuchen Sie daher, die Arbeit CSS zu überlassen, um eine bessere Leistung zu erzielen. (Das ist etwas groß)
--Bildzusammenführung implementiert CSS-Sprites
Bei der Bildzusammenführung geht es eigentlich darum, einige Hintergrundbilder auf der Webseite in eine Bilddatei zu integrieren. Verwenden Sie dann die CSS-Kombination „Hintergrundbild“, „Hintergrundwiederholung“ und „Hintergrundposition“, um den Hintergrund zu positionieren. Hintergrundposition kann Zahlen verwenden, um die Position des Hintergrundbilds genau zu lokalisieren.
Wenn eine Seite mehrere Symbole verwendet, können Sie mehrere Symbole in einem Bild zusammenführen. Dann müssen Sie nur einmal eine Bildanfrage senden und die Symbole durch CSS-Positionierung aufteilen.
--Vermeiden Sie die Verwendung von Iframe
使用iframe并不会增加同域名下的并行下载数，浏览器对同域名的连接总是共享浏览器级别的连接池，在页面加载过程中iframe元素还会阻塞父文档onload事件的触发。并且iframe是html标签中最消耗资源的标签，它的开销比p、SCRIPT、STYLE等DOM高1~2个数量级。
避免onload事件被阻塞，可使用JavaScript动态的加载iframe元素或动态设置iframe的src属性（但其仅在高级浏览器IE9及以上有效）。
<iframe id="if"></iframe>
document.getElementById("if").setAttribute("src","url");--多域名请求
一般来说，浏览器对于相同域名的图片，最多用2-4个线程并行下载（不同浏览器的并发下载数是不同的）。而相同域名的其他图片，则要等到其他图片下载完后才会开始下载。
有时候，图片数据太多，一些公司的解决方法是将图片数据分到多个域名的服务器上，这在一方面是将服务器的请求压力分到多个硬件服务器上，另一方面，是利用了浏览器的特性。（大家可以去新浪、腾讯门户网站查看，这些大型站点同一页面加载的图片可能由多个站点提供）
注：一个HTML请求的域名也不要太多（2~3个差不多），多了可能造成不同服务器连接时间差异，反而影响速度。
--避免空链接属性
如624a480c6387e73c22b4f60ddcc0f14e8fb0647cc270c6c60ce1679670afa6fc这样的设置方式是非常不可取的，即使链接为空，在旧的浏览器也会以固定步骤发送请求信息。
另外9dba6f1f949f5e07bed667bf670fd9c45db79b134e9f6b82c0b36e0489ee08ed也不可取，最好的方式是在链接中加一个空的js代码af60cb7cd5eb3467eaa609628cdd0ba95db79b134e9f6b82c0b36e0489ee08ed
--使用图像的BASE64编码
base64是一串字符串，他可以代表一个图片的所有信息，也就是可以通过09522e18412c10a262484dd8ba0b09ee（S表示一串base64码）来显示图片，这种方式不需要再向服务器发送请求，完全由浏览器解析成图片。
目前高级浏览器都支持此功能，但要注意两点：①低版本浏览器（如IE7）不支持；②base64字符串长度随图片的大小及复杂度成正比，base64也像URL一样，也有超出长度的情况（在IE8下很常见）。所以要根据情况来使用。
--显式设置图片的宽高
如果HTML里的图片没有指定尺寸（宽和高），或者代码描述的尺寸与实际图片的尺寸不符时，浏览器则要在图片下载完成后再“回溯”该图片并重新显示，这会消耗额外时间。
<iframe id="if"></iframe>
document.getElementById("if").setAttribute("src","url");--显式指定文档字符集
如果浏览器不能获知页面的编码字符集，一般都会在执行脚本和渲染页面前，把字节流缓存，然后再搜索可进行解析的字符集，或以默认的字符集来解析页面代码，这会导致消耗不必要的时间。
<iframe id="if"></iframe>
document.getElementById("if").setAttribute("src","url");--渐进式增强设计
渐进式增强设计的通俗解释就是：首先写一段满足所有浏览器的基本样式，再在后面针对不同高级浏览器编写更漂亮的样式
如下代码，所有浏览器都支持background-color: #2067f5;满足了浏览器基本现实需求，而后面的background-image: -webkit-gradient等则为不同高级浏览器使用，只要浏览器识别就能执行这段代码（不识别，CSS也不会报错只会直接忽略）。
<p class="someClass"></p>
.someClass
{ width: 100px;
height: 100px;
background-color: #2067f5;
background-image: -webkit-gradient(linear, left top, left bottom, from(#2067f5),
to(#154096));
background-image: -webkit-linear-gradient(top, #2067f5, #154096);
background-image: -moz-linear-gradient(top, #2067f5, #154096);
background-image: -ms-linear-gradient(top, #2067f5, #154096);
background-image: -o-linear-gradient(top, #2067f5, #154096);
background-image: linear-gradient(to bottom, #2067f5, #154096);
}--懒加载与预加载
预加载和懒加载，是一种改善用户体验的策略，它实际上并不能提高程序性能，但是却可以明显改善用户体验或减轻服务器压力。
预加载表示当前用户在请求到需要的数据之后，页面自动预加载下一次用户可能要看的数据，这样用户下一次操作的时候就立刻呈现，依次类推。
懒加载表示用户请求什么再显示什么，如果一个请求要响应的时间非常长，就不推荐懒加载。
--Flush机制
Wenn eine Seite sehr groß ist und viel Inhalt enthält, kann sie in Teilen in Form von Flush an die Seite zurückgegeben werden. Dies kann dem Benutzer mitteilen, dass ich arbeite und einen Teil des Inhalts viel besser anzeige Langes Warten mit leerem Bildschirm. In der Java-Webtechnologie ist die Implementierung von Flush sehr einfach. Rufen Sie einfach die Flush-Methode des HttpServletResponse.getWriter-Ausgabestreams auf, um den geladenen Inhalt zurück an den Client zu schreiben.
Diese Methode eignet sich nur für Situationen, in denen viele Daten zurückgegeben werden und die Anforderungszeit besonders lang ist. Bei regulären Daten ist es am besten, alle Daten in normaler Echtzeit zurückzugeben. Diese Implementierungsmethode erhöht tatsächlich die Renderzeit des Browsers und die Gesamtwartezeit des Benutzers, ist jedoch im Hinblick auf die Benutzererfahrung besser.
Leistungsserveroptimierung
--CDN-Mechanismus
Das sogenannte CDN ist ein Ein Inhaltsverteilungsnetzwerk, das mithilfe intelligenter Routing- und Verkehrsmanagementtechnologie schnell den Beschleunigungsknoten erkennt, der den Besuchern die schnellste Antwort bieten kann, und die Anfrage des Besuchers an den Beschleunigungsknoten weiterleitet, der Inhaltsdienste bereitstellt.
Laienhaft ausgedrückt: Sie kaufen ein Produkt von einem Pekinger Verkäufer (Server) in Chengdu (Browser) und der Pekinger Verkäufer versendet das Paket per Expresszustellung (CDN-Service). Sie können zu Fuß gehen, ein Auto nehmen oder Zug von Peking nach Chengdu Oder Flugzeug, und Expresszustellung mit CND wählt Direktflugzeug, da diese Versandart die schnellste ist.
Natürlich gibt es bei der Verwendung von CDN zwei Dinge zu beachten:
1. CDN-Beschleunigungsdienste sind sehr teuer. Wenn Sie der Meinung sind, dass Ihre Website eine Beschleunigung wert ist, können Sie sie kaufen.
2. CDN ist beispielsweise nicht für lokale Websites geeignet, da das regionale Netzwerk bereits sehr nah ist und keine CDN-Beschleunigung erfordert.
--Richtige Verwendung des HTTP-Protokolls
Die Leistungsverbesserung durch Browser-Caching ist bereits jedem bekannt, aber viele Menschen sind sich der Browser-Caching-Ablaufzeit nicht bewusst. Das Löschen des Caches, welche Seiten zwischengespeichert werden können usw. können von unseren Programmierern gesteuert werden. Solange Sie mit dem HTTP-Protokoll vertraut sind, können Sie den Browser problemlos steuern.
Erweiterte Lektüre: Vertiefendes Verständnis des HTTP-Protokolls
--Trennung von dynamisch und statisch
Die sogenannte Trennung von dynamisch und Statisch dient zur Trennung von statischem und statischem Inhalt in Webanwendungen. Der Inhalt wird auf verschiedenen Webservern abgelegt und dynamischer und statischer Inhalt werden gezielt verarbeitet, um die Leistung zu verbessern. Wir wissen, dass, wenn ein HTML mehrere Domänennamen hat, die Anforderung von Datendateien zunimmt
Der Tomcat-Server ist relativ schwach im Umgang mit statischen und Parallelitätsproblemen, daher ist die Methode der statischen und dynamischen Trennung im Voraus im Allgemeinen Apache+Tomcat. Nginx+Tomcat usw.
Am Beispiel von Apache + Tomcat lautet der Betriebsmechanismus: Die Seitenanforderung wird zuerst an Apache gesendet, und dann analysiert Apache, ob die angeforderten Informationen statisch oder dynamisch sind. Die statische Verarbeitung erfolgt lokal und die dynamische Verarbeitung wird an Tomcat übergeben.
Dies ist eigentlich der Prototyp des Lastausgleichs. Für diese Implementierung ist keine spezielle Entwicklung erforderlich Diese Datei stammt von Apache und wird immer noch von Tomcat abgerufen, sodass Entwickler überhaupt nicht darauf achten müssen.
--Persistente HTTP-Verbindung
Persistente Verbindung (Keep-Alive) wird auch als lange Verbindung bezeichnet. Die Verbindung wird von verwendet Die zwischengespeicherte Verbindung wird vom Browser und vom Server zwischengespeichert und bei der nächsten Verbindung mit demselben Server wiederverwendet. Die zustandslose Natur von HTTP bedeutet, dass es nicht zu langen Verbindungen gehört, aber HTTP/1.1 bietet Unterstützung für lange Verbindungen (dies ist jedoch darauf angewiesen, dass sowohl der Browser als auch der Server die Funktion für lange Verbindungen unterstützen). lange Verbindungen ist „Breakpoint Download“.
Der Browser fügt Connection:Keep-Alive in den Header der Anfrage ein, um dem Server mitzuteilen: „Ich unterstütze lange Verbindungen. Wenn Sie es unterstützen, stellen Sie einfach eine lange Verbindung mit mir her.“ Verbindungen. Fügen Sie dann „Connection:Keep-Alive“ zum Antwortheader hinzu, um dem Browser mitzuteilen: „Ich unterstütze es, also lasst uns eine lange Verbindung herstellen.“ Der Server kann dem Browser auch die lange Ablaufzeit der Verbindung über den Header Keep-Alive:timeout=..., max=... mitteilen.
Das Konfigurieren langer Verbindungen erfordert normalerweise Serverunterstützungseinstellungen. Testdaten zeigen, dass der Leistungsvergleich zwischen der Verwendung langer Verbindungen und der Nichtverwendung langer Verbindungen bei einer Konfiguration mit maxKeepAliveRequests um fast das Fünffache gestiegen ist.
--GZIP-Komprimierungstechnologie
Das HTTP-Protokoll unterstützt das GZIP-Komprimierungsformat, wenn der vom Server zurückgegebene HTML-Informationsheader Content-Encoding:gzip enthält Der Browser-Browser hat die Rückgabedaten dieser Antwort in das GZIP-Format komprimiert. Nachdem der Browser die Daten erhalten hat, muss er einen Dekomprimierungsvorgang durchführen, der den Druck auf den Server, Daten zu übertragen, bis zu einem gewissen Grad verringert.
很多服务器已经支持通过配置来自动将HTML信息压缩成GZIP，比如tomcat、又比如很火的Nginx。如果无法配置服务器级别的GZIP压缩机制，可以改为程序压缩。
// 监视对 gzipCategory 文件夹的请求
@WebFilter(urlPatterns = { "/gzipCategory/*" })
public class GZIPFilter implements Filter {
@Override
public void doFilter(ServletRequest request, ServletResponse response,
FilterChain chain) throws IOException, ServletException {
String parameter = request.getParameter("gzip");
// 判断是否包含了 Accept-Encoding 请求头部
HttpServletRequest s = (HttpServletRequest)request;
String header = s.getHeader("Accept-Encoding");
//"1".equals(parameter) 只是为了控制，如果传入 gzip=1，才执行压缩，目的是测试用
if ("1".equals(parameter) && header != null && header.toLowerCase().contains("gzip")) {
HttpServletResponse resp = (HttpServletResponse) response;
final ByteArrayOutputStream buffer = new ByteArrayOutputStream();
HttpServletResponseWrapper hsrw = new HttpServletResponseWrapper(
resp) {
@Override
public PrintWriter getWriter() throws IOException {
return new PrintWriter(new OutputStreamWriter(buffer,
getCharacterEncoding()));
}
@Override
public ServletOutputStream getOutputStream() throws IOException {
return new ServletOutputStream() {
@Override
public void write(int b) throws IOException {
buffer.write(b);
}
};
}
};
chain.doFilter(request, hsrw);
byte[] gzipData = gzip(buffer.toByteArray());
resp.addHeader("Content-Encoding", "gzip");
resp.setContentLength(gzipData.length);
ServletOutputStream output = response.getOutputStream();
output.write(gzipData);
output.flush();
} else {
chain.doFilter(request, response);
}
}
// 用 GZIP 压缩字节数组
private byte[] gzip(byte[] data) {
ByteArrayOutputStream byteOutput = new ByteArrayOutputStream(10240);
GZIPOutputStream output = null;
try {
output = new GZIPOutputStream(byteOutput);
output.write(data);
} catch (IOException e) {
} finally {
try {
output.close();
} catch (IOException e) {
}
}
return byteOutput.toByteArray();
}
……
}总结
细节决定成败，系统慢是由一个又一个不良的小细节造成的，所以开发初期做好充足的准备，开发中认真负责、不偷工减料，维护期更要注重代码质量，这样才能让我们的系统稳定高效。
个人觉得一个产品的新版本质量可以从核心js文件看出来：如果核心js文件大小比上一版本大太多，明显在性能上就会有问题，我们要争做像谷歌、亚马逊这样优秀的团队--能够在功能升级的同时减小核心js文件大小。
Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Leistungsoptimierung in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!