from : High Performance Web Sites
웹개발을 하다 보면 종종 CSS expression 을 쓰는 경우가 생긴다. 이를테면
P {
width : expression ( setCntr(), document.body.clientWidth<600 ? "600px" : "auto" );
min-width: 600px;
border: 1px solid;
}
와 같은 CSS expression 이 있다고 하자.
High Performance Web Sites 의 저자인 Steve Souders 의 사이트 http://stevesouders.com/hpws/expression-counter.php 를 실행해 보면 알겠지만 마우스를 이동하거나 조금 움직이기만 해도 css expression 이 10번씩 실행되는 것을 알 수 있다. 웹페이지에는 Avoid using CSS expressions 라는 내용의 <P> element가 10개가 있고, 페이지 로딩을 하면 CSS exression 은 40번 실행된다.
심지어 "Don't click here!" 부분의 텍스트 필드를 호기심 삼아 눌러주면 브라우저가 먹통이 되어버려 브라우저를 죽이고 새로 띄워야 한다.
이 문제를 피하기 위해서는 두가지 방법이 존재하는데
1. CSS Expression 이 한번만 동작되도록 하는 방법과
2. CSS Expression 대신에 이벤트 핸들링을 이용하는 방법
이 있다.
첫번째 방법은 다음과 같은 식으로 이용할 수 있다.
<style>
P {
background-color: expression( altBgcolor(this) );
}
</style>
<script>
function altBgcolor(elem) {
elem.style.backgroundColor = (new Date()).getHours()%2 ? "#F08A00" : "#B8D4FF";
}
</script>
두번째 이벤트 핸들링을 이용하는 방법은 CSS expression 이 브라우저의 이벤트와 자동으로 연결된다는 장점이자 단점을 해결하기 위한 방법으로, 관련없는 이벤트에도 CSS expression 이 실행되는 것을 막을 수 있다.
function setMinWidth(){
setCntr();
var aElements = document.getelementsByTagName("p");
for ( var i = 0; i < aElements.length; i++ ) {
aElements[i].runtimeStyle.width= ( document.body.clientWidth<600 ? "600px" : "auto" );
}
}
if ( -1 != navigator.userAgent.indexOf("MSIE") ) {
window.onresize = setMinWidth;
}
Chapter 7의 결론 : CSS Expression 과 그 영향을 명확하게 이해하지 못한 채 CSS Expression 을 사용하는 것은 매우 위험한 일이다.
