that guy [TCTI v 8]

Status
Not open for further replies.
228382.

228379

I beat the internet, but it nearly killed my browser in the process.

...Actually, now I'm curious as to what exactly causes multiple spoiler tags to be so heavy on the ol' processing. Surely it could be done better.

Did a little sniffing, and apparently PC's spoiler tags use this:
Code:
if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }

Which looks like this when beautified (not that it's in any way beautiful):
Code:
if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') {
	this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';
	this.innerText = '';
	this.value = 'Hide';
}
else {
	this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none';
	this.innerText = '';
	this.value = 'Show';
}

Which translates roughly to:
Code:
when I am clicked:
	grab my parent element's parent element
	grab every single element underneath that parent
	take the second one and throw everything else away
	grab every single element underneath this element, most of which I just threw away
	take the first one and throw everything else away
	if it's hidden then:
		grab my parent element's parent element
		grab every single element underneath that parent
		take the second one and throw everything else away
		grab every single element underneath this element, most of which I just threw away
		take the first one and throw everything else away
		make it show its content
		utterly pointless line
		also make me say "Hide"
	otherwise:
		grab my parent element's parent element
		grab every single element underneath that parent
		take the second one and throw everything else away
		grab every single element underneath this element, most of which I just threw away
		take the first one and throw everything else away
		make it hide its content
		utterly pointless line
		also make me say "Show"

It aches me to say that my beloved PC runs code that is so terribly inefficient. It's obvious how broken it is just by seeing all those redundant steps.

I took a look in the profiler:
Spoiler:

The DOM queries were taking longer and longer, until my processor couldn't even take them all in one cycle.
Spoiler:

Sure enough, the real bottleneck was all those queries piling up from the complexity of the operation, resulting in an ever increasing wait between opening each spoiler tag, as well as browser lag:
Spoiler:


This is like opening Pandora's Box.
 
228383.



Did a little sniffing, and apparently PC's spoiler tags use this:
Code:
if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }
Which looks like this when beautified (not that it's in any way beautiful):
Code:
if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') {
    this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';
    this.innerText = '';
    this.value = 'Hide';
}
else {
    this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none';
    this.innerText = '';
    this.value = 'Show';
}
Which translates roughly to:
Code:
when I am clicked:
    grab my parent element's parent element
    grab every single element underneath that parent
    take the second one and throw everything else away
    grab every single element underneath this element, most of which I just threw away
    take the first one and throw everything else away
    if it's hidden then:
        grab my parent element's parent element
        grab every single element underneath that parent
        take the second one and throw everything else away
        grab every single element underneath this element, most of which I just threw away
        take the first one and throw everything else away
        make it show its content
        utterly pointless line
        also make me say "Hide"
    otherwise:
        grab my parent element's parent element
        grab every single element underneath that parent
        take the second one and throw everything else away
        grab every single element underneath this element, most of which I just threw away
        take the first one and throw everything else away
        make it hide its content
        utterly pointless line
        also make me say "Show"
It aches me to say that my beloved PC runs code that is so terribly inefficient. It's obvious how broken it is just by seeing all those redundant steps.

I took a look in the profiler:
Spoiler:

The DOM queries were taking longer and longer, until my processor couldn't even take them all in one cycle.
Spoiler:

Sure enough, the real bottleneck was all those queries piling up from the complexity of the operation, resulting in an ever increasing wait between opening each spoiler tag, as well as browser lag:
Spoiler:


This is like opening Pandora's Box.
This is precisely what I hoped my query would incentivize. Thank you.
 
I googled "Zbambabar" and one of the top results was a post by me in this very thread.

I'm famous.

228391
 
Status
Not open for further replies.
Back
Top