Html5-boilerplate: 더 빠른 렌더링을 위해 .visuallyhidden에 `white-space: nowrap` 추가

에 만든 2016년 07월 06일 · 5코멘트 · 출처: h5bp/html5-boilerplate

전에:

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

후에:

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: no-wrap;
    width: 1px;
}

코드펜: https://codepen.io/tomasz86/pen/pbwQqV
코드펜(디버그): https://s.codepen.io/tomasz86/debug/pbwQqV

white-space: no-wrap 추가하면 렌더링 속도가 크게 향상됩니다.

IE11, 최신 버전의 Firefox 및 Chrome, 그리고 이전 Opera 12(적절한 CSS 프로파일러가 있는 유일한 브라우저)에서 코드를 테스트했습니다. 코드는 모두 더 빠르게 실행됩니다. IE11과 Firefox 모두 눈에 띄는 차이가 있습니다. Opera 12는 둘 사이에 400ms의 차이를 보여줍니다. 내 Windows 7 PC에서 white-space 없는 버전을 렌더링하려고 하면 Chrome이 실제로 중단되지만 다른 버전은 매우 빠르게 렌더링됩니다.

help wanted

출처

tomasz1986

❤2

모든 5 댓글

이것은 시각적으로 숨겨진 클래스에 대한 매우 흥미로운 모습입니다. 감사합니다, Tomasz.

나는 또한 더 이상 사용되지 않는 클립 rect의 James Curd의 펜을 보았습니다.
클립 경로로 대체 가능: inset(0 1px 1px 0)
https://codepen.io/aminimalanimal/pen/wMedpo

내 테스트 결과(Chrome에서만 테스트됨)

시험

표현

총:

클립 사각형이 있는 기준선

3912ms

2521m AVG 3027

2649ms

4.85초

3.33초 평균 3.87

3.44초

공백 추가

2590ms

2207ms AVG 2450

2554ms

3.79초

2.98초 평균 3.35

3.29초

공백 추가, 클립 사각형 제거

2820ms

2424ms AVG 2520

2317ms

4.32초

3.65초 평균 3.83

3.53

공백 추가, 클립 사각형 제거, 클립 경로 추가

*공급업체 접두사가 필요합니다!

2820ms

1845ms _AVG 2241_

2057ms

4.32초

3.20초 _AVG 3.63_

3.37초

요약: 개별 테스트 내에서 상당히 넓은 범위가 있었습니다. NS
네 번째 테스트는 Chrome에서 가장 좋은 것 같았지만 "실제" 프로덕션을 위한 비용 절감
숨겨진 요소가 몇 개뿐인 페이지에는 비용이 들지 않을 수 있습니다.
CSS 클래스를 변경합니다.

*(클립 경로에 공급업체 접두사가 필요하다는 것을 발견했습니다!)

--스콧 데이비스--

2016년 7월 6일 수요일 오전 4시 20분에 Tomasz W. [email protected]이 다음과 같이 썼습니다.

전에:
.visuallyhidden {
테두리: 0;
클립: rect(0 0 0 0);
높이: 1px;
여백: -1px;
오버플로: 숨김;
패딩: 0;
위치: 절대;
너비: 1px;
}
후에:
.visuallyhidden {
테두리: 0;
클립: rect(0 0 0 0);
높이: 1px;
여백: -1px;
오버플로: 숨김;
패딩: 0;
위치: 절대;
공백: 줄 바꿈 없음;
너비: 1px;
}
코드펜: https://codepen.io/tomasz86/pen/pbwQqV
코드펜(디버그): https://s.codepen.io/tomasz86/debug/pbwQqV
공백 추가: no-wrap은 렌더링에 큰 긍정적인 차이를 만듭니다.
속도.
Firefox 및 Chrome의 최신 버전인 IE11에서 코드를 테스트했으며,
또한 이전 Opera 12(적절한 CSS 프로파일러가 있는 유일한 브라우저)도 있습니다.
코드는 모두 더 빠르게 실행됩니다. 둘 다 눈에 띄는 차이가 있습니다
IE11 및 Firefox에서. Opera 12는 둘 사이에 400ms의 차이를 보여줍니다.
없는 버전을 렌더링하려고 할 때 Chrome이 실제로 멈춥니다.
내 Windows 7 PC의 공백이지만 다른 하나는 매우 빠르게 렌더링됩니다.
—
이 스레드에 가입했기 때문에 이 메시지를 받고 있습니다.
이 이메일에 직접 답장하고 GitHub에서 확인
https://github.com/h5bp/html5-boilerplate/issues/1874 또는 음소거
실
https://github.com/notifications/unsubscribe/ACKY8sYNxXJ6f9HLoTgQIKGkVDcHcnzDks5qS3NOgaJpZM4JF5XK
.

avprod1 에 2016년 07월 06일

👍1

추가 테스트를 진행해주셔서 감사합니다 :)

clip 의 뛰어난 브라우저 호환성(IE 4까지!) 때문에 clip-path 를 전혀 고려하지 않았습니다. 더 이상 사용되지 않을 수 있지만 일반적이지 않은 모든 브라우저에서 완벽하게 작동합니다.

요점으로 돌아가서 - Opera 12의 로컬 테스트에서 차이는 항상 약 400ms입니다. 이런 식으로 400개의 의사 요소를 추가하여 보다 실제적인 예제를 테스트할 때 우연히 이것을 발견했습니다. 의사 요소 자체의 렌더링은 일반적으로 느리기 때문에 이에 대해 무엇을 할 수 있는지 궁금했는데 white-space: nowrap 를 추가하기 white-space 경우 320ms)로 렌더링될 때 쉽게 눈에 띕니다.

그 차이는 몇 가지 요소만 존재할 때 대부분의 경우 중요하지 않을 수 있지만 수백 개의 요소가 있으면 나와 같은 사람들에게 도움이 될 것입니다. 또한 white-space: nowrap 를 추가하는 데 따른 단점이나 위험이 있다고 생각하지 않습니다. 추가 비용 없이 이러한 방식으로 성능을 개선할 수 있다면 그렇게 하지 않는 이유는 무엇입니까?

다른 브라우저와 운영 체제 모두에서 더 많은 테스트가 수행되어야 한다고 생각합니다.

tomasz1986 에 2016년 07월 07일

👍1

저는 이 변화를 지지합니다. PR을 하고 싶으세요?