CSS 성능 프로파일 러?

CSS 성능 프로파일 러?

---

나는 현재 사이트에서 작업하고 있으며 스타일 시트의 어딘가에서 IE의 성능을 저하시키는 것이 있습니다. 좋은 CSS 프로파일 러가 있습니까? 성능을 저하시키는 규칙을 정확히 찾아 낼 수있는 도구를 원합니다.

질문하기 전에 JavaScript, 불투명도 및 box-shadow / text-shadow 규칙을 비활성화했습니다. 페이지는 여전히 불안정합니다. : / 모든 CSS를 비활성화하면 훌륭하게 실행됩니다.

페이지를 프로파일 링하고 CSS 병목 지점을보고 할 수있는 도구가 필요합니다.

---

그래서 마침내 페이지의 모든 CSS 클래스를 인덱싱 한 다음 페이지를 스크롤하면서 개별적으로 토글하는 JavaScript 함수를 작성했습니다. 이것은 즉시 잘못된 클래스를 찾아 냈고 거기서부터 잘못된 재산을 확인할 수있었습니다. 밝혀 border-radius많은 아이들 (예 : 신체 수준이 포함 된 요소 div) 수행을 매우 IE9에 제대로.

CSS 스트레스 테스트를 위해 github 저장소를 시작했습니다 : https://github.com/andyedinborough/stress-css

여기에서 북마크릿을 설치하여 모든 페이지에서 쉽게 테스트를 실행할 수 있습니다.

---

Google 의 Page Speed 플러그인에는 CSS를 분석하고 비효율적 인 선택자에 대해 알려주는 섹션이 있습니다. 여기서 시작 하시겠습니까?

hth

참고 : Firefox 플러그인을 알고 있지만 약간의 최적화에 도움이됩니다. :)

---

흠, 그런 도구는 들어 본 적이 없습니다.

아무것도 찾지 못하면 수동으로 찾아야 할 사항에는 다음이 포함됩니다.

• 모든 filter진술 (클래식 alpha=opacity및 기타-IE에는 매우 비싼 여러 가지 고급 그래픽 필터가 있음)

• 거대한 요소 (예 : 수천 픽셀 크기)

• 거대한 배경 이미지-잠시 동안 모두 제거 하시겠습니까?

나는 첫 번째 요점을 강하게 의심 할 것이다. 알파 투명도는 특히 오래된 시스템에서 끔찍한 렌더링 병목 현상이 될 수 있습니다.

---

또한 현재 작업중인 웹 프로젝트에서 성능 문제가 있습니다. Firefox, Chrome, IE8에서도 잘 실행됩니다. IE9에서는 수렁입니다.

몇 가지 탐정 작업을 마친 후 모든 box-shadow CSS 라인을 제거하면 성능이 상당히 향상된다는 것을 발견했습니다. 나는 배너, 테이블, 상자 및 탭의 그림자를 가지고 있었는데, 각각은 미묘한 양의 그림자와 블러가 있었지만 IE9가 모든 것을 변덕스럽게 만들기에 충분했습니다.

---

이러한 종류의 작업을 수행하기 위해 CSS 선택기 프로파일 러를 포함하는 데 사용되는 Chrome 개발 도구입니다. 이 블로그 게시물에서 스크린 샷을 볼 수 있습니다 .

Chrome 팀 은 Chrome 30에서 다음과 같은 기능을 가져 왔습니다 .

CSS 선택기 일치는 이제 프로파일 러 구현시 느 렸던 대부분의 일반 선택기에 대해 상당히 빠릅니다. 이 시간은 타임 라인 "Recalculate Style"이벤트에도 포함됩니다.

따라서 CSS 선택자 프로파일 러가 사용 된 것만 큼 유용하지 않으며 안전하게 삭제할 수 있다고 생각합니다. 이것은 또한 이미 빠른 선택기를 마이크로 최적화하려는 개발자의 비율을 줄입니다.

이전 버전의 Chrome을 사용하여 문제를 조사 할 수 있지만 Chrome 개발 도구의 현재 버전의 타임 라인 탭 을 살펴보면 Chrome이 스타일을 계산하는 데 걸린 시간이 표시됩니다. 선택기 성능에 영향을 미침), 페이지 레이아웃 및 페인트.

---

Opera는 프로파일 러에서 CSS 프로파일 링을 실험하고 있습니다.

이 페이지의 단계에 따라 활성화 할 수 있습니다 . 그런 다음 프로파일 러를 열고 프로파일 링을 시작하고 분석하려는 페이지를 새로 고칩니다. 렌더링이 완료된 후 프로파일 링을 중지하면 결과가 표시됩니다.

참조 URL : https://stackoverflow.com/questions/5173122/css-performance-profiler