이 글에서는 주로 CSS 작성 시 성능 최적화를 소개하고, 스프라이트 이미지, 크기 설정 등 인기 있는 논의 사항을 포함하여 유지 관리가 많이 필요한 최적화 제안에 대한 요약을 소개합니다. 도움이 필요한 친구는 이를 참고할 수 있습니다.

성능, 요즘 이 단어가 과대평가되고 있습니다. 매우 뜨겁고, 모든 개발자가 '알고', '할 수 있게 된 후' 거쳐야 하는 '어떻게 하면 잘 할 수 있는가'의 단계이기도 합니다. 성능은 다양한 장치와 다양한 네트워크 조건에서의 사용자 경험에 관한 것입니다. 또한 많은 요인의 영향을 받습니다. 이 기사에서는 CSS에서 높은 성능을 달성하는 방법에 대해 설명합니다.

고성능 CSS

Html과 CSS 자체의 성능 문제는 눈에 띄지 않습니다. 가독성과 유지 관리성을 향상한다는 전제 하에 코드를 더 빠르게 실행하고 구문 분석할 수 있다면 금상첨화일 것입니다.

1. 효율적인 CSS 선택기를 사용하세요

간단히 말해서 브라우저에서 빠르게 구문 분석하고 일치시킬 수 있는 CSS 선택기가 효율적인 선택기입니다.

먼저 브라우저가 CSS를 구문 분석하는 방법을 알아야 합니다

예:

.nav ul.list li p{}

로그인 후 복사

우리의 일반적인 생각은 먼저 nav 클래스를 찾은 다음 클래스에 포함된 ul을 찾은 다음 목록의 하위 항목을 찾는 것입니다. in ul li의 모든 p는 간단히 말해서 왼쪽에서 오른쪽으로 나타납니다. 하지만 이것이 사실입니까? 무엇? 무엇? ~

사실은 반대입니다! 그것은 무엇을 의미합니까? 즉, 처음부터 시작해서 천천히 범위를 좁히는 것이 아니라, 순회에 해당하는 "줄무늬" 상자 p부터 시작하여 li을 찾는 식으로 진행됩니다. 설명하지 않고 소비합니다. 이 원칙을 이해하는 것이 중요합니다. 효율적인 선택기는 더 빠른 일치와 더 적은 조회를 의미합니다. 따라서 선택기를 정의할 때 첫 번째 일치 항목 수를 최소화하고 전체 일치 검색 횟수도 최소화해야 합니다.

위의 설명은 이러한 원칙을 정확히 따릅니다.

(1) 와일드카드 사용을 피하세요

(2) 태그 선택기와 단일 속성 선택기를 키 선택기로 사용하지 마세요

(3) ID 선택기 앞에 태그 이름을 추가하지 마세요

( 4) 선택기에서 너무 많은 수준을 정의하지 마십시오. 수준이 적을수록 CSS와 DOM 구조 간의 결합 정도가 줄어들고 스타일의 유지 관리성이 향상됩니다.

(ps: 솔직히 말해서 위의 " 커밋된 "금기"?~)

위에 대해 알아야 할 두 가지 사항이 있습니다. 첫 번째 사항은 처음에 언급한 CSS의 성능 문제는 특히 소규모 프로젝트에서는 유지 관리성이 뛰어납니다. 첫째, 두 번째 요점은 ID 선택기를 정의하면 고유한 ID만 정의할 수 있다는 것입니다. ID를 너무 많이 정의하면 재사용성이 떨어지고 유지 관리가 더 어려워지기 때문에 ID를 더 이상 사용하지 않는 것이 좋습니다. 한 번 이상.

2. CSS 관련 이미지 처리

오늘날 웹페이지에서 이미지의 비율과 그 중요성은 누구나 알고 있습니다. 그렇다면 사용자가 웹 페이지를 열 때 더 나은 경험을 할 수 있도록 사진을 잘 처리하고 사진 스타일을 설정하는 방법은 무엇입니까? 몇 가지 의견은 다음과 같습니다.

(1) 이미지 크기를 설정하지 마세요

개인 경험으로는 디자인 시안대로 페이지를 만들어 백엔드에 넘긴 경우가 있었습니다. 테스트를 위해 그는 갑자기 나에게 와서 말했습니다: 안녕하세요, 여기 뭔가 잘못되었습니다. 제가 봤을 때 사진이 제자리에 있지 않았는데 너비와 너비를 정의하지 않았다는 것을 기억했습니다. 그림의 높이(디자인 시안에서 직접 자를 필요는 없습니다.) 그리고 나서 CSS 스타일에서 너비와 높이를 정의하여 실수를 한 것 같습니다. 그래서 나중에 페이지를 만들 때 주의할 점으로 삼았습니다. 이 의견을 보고 더 좋은 사실을 알았습니다.

먼저 설명을 살펴보겠습니다. 둘째, 동일한 사진이 썸네일, 일반 등 페이지의 다른 위치에 여러 번 사용될 수 있습니다. 사진, 큰 사진. 여기서 문제가 발생합니다. 이미지의 원래 크기가 실제 수요와 다르면 사용 중에 성능 문제가 발생합니다. 스타일 크기 조정을 사용하면 CPU에 추가 계산 프로세스가 발생하고 브라우저에서 이미지 렌더링 시간이 늘어납니다. 네트워크 전송 프로세스도 더 많은 대역폭을 차지하고 다운로드 시간이 늘어납니다. 따라서 초기 페이지 로드 중에 더 빠르게 표시될 수 있도록 필요한 부분에 대해 별도의 이미지 세트를 만드는 것이 가장 좋습니다.

(2) CSS "Sprite Picture"

를 사용하여 흩어져 있는 사진을 하나의 큰 그림으로 병합하고 배경 위치 지정에 CSS를 사용합니다. 장점은 요청 수를 줄이고 전체 이미지 로딩 속도를 향상시키는 것입니다.

하지만 몇 가지 단점도 있습니다.

예를 들어 여러 장의 사진을 하나의 큰 사진으로 병합하려면 정확한 계산과 세심한 위치 조정이 필요합니다. 단순히 손으로 만드는 것은 매우 복잡한 문제입니다. (다행히도 이를 수행하는 데 도움이 되는 몇 가지 도구가 있습니다.)

또한 유지 관리 과정이 복잡합니다. 배경 그림의 크기가 변경되어 원래 영역을 유지할 수 없는 경우 기존 그림을 원래 위치에 유지하십시오. 원래 위치에서 수정해야 한다면 나머지 이미지 스타일도 수정해야 하는데, 이는 매우 번거로운 과정입니다. 새로 추가된 사진은 마지막에 배치하는 것이 가장 좋습니다.

또한 부적절한 사용은 성능 문제로 이어질 수 있습니다. 가장 큰 문제는 메모리 소비입니다. 제작 과정에서 아무런 계획도 세우지 않고 무작위로 배치하게 되면 사진이 상당히 커지고 메모리를 많이 차지하게 될 수 있습니다.

다음은 몇 가지 모범 사례입니다.

1. 프로젝트 후반부에 CSS 스프라이트 기술을 적용하세요

일반적으로 개발 과정에서 이미지가 자주 수정되거나 교체되기 때문에 이때 스프라이트 기술을 사용하면 개발 비용이 많이 증가하게 됩니다.

2. "스프라이트" 사진을 적절하게 정리하세요.

모든 사진을 한 장의 사진에 넣으려면 문제가 생기고 유지 관리도 별로 편리하지 않습니다. 조직의 배경 이미지는 크게 모듈과 배경 이미지 스타일에 따라 구분됩니다. 예를 들어 표시할 썸네일을 함께 배치하고, 댓글, 좋아요, 위쪽 및 아래쪽 화살표 등의 아이콘을 함께 배치합니다.

3. "스프라이트" 이미지의 크기와 크기를 조절하세요

대형 이미지는 메모리를 많이 차지하므로 적당한 크기로 조절하는 것이 좋습니다. 2500 이하, 크기는 200kb 이내여야 합니다

4. 배경 이미지 단위 간의 거리와 배경 이미지의 위치를 합리적으로 조절하세요

이 영역에 관련 없는 다른 배경 이미지가 나타나는 것을 방지하기 위한 것입니다. 배경 이미지가 요소 크기보다 작은 경우

5. 스프라이트 처리에 관련 도구를 사용하세요

3. CSS 코드의 양을 줄이세요

웹사이트의 전체 로딩 속도를 향상시키는 중요한 방법은 다음과 같습니다. 코드 파일의 네트워크 전송 속도를 높입니다. 코드 압축 외에도 코드 합리화도 수단입니다.

(1) 간결한 CSS 규칙 정의

관련 규칙 병합 및 간결한 속성 값 정의

병합 규칙은 글꼴 모음, 글꼴 크기, 글꼴 두께 등과 같은 항목을 참조하며 글꼴에 병합할 수 있습니다. . 색상 값: 색상, #33AAFF와 같은 간결한 속성 값은 #3AF 등으로 단순화될 수 있습니다.

(2) 동일한 정의 병합

웹 페이지에는 항상 유사도가 높은 모듈이 있기 때문에 동일한 부분은 한 번 정의할 수 있고 다른 부분은 별도로 정의할 수 있습니다. 그리고 CSS에서는 많은 속성이 상속될 수 있으므로 적절한 위치에 한 번만 정의하면 됩니다.

(3) 유효하지 않은 정의 삭제

잘못된 정의는 페이지 기능 표시에 영향을 미치지 않지만 페이지 표시 성능에 영향을 미칩니다. 코드 양이 늘어나는 동시에 브라우저가 구문 분석하는 시간도 늘어납니다. 암호. 잘못된 정의에는 일반적으로 개발 과정에서 도입되어 직관적으로 판단할 수 없는 잘못된 규칙과 잘못된 스타일 속성이 포함됩니다. 이 경우 Chrome 자체 도구와 같은 도구를 사용하여 CSS에서 잘못된 스타일을 찾을 수 있습니다. .

기타 CSS 고성능 사례

(1) @import

@import를 사용하지 마세요. 가져온 새 스타일 파일을 사용하면 페이지의 병렬 다운로드가 방지되어 파일의 전체 로딩 시간이 늘어납니다.

(2) IE 브라우저의 고유한 스타일 사용을 피하세요: 이미지 필터 및 CSS 표현식

이미지 필터를 사용하면 이미지가 로드될 때 브라우저의 로드 및 렌더링이 차단되고 추가 메모리 오버헤드가 증가합니다. CSS 표현식의 기능은 CSS 속성을 동적으로 설정하는 것입니다. 표현식에는 호환성 문제뿐만 아니라 성능 문제도 있습니다. 예를 들어 브라우저 크기가 변경되거나 창이 변경되면 브라우저는 계산을 자주 수행하고 많은 성능을 소모합니다. 자바스크립트로도 같은 효과를 얻을 수 있습니다.

css3 모범 사례

브라우저 지원 확인

css3를 사용하는 과정에서 가장 자주 묻는 질문은 다음과 같습니다. 호환성은 어떻습니까? 결코 CSS의 개발로 인해 이전에 직면했던 해결하기 어려운 많은 문제에 대한 더 나은 솔루션을 제공할 수 있으므로 우리가 그렇게 할 수 있는지 궁금하지 않을 수 없습니다. PC 측면에는 많은 비판을 받고 있는 IE 시리즈가 있는데, 모바일 측면에서는 훨씬 나아질 것이지만 일부는 아직 그다지 좋지 않습니다. 따라서 브라우저 지원을 확인하는 것이 거의 필수가 되었습니다. 사용하는 기능이 단지 장식적일 뿐이고 전반적인 상황에 영향을 주지 않는다면 너무 많은 호환성 문제를 고려할 필요는 없으며, 디자인 요구 사항 때문이고 모든 브라우저를 지원해야 하는 경우에는 특별한 주의가 필요합니다. 개발자는 caniuse.com, css3 클릭 차트, CSS 콘텐츠 및 브라우저 호환성과 같은 온라인 도구를 선택하여 호환성을 확인할 수 있습니다.

필요한 브라우저 접두어를 추가하세요

CSS를 이제 막 사용해본 친구들의 경우, 웹사이트의 소스 코드에 "-webkit-, -moz-" 같은 것이 가끔 보인다면 이상하게 느껴질 수도 있습니다. 이건 뭐죠? 이는 다양한 브라우저 제조업체에서 추가한 접두사에 해당합니다.

브라우저가 CSS3를 지원하는 경우 표준 정의의 초기 버전만 구현할 수 있기 때문에 표준 작성 방법은 아직 지원되지 않습니다. 유지 관리가 더 어렵습니다.

그러나 "완벽함"을 위해 모든 브라우저와 호환될 필요는 없습니다. 일반적으로 브라우저의 시장 점유율이나 시스템 버전 및 비율에 따라 접두어 추가 여부와 추가할 접두어 수를 결정할 수 있습니다. 브라우저 종류를 사용하는 대상 사용자. 그리고 시스템과 브라우저의 점진적인 개발과 지속적인 업그레이드 및 업데이트로 인해 접두사를 사용할 필요성이 줄어들 것이라고 믿습니다.

필요한 접두사를 추가해야 한다는 문제가 또 발생하는데, 그래도 추가해야 한다면 꽤 번거롭지 않을까요? 동일한 규칙을 서너 번 작성해야 하며 여러 곳에서 사용할 수 있습니다. 걱정하지 마십시오. 다음은 몇 가지 대책입니다.

1. 도구를 사용하여 CSS 속성에 브라우저 접두사를 추가하세요

Prefixr는 개발 후반 단계에서 코드를 처리할 수 있습니다. 필수 접두어를 자동으로 추가하고 불필요한 접두어를 삭제합니다.

Autoprefixer, 개발 프로세스에서 더 많은 자율성을 원한다면 이 도구를 사용할 수 있습니다. 개발자는 브라우저 지원 범위를 맞춤 설정할 수 있으며 다양한 사용 방법이 있으며 여러 개발 환경에 통합될 수 있습니다. cssFx, *css Agent* 및 -prefix-free와 같은 여러 가지 도구도 사용할 수 있습니다.

2. CSS 전처리 기술의 도움으로

현재 널리 사용되는 방법으로는 CSS3 스타일 특성을 기반으로 템플릿 스타일을 정의하는 것입니다. 장점은 많은 코드 중복을 피하고 하나의 정의만 유지하면 된다는 것입니다.

3. 브라우저 접두사를 과도하게 추가하지 마세요

모든 브라우저와 호환되기 위해 일부 개발자는 무슨 일이 있어도 CSS 코드에 모든 브라우저의 접두사를 추가합니다. 브라우저 수가 너무 많으면 브라우저의 구문 분석 성능이 저하되고 동시에 일부 접두어 속성이 브라우저에서 지원되지 않을 수 있습니다.

4. CSS3 표준 속성 정의 추가

표준 속성 정의란 무엇인가요? 브라우저 접두사가 필요하지 않습니다. CSS3를 사용하는 많은 곳에서 마지막에 표준 속성 정의를 작성한다는 것을 알 수 있습니다. 브라우저가 표준 속성을 지원하면 이전에 추가된 접두어로 정의를 덮어쓸 수 있기 때문입니다. CSS3의 표준 속성 정의는 브라우저가 추가됨에 따라 점차적으로 제거됩니다. 업데이트되었습니다.

물론, 또 한 가지 주목해야 할 점은 일부 속성이 현재 Only webkit 또는 Only firefox에 속하므로 표준 정의 및 기타 브라우저 접두어를 작성할 필요가 없다는 것입니다.

CSS3의 새로운 기능에 대한 호환성 처리를 잘 수행하세요

호환성에 관해 말하면 매우 일반적인 둥근 모서리, 투명한 이미지 등과 같은 낮은 버전의 IE를 언급할 것입니다. 때때로 우리는 그들을 다운그레이드할 것입니다. 필터 또는 자바스크립트, 상자 크기 조정, 변환을 사용하는 경우 Modernizr을 사용하는 것이 좋습니다. 이 프레임워크에는 많은 새로운 CSS3 기능에 대한 호환성 솔루션이 포함되어 있습니다.

어떤 솔루션을 사용하든 성능 저하가 발생하며 규칙 없이 남용될 수 없습니다. HTML5를 보다 효율적으로 사용하는 방법에 대한 제안이 포함된 웹사이트를 추천해 주세요: html5제발. 웹 사이트는 CSS3의 새로운 기능을 사용 방법에 따라 세 가지 범주로 나눕니다.

(1) 직접 사용

에는 대부분의 새로운 기능이 포함되어 있으며 border-radius와 같은 일부 기능 자체는 호환성에 영향을 미치지 않습니다. 미디어 쿼리 등 여러 배경 이미지와 같은 저하 처리를 추가해야 하는 경우에는 단일 배경 이미지나 배경 색상을 대안으로 설정해야 합니다.

(2) 주의해서 사용하세요

이 부분은 주로 성능 문제입니다. 예를 들어 넓은 영역을 차지하는 요소에 박스 섀도우를 적용하면 페이지를 스크롤하거나 마우스를 사용할 때 상당한 성능 문제가 발생합니다. 맴돌고 있습니다.

(3) 사용을 피하세요

이 부분은 리플렉션 등 특정 브라우저만 지원할 수 있으므로 사용을 피하셔야 합니다.

결론적으로 CSS를 사용하여 성능을 향상시킬 수 있는 방법은 꽤 있지만 그 영향이 그다지 명확하지 않은 것 같고 많은 사람들이 편의를 위해 임의로 사용할 수 있으므로 쉽게 무시할 수 있습니다. 자신의 재능이 있다면, 효과를 얻을 수만 있다면 무엇이든 쓸 수 있습니다. 이것은 또한 훌륭한 엔지니어가 되겠다는 목표를 잊어버린 적이 있습니까? ! ~~CSS 규칙이 어렵지는 않지만 잘 작성하는 것은 쉽지 않습니다. 그래도 완벽을 추구하는 정신이 필요합니다. 꼭 써보시고 소중히 여겨주세요! ~

유지보수가 많은 CSS

CSS의 특징은 무엇인가요?

간단히 말하면 사용 방법은 인라인, 임베디드, 외부, 가져오기입니다. 요소 스타일 지정 방법: 요소 태그 이름, 클래스 이름, ID, 다양한 선택기 및 이들의 조합. 따라서 매우 유연합니다. 표준 제한이 없으면 CSS 코드를 유지 관리하는 데 혼란과 어려움이 발생할 것입니다.

CSS 코드를 효율적으로 구성하는 방법은 무엇입니까?

명확한 구조와 고유한 모듈. 합리적인 코드 구성 구조는 코드 재사용성과 유지 관리성을 향상시키고 개발 복잡성을 줄일 수 있습니다. 그럼 어떻게 정리할까요?

첫 번째는 코드 파일을 정리하는 것인데, 이는 크게 일반 카테고리와 비즈니스 카테고리 두 가지로 나눌 수 있습니다. 그런 다음 재설정할 파일이 있습니다. 일반 이름은 재설정, 기본값, 표준화 등입니다.

여러 페이지에서 사용되는 페이지 대화 상자, 프롬프트 상자, 헤더, 하단, 사이드바 등과 같은 공통 모듈과 mod, common 등의 이름을 가진 몇 가지 기본 스타일을 저장하는 데 사용되는 파일이 있습니다. , 이와 같이 각 페이지는 코드 재사용을 개선하기 위해 참조됩니다.

또한 IE 이전 버전과 호환되는 스타일을 저장하려면 파일이 필요합니다. 이는 두 가지 이점이 있습니다.

첫째, IE가 아닌 브라우저에서 스타일 파일을 로드하는 부담을 줄여줍니다

두 번째, 향후 이전 버전의 IE는 지원하지 않기로 결정했습니다. 파일 서버를 사용하는 경우 파일 하나만 수정하면 되며 수정할 여러 파일을 검색할 필요가 없습니다. 물론, 브라우저 호환성 문제를 처리할 때 한 가지 원칙은 호환성 문제가 없는 다른 솔루션이 있는지 여부입니다. 그렇지 않은 경우 호환되어야 하는 부분을 별도의 파일에 넣으세요.

나머지 CSS 스타일 파일은 비즈니스 모듈에 사용됩니다. 서로 다른 모듈의 스타일 파일은 원칙적으로 각 모듈의 스타일 파일이 너무 커서는 안 됩니다.

이로 인해 페이지에서 많은 양의 파일을 가져와야 하는 것은 아닌가요? 페이지가 로드될 때 http 요청이 훨씬 더 많지 않나요? 사실 모순은 없습니다. 파일을 나누는 것은 단지 개발과 유지 관리를 용이하게 하기 위한 것입니다. 게시할 때 여러 파일을 압축하여 하나의 파일로 병합하는 도구를 사용하므로 여러 파일을 도입하는 것에 대해 걱정할 필요가 없습니다.

위는 파일 구성에 관한 것이므로 스타일 설명도 파일의 특정 규칙에 따라 구성해야 합니다. 예를 들어, 모듈의 요소 수준에 따라 동일한 수준에 있는 경우 페이지의 요소 위치에 따라 위에서 아래로, 요소가 여러 개인 경우 왼쪽에서 오른쪽으로 표시됩니다. 동일한 선언을 공유하는 경우 공통 스타일을 먼저 선언해야 합니다. 이것이 충분하지 않다고 생각되면 변수, 상속, 연산, 함수 등과 같은 CSS 동적 언어 기능을 제공하는 less 및 sass와 같은 고급 방법을 사용할 수 있습니다.

위 내용은 몇 가지 일반적인 방향에서 논의되었습니다. 아래에서는 몇 가지 사항에 대해 이야기해 보겠습니다.

CSS 재설정을 사용하여 브라우저 표시 효과를 통합하세요

우선 html 태그는 원래 스타일을 가지고 있지만 다른 브라우저에서는 문제가 있습니다. , 태그의 기본 스타일이 다릅니다. 이러한 차이점 중 일부는 개발에 문제를 일으켰습니다. 2004년 초에 누군가 undohtml.Css라는 첫 번째 재설정 스타일 파일을 개발했으며 이후 다양한 재설정 계획이 있는데 그 중 하나가 "hot"입니다. 한동안"입니다. 이 계획에는 총 한 줄의 코드 *{margin: 0; padding: 0;}가 있습니다. 모든 라벨의 기본 여백 및 패딩 스타일이 재설정되었지만, 한 가지 단점은 후속 개발의 복잡성을 증가시키고 전체 개발 효율성을 효과적으로 향상시킬 수 없다는 것입니다. 또한 이 솔루션의 성능도 좋지 않아 페이지 요소가 많을 때 페이지 렌더링 성능에 영향을 미칩니다. 따라서 사람들은 점차적으로 더 나은 재설정 방법을 모색하고 있습니다. 현재 Eric Meyer가 개발한 Reset CSS와 Yahoo의 프런트 엔드 기술 팀이 개발한 YUI Reset CSS를 포함하여 많은 인기 있는 재설정 솔루션이 있습니다. 사실 모든 프로젝트에 적합한 하나의 솔루션은 없기 때문에 다른 사람의 솔루션을 참고한 후 자신의 프로젝트에 적합한 솔루션을 설계하는 것이 가장 좋습니다.

다음 사항을 고려해야 합니다.

(1) HTML5 새 태그의 기본 표시 스타일은 하위 버전의 IE에서 정의되지 않기 때문에 표시 스타일을 재설정해야 합니다.

(2) 브라우저에서 패딩, 여백, 테두리 태그의 차이점은 주로 이 세 가지 스타일과 관련된 기본 스타일로 인해 발생하지만 모든 요소의 여백, 여백, 테두리를 재설정할 필요는 없습니다. 실제 상황에 따라 재설정되어야 합니다.

(3) 글꼴 설정