스터디 목표
- Toggle 버튼은 자주 사용하므로 막힘없이 코딩 가능하도록 숙달시키기
- 웹 브라우저 성능 향상을 시킬 수 있는 좀더 Nice한 코딩하기
- DOM Tree - CSSOM Tree - Render Tree - Flow - Paint 관점에서 살펴보기
00_ 공통 부분
1) normal, hover, selected 상태시의 resource(이미지) 준비
2) normal 상태는 기본적으로 html 작업
01_ html 을 활용한 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="jquery.js"></script>
<title>Document</title>
<style>
div{
display: inline-block;
margin-bottom: 100px;
}
/* html version */
.html_version{
position: relative;
}
.html_version .like:nth-child(2){
display: none;
position: absolute;
left: 0;
top: 0;
}
.html_version:hover .like:last-child,
.html_version .like.selected{
display: block;
}
</style>
</head>
<body>
<!-- html 활용 -->
<div class="html_version">
<button type="button" class="like"><img src="image/icn-videoinfo-like-n.png" alt=""></button>
<button type="button" class="like"><img src="image/icn-videoinfo-like-m-n.png" alt=""></button>
</div>
</body>
<script>
// html 활용
$(document).ready(function(){
$('.html_version').on('click', function(){
var like = $(this).children('.like:last-child');
like.toggleClass('selected');
if(like.hasClass('selected')){
alert("좋아요!");
}else{
alert("좋아요 취소");
}
})
});
</script>
</html>1) 코드 설명
- 2개의 이미지를 미리 html 태그로 작성한다.
- 같은 위치가 되도록 포개어 놓는다.
- 이벤트에 따라 위에 놓여있는 요소의 출력여부를 결정한다.
2) DOM Tree 관점
- Element 가 4개 필요하다.
3) Render Tree 관점
- 위에 놓여있는 요소는 보이지 않도록 한다.
4) Flow 관점
- Render Tree 를 기반으로 위에 놓여있는 요소(display: none)는 패스한다.
- 아래에 놓여있는 요소 위치, 크기를 계산한다.
5) Paint 관점
- 아래에 놓여있는 요소 이미지를 그려낸다.
02_ css 를 활용한 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="jquery.js"></script>
<title>Document</title>
<style>
div{
display: inline-block;
margin-bottom: 100px;
}
/* css version */
.css_version .like{
width: 54px;
height: 47px;
background: url(image/icn-videoinfo-like-n.png) no-repeat center;
}
.css_version .like:hover,
.css_version .like.selected{
background-image: url(image/icn-videoinfo-like-m-n.png);
}
</style>
</head>
<body>
<!-- css 활용 -->
<div class="css_version">
<button type="button" class="like"></button>
</div>
</body>
<script>
// css 활용
$(document).ready(function(){
$('.css_version .like').on('click', function(){
var like = $(this);
like.toggleClass('selected');
if(like.hasClass('selected')){
alert("좋아요!");
}else{
alert("좋아요 취소");
}
})
})
</script>
</html>1) 코드 설명
- 요소의 배경을 이용하여 단일의 이미지를 그려낸다.
- 이벤트에 따라 해당 요소의 배경을 변경한다.
2) DOM Tree 관점
- Element 가 1개 필요하다.
3) Flow 관점
- 요소의 위치, 크기를 계산한다.
5) Paint 관점
- 요소 이미지를 그려낸다.
Conclusion.
- CSS를 좀더 활용하면, DOM Tree 에서 작업량이 줄어들게 된다.
- img 리소스를 html로 작성하는것보다 css의 background property를 활용하면, reflow 가 아닌 repaint 단에서 작업이 이루어지므로 gpu의 점유율을 높여 cpu 점유율을 낮출 수 있다.
I am adventurer