Skip to content

Commit

Permalink
0.0.99
Browse files Browse the repository at this point in the history
  • Loading branch information
@bahrus
bahrus committed Jun 9, 2023
1 parent 6ec448d commit 23ecc09
Show file tree
Hide file tree
Showing 2 changed files with 397 additions and 7 deletions.
290 changes: 290 additions & 0 deletions demo/test.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,296 @@
<title>Document</title>
</head>
<body>

<div id="test" role="row" hidden aria-row-index="0">
<div>
<span role="gridcell" itemprop=first></span>
<span role="gridcell" itemprop=second></span>
<span role="gridcell" itemprop=third></span>
<span role="gridcell" itemprop=first></span>
<span role="gridcell" itemprop=second></span>
<span role="gridcell" itemprop=third></span>
<span role="gridcell" itemprop=first></span>
<span role="gridcell" itemprop=second></span>
<span role="gridcell" itemprop=third></span>
<span role="gridcell" itemprop=first></span>
<span role="gridcell" itemprop=second></span>
<span role="gridcell" itemprop=third></span>
<span role="gridcell" itemprop=first></span>
<span role="gridcell" itemprop=second></span>
<span role="gridcell" itemprop=third></span>
<span role="gridcell" itemprop=first></span>
<span role="gridcell" itemprop=second></span>
<span role="gridcell" itemprop=third></span>
</div>
<div>
<span role="gridcell" itemprop=first></span>
<span role="gridcell" itemprop=second></span>
<span role="gridcell" itemprop=third></span>
<span role="gridcell" itemprop=first></span>
<span role="gridcell" itemprop=second></span>
<span role="gridcell" itemprop=third></span>
<span role="gridcell" itemprop=first></span>
<span role="gridcell" itemprop=second></span>
<span role="gridcell" itemprop=third></span>
<span role="gridcell" itemprop=first></span>
<span role="gridcell" itemprop=second></span>
<span role="gridcell" itemprop=third></span>
<span role="gridcell" itemprop=first></span>
<span role="gridcell" itemprop=second></span>
<span role="gridcell" itemprop=third></span>
<span role="gridcell" itemprop=first></span>
<span role="gridcell" itemprop=second></span>
<span role="gridcell" itemprop=third></span>
</div>
<div>
<span role="gridcell" itemprop=first></span>
<span role="gridcell" itemprop=second></span>
<span role="gridcell" itemprop=third></span>
<span role="gridcell" itemprop=first></span>
<span role="gridcell" itemprop=second></span>
<span role="gridcell" itemprop=third></span>
<span role="gridcell" itemprop=first></span>
<span role="gridcell" itemprop=second></span>
<span role="gridcell" itemprop=third></span>
<span role="gridcell" itemprop=first></span>
<span role="gridcell" itemprop=second></span>
<span role="gridcell" itemprop=third></span>
<span role="gridcell" itemprop=first></span>
<span role="gridcell" itemprop=second></span>
<span role="gridcell" itemprop=third></span>
<span role="gridcell" itemprop=first></span>
<span role="gridcell" itemprop=second></span>
<span role="gridcell" itemprop=third></span>
</div>
<div>
<span role="gridcell" itemprop=first></span>
<span role="gridcell" itemprop=second></span>
<span role="gridcell" itemprop=third></span>
<span role="gridcell" itemprop=first></span>
<span role="gridcell" itemprop=second></span>
<span role="gridcell" itemprop=third></span>
<span role="gridcell" itemprop=first></span>
<span role="gridcell" itemprop=second></span>
<span role="gridcell" itemprop=third></span>
<span role="gridcell" itemprop=first></span>
<span role="gridcell" itemprop=second></span>
<span role="gridcell" itemprop=third></span>
<span role="gridcell" itemprop=first></span>
<span role="gridcell" itemprop=second></span>
<span role="gridcell" itemprop=third></span>
<span role="gridcell" itemprop=first></span>
<span role="gridcell" itemprop=second></span>
<span role="gridcell" itemprop=third></span>
</div>
<div>
<span role="gridcell" itemprop=first></span>
<span role="gridcell" itemprop=second></span>
<span role="gridcell" itemprop=third></span>
<span role="gridcell" itemprop=first></span>
<span role="gridcell" itemprop=second></span>
<span role="gridcell" itemprop=third></span>
<span role="gridcell" itemprop=first></span>
<span role="gridcell" itemprop=second></span>
<span role="gridcell" itemprop=third></span>
<span role="gridcell" itemprop=first></span>
<span role="gridcell" itemprop=second></span>
<span role="gridcell" itemprop=third></span>
<span role="gridcell" itemprop=first></span>
<span role="gridcell" itemprop=second></span>
<span role="gridcell" itemprop=third></span>
<span role="gridcell" itemprop=first></span>
<span role="gridcell" itemprop=second></span>
<span role="gridcell" itemprop=third></span>
</div>
<div>
<span role="gridcell" itemprop=first></span>
<span role="gridcell" itemprop=second></span>
<span role="gridcell" itemprop=third></span>
<span role="gridcell" itemprop=first></span>
<span role="gridcell" itemprop=second></span>
<span role="gridcell" itemprop=third></span>
<span role="gridcell" itemprop=first></span>
<span role="gridcell" itemprop=second></span>
<span role="gridcell" itemprop=third></span>
<span role="gridcell" itemprop=first></span>
<span role="gridcell" itemprop=second></span>
<span role="gridcell" itemprop=third></span>
<span role="gridcell" itemprop=first></span>
<span role="gridcell" itemprop=second></span>
<span role="gridcell" itemprop=third></span>
<span role="gridcell" itemprop=first></span>
<span role="gridcell" itemprop=second></span>
<span role="gridcell" itemprop=third></span>
</div>
<div>
<span role="gridcell" itemprop=first></span>
<span role="gridcell" itemprop=second></span>
<span role="gridcell" itemprop=third></span>
<span role="gridcell" itemprop=first></span>
<span role="gridcell" itemprop=second></span>
<span role="gridcell" itemprop=third></span>
<span role="gridcell" itemprop=first></span>
<span role="gridcell" itemprop=second></span>
<span role="gridcell" itemprop=third></span>
<span role="gridcell" itemprop=first></span>
<span role="gridcell" itemprop=second></span>
<span role="gridcell" itemprop=third></span>
<span role="gridcell" itemprop=first></span>
<span role="gridcell" itemprop=second></span>
<span role="gridcell" itemprop=third></span>
<span role="gridcell" itemprop=first></span>
<span role="gridcell" itemprop=second></span>
<span role="gridcell" itemprop=third></span>
</div>
<div>
<span role="gridcell" itemprop=first></span>
<span role="gridcell" itemprop=second></span>
<span role="gridcell" itemprop=third></span>
<span role="gridcell" itemprop=first></span>
<span role="gridcell" itemprop=second></span>
<span role="gridcell" itemprop=third></span>
<span role="gridcell" itemprop=first></span>
<span role="gridcell" itemprop=second></span>
<span role="gridcell" itemprop=third></span>
<span role="gridcell" itemprop=first></span>
<span role="gridcell" itemprop=second></span>
<span role="gridcell" itemprop=third></span>
<span role="gridcell" itemprop=first></span>
<span role="gridcell" itemprop=second></span>
<span role="gridcell" itemprop=third></span>
<span role="gridcell" itemprop=first></span>
<span role="gridcell" itemprop=second></span>
<span role="gridcell" itemprop=third></span>
</div>
<div>
<span role="gridcell" itemprop=first></span>
<span role="gridcell" itemprop=second></span>
<span role="gridcell" itemprop=third></span>
<span role="gridcell" itemprop=first></span>
<span role="gridcell" itemprop=second></span>
<span role="gridcell" itemprop=third></span>
<span role="gridcell" itemprop=first></span>
<span role="gridcell" itemprop=second></span>
<span role="gridcell" itemprop=third></span>
<span role="gridcell" itemprop=first></span>
<span role="gridcell" itemprop=second></span>
<span role="gridcell" itemprop=third></span>
<span role="gridcell" itemprop=first></span>
<span role="gridcell" itemprop=second></span>
<span role="gridcell" itemprop=third></span>
<span role="gridcell" itemprop=first></span>
<span role="gridcell" itemprop=second></span>
<span role="gridcell" itemprop=third></span>
</div>
<div>
<span role="gridcell" itemprop=first></span>
<span role="gridcell" itemprop=second></span>
<span role="gridcell" itemprop=third></span>
<span role="gridcell" itemprop=first></span>
<span role="gridcell" itemprop=second></span>
<span role="gridcell" itemprop=third></span>
<span role="gridcell" itemprop=first></span>
<span role="gridcell" itemprop=second></span>
<span role="gridcell" itemprop=third></span>
<span role="gridcell" itemprop=first></span>
<span role="gridcell" itemprop=second></span>
<span role="gridcell" itemprop=third></span>
<span role="gridcell" itemprop=first></span>
<span role="gridcell" itemprop=second></span>
<span role="gridcell" itemprop=third></span>
<span role="gridcell" itemprop=first></span>
<span role="gridcell" itemprop=second></span>
<span role="gridcell" itemprop=third></span>
</div>
<div>
<span role="gridcell" itemprop=first></span>
<span role="gridcell" itemprop=second></span>
<span role="gridcell" itemprop=third></span>
<span role="gridcell" itemprop=first></span>
<span role="gridcell" itemprop=second></span>
<span role="gridcell" itemprop=third></span>
<span role="gridcell" itemprop=first></span>
<span role="gridcell" itemprop=second></span>
<span role="gridcell" itemprop=third></span>
<span role="gridcell" itemprop=first></span>
<span role="gridcell" itemprop=second></span>
<span role="gridcell" itemprop=third></span>
<span role="gridcell" itemprop=first></span>
<span role="gridcell" itemprop=second></span>
<span role="gridcell" itemprop=third></span>
<span role="gridcell" itemprop=first></span>
<span role="gridcell" itemprop=second></span>
<span role="gridcell" itemprop=third></span>
</div>
</div>
<button onclick="test1()">test 1</button>
<button onclick="test2()">test 2</button>
<button onclick="test3()">test 3</button>
<button onclick="test4()">test 4</button>
<script>
const totalNumber = 10000;
function test1(){
console.log('test1');
const start = performance.now();
const templ = document.createElement('template');
const content = templ.content;
for(let i = 0; i < 100; i++){
const clone = test.cloneNode(true);
content.appendChild(clone);
}

for(let i = 0; i < totalNumber / 100; i++){
const clone = templ.content.cloneNode(true);
}
const end = performance.now();
console.log((end - start) / 1000);
}

function test2(){
console.log('test2');
const start = performance.now();
const templ = document.createElement('template');
const clone = test.cloneNode(true);
templ.content.appendChild(clone);
for(let i = 0; i < totalNumber; i++){
const clone = templ.content.cloneNode(true);
}
const end = performance.now();
console.log((end - start) / 1000);
}

async function test3(){
console.log('test3');
const start = performance.now();
const templ = document.createElement('template');
const clone = test.cloneNode(true);
templ.content.appendChild(clone);
for(let i = 0; i < totalNumber; i++){
const clone = await templ.content.cloneNode(true);
}
const end = performance.now();
console.log((end - start) / 1000);
}

function test4(){
console.log('test2');
const start = performance.now();
//const templ = document.createElement('template');
//const clone = test.cloneNode(true);
//templ.content.appendChild(clone);
for(let i = 0; i < totalNumber; i++){
//const clone = templ.content.cloneNode(true);
test.cloneNode(true);
}
const end = performance.now();
console.log((end - start) / 1000);
}

async function doClone(templ){
const clone = templ.content.cloneNode(true);
}
</script>
<table>
<tr>
<data value='1'></data>
Expand Down
Loading

0 comments on commit 23ecc09

Please sign in to comment.