Return to Question

deleted 43 characters in body

edited Jul 24, 2016 at 1:05

35.2k
13
134
238

HTML:

 HTML :
<body>
<header></header>
<div id="container">
 <div id="test1" alt="test1alt"></div>
 <div id="test2" alt="test2alt"></div>
 <div id="test3" alt="test3alt"></div>
 <div id="test4" alt="test4alt"></div>
 <div id="test5" alt="test5alt"></div>
 <div id="test6" alt="test6alt"></div>
 <!--[...200 more div]-->
</div>
</body>
<script>

JS First way :JS first way: alter each element

JS Second way :JS second way: rewrite base htmlHTML and inject when modified

JS Utils funcs :JS Utils funcs:

@– elclanrs thanks, hope this is right format :)

 HTML :
<body>
<header></header>
<div id="container">
 <div id="test1" alt="test1alt"></div>
 <div id="test2" alt="test2alt"></div>
 <div id="test3" alt="test3alt"></div>
 <div id="test4" alt="test4alt"></div>
 <div id="test5" alt="test5alt"></div>
 <div id="test6" alt="test6alt"></div>
 <!--[...200 more div]-->
</div>
</body>
<script>

JS First way : alter each element

JS Second way : rewrite base html and inject when modified

JS Utils funcs :

@– elclanrs thanks, hope this is right format :)

HTML:

<body>
<header></header>
<div id="container">
 <div id="test1" alt="test1alt"></div>
 <div id="test2" alt="test2alt"></div>
 <div id="test3" alt="test3alt"></div>
 <div id="test4" alt="test4alt"></div>
 <div id="test5" alt="test5alt"></div>
 <div id="test6" alt="test6alt"></div>
 <!--[...200 more div]-->
</div>
</body>
<script>

JS first way: alter each element

JS second way: rewrite base HTML and inject when modified

JS Utils funcs:

theory to code

Source Link

edited Jul 23, 2016 at 18:03

Lossius

edited Jul 23, 2016 at 18:03

Lossius

 HTML :
<body>
[some HTML]<header></header>
<div id="container">
 <div id="test1" alt="test1alt"></div>
 <div id="test2" alt="test2alt"></div>
 <div id="test3" alt="test3alt"></div>
 <div id="test4" alt="test4alt"></div>
 <div id="test5" alt="test5alt"></div>
 <div id="test6" alt="test6alt"></div>
  <!--[...200 more div like test1]div]-->
</div>
</body>
<script>
// First

JS First way : alter each element

$(document).ready(function() way{
 : alter each element
setInterval(function alterDomEach() {
 var value;
 $('#container div').each(function() {
 if(randrandNum(0, 10) != 1) {
 return true;
 }
 
 value = randomValuerandString();
 if($(this).attr('alt') != value) {
 $(this).attr('alt', value);
 }
 });
}
setInterval(alterDomEach, 100);
});
//

JS Second way : rewrite base html and inject when modified

var SecondmyDOM way= :{};
function rewritedomConstruct(obj) base{
 html and inject when$('> modifieddiv', obj).each(function() {
var html myDOM[$(this).attr('id')] = $('#container'this).htmlattr('alt');
 });
}
function alterDomRegExpdomAlter(id, value) {
 if(myDOM[id] == value) {
 return;
 }
 
 myDOM[id] = value;
 return true;
}
function domUpdate(obj) {
 var resbuf = /match'';
 all div[alt]/ $.execeach(myDOM, function(id, value) {
 buf += '<div id="'+id+'" alt="'+value+'"></div>';
 });
 obj.html(buf);
}
$(document).ready(function() {
 domConstruct($('#container'));
 setInterval(function() {
 var inject = false;
 $.each(resmyDOM, function(iid) {
 if(randrandNum(0, 10) ==!= 1) {
 // Replace attribute alt withreturn atrue;
 random string }

 if(domAlter(id, randString())) {
 inject = true;
 }
 });
 if(htmlChangedinject) {
 // Inject the html codedomUpdate($('#container'));
 }
}, 100);
});
setInterval

JS Utils funcs :

function randNum(alterDomRegExpa, 100b) {
 var argc = arguments.length;
 
 if(argc == 1) {
 return 1; 
 }
 
 if(argc == 0) {
 a = 0;
 b = 2147483647;
 }
 return Math.floor(Math.random() * (b - a + 1))+a;
}
function randString() {
 return Math.random().toString(36).replace(/[^a-z]+/g, '');
}
</script>

@– elclanrs thanks, hope this is right format :)

 <body>
[some HTML]
<div id="container">
 <div id="test1" alt="test1alt"></div>
 [...200 more div like test1]
</div>
</body>
// First way : alter each element
function alterDomEach() {
 var value;
 $('#container div').each(function() {
 if(rand(0, 10) != 1) {
 return true;
 }
 
 value = randomValue();
 if($(this).attr('alt') != value) {
 $(this).attr('alt', value);
 }
 });
}
setInterval(alterDomEach, 100);
// Second way : rewrite base html and inject when modified
var html = $('#container').html();
function alterDomRegExp() {
 var res = /match all div[alt]/.exec(html);
 each(res, function(i) {
 if(rand(0, 10) == 1) {
 // Replace attribute alt with a random string
 }
 });
 if(htmlChanged) {
 // Inject the html code
 }
}
setInterval(alterDomRegExp, 100);

 HTML :
<body>
<header></header>
<div id="container">
 <div id="test1" alt="test1alt"></div>
 <div id="test2" alt="test2alt"></div>
 <div id="test3" alt="test3alt"></div>
 <div id="test4" alt="test4alt"></div>
 <div id="test5" alt="test5alt"></div>
 <div id="test6" alt="test6alt"></div>
  <!--[...200 more div]-->
</div>
</body>
<script>

JS First way : alter each element

$(document).ready(function() {
 setInterval(function() {
 var value;
 $('#container div').each(function() {
 if(randNum(0, 10) != 1) {
 return true;
 }
 
 value = randString();
 if($(this).attr('alt') != value) {
 $(this).attr('alt', value);
 }
 });
}, 100);
});

JS Second way : rewrite base html and inject when modified

var myDOM = {};
function domConstruct(obj) {
 $('> div', obj).each(function() {
  myDOM[$(this).attr('id')] = $(this).attr('alt');
 });
}
function domAlter(id, value) {
 if(myDOM[id] == value) {
 return;
 }
 
 myDOM[id] = value;
 return true;
}
function domUpdate(obj) {
 var buf = '';
  $.each(myDOM, function(id, value) {
 buf += '<div id="'+id+'" alt="'+value+'"></div>';
 });
 obj.html(buf);
}
$(document).ready(function() {
 domConstruct($('#container'));
 setInterval(function() {
 var inject = false;
 $.each(myDOM, function(id) {
 if(randNum(0, 10) != 1) {
 return true;
  }

 if(domAlter(id, randString())) {
 inject = true;
 }
 });
 if(inject) {
 domUpdate($('#container'));
 }
}, 100);
});

JS Utils funcs :

function randNum(a, b) {
 var argc = arguments.length;
 
 if(argc == 1) {
 return 1; 
 }
 
 if(argc == 0) {
 a = 0;
 b = 2147483647;
 }
 return Math.floor(Math.random() * (b - a + 1))+a;
}
function randString() {
 return Math.random().toString(36).replace(/[^a-z]+/g, '');
}
</script>

@– elclanrs thanks, hope this is right format :)

deleted 3 characters in body; edited title

Source Link

edited Jul 23, 2016 at 16:48

Jamal

edited Jul 23, 2016 at 16:48

Jamal

35.2k
13
134
238

Javascript JavaScript DOM modification

i'mI'm thinking about domDOM modification performancesperformance.

In a perfect way, we alter each element but DOM modification is really heavy and alter many elements at same time froze the browser. I I didn't mademake any performance testtests but i wannaI want to know if the second way can be more powerfullpowerful.

In my head, the first way will ask the browser to refresh the display for each div. So So logically, with the second way, the browser will refresh only once per injection ? is. Is that correct?

 <body>
[some HTML]
<div id="container">
 <div id="test1" alt="test1alt"></div>
 [...200 more div like test1]
</div>
</body>
// First way : alter each element
function alterDomEach() {
 var value;
 $('#container div').each(function() {
 if(rand(0, 10) != 1) {
 return true;
 }
 
 value = randomValue();
 if($(this).attr('alt') != value) {
 $(this).attr('alt', value);
 }
 });
}
setInterval(alterDomEach, 100);
// Second way : rewrite base html and inject when modified
var html = $('#container').html();
function alterDomRegExp() {
 var res = /match all div[alt]/.exec(html);
 each(res, function(i) {
 if(rand(0, 10) == 1) {
 // Replace attribute alt with a random string
 }
 });
 if(htmlChanged) {
 // Inject the html code
 }
}
setInterval(alterDomRegExp, 100);

Javascript DOM modification

i'm thinking about dom modification performances.

In a perfect way, we alter each element but DOM modification is really heavy and alter many elements at same time froze the browser. I didn't made any performance test but i wanna know if the second way can be more powerfull.

In my head, the first way will ask the browser to refresh the display for each div. So logically, with the second way, the browser will refresh only once per injection ? is that correct?

 <body>
[some HTML]
<div id="container">
 <div id="test1" alt="test1alt"></div>
 [...200 more div like test1]
</div>
</body>
// First way : alter each element
function alterDomEach() {
 var value;
 $('#container div').each(function() {
 if(rand(0, 10) != 1) {
 return true;
 }
 
 value = randomValue();
 if($(this).attr('alt') != value) {
 $(this).attr('alt', value);
 }
 });
}
setInterval(alterDomEach, 100);
// Second way : rewrite base html and inject when modified
var html = $('#container').html();
function alterDomRegExp() {
 var res = /match all div[alt]/.exec(html);
 each(res, function(i) {
 if(rand(0, 10) == 1) {
 // Replace attribute alt with a random string
 }
 });
 if(htmlChanged) {
 // Inject the html code
 }
}
setInterval(alterDomRegExp, 100);

JavaScript DOM modification

I'm thinking about DOM modification performance.

In a perfect way, we alter each element but DOM modification is really heavy and alter many elements at same time froze the browser. I didn't make any performance tests but I want to know if the second way can be more powerful.

In my head, the first way will ask the browser to refresh the display for each div. So logically, with the second way, the browser will refresh only once per injection. Is that correct?

 <body>
[some HTML]
<div id="container">
 <div id="test1" alt="test1alt"></div>
 [...200 more div like test1]
</div>
</body>
// First way : alter each element
function alterDomEach() {
 var value;
 $('#container div').each(function() {
 if(rand(0, 10) != 1) {
 return true;
 }
 
 value = randomValue();
 if($(this).attr('alt') != value) {
 $(this).attr('alt', value);
 }
 });
}
setInterval(alterDomEach, 100);
// Second way : rewrite base html and inject when modified
var html = $('#container').html();
function alterDomRegExp() {
 var res = /match all div[alt]/.exec(html);
 each(res, function(i) {
 if(rand(0, 10) == 1) {
 // Replace attribute alt with a random string
 }
 });
 if(htmlChanged) {
 // Inject the html code
 }
}
setInterval(alterDomRegExp, 100);

Source Link

asked Jul 23, 2016 at 15:19

Lossius

asked Jul 23, 2016 at 15:19

Lossius

default