jQuery jquery append 메쏘드 속도 관련 질문 드립니다.

[다른세상을꿈꾸며]

js 파일에서 function 을 불러서 비디오를 보여주는 페이지를 구현했는데요.

동작은 잘 하는데 문제는 속도가 느립니다.

아래는 비디오파일 뿌려주는 function 코드이구요.

제일 하단에 $("#video").append(str); 이 부분을 주석처리하면 속도가 빨라져서 혹시나

append() 부분이 잘못된건 아닌지 싶은데요.

도움좀 부탁드립니다.

function viewvideo(videoid) {

//set vidoe in play-video page

varVideoid = videoid;

$("#video").empty();

var data = Ajax("../Ajax/Webmethod.aspx/getviewvideo", { videoid: videoid });

var str = '';

if (data.videourl.indexOf('youtube') == -1 && data.videourl.indexOf('youtu.be') == -1) {

    str += '<video id="myvideo" width="420" height="300"  autoplay="autoplay" ">';

    str += '<source src="' + data.videourl + '" type="video/mp4">';

    str += '<source src="' + data.videourl + '" type="video/3gpp">';

    str += '<source src="' + data.videourl + '" type="video/m4v">';

    str += '<source src="' + data.videourl + '" type="video/x-ms-wmv">';

    str += '<source src="' + data.videourl + '" type="video/webm">';

    str += '<source src="' + data.videourl + '" type="video/quicktime">';

    str += '<source src="' + data.videourl + '" type="video/ogg">';

    str += '<source src="' + data.videourl + '" type="video/mpeg">';

    str += '<source src="' + data.videourl + '" type="video/x-matroska">';

    str += '</video>';

}

else 

{

    str = data.videourl.replace(/(?:http:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/g, '<iframe width="420" height="300" src="http://www.youtube.com/embed/$1?autoplay=1&modestbranding=1&autohide=0&showinfo=1" frameborder="0" allowfullscreen></iframe>');}

$("#video").append(str); . . . }

[푸하하3]

html에서 str 영역(video 태그 영역)을 그려 놓고 id 기반으로 찾은 다음에 src만 동적으로 변경해주면 빨라 질것 같습니다. 아니면 handlebars.js 같은 것을 써야 될것 같습니다.

[다른세상을꿈꾸며]

감사합니다^^

[몬난아]

사실 innerHTML이 가장 빠르긴합니다. 크게 저해적인 요소는 아니라고보는데 video엘리먼트 특성상 비디오캡춰가 되었든 스트림이 되었던 해당 object가 무거워서가 아닐까요?

[다른세상을꿈꾸며]

그럴지도요.사실 제가 잘몰라서요

[몬난아]

그럼 innerHTML 로 하세요 일단 javascript단에서는 그게 제일 빨라요

[심재운]

http://jsben.ch/#/yDvKH 리얼 성능 테스트이네요.

[다른세상을꿈꾸며]

감사합니다.