여백 - 왼쪽 : 2px; 여백보다 빨리 렌더링 : 0 0 0 2px;

Question

Douglas Crockford는 JavaScript가 노드의 스타일을 묻는 결과를 설명합니다. 단순히 div의 여백을 묻는 것은 브라우저가 브라우저의 렌더링 엔진에서 div를 네 번 '리플 로우'하도록합니다.

페이지의 초기 렌더링 (또는 Crockford의 전문 용어 인 "웹 스크롤") 중에 비제로/기본값이 아닌 값만 정의하는 CSS를 작성하는 것이 더 빠릅니까? 예를 제공하기 위해 :

div{ 
    margin-left:2px; 
} 

div{ 
    margin:0 0 0 2px; 
} 

보다 나는이 '저축'의 결과를 아는 것은 중요하지,하지만 난 그게 기술이 구현하는 방법을 이해하는 것이 여전히 중요하다고 생각합니다. 또한 CSS 서식 지정에 대한 질문이 아닙니다. CSS를 렌더링하는 브라우저의 구현에 대한 질문입니다.

참조 : http://developer.yahoo.com/yui/theater/video.php?v=crockonjs-4

Answer 1

아니요, 브라우저에 따라 스타일을 적용하기 전에 값을 여러 가지 방법으로 압축을 해제합니다 , 파이어 폭스에서는 실행 속도에 약간의 영향을 미친다. 그래도 속기 CSS를 사용하는 것이 좋습니다.

{margin: 0 0 0 2px;} 

페이지에 스타일을 적용하기 전에

{margin-top: 0pt;margin-right: 0pt;margin-bottom: 0pt;margin-left: .04pt;} 

로 : 당신이 어떻게 작동하는지 파이어 폭스를 이해하려면

, 값 압축을 풉니 다. 이것은 정규화를위한 것입니다.

* (04pt는 추정치)

Answer 2

나는 그것을 빨리 "렌더링"확실하지 않다. 하지만 두 번째 버전은 첫 번째 버전보다 몇 바이트 더 큽니다. (그리고 네트워크가 페이지 렌더링 시간보다 느리므로 첫 번째 버전을 실제로 더 빨리 렌더링한다고 가정 할 것입니다.)