From 40c86d166a9ab3b675087dd6c96eb09713757224 Mon Sep 17 00:00:00 2001 From: Jakub Skoczen Date: Thu, 4 Mar 2010 12:46:40 +0100 Subject: [PATCH] Render/clear HTML faster, bug #2856 Uses ideas from http://blog.stevenlevithan.com/archives/faster-than-innerhtml --- www/jsdemo/example_client.js | 90 +++++++++++++++++++++++++----------------- 1 file changed, 54 insertions(+), 36 deletions(-) diff --git a/www/jsdemo/example_client.js b/www/jsdemo/example_client.js index 2b10465..e67f107 100644 --- a/www/jsdemo/example_client.js +++ b/www/jsdemo/example_client.js @@ -55,27 +55,27 @@ function my_onshow(data) { drawPager(pager); // navi var results = document.getElementById("results"); - results.innerHTML = ""; - + + var html = ''; for (var i = 0; i < data.hits.length; i++) { var hit = data.hits[i]; - var html = '
' + html += '
' +''+ (i + 1 + recPerPage * (curPage - 1)) +'. ' +'' - + hit["md-title"] +' '; - if (hit["md-title-remainder"] !== undefined) { - html += '' + hit["md-title-remainder"] + ' '; - } - if (hit["md-title-responsibility"] !== undefined) { - html += ''+ hit["md-title-responsibility"] +''; - } - html += '
'; - results.innerHTML += html; + + hit["md-title"] +' '; + if (hit["md-title-remainder"] !== undefined) { + html += '' + hit["md-title-remainder"] + ' '; + } + if (hit["md-title-responsibility"] !== undefined) { + html += ''+ hit["md-title-responsibility"] +''; + } if (hit.recid == curDetRecId) { - drawCurDetails(); + html += renderDetails(curDetRecData); } + html += '
'; } + replaceHtml(results, html); } function my_onstat(data) { @@ -130,12 +130,15 @@ function my_onterm(data) { } function my_onrecord(data) { + // FIXME: record is async!! + clearTimeout(my_paz.recordTimer); // in case on_show was faster to redraw element var detRecordDiv = document.getElementById('det_'+data.recid); - if ( detRecordDiv ) - return; + if (detRecordDiv) return; curDetRecData = data; - drawCurDetails(); + var recordDiv = document.getElementById('recdiv_'+curDetRecData.recid); + var html = renderDetails(curDetRecData); + recordDiv.innerHTML += html; } function my_onbytarget(data) { @@ -324,40 +327,54 @@ function switchView(view) { } // detailed record drawing -function showDetails ( prefixRecId ) { +function showDetails (prefixRecId) { var recId = prefixRecId.replace('rec_', ''); + var oldRecId = curDetRecId; + curDetRecId = recId; // remove current detailed view if any - var detRecordDiv = document.getElementById('det_'+curDetRecId); + var detRecordDiv = document.getElementById('det_'+oldRecId); // lovin DOM! - if ( detRecordDiv ) - detRecordDiv.parentNode.removeChild(detRecordDiv); + if (detRecordDiv) + detRecordDiv.parentNode.removeChild(detRecordDiv); - // if the same clicked do not redraw - if ( recId == curDetRecId ) { + // if the same clicked, just hide + if (recId == oldRecId) { curDetRecId = ''; + curDetRecData = null; return; } - - curDetRecId = recId; // request the record my_paz.record(recId); } -function drawCurDetails () +function replaceHtml(el, html) { + var oldEl = typeof el === "string" ? document.getElementById(el) : el; + /*@cc_on // Pure innerHTML is slightly faster in IE + oldEl.innerHTML = html; + return oldEl; + @*/ + var newEl = oldEl.cloneNode(false); + newEl.innerHTML = html; + oldEl.parentNode.replaceChild(newEl, oldEl); + /* Since we just removed the old element from the DOM, return a reference + to the new element, which can be used to restore variable references. */ + return newEl; +}; + +function renderDetails(data, marker) { - var data = curDetRecData; - var recordDiv = document.getElementById('recdiv_'+data.recid); - var details = ""; + var details = '
'; + if (marker) details += ''; if (data["md-title"] != undefined) { details += ''; + if (data["md-title-remainder"] !== undefined) { + details += ' : ' + data["md-title-remainder"] + ' '; + } + if (data["md-title-responsibility"] !== undefined) { + details += ' '+ data["md-title-responsibility"] +''; + } + details += ''; } if (data["md-date"] != undefined) details += ''; @@ -369,6 +386,7 @@ function drawCurDetails () details += ''; if (data["location"][0]["@name"] != undefined) details += ''; - recordDiv.innerHTML += '
'+ marker + '
Title: '+data["md-title"]; - if (data["md-title-remainder"] !== undefined) { - details += ' : ' + data["md-title-remainder"] + ' '; - } - if (data["md-title-responsibility"] !== undefined) { - details += ' '+ data["md-title-responsibility"] +''; - } - details += '
Date: ' + data["md-date"] + '
Subject: ' + data["location"][0]["md-subject"] + '
Location: ' + data["location"][0]["@name"] + " (" +data["location"][0]["@id"] + ")" + '
' + details + '
'; + details += ''; + return details; } //EOF -- 1.7.10.4