Zusammenfassung der Methoden zur Optimierung und Verbesserung der Leistung in CSS

CSS-Optimierung konzentriert sich hauptsächlich auf vier Aspekte:

1. Ladeleistung
   Es gibt zu viele Best Practices in Bezug auf diesen Aspekt, und Sie können viele Informationen allein durch die Suche finden Verwenden Sie beispielsweise keinen Import, keine Komprimierung usw., hauptsächlich um die Dateigröße zu reduzieren, das blockierte Laden zu reduzieren und die Parallelität zu verbessern.

2. Selektorleistung
   Aber der Einfluss des Selektors auf die Gesamtleistung ist vernachlässigbar, Selektor Bei der Inspektion geht es eher um Standardisierung, Wartbarkeit und Robustheit. Nur wenige Menschen werden sich bei der tatsächlichen Arbeit auf die Leistung von Selektoren konzentrieren, aber wie in dieser GitHub-Aktie erwähnt, ist es besser, es zu wissen, als es nicht zu wissen.

3. Rendering-Leistung
   Die Rendering-Leistung ist das wichtigste Anliegen bei der CSS-Optimierung. Seitendarstellung zu fehlerhaft? Sehen Sie, ob Textschatten häufig verwendet wird? Haben Sie das Schriftarten-Anti-Aliasing aktiviert? Wie wird CSS-Animation implementiert? Wird die GPU-Beschleunigung richtig genutzt? Welches flexible Boxmodell haben Sie verwendet? Haben Sie die Auswirkungen einer Änderung der Layoutstrategie auf die Renderleistung getestet? Wenn Sie in diesem Zusammenhang nach CSS-Renderleistung oder CSS-Animationsleistung suchen, finden Sie viele Informationen als Referenz.

4. Wartbarkeit und Robustheit
   Ist die Benennung sinnvoll? Ist das strukturelle Hierarchiedesign robust genug? Werden Stile abstrakt wiederverwendet? Elegantes CSS wirkt sich nicht nur auf die späteren Wartungskosten aus, sondern auch auf die Ladeleistung und andere Aspekte. In diesem Zusammenhang können Sie weitere Informationen zu OOCSS (nicht, dass Sie OOCSS verwenden müssen, aber dass Sie mehr darüber lernen sollten) und anderen CSS-Strategien finden und von den Stärken der anderen lernen.

NO2

[Der Weg zur CSS-Code-Rekonstruktion und -Optimierung]

Studenten, die CSS schreiben, stellen oft fest, dass , wie Mit zunehmendem Umfang des Projekts wird es immer mehr CSS-Codes im Projekt geben. Wenn der CSS-Code nicht rechtzeitig gepflegt wird, wird die Anzahl der CSS-Codes weiter zunehmen. Der CSS-Code ist verflochten und komplex, wie ein riesiges Spinnennetz, das an verschiedenen Stellen auf der Website verteilt ist. Sie wissen nicht, welche Auswirkungen eine Änderung dieser Codezeile haben wird. Wenn also Änderungen oder neue Funktionen hinzugefügt werden, trauen sich Entwickler oft nicht Löschen Sie die alten. Der ultimative Nachteil der Verwendung von redundantem Code und des sicheren Hinzufügens von neuem Code besteht darin, dass das Projekt immer mehr CSS enthält und es schließlich in ein Fass ohne Boden fällt.

Der Zweck der CSS-Code-Rekonstruktion

Wenn wir CSS-Code schreiben, sollten wir nicht nur den Effekt des Seitendesigns vervollständigen, sondern auch die Verwaltung des CSS-Codes vereinfachen und pflegen. Wir verfolgen zwei Hauptziele mit der Umgestaltung von CSS-Code:

1. Verbesserung der Codeleistung

2. Verbesserung der Wartbarkeit des Codes

Verbesserung der Codeleistung

Es gibt zwei Hauptpunkte, um die Leistung von CSS-Code zu verbessern:

1. Verbessern Sie die Ladeleistung der Seite

Um die Ladeleistung der Seite zu verbessern, reduzieren Sie einfach Verringern Sie die Größe der CSS-Datei, verbessern Sie die Ladegeschwindigkeit der Seite und verwenden Sie den HTTP-Cache so weit wie möglich

2. Verbessern Sie die Leistung des CSS-Codes

Verschiedene CSS-Codes werden von Browsern auf unterschiedliche Weise analysiert Geschwindigkeiten. Wie wir die Geschwindigkeit des Browser-Parsings von CSS-Code verbessern können, ist auch das, was wir berücksichtigen müssen.

Verbessern der Wartbarkeit des Codes

Dies spiegelt sich hauptsächlich in den folgenden Aspekten wider:

1. Wiederverwendbarkeit

Im Allgemeinen muss der gesamte Designstil eines Projekts konsistent sein. Es müssen mehrere Module mit demselben, aber leicht unterschiedlichen Stil vorhanden sein Seite So viel CSS-Code wie möglich wiederverwenden und so wenig neuen Code wie möglich hinzufügen ist ein sehr wichtiger Punkt beim CSS-Code. Wenn die Wiederverwendbarkeit des CSS-Codes hoch ist, müssen wir möglicherweise nur einige andere Stellen schreiben, was für die Seitenleistung und Wartbarkeit von großem Nutzen ist und die Entwicklungseffizienz verbessert.

2. Skalierbarkeit

Wenn dem Produkt eine bestimmte Funktion hinzugefügt wird, sollten wir sicherstellen, dass der neu hinzugefügte CSS-Code keine Auswirkungen auf den alten CSS-Code und die alten Seiten hat, und so wenig wie möglich hinzufügen Neuer Code und Wiederverwendung alten Codes.

3. Modifizierbarkeit

Wenn der Produktmanager eines Moduls das Gefühl hat, dass er den Stil ändern oder löschen muss, wenn der entsprechende CSS-Code nicht geplant ist, wird der Entwicklung Das Personal kann sich möglicherweise nicht daran erinnern, an wie vielen Stellen dieser Code funktioniert, und wagt es nicht, ihn zu ändern oder zu löschen. Wenn dies so weitergeht, werden immer mehr CSS-Codes hinzugefügt, was sich auf die Leistung der Seite auswirkt und die Komplexität des Codes erhöht.

Grundlegende Methoden zur CSS-Code-Rekonstruktion

Ich habe den Zweck der CSS-Code-Rekonstruktion bereits erwähnt. Lassen Sie uns nun über einige grundlegende Methoden sprechen, wie diese Zwecke erreicht werden können Es handelt sich dabei um einige Methoden, die leicht zu verstehen und umzusetzen sind und die jeder verwenden kann, ohne es zu wissen.

Möglichkeiten zur Verbesserung der CSS-Leistung

Lassen Sie uns zunächst darüber sprechen, wie Sie die CSS-Leistung basierend auf der Seitenladeleistung und der CSS-Codeleistung verbessern können :

1. Versuchen Sie, den Stil in eine separate CSS-Datei zu schreiben und im Head-Element darauf zu verweisen

Manchmal schreiben wir den Stil aus Bequemlichkeitsgründen oder um die Funktion schnell zu erhalten, direkt in die Stil-Tag der Seite Oder direkt in das Element einbinden Dies ist zwar einfach und praktisch, wirkt sich jedoch sehr nachteilig auf die zukünftige Wartung aus. Das Schreiben des Codes als separate CSS-Datei bietet mehrere Vorteile:

　(1)Trennung von Inhalt und Stil, einfach zu verwalten und zu warten

　(2)Seitengröße reduzieren

　(3)CSS-Dateien können zwischengespeichert und wiederverwendet werden, wodurch die Wartungskosten gesenkt werden

　2. Verwenden Sie @import nicht

Diese Methode ist bereits bekannt. Hier ist eine kurze Erwähnung: @import beeinflusst die Ladegeschwindigkeit von CSS-Dateien

3. Vermeiden Sie die Verwendung Komplexe Selektoren. Je weniger Ebenen, desto besser.

Manchmal enthält das Projekt immer mehr Module und die Funktionen werden immer komplexer. Der von uns geschriebene CSS-Selektor enthält immer mehr Ebenen.

Es wird empfohlen, dass die Verschachtelung von Selektoren drei Ebenen nicht überschreiten sollte, zum Beispiel:

.header .logo .text{}

Es kann in

.haeder .logo-text{}

A optimiert werden Prägnanter Selektor ist nicht nur Es kann die Größe von CSS-Dateien reduzieren, die Leistung beim Laden von Seiten verbessern, das Parsen des Browsers effizienter machen, die Entwicklungseffizienz der Entwickler verbessern und die Wartungskosten senken.

4. Optimieren Sie die Stildateien der Seite und entfernen Sie nicht verwendete Stile

Oft führen wir alle Stildateien in einer Datei zusammen, aber es gibt ein Problem: das CSS vieler anderer Seiten Sie werden gleichzeitig in der aktuellen Seite referenziert, aber die aktuelle Seite verwendet sie nicht. Diese Situation führt zu zwei Problemen:

　(1) Die Stildatei ist zu groß, was sich auf die Ladegeschwindigkeit auswirkt

　(2) ) Der Browser führt einen redundanten Stilabgleich durch, was sich auf die Renderzeit auswirkt.

Die richtige Methode besteht darin, die von der aktuellen Seite verwendeten CSS-Dateien entsprechend dem von der aktuellen Seite benötigten CSS zusammenzuführen.

PS: Das Zusammenführen in eine Datei hat einen Vorteil: Die Style-Datei wird vom Browser zwischengespeichert und Sie müssen die Style-Datei nicht herunterladen, wenn Sie andere Seiten aufrufen. Diese Regel sollte je nach Szenario unterschiedlich behandelt werden. Wenn es sich um ein großes Projekt handelt, sollte es in verschiedene Stildateien zusammengeführt werden. Wenn es sich um ein einfaches Projekt handelt, wird empfohlen, es in einer Datei zusammenzuführen. Wenn der Projektmaßstab nicht bestätigt werden kann, wird empfohlen, es in verschiedene Stildateien aufzuteilen, die in Zukunft bequemer zusammengeführt werden können.

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

Wir wissen, dass einige CSS-Codes vererbt werden können. Wenn das übergeordnete Element den Stil festgelegt hat, muss das untergeordnete Element nicht festgelegt werden Der Stil ist auch eine bewährte Möglichkeit, die Leistung zu verbessern.

Allgemeine vererbbare Eigenschaften wie:

Farbe, Schriftgröße, Schriftfamilie usw.

Nicht vererbbare Eigenschaften wie:

Position , Anzeige, Float usw.

Methoden zur Verbesserung der Wartbarkeit

Um die Wartbarkeit von CSS-Code zu verbessern, geht es, einfach ausgedrückt, darum, ihn für Entwickler leicht verständlich zu machen CSS-Code und machen es einfach, ihn zu ändern, wird die ursprüngliche Funktion nicht zerstören. Lassen Sie uns über einige gängige Methoden sprechen.

1. Benennung und Bemerkungen

Die Benennung ist der erste Schritt zur Verbesserung der Codelesbarkeit und außerdem ein äußerst wichtiger Schritt. Viele Menschen machen diese Erfahrung: Die Benennung ist für Programmierer eines der schwierigsten Dinge beim Schreiben von Code. Insbesondere für Entwickler, deren Muttersprache nicht Englisch ist, ist es nicht einfach, einen passenden und passenden Namen zu finden. Um Ihre Benennungsfähigkeiten zu verbessern, können Sie sich den Code anderer Leute ansehen. Hier sind einige Namensvorschläge in CSS:

Kopfzeile: Kopfzeile

Inhalt: Inhalt/Container

Fußzeile: Fußzeile

Navigation: Navigation

Seitenleiste: Seitenleiste

Spalte: Spalte

Seitenperipheriesteuerung Gesamtlayoutbreite: Wrapper

Linke und rechte Mitte: links-rechts-Mitte

Anmeldeleiste : loginbar

Logo: Logo

Werbung: Banner

Seitentext: Hauptseite

Hotspot: hot

News: News

Herunterladen: herunterladen

Unternavigation: Unternavigation

Menü: Menü

Untermenü: Untermenü

Suchen: Suchen

Freundliche Links: Friendlink

Fußzeile: Fußzeile

Urheberrecht: Copyright

Scrollen: Scrollen

Inhalt: Inhalt

Tags : Tags

Artikelliste: Liste

Eingabeaufforderung: msg

Tipps: Tipps

Spaltentitel: Titel

Beitreten: joinus

Anleitung: Anleitung

Service: Service

Registrierung: Regsiter

Status: Status

Abstimmung: Abstimmung

Partner: Partner

Navigation: nav

Hauptnavigation: mainnav

Unternavigation: subnav

Top-Navigation: topnav

Seitennavigation: Seitenleiste

Linke Navigation: linke Seitenleiste

Rechte Navigation: rechte Seitenleiste

Menü: Menü

Untermenü: Untermenü

Titel: Titel

Zusammenfassung: Zusammenfassung

2. Wiederholte Stile extrahieren

Diese Methode ist leicht zu verstehen. Einfach ausgedrückt besteht sie darin, denselben Stil in eine separate Klasse zu extrahieren und dann Zitat: Dies reduziert nicht nur die Größe der CSS-Datei, sondern auch den CSS-Code, was die Wiederverwendung und Wartung erleichtert. Zum Beispiel das folgende Beispiel:

Der Originalcode lautet wie folgt:

　　.about-title{
　　margin: 0 auto 6rem; color: #333; text-align: center; letter-spacing: 4px; font-size: 2rem;
　　}
　　.achieve-title{
　　margin: 0 auto 6rem; color: #fff; text-align: center; letter-spacing: 4px; font-size: 2rem;
　　}

Der Unterschied zwischen diesen beiden Stilen besteht in den unterschiedlichen Textfarben. Wir können ihre gemeinsamen Stile extrahieren und dann festlegen jeweils ihre unterschiedlichen Stile

　　.column-title{
　　margin: 0 auto 6rem; text-align: center; letter-spacing: 4px; font-size: 2rem;
　　}
　　.about{
　　color: #333;
　　}
　　.achieve{
　　color:#fff;
　　}

　　提取公用的部分，然后在页面上分别引用column-title和about等，这样代码更简洁，维护起来也更方便了。这个例子非常简单，实际上项目中可能有更复杂的情况，总之就要要尽可能的DRY，尽可能的提取重复的东西。

　　3、书写顺序

　　这个书写顺序指的是各个样式的书写顺序，下面是推荐的CSS书写顺序

　　(1)位置属性(position, top, right, z-index, display, float等)

　　(2)大小(width, height, padding, margin)

　　(3)文字系列(font, line-height, letter-spacing, color- text-align等)

　　(4)背景(background, border等)

　　(5)其他(animation, transition等)

　　书写顺序不一定非得按照上面的推荐来进行，而是根据你自己的习惯，但是最好能保证前后的习惯一致的，或者团队应该有一个共同的代码规范去遵守，这样后期维护起来也会方便许多。

　　以上是我个人总结的一些简单的写好和重构CSS代码的方法，大家当然不必拘泥于此，有不同的意见和建议欢迎进行交流!

　CSS方法论

　　什么是CSS方法论呢?简单地说就是一些同行为了提高CSS可维护性、提出的一些编写CSS代码的规范和方法。他们提出了一些概念，这些概念可能听起来很高大上，但是实际你平时可能不知不觉也会用到这些所谓的CSS方法论。下面我简单地介绍下几个比较常见的CSS方法论。

　OOCSS

　　OOCSS是(Object Oriented CSS)，顾名思义就是面向对象的CSS。

　　OOCSS主要有两个原则：

　　1、结构和样式分离

　　我们平时一定遇到过这种情况，比如一个页面存在着多个不同功能的按钮，这些按钮的形状大小都差不多，但是根据不同的功能会有不同的颜色或背景来加以区分。如果不进行结构和样式分离，我们的CSS代码可能是这样的

　.btn-primary{
　　width:100px;
　　height:50px;
　　padding:5px 3px;
　　background:#ccc;
　　color:#000;
　　}
　　.btn-delete{
　　width:100px;
　　height:50px;
　　padding:5px 3px;
　　background:red;
　　color:#fff;
　　}

这两个或者可能更多的按钮拥有一些不同的样式，但是它们同时拥有相同的大小样式等，我们将其抽象的部分提取出来，结果如下：

　.btn{
　　width:100px;
　　height:50px;
　　padding:5px 3px;
　　}
　　.primary{
　　background:red;
　　color:#fff;
　　}
　　.delete{
　　background:red;
　　color:#fff;
　　}

　　这样提取公用的样式出来，然后按钮同时引用btn和primary等。这种做法除了减少重复的代码精简CSS之外，还有一个好处是复用性，如果需要增加其他额外的按钮，只需要编写不同的样式，和btn配合使用即可。

　　(2)容器和内容分离

　　我们平时写代码一定写过这样代码

　.content h3{
　　font-size:20px;
　　color:#333;
　　}

　　这样的代码就是内容依赖于容器，没有分离的代码，也就是说h3的样式依赖于.content容器，如果其他地方要用到相同的样式，但是它的容器却不是.content，那你可能就是要再写一遍.something h3。

　　所以OOCSS推荐分离容器和内容，可以修改成：

　　.title{
　　font-size:20px;
　　color:#333;
　　}

　　关于这一点，我个人建议要分情况来看，像前面这个例子，它适合样式和容器分离。但是比如下面这种情况：

　.menu li{
　　font-size:12px;
　　}

　　这种ul，li列表的样式，我觉的就按照我们原先的做法就可以，不一定非得给一个类给li来设定样式，即

　.menu-item{
　　font-size:12px;
　　}

　　这样页面的li标签需要引用menu-item类。

　　当然采用哪一种方式更好我也不却确定，我自己比较喜欢.menu li的写法，大家自行思考。

　　这就是OOCSS的两个基本原则，这里只是简单介绍OOCSS，各位如果有兴趣的话请自行Google查找相关资料。

　　SMACSS

　　SMACSS是什么呢，它的全称是Scalable and Modular Architecture forCSS。简单说就是可扩展和模块化的CSS架构。

　　SMACSS将样式分成5种类型：Base，Layout，Module，State，Theme，我们简单来说说每一种类型分别指什么。

　　1、Base

　　基础样式表，定义了基本的样式，我们平时写CSS比如reset.css就是属于基础样式表，另外我认为清除浮动，一些动画也可以归类为基础样式。

　　2、Layout

　　布局样式，用于实现网页的基本布局，搭起整个网页的基本骨架。

　　3、Module

　　网页中不同的区域有这个不同的功能，这些功能是相对独立的，我们可以称其为模块。模块是独立的，可重用的组件，它们不依赖于布局组件，可以安全的删除修改而不影响其他模块。

　　4、State

　　状态样式，通常和js一起配合使用，表示某个组件或功能不同的状态，比如菜单选中状态，按钮不可用状态等。

　　关于状态样式，我个人觉得要分情况进行讨论：

　　(1)不同组件的同一状态的样式是一样的，比如头部的导航菜单的选中状态样式和侧栏的菜单选中状态样式是一样的，我认为这部分状态样式可以归类为State

　　(2)不同组件的统一状态的样式是不一样的，即两个地方的菜单虽然都是选中状态，但是他们却又不同的选中样式，这部分样式不应该被认为是State类型，而是应该放在其组件对应的Module中。

　　5、Theme

　　皮肤样式，对于可更换皮肤的站点来说，这个是很有必要的，分离了结构和皮肤，根据不同的皮肤应用不同的样式文件。

　　BEM

　　BEM是Block，Element，Modifier的缩写。下面分别来介绍一下这三个概念：

　　(1)Block：在BEM的理论中，一个网页是由block组成的，比如头部是个block，内容是block，logo也是block，一个block可能由几个子block组成。

　　(2)Element：element是block的一部分，具有某种功能，element依赖于block，比如在logo中，img是logo的一个element，在菜单中，菜单项是菜单的一个element

　　(3)Modifier：modifier是用来修饰block或者element的，它表示block或者element在外观或行为上的改变

　　我们通过BEM命名法写样式如下：

　.block{}
　　.block-element{}
　　.block-modifier{}
　　.block-element-modifier{}

　　BEM将页面解析为block和element，然后根据不同的状态使用modifier来设置样式。

　　我对BEM的思想理解可能不到位，对BEM的看法主要是由两点：

　　(1)页面CSS模块化，每个block就是一个模块，模块间相互独立

　　(2)多级的class命名，避免选择器的嵌套结构

　关于CSS方法论

　　上面提到的这些CSS方法论，大家看了就会发现，它们其实有很多思想是相同的，比如：

　　1、选择器的嵌套的优化

　　2、CSS代码模块化

　　3、抽象CSS代码

　　…

　　这些方法论，我们学习的时候，最重要的是去理解其思想，不一定非得照搬它的实现形式，多种方法结合使用。

总结

　　谈了这么多，下面来说说我自己总结的写CSS代码的一些关键点。

　　1、写代码之前：从PSD文件出发

　　当我们拿到设计师给的PSD时，首先不要急于写CSS代码，首先对整个页面进行分析，主要关注点是下面几个：

　　(1)页面分成了几个模块，哪些模块是公用的，常见的比如头部和底部，还有一些菜单栏等等

　　(2)分析每一个模块都有什么样式，提取出公用的样式，注意公用样式是全局公用(整个页面公用)还是局部公用(模块内公用)，公用样式包括公用的状态样式，比如公用的选中状态，禁用状态等等。

　　2、开始写代码

　　根据对PSD文件的分析，我们就可以开始着手写代码，我比较推荐SMACSS将样式分成不同类型的做法：

　　(1)第一步是搭好页面的骨架，也就是base样式，layout样式。

　　(2)第二步就是依次实现不同的模块，在这里我推荐BEM的命名思想，但是可以嵌套一到两层的选择器结构

　　3、优化代码

　　我相信当我们完成基本的页面效果后，还是会存在着一些重复的或者不够简洁的代码，这时候就是要去优化这些代码，主要是在提取重复代码，尽可能地精简代码。

NO3：

css性能优化的地方很多，结合以上几位大神的回答，总结如下：
1.慎重使用高性能属性：浮动、定位；
2.尽量减少页面重排、重绘
重排按照css的书写顺序：
位置：positon、top、left、z-index、float、dispay
大小：width、height、margin、padding
文字系列： font、line-height、color、letter-spacing
背景边框：background、 border
其它：anmation、transition
重绘:border、outline、background、box-shadow,能使用background-color,就尽量不要使用background;
3.去除空规则：｛｝；
4.属性值为0时，不加单位；
5.属性值为浮动小数0.**，可以省略小数点之前的0；
6.标准化各种浏览器前缀：带浏览器前缀的在前。标准属性在后；
7.不使用@import前缀，它会影响css的加载速度；
8.充分利用css继承属性，减少代码量；
9.抽象提取公共样式，减少代码量；
10.选择器优化嵌套，尽量避免层级过深；
11.css雪碧图，同一页面相近部分的小图标，方便使用，减少页面的请求次数，但是同时图片本身会变大，使用时，优劣考虑清楚，再使用;
12.将css文件放在页面最上面

.....

Das obige ist der detaillierte Inhalt vonZusammenfassung der Methoden zur Optimierung und Verbesserung der Leistung in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!