ryoakg
7/5/2016 - 6:07 AM
個々のElementでイベント処理するか、親のElementでまとめて処理するかの比較
個々のElementでイベント処理するか、親のElementでまとめて処理するかの比較
参考
- 最初に createElement(), appendChild() で table の中身を作る部分で1,2秒かかっていた
- 片方は onmouseover, onmouseout を tr 毎にやっているけど、明かにそっちの方が遅い
- event handler は、クロージャではないので、同じものをそれぞれのtrに付ける事ができる、そうすると多少速くなった。つまり Function の生成コストがある程度ある。
- 色を変えるイベント処理そのものが遅いという事はなかった
- など考えられるけど、一番遅いと思われるのは、ログが出た後の tr,td の描画処理の様に思える。この部分は HTML で書いても避けられない
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>table の 各 tbody だけに event handler を付けて、その中で target の tr を特定する場合</title>
<style type="text/css">
#table{
width:100%;
border-collapse:collapse;
}
#table td{ border:1px solid #999; }
</style>
</head>
<body>
<h1>table の 各 tbody だけに event handler を付けて、その中で target の tr を特定する場合</h1>
<table id="table"><tbody id="tbody"></tbody></table>
<script>
function with_elapsed_time_log(tag,f){
var r;
try {
console.time(tag);
r = f();
} finally {
console.timeEnd(tag);
}
return r;
}
with_elapsed_time_log('setup-table',function(){
var tbody = document.getElementById('tbody');
for (var i = 0; i<100000; i++){
var tr = document.createElement('tr');
for (j=0; j<3; j++){
var td = document.createElement('td');
td.appendChild(document.createTextNode(i));
tr.appendChild(td);
}
tbody.appendChild(tr);
}});
with_elapsed_time_log('setup-tbody-handlers',function(){
var tbody = document.getElementById('tbody');
tbody.onmouseover = function(ev){
if (!ev) ev = window.event;
for (var target = ev.target || ev.srcElement;
target && target !== tbody;
target = target.parentNode) {
if (target && target.tagName === 'TR')
target.style.backgroundColor = '#c88';
}}
tbody.onmouseout = function(ev){
if (!ev) ev = window.event;
for (var target = ev.target || ev.srcElement;
target && target !== tbody;
target = target.parentNode) {
if (target && target.tagName === 'TR')
target.style.backgroundColor = '#fff';
}}});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>table の 各 tr に event handler を付けた場合(その2)</title>
<style type="text/css">
#table{
width:100%;
border-collapse:collapse;
}
#table td{ border:1px solid #999; }
#table tr.hover{ background-color:#c88; }
</style>
</head>
<body>
<h1>table の 各 tr に event handler を付けた場合(その2)</h1>
イベントハンドラは1つにして、これを複数の tr に付ける様にした。
<table id="table"><tbody id="tbody"></tbody></table>
<script>
function with_elapsed_time_log(tag,f){
var r;
try {
console.time(tag);
r = f();
} finally {
console.timeEnd(tag);
}
return r;
}
var onmouseover = function(){ this.className = 'hover'; }
var onmouseout = function(){ this.className = ''; }
with_elapsed_time_log('setup-table',function(){
var tbody = document.getElementById('tbody');
for (var i = 0; i<100000; i++){
var tr = document.createElement('tr');
tr.onmouseover = onmouseover;
tr.onmouseout = onmouseout;
for (j=0; j<3; j++){
var td = document.createElement('td');
td.appendChild(document.createTextNode(i));
tr.appendChild(td);
}
tbody.appendChild(tr);
}});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>table の 各 tr に event handler を付けた場合</title>
<style type="text/css">
#table{
width:100%;
border-collapse:collapse;
}
#table td{ border:1px solid #999; }
#table tr.hover{ background-color:#c88; }
</style>
</head>
<body>
<h1>table の 各 tr に event handler を付けた場合</h1>
<table id="table"><tbody id="tbody"></tbody></table>
<script>
function with_elapsed_time_log(tag,f){
var r;
try {
console.time(tag);
r = f();
} finally {
console.timeEnd(tag);
}
return r;
}
with_elapsed_time_log('setup-table',function(){
var tbody = document.getElementById('tbody');
for (var i = 0; i<100000; i++){
var tr = document.createElement('tr');
tr.onmouseover = function(){ this.className = 'hover'; }
tr.onmouseout = function(){ this.className = ''; }
for (j=0; j<3; j++){
var td = document.createElement('td');
td.appendChild(document.createTextNode(i));
tr.appendChild(td);
}
tbody.appendChild(tr);
}});
</script>
</body>
</html>