suchen

Heim >Web-Frontend >CSS-Tutorial >Grundlegende Leistungsoptimierung von Frontend-Webseiten

Grundlegende Leistungsoptimierung von Frontend-Webseiten

php中世界最好的语言
php中世界最好的语言Original
2018-06-13 14:17:181873Durchsuche

Dieses Mal werde ich Ihnen die grundlegende Leistungsoptimierung von Front-End-Webseiten und die Vorsichtsmaßnahmen vorstellen. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Seitenoptimierung

Statische Ressourcenkomprimierung

Angemessen mit Hilfe von Build-Tools (Webpack). , gulp) Komprimieren Sie statische Webseitenressourcen wie Bilder, Skripte und Stile.

CSS-Sprite-Bild, Base64-Inline-Bild

Fügen Sie die kleinen Symbole auf der Website zu einem Bild zusammen und verwenden Sie die CSS-Positionierung, um das entsprechende Symbol entsprechend abzufangen.

Stil oben, Skript unten

Die Seite ist ein schrittweiser Rendering-Prozess, der Stil oben kann dem Benutzer schneller präsentiert werden Das ;script>-Tag oben blockiert Download-Ressourcen am Ende der Seite.

Verwenden Sie externe Links in CSS und JS

Mehrere Seiten verweisen auf öffentliche statische Ressourcen, und die Wiederverwendung von Ressourcen reduziert zusätzliche http-Anfragen.

Vermeiden Sie leere SRC-Bilder

Vermeiden Sie unnötige HTTP-Anfragen. 

<!-- 空src的图片依然会发起http请求 -->
<img src="" alt="image" />

Vermeiden Sie die Skalierung von Bildern in HTML

Versuchen Sie, die angegebene Größe für Bilder nach Bedarf zu verwenden, anstatt ein großes Bild zu laden und es dann zu verkleinern. 

<!-- 实际图片尺寸为600x300，在html中缩放为了200x100 -->
<img src="/static/images/a.png" width="200" height="100" alt="image" />

Preload-Preloading

Setzen Sie das Preload-Attribut auf die rel des Link-Tags, damit der Browser Ressourcen vorab laden kann, bevor der Haupt-Rendering-Mechanismus eingreift. Dieser Mechanismus kann Ressourcen früher abrufen und blockiert nicht die Initialisierung der Seite. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link ref="preload" href="style.css" as="style">
  <link ref="preload" href="main.js" as="script">
  
  <link ref="stylesheet" href="style.css">
</head>
<body>
  
  <script src="main.js"></script>
</body>
</html>

Im Beispiel sind CSS- und JS-Dateien vorinstalliert und werden sofort aufgerufen, sobald sie beim anschließenden Rendern der Seite verwendet werden.

Sie können den Typ angeben, um verschiedene Arten von Ressourcen zu laden.

  1. Stil

  2. Skript

  3. Video

  4. Audio

  5. Bild

  6. Schriftart

  7. Dokument

  8. ...

Diese Methode kann Ressourcen auch domänenübergreifend vorab laden, indem Sie einfach das Crossorigin-Attribut festlegen. 

<link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">

CSS

Selektor

Die Priorität des Selektors ist von hoch nach niedrig geordnet Für:

  1. ID-Auswahl

  2. Klassenauswahl

  3. Tag-Auswahl

  4. Angrenzender Selektor 

h1 + p{ margin-top: 15px; }

Wählt den Absatz aus, der unmittelbar nach dem h1-Element erscheint. Die Elemente h1 und p haben ein gemeinsames übergeordnetes Element.

Untergeordneter Selektor

h1 > strong {color:red;}

Nachkommenselektor

h1 em {color:red;}

Platzhalterselektor

Attributselektor

*[title] {color:red;}
img[alt] {border: 5px solid red;}

Pseudoklassenselektor

Erfahrung mit der Verwendung von Selektoren:

  1. Priorisieren Sie Klassenselektoren, die mehrschichtige Etikettenselektoren ersetzen können.

  2. Verwenden Sie den ID-Selektor mit Vorsicht ist effizient, einzigartig auf der Seite und nicht förderlich für die Zusammenarbeit und Wartung im Team.

  3. Nutzen Sie die Vererbung des Selektors angemessen 🎜>Vermeiden Sie CSS-Ausdrücke.

  4. Reduzieren Sie die Ebene der Selektoren

Basierend auf der Priorität des vorherigen Selektors sollte die Einbettung von mehrstufigen Selektoren so weit wie möglich vermieden werden Es ist am besten, 3 Schichten nicht zu überschreiten. 

.container .text .logo{ color: red; }
/*改成*/
.container .text-logo{ color: red; }

Optimieren Sie die Seitenstildateien und entfernen Sie nicht verwendete Stile

Der Browser führt einen redundanten Stilabgleich durch, der sich außerdem auf die Renderzeit auswirkt groß und wirkt sich auch auf die Ladegeschwindigkeit aus.

Verwenden Sie die CSS-Vererbung, um die Codemenge zu reduzieren

Mithilfe der vererbbaren Attribute von CSS legt das übergeordnete Element den Stil fest, und das untergeordnete Element muss nicht festgelegt werden es wieder. Gemeinsame vererbbare Attribute wie: Farbe, Schriftgröße, Schriftfamilie usw.; nicht vererbbare Attribute wie: Position, Anzeige, Gleitkomma usw.

Wenn der Attributwert 0 ist, wird keine Einheit hinzugefügt

Wenn der CSS-Attributwert 0 ist, wird keine Einheit hinzugefügt, um die Codemenge zu reduzieren. 

.text{ width: 0px; height: 0px; }
/*改成*/
.text{ width: 0; height: 0; }

JavaScript

使用事件委托

给多个同类DOM元素绑定事件使用事件委托。

<ul id="container">
  <li class="list">1</li>
  <li class="list">2</li>
  <li class="list">3</li>
</ul>
// 不合理的方式：给每个元素都绑定click事件
$('#container .list').on('click', function() {
  var text = $(this).text();
  console.log(text);
});
// 事件委托方式：利用事件冒泡机制将事件统一委托给父元素
$('#container').on('click', '.list', function() {
  var text = $(this).text();
  console.log(text);    
});

需要注意的是，虽然使用事件委托时都可以将事件委托给document来做，但这是不合理的，一个是容易造成事件误判，另一个是作用域链查找效率低。应该选择最近的父元素作为委托对象。

使用事件委托除了性能上更优，动态创建的DOM元素也不需要再绑定事件。

DOMContentLoaded

可在DOM元素加载完毕（DOMContentLoaded）后开始处理DOM树，不必等到所有图片资源下载完后再处理。

// 原生javascript
document.addEventListener("DOMContentLoaded", function(event) {
  console.log("DOM fully loaded and parsed");
}, false);
// jquery
$(document).ready(function() {
  console.log("ready!");
});
// $(document).ready()的简化版
$(function() {
  console.log("ready!");
});

预加载和懒加载

预加载

利用浏览器空闲时间预先加载将来可能会用到的资源，如图片、样式、脚本。

无条件预加载

一旦onload触发，立即获取将来需要用到的资源。

图片资源预加载。（3种实现图片预加载的方式）。

基于用户行为的预加载

对于用户行为可能进行的操作进行判断，预先加载将来可能需要用到的资源。

  1. 当用户在搜索输入框输入时，预先加载搜索结果页可能用到的资源；

  2. 当用户去操作一个Tab选项卡时，默认显示其中一个，当要去点击（click）其他选项时，在鼠标hover时，就可先加载将来会用到的资源；

懒加载

除页面初始化需要的内容或组件之外，其他都可以延迟加载，如剪切图片的js库、不在可视范围的图片等等。

图片懒加载。（判断图片是否在可视区域范围内，若在，则将真实路径赋给图片）

避免全局查找

任何一个非局部变量在函数中被使用超过一次时，都应该将其存储为局部变量。

function updateUI(){
  var imgs = document.getElementsByTagName("img");
  for (var i=0, len=imgs.length; i < len; i++){
    imgs[i].title = document.title + " image " + i;
  }
  var msg = document.getElementById("msg");
  msg.innerHTML = "Update complete.";
}

在上面函数中多次使用到document全局变量，尤其在for循环中。因此将document全局变量存储为局部变量再使用是更优的方案。

function updateUI(){
  var doc = document;
  var imgs = doc.getElementsByTagName("img");
  for (var i=0, len=imgs.length; i < len; i++){
    imgs[i].title = doc.title + " image " + i;
  }
  var msg = doc.getElementById("msg");
  msg.innerHTML = "Update complete.";
}

值得注意的一点是，在javascript代码中，任何没有使用var声明的变量都会变为全局变量，不正当的使用会带来性能问题。

避免不必要的属性查询

使用变量和数组要比访问对象上的属性更有效率，因为对象必须在原型链中对拥有该名称的属性进行搜索。

// 使用数组
var values = [5, 10];
var sum = values[0] + values[1];
alert(sum);
// 使用对象
var values = { first: 5, second: 10};
var sum = values.first + values.second;
alert(sum);

上面代码中，使用对象属性来计算。一次两次的属性查找不会造成性能问题，但若需要多次查找，如在循环中，就会影响性能。

在获取单个值的多重属性查找时，如：

var query = window.location.href.substring(window.location.href.indexOf("?"));

应该减少不必要的属性查找，将window.location.href缓存为变量。

var url = window.location.href;
var query = url.substring(url.indexOf("?"));

函数节流

假设有一个搜索框，给搜索框绑定onkeyup事件，这样每次鼠标抬起都会发送请求。而使用节流函数，能保证用户在输入时的指定时间内的连续多次操作只触发一次请求。

<input type="text" id="input" value="" />
// 绑定事件
document.getElementById('input').addEventListener('keyup', function() {
  throttle(search);
}, false);
// 逻辑函数
function search() {
  console.log('search...');
}
// 节流函数
function throttle(method, context) {
  clearTimeout(method.tId);
  method.tId = setTimeout(function() {
    method.call(context);
  }, 300);
}

节流函数的应用场景不局限搜索框，比如页面的滚动onscroll，拉伸窗口onresize等都应该使用节流函数提升性能。

最小化语句数

语句数量的多少也是影响操作执行速度的因素。

将多个变量声明合并为一个变量声明

// 使用多个var声明
var count = 5;
var color = "blue";
var values = [1,2,3];
var now = new Date();
// 改进后
var count = 5,
  color = "blue",
  values = [1,2,3],
  now = new Date();

改进的版本是只使用一个var声明，由逗号隔开。当变量很多时，只使用一个var声明要比单个var分别声明快很多。

使用数组和对象字面量

使用数组和对象字面量的方式代替逐条语句赋值的方式。

var values = new Array();
values[0] = 123;
values[1] = 456;
values[2] = 789;
// 改进后
var values = [123, 456, 789];
var person = new Object();
person.name = "Jack";
person.age = 28;
person.sayName = function(){
  alert(this.name);
};
// 改进后
var person = {
  name : "Jack",
  age : 28,
  sayName : function(){
    alert(this.name);
  }
};

字符串优化

字符串拼接

早期浏览器未对加号拼接字符串方式优化。由于字符串是不可变的，就意味着要使用中间字符串来存储结果，因此频繁的创建和销毁字符串是导致它效率低下的原因。

var text = "Hello";
text+= " ";
text+= "World!";

把字符串添加到数组中，再调用数组的join方法转成字符串，就避免了使用加法运算符。

var arr = [],
  i = 0;
arr[i++] = "Hello";
arr[i++] = " ";
arr[i++] = "World!";
var text = arr.join('');

现在的浏览器都对字符串加号拼接做了优化，所以在大多数情况下，加法运算符还是首选。

减少回流和重绘

在浏览器渲染过程中，涉及到回流和重绘，这是一个损耗性能的过程，应注意在脚本操作时减少会触发回流和重绘的动作。

  1. 回流：元素的几何属性发生了变化，需要重新构建渲染树。渲染树发生变化的过程，就叫回流；

  2. 重绘：元素的几何尺寸没有变化，某个元素的CSS样式（背景色或颜色）发生了变化。

触发重排或重绘的操作有哪些？

  1. 调整窗口大小

  2. 修改字体

  3. 增加或者移除样式表

  4. 内容变化，比如用户在框中输入文字

  5. 操作class属性

  6. 脚本操作DOM（增加、删除或修改DOM元素）

  7. 计算offsetWidth和offsetHeight属性

  8. 设置style属性的值

如何减少重排和重绘，提升网页性能？

1、脚本操作DOM元素

  1. 将DOM元素设置为display:none，设置过程中会触发一次回流，但之后可以随意改动，修改完后再显示；

  2. 将元素clone到内存中再进行操作，修改完后重新替换元素。

2、修改元素的样式

  1. 尽量批量修改，而不是逐条修改；

  2. 预先设定好id、class，再设置元素的className。

3、为元素添加动画时将元素CSS样式设为position:fixed或position:absolute，元素脱离文档流后不会引起回流。

4、在调整窗口大小、输入框输入、页面滚动等场景时使用节流函数（上面已提到过）。

HTTP

浏览器缓存

合理设置浏览器缓存是网页优化的重要手段之一。

Expires 和 Cache-Control

Expires出自HTTP1.0，Cache-Control出自HTTP1.1，同时设置两者时，Cache-Control 会覆盖 Expires。

  1. Expires指定的是实际过期日期而不是秒数。但Expires存在一些问题，如服务器时间不同步或不准确。所以最好使用剩余秒数而不是绝对时间来表达过期时间。

  2. Cache-Control可设置max-age值，单位秒，指定缓存过期时间。如：Cache-Control: max-age=3600。

ETag 和 Last-Modified

ETag 和 Last-Modified都由服务器返回在response headers中，其中ETag的优先级比Last-Modified高，也就是说服务器会优先判断ETag的值。

  1. ETag是附加到文档上的任意标签，可能是文档的序列号或版本号，或者是文档内容的校验等。当文档改变时ETag值也会随之改变。与ETag相关的是 If-None-Match，当浏览器发起请求时，会在If-None-Match字段携带ETag的值发给服务器；

  2. Last-Modified是文档在服务器端最后被修改的时间。与Last-Modified相关的是If-Modified-Since，当浏览器发起请求时，会在If-Modified-Since字段携带Last-Modified的值发送给服务器。

强缓存和协商缓存

Die Cache-Typen sind starker Cache und ausgehandelter Cache. Der Unterschied zwischen den beiden besteht darin, dass der starke Cache keine Anfrage an den Server sendet, der ausgehandelte Cache jedoch eine Anfrage sendet. Wenn die Übereinstimmung erfolgreich ist, wird 304 Nicht geändert zurückgegeben. Wenn die Übereinstimmung nicht erfolgreich ist, wird sie zurückgegeben 200; Der Browser überprüft zuerst den starken Cache. Wenn der starke Cache fehlschlägt, führt er eine Verhandlungs-Cache-Überprüfung durch.

So konfigurieren Sie den Browser-Cache

  1. Fügen Sie Expires und Cache-Control in der Antwortantwort des Webservers hinzu;

    2. Konfigurieren Sie Ablauffristen und Cache-Kontrolle in der Konfigurationsdatei von Nginx oder Apache.

Warum sollten wir HTTP-Anfragen reduzieren?

Maßnahmen zur Reduzierung von HTTP-Anfragen machen einen großen Teil der Leistungsoptimierung aus, wie zum Beispiel: Verwendung von CSS-Sprite Bilder Ersetzen Sie mehrere Bildanforderungen, vermeiden Sie leere Quellbilder, verwenden Sie Inline-Bilder, verwenden Sie externe Links, CSS und JS, Cache usw.

Der Prozess von der Eingabe der URL bis zum Abschluss des Ladens der Seite umfasst:

    DNS-Auflösung

    2. TCP-Verbindung

    3. HTTP-Anfrage und -Antwort

    4. Browser-Rendering-Seite

    5. Verbindung schließen

    6. Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Schreiben von Spezifikationen und Reihenfolge in CSS-Praxisprojekten


CSS+Übergang zum Erstellen sichtbarer und unsichtbarer Animationen

Das obige ist der detaillierte Inhalt vonGrundlegende Leistungsoptimierung von Frontend-Webseiten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Verfassen von Spezifikationen und Ordnung in CSS-PraxisprojektenNächster Artikel：Verfassen von Spezifikationen und Ordnung in CSS-Praxisprojekten

In Verbindung stehende Artikel

Mehr sehen