CSS3 전환으로 인해 웹 사이트가 느려 집니까?

현재 내 웹 사이트에 CSS3 전환을 추가했습니다. 가능한 경우 shure가 아니므로 내 웹 사이트의 속도가 느려지지만 모든 것이 깜박이고 화면 전환 및 플래시 비디오에 "갑작스러운 동작"이 있습니다.CSS3 전환으로 인해 웹 사이트가 느려 집니까?

Mozilla Firefox 10.0.02를 사용하고 있습니다. 오히려 내 브라우저가있는 느린 경우

*:link, *:visited, *:hover, *:active, *:focus { 
    -webkit-transition: color .25s linear, background-color .25s linear, border-color .25s linear; 
    -o-transition: color .25s linear, background-color .25s linear, border-color .25s linear; 
    -moz-transition: color .25s linear, background-color .25s linear, border-color .25s linear; 
    transition: color .25s linear, background-color .25s linear, border-color .25s linear; 
}

당신이 말해 줄 수 또는이 CSS 내가이 추가되는 경우 경우, 그 증거가 무엇 :

나는 나의 CSS 스타일 시트에 다음을 추가?

감사합니다.

출처

2012-03-01 James Cazzetta

글쎄, 항상 브라우저가 느리지 만 CSS 규칙이 원인 일 수 있습니다. 규칙이 제거되는지 확인하기 위해 규칙을 제거하려고 시도 했습니까? 그것은 논리적 인 첫 번째 단계 일 것입니다 –

어떤 브라우저/UA가 성능 저하를 가져오고 있습니까? 안드로이드는 1.x와 2.x의 가난한 CSS3 전환으로 알려져 있습니다. –

@pekka 전환 없이는 더 빠를 것 같습니다. –

이러한 상태의 모든 항목에 전환을 추가했기 때문입니다.

나는 변화 것 :

*:link, *:visited, *:hover, *:active, *:focus {

a:link, a:visited, a:hover, a:active, a:focus, [...Other elements...] {

에 따라서보다 타겟팅 된입니다. 그렇지 않으면 마우스를 움직이면 호버 (hover) 상태가 트리거되어 브라우저가 전환을 확인해야합니다.

출처

2012-03-01 12:20:11

구체적인 개선 제안을 위해 +1 –

나는 성능 문제를 일으키는'*'선택자가 아니라는 점을 지적해야한다. (** 선택자에서 최적화되어야한다. 어쨌든) 병목 현상은 지나치게 많은 요소로의 전환을 적용하고 결과적으로 너무 많은 것을 움직이려고 시도 할 때 정면으로 떨어집니다. 범용 선택기로 모든 종류의 기본적인 작업을 수행 할 수 있으며 브라우저는 정상적으로 작동하지만 전환은 비용이 많이 듭니다. – BoltClock

그것은 표적으로 한 후에 잘 작동한다, 고마워! –

어떤 종류의 애니메이션이라도 그래픽 시스템에 부하가 가중되지만, Flash와 같은 CSS 전환과 플러그인을 결합하면 레이어를 결합해야하기 때문에로드가 악화됩니다. 플래시 모드가 투명하게 설정되어 있습니까? 그렇다면 불투명하게 사용하십시오. 플래시 애니메이션이 아래에서 일어나는 일을 돌볼 수 없으므로 (기술적으로 말하면 비디오 드라이버에서 오버레이가됩니다).

출처

2012-03-01 12:21:27 SpliFF

CSS3 전환으로 인해 웹 사이트가 느려 집니까?

답변

관련 문제