如何提高jquery append方法的性能？ [英] How do I improve the performance of jquery append method?

问题描述

I am using jquery to show video on website. I have perfomance speed issue for append() How can I improve the perfomance? Any comment would be appreciated Thanks

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);
.
.
.
}

我的尝试：



我评论了

What I have tried:

I have commented

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

part然后速度更快

part then the speed is faster

推荐答案

（＃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 =myvideowidth =420height =300autoplay =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 =vi deo / x-matroska>';
str + ='< / video>';
}
else
{

str = data.videourl.replace（/（？：HTTP：？？\ / \ /）（?: www\）（?: youtube\.com | youtu\.be）\ /（？： watch \？v =）？（。+）/ g，'< iframe width =420height =300src =http://www.youtube.com/embed/

("#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 = 1frameborder =0allowfullscreen>< / iframe>'）;}

1?autoplay=1&modestbranding=1&autohide=0&showinfo=1" frameborder="0" allowfullscreen></iframe>');}

（ 请#video）附加（STR）;
。
。
。
}

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

我的尝试：



我评论过

What I have tried:

I have commented

这篇关于如何提高jquery append方法的性能？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！