wassname/Mostly-Harmless
1
0
Fork 0
mirror of https://github.com/wassname/Mostly-Harmless.git synced 2026-08-07 11:17:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

As it turns out, using innerHTML gives better performance

Browse Source 
than createElement() and appendChild().
http://jsperf.com/dom-vs-innerhtml/11
Plus, it looks cleaner.
This commit is contained in:
Kerrick Long
2011-06-20 21:12:46 -05:00
parent c65ca8d841
commit ebc8d2d872
1 changed files with 35 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files
popup.js
+35 -106
View File
@@ -31,112 +31,41 @@ function buildPage(pageUrl) {
var now = new Date();
for(var i = 0; i < children.length; i++) {
var data = children.item(i);
var entry = document.createElement('li');
entry.id = data.name;
if (data.likes === 'true') entry.setAttribute('data-dir','1');
if (data.likes === null) entry.setAttribute('data-dir','0');
if (data.likes === 'false') entry.setAttribute('data-dir','-1');
var votes = document.createElement('div');
votes.className = 'votes';
var upmod = document.createElement('a');
upmod.className = 'upmod';
upmod.setAttribute('onclick','apiCall("upmod", "' + data.name + '")');
votes.appendChild(upmod);
var count = document.createElement('span');
count.className = 'count';
count.id = 'count_' + data.name;
count.innerHTML = data.score;
count.title = data.ups + ' up votes, ' + data.downs + ' down votes';
votes.appendChild(count);
var downmod = document.createElement('a');
downmod.className = 'downmod';
downmod.setAttribute('onclick','apiCall("downmod", "' + data.name + '")');
downmod.id = 'down_' + data.name;
votes.appendChild(downmod);
entry.appendChild(votes);
var thumblink = document.createElement('a');
thumblink.className = 'thumblink';
thumblink.href = 'http://www.reddit.com' + data.permalink;
thumblink.target = '_blank';
thumblink.title = 'View this submission on reddit';
var thumb = document.createElement('img');
thumb.className = 'thumb';
data.thumbnail.indexOf('/') === 0 ? thumb.src = 'http://www.reddit.com' + data.thumbnail : thumb.src = data.thumbnail;
thumb.alt = data.title;
thumblink.appendChild(thumb);
entry.appendChild(thumblink);
var post = document.createElement('div');
post.className = 'post';
var link = document.createElement('a');
link.className = 'link';
link.href = 'http://www.reddit.com' + data.permalink;
link.target = '_blank';
link.innerHTML = data.title;
link.title = 'View this submission on reddit';
post.appendChild(link);
var space = document.createTextNode(' ');
post.appendChild(space);
var domain = document.createElement('a');
domain.className = 'domain';
domain.href = 'http://www.reddit.com/domain/' + data.domain + '/';
domain.target = '_href';
domain.innerHTML = '(' + data.domain + ')';
post.appendChild(domain);
var meta = document.createElement('div');
meta.className = 'meta';
var timestamp = document.createElement('span');
timestamp.className = 'timestamp';
timestamp.innerHTML = 'submitted ' + prettyDate(ISODateString(new Date(data.created_utc * 1000)));
meta.appendChild(timestamp);
var by = document.createTextNode(' by ');
meta.appendChild(by);
var submitter = document.createElement('a');
submitter.className = 'submitter';
submitter.href = 'http://www.reddit.com/user/' + data.author + '/';
submitter.target = '_blank';
submitter.innerHTML = data.author;
meta.appendChild(submitter);
var to = document.createTextNode(' to ');
meta.appendChild(to);
var subreddit = document.createElement('a');
subreddit.className = 'subreddit';
subreddit.href = 'http://www.reddit.com/r/' + data.subreddit + '/';
subreddit.target = '_blank';
subreddit.innerHTML = data.subreddit;
meta.appendChild(subreddit);
post.appendChild(meta);
var actions = document.createElement('div');
actions.className = 'actions';
var comments = document.createElement('a');
comments.className = 'comments';
comments.href = 'http://www.reddit.com' + data.permalink;
comments.target = '_blank';
comments.innerHTML = data.num_comments + ' comments';
actions.appendChild(comments);
post.appendChild(actions);
var share = document.createElement('a');
share.className = 'share';
share.innerHTML = 'share';
actions.appendChild(share);
var save = document.createElement('a');
save.className = 'save';
save.innerHTML = data.saved === 'true' ? 'saved' : 'save';
actions.appendChild(save);
var hide = document.createElement('a');
hide.className = 'hide';
if(data.hidden === 'true') {
entry.className += ' hidden';
hide.innerHTML = 'unhide'
} else {
hide.innerHTML = 'hide';
}
actions.appendChild(hide);
var report = document.createElement('a');
report.className = 'report';
report.innerHTML = 'report';
actions.appendChild(report);
entry.appendChild(post);
document.getElementById('posts').appendChild(entry);
var voteDir;
if (data.likes === 'true') voteDir = 1;
if (data.likes === null) voteDir = 0;
if (data.likes === 'false') voteDir = -1;
var entry = new String();
var hiddenText = data.saved === 'true' ? 'hidden' : 'hide';
var saveText = data.saved === 'true' ? 'saved' : 'save';
entry += '<li id="' + data.name + ' ' + hiddenText + ' ' + saveText + '" data-dir="' + voteDir.toString() + '">';
entry += '<div class="votes">';
entry += '<a class="upmod" onclick="apiCall(\'upmod\', \'' + data.name + '\')"></a>';
entry += '<span class="count" id="count_' + data.name + '" title="' + data.ups + ' up votes, ' + data.downs + ' down votes">' + data.score + '</span>';
entry += '<a class="downmod" onclick="apiCall(\'downmod\', \'' + data.name + '\')"></a>';
entry += '</div>';
entry += '<a class="thumblink" href="http://www.reddit.com' + data.permalink + '" target="_blank" title="View this post on reddit">';
var thumbSrc = data.thumbnail.indexOf('/') === 0 ? 'http://www.reddit.com' + data.thumbnail : data.thumbnail;
entry += '<img class="thumb" src="' + thumbSrc + '" alt="' + data.title + '" width="70"/>';
entry += '</a>';
entry += '<div class="post">';
entry += '<a class="link" href="http://www.reddit.com' + data.permalink + '" target="_blank" title="View this post on reddit">' + data.title + '</a> ';
entry += '<a class="domain" href="http://www.reddit.com/domain/' + data.domain + '" target="_blank">(' + data.domain + ')</a>';
entry += '<div class="meta">';
entry += '<span class="timestamp">submitted ' + prettyDate(ISODateString(new Date(data.created_utc * 1000))) + '</span> by ';
entry += '<a class="submitter" href="http://www.reddit.com/user/' + data.author + '" target="_blank">' + data.author + '</a> to';
entry += '<a class="subreddit" href="http://www.reddit.com/r/' + data.subreddit + '/" target="_blank">' + data.subreddit + '</a>';
entry += '</div>';
entry += '<div class="actions">';
entry += '<a class="comments" href="http://www.reddit.com' + data.permalink + '" target="_blank">' + data.num_comments + ' comments</a>';
entry += '<a class="share">share</a>';
entry += '<a class="save">' + saveText + '</a>';
entry += '<a class="hide">' + hiddenText + '</a>';
entry += '<a class="report">report</a>';
entry += '</div>';
entry += '</div>'
entry += '</li>';
document.getElementById('posts').innerHTML += entry;
}
if(!isCommentsPage) {
document.getElementById('submit').href = 'http://www.reddit.com/submit?resubmit=true&url=' + encodeURI(document.getElementById('posts').getAttribute('data-url'));