>  기사  >  웹 프론트엔드  >  CSS 표현 성능을 최적화하는 방법

CSS 표현 성능을 최적화하는 방법

藏色散人
藏色散人원래의
2021-02-07 10:34:241762검색

CSS 표현식의 성능을 최적화하는 방법: 1. 일치하는 요소에서 CSS 표현식을 한 번만 실행합니다. 2. CSS 표현식 문 본문에서 표현식을 트리거하는 CSS 속성을 재설정합니다.

CSS 표현 성능을 최적화하는 방법

이 문서의 운영 환경: Windows7 시스템, HTML5&&CSS3, Dell G3 컴퓨터.

CSS 표현 성능을 최적화하는 방법은 무엇입니까?

IE 브라우저의 CSS 표현식 기능의 가장 큰 문제는 초당 수백, 수천 번씩 반복적으로 실행되어 심각한 성능 문제를 일으킨다는 것입니다. CSS 표현을 최적화하는 방법은 무엇입니까?

적어도 일치하는 요소에서 CSS 표현식을 한 번만 실행하면 성능이 크게 향상됩니다.

old9는 "CSS 표현식 다시 로드됨" 기사에서 솔루션을 제공합니다.

CSS 표현식 문 본문에서 표현식의 CSS 속성이 트리거되어 재설정됩니다.

권장: "

css 비디오 튜토리얼

"예:

div {
    zoom: expression(function(el){el.style.zoom = "1"; alert(el.tagName);}(this));
}

몇 가지 추가 사항:

CSS 표현식은 일치하는 모든 요소에서 실행됩니다.

CSS 표현식에서 "this" 키워드는 현재 일치하는 HTML 요소를 가리킵니다.

CSS 속성은 일반적이지 않은 속성을 사용하여 트리거하고, 트리거한 후 기본값으로 다시 재설정합니다.

비슷한 해결책이 있습니다:

div {
    -singlex: expression(this.singlex ? 0 : (function(t) { 
    alert(t.tagName); t.singlex = 0; 
    } )(this));
}

그러나 이 코드는 CSS 표현식의 가장 큰 성능 문제를 완전히 해결하지는 않습니다. 마우스 가운데 휠을 스크롤할 때와 같이 표현식 스크립트가 트리거될 때마다 실행되어야 하기 때문입니다.

마지막으로 CSS 표현식은 최적화되었을 뿐이라는 점을 강조하지만 CSS 표현식에 다른 문제가 없다는 의미는 아닙니다.

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.