1.Append Outside of Loops
나쁜 예
<ul id="list"></ul>
$.each(myArray, function(i, item){
var newListItem = "<li>" + item + "</li>";
$("#list").append(newListItem);
});
이 경우 ul#list에 하나하나의 엘레먼트를 붙이는 작업이다.
배열의 엘레먼트 갯수가 많아아지는 경우 DOM을 조작해야하는 비용적인 측명에서 과소비가 일어나게 된다.
바른 예
var myHtml="";
$.each(myArray, function(i, item){
var myHtml += "<li>" + item + "</li>";
});
$("#list").html(myHtml);
2.Cache Length During Loops
나쁜 예
for(var i =0;i<element.length;i++){
.....
}
동작에는 문제가 없으나 loop를 반복할때마다 엘리멘트의 length 프로퍼티를 계속 접근하게 된다.
var sec=0;
setInterval(fucntion(){
sec++;
$("$timmer").html(sec);
},1000);
위 코드도 매번 초를 바꿔주는 업데이트를 할때마다 timmer엘리먼트를 찾게 된다.
자주 반복해서 사용되는 엘리먼트는 브라우저상에 캐시를 시켜두고 그 캐시된 상태에서 엘리먼트만을 통해 무언가 작업을 해야한다.
바른 예
var myLength = element.length;
for(var i=0; i<myLength;i++){
.....
}
var sec=0;
var timmer=$("$timmer");
setInterval(fucntion(){
sec++;
timmer.html(sec);
},1000);
3.Detach Elements to Work with Them
나쁜 예
var table = $("#table");
$.ajax({
.....
success: function(data){
table.children().remove();
table.append(.....);
}
});
table의 하위요소를 remove()를 통해 모두 제거 하고 새로운 데이터를 append() 하는 방식이다.
DOM의 하위목록을 모두 지우고 나중에 다시 추가할고 할떄 Jquery1.4버전 부터는 Detach()라는 메서드를 제공한다.
Detach 함수는 떼어다가 붙이는 함수라고 할 수있다.
<!DOCTYPE html>
<html>
<head>
<style>p { background:yellow; margin:6px 0; } p.off { background: black; }</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>Hello</p>
how are
<p>you?</p>
<button>Attach/detach paragraphs</button>
<script>
$("p").click(function(){
$(this).toggleClass("off");
});
var p;
$("button").click(function(){
if ( p ) {
p.appendTo("body");
p = null;
} else {
p = $("p").detach();
}
});
</script>
</body>
</html>
4.Don't Act on Absent Elements
존재하지 않은 엘리먼트를 상대로 무언가를 시도하지 말르는 이야기이다.
나쁜 예
$("#popup").hide();
.....
$("#popup").show();
팝업을 띄우기전에 일단 popup이라는 엘리먼트가 있다면 숨기고 새롭게 띄우려고 하는 코드이다. 그래서 띄우기전 hide()를 시키고 자업을 시작하는 것이다.
hide()메서드는 popup엘리먼트가 있다면 상관없지만 popup엘리먼트가 동적으로 생성되기 때문에 DOM상에 존재하지 않는다면! 꽤 많은 오버해드가 발생한다.
바른 예
var popup =$("#popup");
if(popup.length){
popup.hide();
}
엘리먼트의 존재 유무를 판단하고 동작 시키는 것이 중요하다.
가장 최상의 방법은 해당 동작을 통합해 다루는 플러그인을 추가하는 것이다.
jQuery.fn.popup = function( func){
this.length && func.apply(this);
return this;
}
$('#popup').popup(function(){
... Do Somthing
})
5.Optimize Selectors
1) Jquery Extensions
가능하다면 Jquery에서 제공하는 Jquery Extensions가 포함된 셀렉터의 사용을 피하는게 좋다.
해당 메서드는 https://api.jquery.com/category/selectors/jquery-selector-extensions/ 에서 확인 가능하다.
성능상의 이점을 활용하지 못하기 때문에 사용을 자제하는 것이 좋다.
2)Avoid Excessie Specificity
지나치게 구체적으로 DOM를 선택하는 것도 생각과는 다르게 성능상에 좋지 않은 이슈를 만들어 낸다.
나쁜 예
$(".data table.attendees td.gozalez");
바른 예
$(".data td.gozalez");
3)ID-Based Selectors
시작은 ID 기반으로 하는 것이 좋다.
나쁜 예(라고 하기는 그렇다..)
$("#container div.robotarm");
바른 예
$("#container").find("div.robotarm");
$(...) 구문 안에 여러 엘리먼틀ㄹ 넣는 것은 좋지 않으며 위의 첫번째 코드의 경우
document.querySelectorAll()를 통해서 DOM를 선택하지만 두번째의 경우 document.getElementById()를 통해서 DOM를 선택하기 때문에 훨씬 빠르다.
6.Use Stylesheets for Changing CSS on Many Elements
20개 이상의 엘레먼트의 스타일을 JQuery를 통해 설정해야한다면 head태그에 style을 정의하는게 좋습니다.
'개발 > html,Thymeleaf' 카테고리의 다른 글
| [Thymeleaf] th:utext (0) | 2021.05.10 |
|---|---|
| Thymeleaf 정리-1 [기본적인 표현방법] (0) | 2021.05.06 |
| 자바스크립트 턴제 게임 만들기 (3) | 2016.12.15 |
| javascript 테트리스 만들기 (0) | 2016.12.13 |
| 자바스크립트 이벤트 바인딩 (1) | 2016.05.30 |
댓글