[javascript, jquery] documentFragement사용 (append 시 가상메모리 사용)

우리가 사용하는 Jquery 는 사실 상당히 느리고 브라우저에 과부하를 줄 수 있는 라이브러리다.

사실 이런 사실을 모른체 편하다는 이유로 계속 사용하였고, append()를 사용 할 때도 시간이나 성능 등을 생각지 않고 사용하였다.

append를 그냥 사용하는 것은 성능에 매우 부담이 가는 작업이다. 

아래와 같은 작업을 수행할때 브라우저는 array 크기에 맞춰 3번을 페이지를 새로 그려야 하는 작업을 수행하게 된다.

array 크기가 동적으로 늘어나 수천개가 되면 브라우저에 엄청난 성능저하를 가져오게 된다.

    <div class='test1'>
    </div>
 
    <script>
        $(function () {
            var $test1 = $('.test1');
            var array = ['aaa','bbb','cccc'];
            array.forEach(function (item) {
                $test1.append('<strong>' + item + '</strong>');
            });
        })
    </script>

이때 사용할 수 있는게 jquery의 documentFragement이다.

$frag 라는 이름의 가상 메모리 공간을 만들고, 그 안에 append를 할 경우 브라우저 성능에는 지장을 주지않게 된다.

그렇게 몇번, 몇천번 append 작업을 거친 뒤 만들어진 $frag 를 우리는 원하는 test1 div 에 한번만 append 하게 되면 된다.

    <div class='test1'>
    </div>
 
    <script>
        $(function () {
            var $test1 = $('.test1');
            var $frag = $(document.createDocumentFragment());
            var array = ['aaa','bbb','cccc'];
            array.forEach(function (item) {
                $frag.append('<strong>' + item + '</strong>');
            });
            $test1.append($frag);
        })
    </script>

해당 작업은 평소 개발하면서 append 함수를 많이 사용하는데 위의 잘못된 방식으로 개발을 해오고 있어

고찰 하고자 블로그로 작성하게되었다.

해당 내용은 아래의 블로그 내용을 참조로 작성하였습니다.

https://www.zerocho.com/category/jQuery/post/57c3a8821efc521700a70918