High Resolution Time API Development

보통 어떤 코드 블럭에 대한 실행시간을 측정할때 많이 사용하는 방법이 Date 객체를 이용해 시간을 계산하는 형태를 많이 사용하시죠?

var nStartTime = Date.now();
// 측정할 코드...

var nTest1 = Date.now();
// 또 다른 측정 코드...

var nTest2 = Date.now();

// 결과 출력
console.log("Test1 시간 : ", nTest1 - nStartTime);
console.log("Test2 시간 : ", nTest2 - nTest1);


하지만, 이러한 방식은 약간 문제가 있습니다. 먼저 Date.now()로 반환되는 시간값은 사용자의 시스템 시간을 기반으로 반환하게 되고, 브라우저에 따라 시간의 정밀도가 각각 다른 문제점도 존재하며, 값은 1970/1/1 자정을 기준으로 반환됩니다.

>>> Date.now()
1355996900764

그리고 시간 값은 밀리세컨드 단위이기 때문에 좀더 정밀한 측정을 위한 하위 단위의 시간 값을 제공받을 수 없기도 합니다.

이런 문제를 해결하기 위해 W3C에서 발표한 스펙중에 "High Resolution Time API"라는게 있는데요,
이 API는 시스템 시간을 기반으로 하지 않기 때문에, Date.now()가 사용자가 임의로 시스템의 시간값을 조절하거나 변형하는 것에
영향을 받는데 반해 performance.now()는 영향을 받지 않습니다.

--> High Resolution Time API : http://www.w3.org/TR/hr-time/

사용하는 방법은 간단합니다. performance 객체의 now() 메서드를 호출하면 현 시점의 값을 반환받게 됩니다.
Date.now()와 다른 점은 performance.timing.navigationStart()를 기준으로 값을 반환하기 때문에, 해당 페이지의 네비게이션이 시작된 시점으로 부터 값이 증가하게 됩니다. 

또한 반환 값은 밀리세컨드의 하위 단위인 마이크로 세컨드까지 포함하기 때문에 정밀한 측정이 필요한 경우에 도움이 될수 있습니다.

>>> performance.now()
2171.3486580069066

사용방법은 기존 Date.now()로 값을 얻는 부분을 performance.now()로 변경해 주면 동일하게 사용할 수 있습니다.

var nStartTime = performance.now();
// 측정할 코드...

var nTest1 = performance.now();
// 또 다른 측정 코드...

var nTest2 = performance.now();

// 결과 출력
console.log("Test1 시간 : ", nTest1 - nStartTime);
console.log("Test2 시간 : ", nTest2 - nTest1);


현재 지원하는 브라우저는 Firefox와 Chrome에서 사용 가능합니다.

- Firefox는 prefix 불필요 : performance.now()
- Chrome의 경우에는 webkit prefix 필요 : performance.webkitNow()

W3C의 Web Performance Working Group은 12/17일 Navigation Timing과 오늘 살펴본 High Resolution Time 스펙에 대해 Recommendation으로 발표해 표준화 작업에 대한 문서작업이 완료된 상태입니다.

--> High Resolution Time, and Navigation Timing are W3C Recommendations :

CSS 3 Conditional Statements Development

미디어 쿼리(@media)에 대해서는 많이 들어보셨을 텐데요, 미디어 쿼리에 대한 스펙 'CSS 3 Conditional Statements'에서는 @media외에도 @supports와 @document 지시자를 사용한 새로운 기능에 대해서도 정의를 하고 있습니다.

이미 알고 계신분도 계시겠지만, 각각에 대해 간략하게 어떤 것들인지 살펴보도록 하겠습니다.

@supports

@supports는 특정 css 속성을 브라우저가 지원하는지 또는 하지 않는지에 따라 특정 스타일이 적용 되도록 할수 있습니다.

@supports (box-shadow: 0 0 10px rgba(0,0,0,0.1)) {  -- CSS code -- }
--> box-shadow 속성을 지원하는 경우 적용

@supports not (animation-duration: 1s) {   -- CSS code --  }
--> animation-duration 속성이 지원되지 않는 경우 적용 and, or 연산자를 사용한 조건식을 사용할 수도 있습니다.

@supports ((border-radius:4px) and (transition-duration: 1s)) or (transform-origin: 5% 5%) {
-- CSS code --
}

@supports를 활용하면 특정 속성이 지원되는 브라우저의 경우, 별도의 css 파일을 로딩하도록 처리할 수 있습니다.

@supports (box-shadow: 0 0 10px rgba(0,0,0,0.1)) {
    @i-port url('box-shadow.css');
}

- 지원 브라우저 : FF 17.0+
- Spec : http://dev.w3.org/csswg/css3-conditional/#at-supports
- 참고 : https://developer.mozilla.org/en-US/docs/CSS/@supports


@document

조건식에 부합되는 주소를 갖는 페이지에만 스타일이 적용되도록 할수 있습니다.

@document url("http://www.naver.com/") {   -- CSS code --  }
--> www.naver.com 인덱스 페이지에만 적용

@document url-prefix("http://www.naver.com/css") {   -- CSS code --  }
--> www.naver.com/css로 시작되는 모든 페이지에 적용

@document domain("naver.com") {   -- CSS code --  }
--> naver.com 도메인에 속하는 모든 페이지에 적용

@document regexp("https:.*") {   -- CSS code --  }
--> 정규식을 사용해 https:로 시작되는 모든 주소 페이지에 적용

- 지원 브라우저 : FF 6.0+
- Spec : http://dev.w3.org/csswg/css3-conditional/#at-document
- 참고 : https://developer.mozilla.org/en-US/docs/CSS/@document

1 2 3 4 5 6 7 8 9 10 다음