Bagaimana untuk mengoptimumkan prestasi CSS? Perkongsian Petua Pengoptimuman

Bagaimana untuk mengoptimumkan prestasi CSS? Artikel berikut akan memperkenalkan anda kepada beberapa CSS petua pengoptimuman prestasi saya harap ia akan membantu anda!

Dengan perkembangan Internet, prestasi menjadi semakin penting untuk tapak web, sebagai bahagian penting dalam pemaparan halaman dan persembahan kandungan, mempengaruhi pemahaman pengguna laman web. Pengalaman pertama dengan keseluruhan laman web. Oleh itu, kita perlu memberi perhatian kepada pengoptimuman prestasi yang berkaitan dengan CSS. [Pembelajaran yang disyorkan: tutorial video css]

Pada peringkat awal pembangunan projek, kita mungkin mempunyai pelbagai sebab (sebahagian besar sebabnya adalah disebabkan oleh tempoh projek dan produk sering melambatkan masa pelancaran projek), saya tidak mendengar apa yang anda katakan tentang pengoptimuman prestasi), cuma tulis apa sahaja yang anda rasa selesa dengannya akhir projek, atau walaupun masalah prestasi yang serius terdedah Hanya kemudian lakukan pengoptimuman prestasi.

Untuk mengelakkan situasi ini, kita mesti terlebih dahulu memberi perhatian kepada kerja yang berkaitan dengan pengoptimuman prestasi dan menyepadukannya ke dalam keseluruhan reka bentuk dan pembangunan produk. Kedua, ia adalah untuk memahami kandungan berkaitan prestasi dan secara semula jadi melakukan pengoptimuman prestasi semasa proses pembangunan projek.

peraturan pemaparan css

Untuk mengoptimumkan prestasi CSS, kita perlu memahami peraturan pemaparan CSS Pemilih CSS dipadankan dari kanan ke kiri

Mari kita ambil contoh:

.nav h3 a{font-size: 14px;}复制代码

Proses pemaparan mungkin: mula-mula cari semua a, cari a di sepanjang elemen induk h3 dan kemudian ikuti h3 , cari .nav. Jika nod yang memenuhi peraturan padanan ditemui di tengah-tengah, ia akan ditambahkan pada set hasil. Jika tiada padanan untuk elemen akar html, laluan tidak akan dilalui lagi dan carian akan diulang bermula dari a seterusnya (selagi terdapat berbilang nod paling kanan pada halaman yang a ).

Petua: Mengapakah pemilih CSS sepadan dari kanan ke kiri?

Lebih banyak pemilih dalam CSS tidak akan sepadan, jadi apabila mempertimbangkan isu prestasi, perkara yang perlu dipertimbangkan ialah cara meningkatkan kecekapan apabila pemilih tidak sepadan. Padanan dari kanan ke kiri adalah untuk mencapai tujuan ini Strategi ini boleh menjadikan pemilih CSS lebih cekap apabila ia tidak sepadan. Memikirkannya dengan cara ini, masuk akal untuk menggunakan lebih banyak prestasi semasa pemadanan.

CSS kritikal skrin pertama sebaris (CSS Kritikal)

Terdapat penunjuk penting dalam pengoptimuman prestasi - Cat Bermakna Pertama (Cat Bermakna Pertama, dirujuk sebagai FMP) merujuk kepada masa apabila kandungan utama halaman muncul pada skrin. Penunjuk ini mempengaruhi masa pengguna perlu menunggu sebelum melihat halaman dan CSS kritikal sebaris (CSS Kritikal, yang boleh dipanggil CSS kritikal skrin pertama) boleh mengurangkan masa ini.

Ramai orang suka merujuk link luaran melalui tag CSS文件. Tetapi apa yang anda perlu tahu ialah memasukkan CSS terus ke dalam dokumen HTML boleh membuat muat turun CSS lebih pantas. Apabila menggunakan fail CSS luaran, anda perlu mengetahui fail CSS untuk dirujuk selepas dokumen HTML dimuat turun, dan kemudian memuat turunnya. Oleh itu, CSS sebaris boleh membuatkan penyemak imbas mula memaparkan halaman lebih awal, kerana ia boleh dipaparkan selepas muat turun HTML selesai.

Tetapi kita tidak seharusnya menyelaraskan semua CSS dalam dokumen HTML kerana terdapat had dalam [Tetingkap Kesesakan Awal]（TCP相关概念，通常是 14.6kB，压缩后大小） Jika fail selepas CSS sebaris melebihi had ini, sistem perlu Lebih banyak perjalanan pergi dan balik antara pelayan dan penyemak imbas tidak meningkatkan masa pemaparan halaman. Oleh itu, kita seharusnya hanya menyelaraskan CSS kritikal yang diperlukan untuk memaparkan kandungan bahagian atas ke dalam HTML.

⚠️Perkara lain yang perlu diambil perhatian ialah CSS sebaris tidak dicache dan akan dimuat turun semula setiap kali HTML dimuatkan Walau bagaimanapun, kami mengawal CSS utama skrin sebaris pertama dalam 14.6kB, yang mempunyai impak yang besar terhadap prestasi. Pengoptimuman masih memainkan peranan yang positif. (Semuanya ada kelebihan dan kekurangan)

Pemuatan tak segerak bagi CSS bukan skrin pertama

Kita perlu tahu dua perkara: (Untuk butiran, sila lihat artikel saya sebelum ini: Untuk ini soalan temu bual penyemak imbas, lihat Berapa banyak jawapan yang boleh anda berikan

• tidak akan menyekat penghuraian CSS, tetapi ia akan menyekat pemaparan DOMDOM
akan Menyekat pelaksanaan
• , tetapi tidak menyekat muat turun CSS fail JSJS
Memandangkan CSS akan menyekat pemaparan DOM, kami menyelaraskan CSS utama skrin pertama dan Kandungan CSS bukan skrin pertama yang selebihnya boleh menggunakan CSS luaran dan dimuatkan secara tidak segerak untuk menghalang kandungan CSS bahagian bawah daripada menyekat pemaparan halaman.

Kaedah pemuatan tak segerak CSS

Kaedah pertama ialah mencipta secara dinamik

// 创建link标签
const myCSS = document.createElement( "link" );
myCSS.rel = "stylesheet";
myCSS.href = "mystyles.css";
// 插入到header的最后位置
document.head.insertBefore( myCSS, document.head.childNodes[ document.head.childNodes.length - 1 ].nextSibling );

第二种方法是将link元素的media属性设置为用户浏览器不匹配的媒体类型（或媒体查询）

对浏览器来说，如果样式表不适用于当前媒体类型，其优先级会被放低，会在不阻塞页面渲染的情况下再进行下载。在首屏文件加载完成之后，将media的值设为screen或all，从而让浏览器开始解析CSS。

<link rel="stylesheet" href="mystyles.css" media="noexist" onload="this.media=&#39;all&#39;">

第三种方法是通过rel属性将link元素标记为alternate可选样式表

<link rel="alternate stylesheet" href="mystyles.css" onload="this.rel=&#39;stylesheet&#39;">

第四种方法是使用rel=preload来异步加载CSS

<link rel="preload" href="mystyles.css" as="style" onload="this.rel=&#39;stylesheet&#39;">

注意，as是必须的。忽略as属性，或者错误的as属性会使preload等同于XHR请求，浏览器不知道加载的是什么内容，因此此类资源加载优先级会非常低。as的可选值可以参考上述标准文档。

看起来，rel="preload"的用法和上面两种没什么区别，都是通过更改某些属性，使得浏览器异步加载CSS文件但不解析，直到加载完成并将修改还原，然后开始解析。

但是它们之间其实有一个很重要的不同点，那就是使用preload，比使用不匹配的media方法能够更早地开始加载CSS。所以尽管这一标准的支持度还不完善，仍建议优先使用该方法。

CSS文件压缩

这应该是最容易想到的一个方法了，通过压缩CSS文件大小来提高页面加载速度。现在的构建工具，如webpack、gulp/grunt、rollup等也都支持CSS压缩功能。压缩后的文件能够明显减小，可以大大降低了浏览器的加载时间。

CSS层级嵌套最好不要超过3层

一般情况下，元素的嵌套层级不能超过3级，过度的嵌套会导致代码变得臃肿，沉余，复杂。导致css文件体积变大，造成性能浪费，影响渲染的速度！而且过于依赖HTML文档结构。这样的css样式，维护起来，极度麻烦，如果以后要修改样式，可能要使用!important覆盖。尽量保持简单，不要使用嵌套过多过于复杂的选择器。

删除无用CSS代码

一般情况下，会存在这两种无用的CSS代码：一种是不同元素或者其他情况下的重复代码，一种是整个页面内没有生效的CSS代码。

对于前者，在编写的代码时候，我们应该尽可能地提取公共类，减少重复。对于后者，在不同开发者进行代码维护的过程中，总会产生不再使用的CSS的代码，当然一个人编写时也有可能出现这一问题。而这些无用的CSS代码不仅会增加浏览器的下载量，还会增加浏览器的解析时间，这对性能来说是很大的消耗。所以我们需要找到并去除这些无用代码。

那么我们如何知道哪些CSS代码是无用代码呢？

谷歌的Chrome浏览器就有这种开箱即用的功能。只需转到查看>开发人员>开发人员工具，并在最近的版本中打开Sources选项卡，然后打开命令菜单。然后，点击Coverage，在Coverage analysis窗口中高亮显示当前页面上未使用的代码。

慎用*通配符

我们有时候可能会写下面这种代码来消除一些标签的默认样式或统一浏览器对标签渲染的差异化：

*{
  margin：0；
  padding：0;
}

这样虽然代码量少，但它的性能可不是最佳的，我们最好还是写对应的标签选择器：

body,dl,dd,h1,h2,h3,h4,h5,h6,p,form,ol,ul{
  margin：0；
  padding：0;
}

开发时尽量避免使用通配符选择器

小图片处理方式

一般来讲一个网站上肯定会有很多个小图标，对于这些小图标，目前的主流的解决方案有三个，cssSprite(雪碧图)，字体图标，把图片转成base64。

• cssSprite： 把所有icon图片合成一张png图片，使用时对节点设置宽高，加上bacgroud-position进行背景定位。以背景图方式显展示需要的icon，如果一个网站有20图标，那么就要请求20次，使用cssSprite，只需要请求一次，大大的减少了http请求。缺点就是管理不灵活，如果需要新增一个图标，都需要改合并图片的源文件，图标定位也要规范，不然容易干扰图片之间的定位。
• 字体图标： 简单粗暴的理解就是把所有的图标当成一个字体处理！这样不用去请求图片。一般是使用class来定义图标，要替换图标时，只需更换样式名，管理方便，语意明确，灵活放大缩小，并且不会造成失真。但是只支持单色的图片。
• base64： 另一种方案就是把小的icon图片转成base64编码，这样可以不用去请求图片，把base64编码直接整合到js或者css里面，可以防止因为一些相对路径，或者图片被不小删除了等问题导致图片404错误。但是找个方式会生成一大串的base64编码。一般来说，8K以下的图片才转换成base64编码。如果把一张50K的图片转成base64编码，那么会生成超过65000个字符的base64编码，字符的大小就已经是将近70K了！建议就是：8K以下的图片才转换成base64编码。

避免使用@import

不建议使用@import主要有以下两点原因：

• 使用@import引入CSS会影响浏览器的并行下载。使用@import引用的CSS文件只有在引用它的那个css文件被下载、解析之后，浏览器才会知道还有另外一个css需要下载，这时才去下载，然后下载后开始解析、构建render tree等一系列操作。这就导致浏览器无法并行下载所需的样式文件。

• 多个@import会导致下载顺序紊乱。在IE中，@import会引发资源文件的下载顺序被打乱，即排列在@import后面的js文件先于@import下载，并且打乱甚至破坏@import自身的并行下载。

不要在ID选择器前面进行嵌套其它选择器

在ID选择器前面嵌套其它选择器纯粹是多余的

• ID选择器本来就是唯一的而且人家权值那么大，前面嵌套（.content #text）完全是浪费性能。
• 除了嵌套，在ID选择器前面也不需要加标签或者其它选择器。比如 div#text或者.box#text。这两种方式完全是多余的，理由就是ID在页面就是唯一的。前面加任何东西都是多余的！

删除不必要的单位和零

CSS 支持多种单位和数字格式，可以删除尾随和跟随的零，零始终是零，添加维度不会为包含的信息附带任何价值。

.box {
  padding: .2px;
  margin: 20px;
  avalue: 0;
}

优化回流与重绘

在网站的使用过程中，某些操作会导致样式的改变，这时浏览器需要检测这些改变并重新渲染，其中有些操作所耗费的性能更多。我们都知道，当FPS为60时，用户使用网站时才会感到流畅。这也就是说，我们需要在16.67ms内完成每次渲染相关的所有操作，所以我们要尽量减少耗费更多的操作。

减少回流与重绘

合并对DOM样式的修改，采用css class来修改

const el = document.querySelector('.box')
el.style.margin = '5px'
el.style.borderRadius = '12px'
el.style.boxShadow = '1px 3px 4px #ccc'

建议使用css class

.update{
  margin: 5px;
  border-dadius: 12px;
  box-shadow: 1px 3px 4px #ccc
}
const el = document.querySelector('.box')
el.classList.add('update')

如果需要对DOM进行多次访问，尽量使用局部变量缓存该DOM

避免使用table布局，可能很⼩的⼀个⼩改动会造成整个table的重新布局

CSS选择符从右往左匹配查找，避免节点层级过多

DOM离线处理，减少回流重绘次数

离线的DOM不属于当前DOM树中的任何一部分，这也就意味着我们对离线DOM处理就不会引起页面的回流与重绘。

• 使用display: none，上面我们说到了 (display: none) 将元素从渲染树中完全移除，元素既不可见，也不是布局的组成部分，之后在该DOM上的操作不会触发回流与重绘，操作完之后再将display属性改为显示，只会触发这一次回流与重绘。

提醒⏰：visibility : hidden 的元素只对重绘有影响，不影响重排。

• 通过 documentFragment 创建一个 dom 文档片段,在它上面批量操作 dom，操作完成之后，再添加到文档中，这样只会触发一次重排。

const el = document.querySelector('.box')
const fruits = ['front', 'nanjiu', 'study', 'code'];
const fragment = document.createDocumentFragment();
fruits.forEach(item => {
  const li = document.createElement('li');
  li.innerHTML = item;
  fragment.appendChild(li);
});
el.appendChild(fragment);

• 克隆节点，修改完再替换原始节点

const el = document.querySelector('.box')
const fruits = ['front', 'nanjiu', 'study', 'code'];
const cloneEl = el.cloneNode(true)
fruits.forEach(item => {
  const li = document.createElement('li');
  li.innerHTML = item;
  cloneEl.appendChild(li);
});
el.parentElement.replaceChild(cloneEl,el)

DOM脱离普通文档流

使用absoult或fixed让元素脱离普通文档流，使用绝对定位会使的该元素单独成为渲染树中 body 的一个子元素，重排开销比较小，不会对其它节点造成太多影响。

CSS3硬件加速（GPU加速）

使用css3硬件加速，可以让transform、opacity、filters这些动画不会引起回流重绘 。但是对于动画的其它属性，比如background-color这些，还是会引起回流重绘的，不过它还是可以提升这些动画的性能。

常见的触发硬件加速的css属性：

• transform
• opacity
• filters
• Will-change

将节点设置为图层

图层能够阻⽌该节点的渲染⾏为影响别的节点。⽐如对于video标签来说，浏览器会⾃动将该节点变为图层。

具体回流与重绘知识点可以看我这篇文章：https://juejin.cn/post/7064077572132323365

（学习视频分享：web前端）

Atas ialah kandungan terperinci Bagaimana untuk mengoptimumkan prestasi CSS? Perkongsian Petua Pengoptimuman. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!