CSS 성능 최적화 및 개선 방법 요약

CSS 최적화는 주로 네 가지 측면에 중점을 둡니다.

1. 로딩 성능
   이 측면과 관련된 모범 사례가 너무 많습니다. 인터넷에서 검색하면 가져오기를 사용하지 않는 등 많은 정보를 찾을 수 있습니다. 압축 등 주로 파일 크기 감소, 차단된 로딩 감소, 동시성 향상에서 시작하여 이러한 일반적인 방향에서 벗어날 수 있는 힌트는 없습니다.

2. 셀렉터 성능
   하지만 셀렉터가 전체 성능에 미치는 영향은 미미합니다. 검사는 표준화, 유지 관리성 및 견고성에 관한 것입니다. 실제 작업에서 선택기 성능에 중점을 두는 사람은 거의 없지만 이 GitHub 공유에서 언급했듯이 모르는 것보다 아는 것이 낫습니다.

3. 렌더링 성능
   렌더링 성능은 CSS 최적화의 가장 중요한 초점입니다. 페이지 렌더링이 너무 지저분합니까? text-shadow가 광범위하게 사용되는지 확인하세요. 글꼴 앤티앨리어싱을 켰나요? CSS 애니메이션은 어떻게 구현되나요? GPU 가속이 제대로 활용되고 있나요? 유연한 상자 모델(Flexible Box Model)은 무엇을 사용했나요? 레이아웃 전략 변경이 렌더링 성능에 미치는 영향을 테스트해 보셨나요? 이와 관련해 CSS 렌더 성능이나 CSS 애니메이션 성능 등을 검색해 보면 참고할만한 정보가 많이 나올 것이다.

4. 유지관리성, 견고성
   네이밍이 합리적인가요? 구조적 계층 설계가 충분히 견고합니까? 스타일이 추상적으로 재사용되나요? 우아한 CSS는 이후 유지 관리 비용에 영향을 미칠 뿐만 아니라 로딩 성능 및 기타 측면에도 영향을 미칩니다. 이런 점에서 OOCSS(OOCSS를 꼭 사용해야 한다는 것이 아니라, 더 많이 배워야 한다는 것)와 다양한 CSS 전략에 대해 더 많은 정보를 찾아보고, 서로의 장점을 배울 수 있습니다.

NO2

【CSS 코드 재구성 및 최적화로 가는 길】

CSS를 작성하는 학생들은 프로젝트 규모가 커질수록 프로젝트에 CSS 코드가 점점 더 많아진다는 것을 종종 깨닫습니다. CSS 코드는 제 시간에 유지되지 않으며 CSS 코드 수는 계속 증가합니다. CSS 코드는 웹 사이트의 여러 위치에 분산되어 있는 거대한 거미줄처럼 서로 얽혀 있고 복잡합니다. 이 코드 줄을 수정하면 어떤 영향을 미칠지 알 수 없으므로 수정 사항이 있거나 새로운 기능이 추가되면 개발자는 감히 삭제하지 못하는 경우가 많습니다. 중복된 코드와 안전하게 새 코드를 추가하는 것의 궁극적인 단점은 프로젝트에 CSS가 점점 더 많아지고 결국 끝이 없는 나락에 빠지게 된다는 것입니다.

　CSS 코드 재구성의 목적

CSS 코드를 작성할 때 페이지 디자인 효과를 완성할 뿐만 아니라 CSS 코드를 쉽게 관리하고 유지할 수 있도록 만들어야 합니다. CSS 코드를 리팩토링하는 데는 두 가지 주요 목적이 있습니다.

　 1. 코드 성능 향상

2. 코드 유지 관리성 향상

코드 성능 향상

CSS 코드 성능을 향상시키는 두 가지 주요 사항은 다음과 같습니다.

1. 페이지 로딩 성능

페이지 로딩 성능을 향상시킨다는 것은 단순히 CSS 파일의 크기를 줄이고 페이지 로딩 속도를 향상시키며 http 캐시를 최대한 활용하는 것을 의미합니다

2. CSS 코드 성능 향상

CSS 코드가 다르면 브라우저 파싱 속도도 다릅니다. 브라우저가 CSS 코드를 파싱하는 속도를 높이는 방법도 고려해야 합니다.

코드의 유지 관리성 향상

CSS 코드의 유지 관리성 향상이 주로 반영됩니다.

　1. 재사용성

　 일반적으로 프로젝트의 전체적인 디자인 스타일은 동일하지만 페이지에는 스타일이 약간 다른 여러 모듈이 있어야 합니다. CSS를 최대한 재사용하는 방법. , 가능한 한 적은 양의 새 코드를 추가하십시오. 이는 CSS 코드에서 매우 중요한 포인트입니다. CSS 코드의 재사용성이 높으면 몇 가지 차이점만 작성하면 됩니다. 이는 페이지 성능과 유지 관리성에 큰 도움이 되며 개발 효율성을 향상시킵니다.

　2. 확장성

　제품에 특정 기능이 추가되면 새로 추가된 CSS 코드가 기존 CSS 코드 및 페이지에 영향을 미치지 않도록 하고, 기존 코드를 재사용하면서 새 코드를 최대한 적게 추가해야 합니다.

　3. Modifiability

　모듈의 제품 관리자가 스타일을 수정하거나 삭제해야 한다고 생각하는 경우 해당 CSS 코드가 계획되어 있지 않으면 개발자는 잠시 후 이 코드를 기억하지 못할 수 있습니다. 여러 곳에서 작동합니다. , 하지만 감히 수정하거나 삭제할 수는 없습니다. 이것이 계속되면 CSS 코드가 점점 더 많아지고, 이는 페이지 성능에 영향을 미치고 코드의 복잡성을 증가시킬 것입니다.

CSS 코드 리팩토링의 기본 방법

앞에서 CSS 코드 리팩토링의 목적을 언급했는데, 이제 이러한 목적을 달성하는 방법에 대한 몇 가지 기본 방법에 대해 이야기하겠습니다. 이러한 방법은 일반적으로 누구나 쉽게 사용할 수 있습니다. 모르고 사용하고 있을 수도 있습니다.

CSS 성능 향상을 의미합니다

먼저 CSS 성능을 향상시키는 방법에 대해 이야기해 보겠습니다. 페이지 로딩 성능과 CSS 코드 성능을 바탕으로 주요 요약은 다음과 같습니다.

　1. 스타일을 a로 작성해 보세요. 별도의 CSS 파일, 헤드 요소에서 참조

때로는 편의나 빠른 기능을 위해 페이지의 스타일 태그에 직접 스타일을 작성하거나 요소에 직접 인라인할 수 있습니다. 이는 간단하고 편리하지만 매우 해롭습니다. 향후 유지 관리에 . 별도의 CSS 파일에 코드를 작성하면 여러 가지 이점이 있습니다.

　　(1) 콘텐츠와 스타일의 분리, 관리 및 유지가 용이함

　　　　　　　　　　　　　　　　　　　　　ules CSS 콘텐츠 및 콘텐츠 우리 모두 알고 있듯이 여기에 간략한 언급이 있습니다. CSS 파일의 로딩 속도에 영향을 미칩니다

　3. 복잡한 사용을 피하세요 선택기, 레벨이 적을수록 좋습니다

프로젝트에 모듈이 점점 더 많아지고 기능이 점점 더 복잡해지는 경우도 있습니다. 우리가 작성하는 CSS 선택기는 내부에 여러 레이어를 포함하여 점점 더 복잡해집니다.

　 선택기 중첩은 세 가지 수준을 초과하지 않는 것이 좋습니다. 예:

.header .logo .text{}

.haeder .logo-text{}

　 여러 번 모든 스타일 파일을 하나의 파일로 병합하지만 문제가 있습니다. 다른 많은 페이지의 CSS가 현재 페이지에서 참조됩니다. 이 상황은 두 가지 문제를 야기합니다:

　　(1) 스타일 파일이 너무 커서 로딩 속도에 영향을 미칩니다.

　　(2) 브라우저가 중복된 스타일 일치를 수행합니다. 렌더링 시간에 영향을 줍니다.

　올바른 방법은 현재 페이지에서 요구하는 CSS에 따라 현재 페이지에서 사용하는 CSS 파일을 병합하는 것입니다.

　PS: 하나의 파일로 병합하면 장점이 있습니다. 스타일 파일은 브라우저에 의해 캐시되며 다른 페이지에 들어갈 때 스타일 파일을 다운로드할 필요가 없습니다. 이 규칙은 시나리오에 따라 다르게 처리되어야 합니다. 대규모 프로젝트인 경우 다른 스타일 파일로 병합해야 합니다. 간단한 프로젝트인 경우 하나의 파일로 병합하는 것이 좋습니다. 프로젝트 규모를 확인할 수 없는 경우 다른 스타일 파일로 분리하는 것이 좋습니다. 그러면 나중에 병합하는 것이 더 편리합니다.

　5. CSS 상속을 사용하여 코드 양 줄이기

　일부 CSS 코드는 상속될 수 있다는 것을 알고 있습니다. 상위 요소가 스타일을 설정했다면 하위 요소는 스타일을 설정할 필요가 없습니다. 성능을 향상시키는 방법.

　 다음과 같은 일반적인 상속 가능 속성:

색상, 글꼴 크기, 글꼴 모음 등

상속되지 않는 속성:

위치, 디스플레이, 부동 소수점 등

CSS 코드의 유지 관리 용이성을 향상시킨다는 것은 단순히 개발자가 원래 기능을 손상시키지 않고 CSS 코드를 쉽게 이해하고 수정할 수 있도록 한다는 의미입니다. 몇 가지 일반적인 방법에 대해 이야기해 보겠습니다.

　1. 이름 지정 및 설명　 이름 지정은 코드 가독성을 높이는 첫 번째 단계이자 매우 중요한 단계이기도 합니다. 많은 사람들이 이런 경험을 합니다. 프로그래머가 코드를 작성할 때 이름 지정은 가장 귀찮은 일 중 하나입니다. 특히 모국어가 영어가 아닌 개발자에게는 적합하고 적절한 이름을 찾는 것이 쉽지 않습니다. 명명 기술을 향상시키기 위해 다른 사람의 코드를 살펴볼 수 있습니다. 다음은 CSS의 이름 지정 관련 제안 사항입니다.

헤더: header

콘텐츠: content/container

바닥글: footer

탐색: nav

사이드바: sidebar

열: 열

페이지 주변 장치 제어 전체 레이아웃 너비 : 래퍼

　 왼쪽 오른쪽 중앙: 왼쪽 오른쪽 중앙

로그인 바: loginbar

로고: logo

광고: 배너

페이지 본문: main

핫스팟: hot

뉴스: news

다운로드: 다운로드

하위 탐색: subnav

메뉴: menu

하위 메뉴: submenu

검색: search

친숙한 링크: friendlink

바닥글: footer

저작권: copyright

스크롤: scroll

　콘텐츠: content

태그: 태그

기사 목록: list

프롬프트 정보: msg

팁: Tips

열 제목: title

가입: Joinus

가이드: Guide

서비스: service

등록: regsiter

상태: status

　 투표: vote

파트너: 파트너

탐색: nav

기본 탐색: mainnav

하위 탐색: subnav

상단 탐색: topnav

측면 탐색: sidebar

왼쪽 탐색: leftsidebar

오른쪽 탐색: rightsidebar

메뉴: menu

하위 메뉴: submenu

제목: title

요약: summary

2. 중복 스타일 추출

이 방법은 쉽게 말하면 동일한 스타일을 하나로 추출하는 방식입니다. 다시 참조하면 CSS 파일의 크기가 줄어들 뿐만 아니라 CSS 코드도 줄어들어 재사용 및 유지 관리가 더 쉬워집니다. 예를 들어, 다음 예는 다음과 같습니다.

원래 코드는 다음과 같습니다.

　　.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;
　　}

이 두 스타일의 차이점은 공통 스타일을 추출한 다음 각각 다른 스타일을 설정할 수 있다는 것입니다

　　.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文件放在页面最上面

.....

위 내용은 CSS 성능 최적화 및 개선 방법 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!