From ebc8d2d872265d933305b50a22873e1e304c051d Mon Sep 17 00:00:00 2001 From: Kerrick Long Date: Mon, 20 Jun 2011 21:12:46 -0500 Subject: [PATCH] As it turns out, using innerHTML gives better performance than createElement() and appendChild(). http://jsperf.com/dom-vs-innerhtml/11 Plus, it looks cleaner. --- popup.js | 141 ++++++++++++++----------------------------------------- 1 file changed, 35 insertions(+), 106 deletions(-) diff --git a/popup.js b/popup.js index 783ddd2..337c9b6 100644 --- a/popup.js +++ b/popup.js @@ -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 += '
  • '; + entry += '
    '; + entry += ''; + entry += '' + data.score + ''; + entry += ''; + entry += '
    '; + entry += ''; + var thumbSrc = data.thumbnail.indexOf('/') === 0 ? 'http://www.reddit.com' + data.thumbnail : data.thumbnail; + entry += '' + data.title + ''; + entry += ''; + entry += '
    '; + entry += '' + data.title + ' '; + entry += '(' + data.domain + ')'; + entry += '
    '; + entry += 'submitted ' + prettyDate(ISODateString(new Date(data.created_utc * 1000))) + ' by '; + entry += '' + data.author + ' to'; + entry += '' + data.subreddit + ''; + entry += '
    '; + entry += '
    '; + entry += '' + data.num_comments + ' comments'; + entry += ''; + entry += '' + saveText + ''; + entry += '' + hiddenText + ''; + entry += 'report'; + entry += '
    '; + entry += '
    ' + entry += '
    • '; + 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'));