There is a general perception that apps built using HTML, CSS,
and JavaScript are slow. (Hint: We are going to change that in this
session)
Slide 5
Because science!
Slide 6
// The Basics
Slide 7
Apache Cordova apps are written in HTML, CSS, and JavaScript
that can also access native device capabilities.
Slide 8
Cordova apps are web applications that run inside a native
application. This allows you to use HTML, CSS, and JavaScript to
build your app while still having access to your devices hardware
capabilities! Native Wrapper Your JavaScript App Cordova Plugin JS
API
Slide 9
What does it mean for something to be fast and responsive?
Slide 10
Interaction Classes
Slide 11
What we care about!
Slide 12
Methodology
Slide 13
Slide 14
1. The Webview Tax 2. Document Object Model (DOM) 3. Images 4.
Animation 5. Garbage Collection 6. UI Controls
Bad for (var i = b.children.length - 1; i >= 0; i--) {
b.children[i].style.left = b.children[i].offsetLeft + "px";
b.children[i].style.top = b.children[i].offsetTop + "px"; }
Slide 36
Good for (var i = b.children.length - 1; i >= 0; i--) {
topPx[i] = b.children[i].offsetTop; leftPx[i] =
b.children[i].offsetLeft; } for (var i = b.children.length - 1; i
>= 0; i--) { b.children[i].style.left = leftPx[i] + "px";
b.children[i].style.top = topPx[i] + "px"; }
Slide 37
Fast List Scrolling
Slide 38
Slide 39
Memory Usage: Virtualized List vs. Non-Virtualized List
Slide 40
Use virtualization When working with large amounts of data,
only work with the data you need to display content on the screen.
(Popular control frameworks like WinJS, Ionic, Onsen UI, Kendo UI
and others help handle this for you.)
Bad function createElements() { for (var i = 0; i < 100;
++i) { var xBtn = document.createElement('button');
xBtn.setAttribute('value', 'AA'); xBtn.addEventListener('click',
hi, false); containerDiv.appendChild(xBtn); xBtn = null; } function
clearElements() { containerDiv.innerHTML = ""; }
Slide 61
Good function createElements() { for (var i = 0; i < 100;
++i) { var xBtn = document.createElement('button');
xBtn.setAttribute('value', 'AA'); xBtn.addEventListener('click',
hi, false); containerDiv.appendChild(xBtn); xBtn = null; } function
clearElements() { var els = containerDiv.childNodes; for (var i =
0; i < els.length; i++) { els[i].removeEventListener('click',
hi, false); containerDiv.removeChild(els[i]); }
Slide 62
Minimize Unnecessary Event Listeners
Slide 63
/* bad *//* good */
Slide 64
Lets say you want to listen to a click event on the elements
with the id value of one, two, three, four, and five. Note: They
share a common parent with the theDude element!
Slide 65
Slide 66
Slide 67
Bad // ONE FUNCTION FOR EACH EVENT LISTENER for (i = 0; i <
100; i++){ img[i].addEventListener("click", function
clickListener(e) { var clickedItem = e.target.id; alert("Hello " +
clickedItem); }); }
Slide 68
Good var theParent = document.querySelector("#theDude");
theParent.addEventListener("click", doSomething, false); function
doSomething(e) { if (e.target !== e.currentTarget) { var
clickedItem = e.target.id; alert("Hello " + clickedItem); }
e.stopPropagation(); }
Slide 69
Pay Attention to Memory Leaks
Slide 70
Slide 71
Slide 72
Bad // el is in the global scope, so it persists with the
document var el; function doSomething() { el =
document.createElement('div'); parent.appendChild(el); } function
empty() { parent.innerHTML = ""; }
Slide 73
Good // el is in the local scope, so expires with the function
function doSomething() { var el = document.createElement('div');
parent.appendChild(el); } function empty() { parent.innerHTML = "";
}
![Interrupt Priorities Soþuare via Interrupt - USENIX · Setting Interrupt Priorities in Soþuare via Interrupt Queueing Geoff Collyer Bell Laboratories ... [Kernighan & Ritchie 1978]](https://img.pdfslide.us/doc/110x75/5c8a77bf09d3f22e408bf5b1/interrupt-priorities-sobuare-via-interrupt-usenix-setting-interrupt-priorities.jpg)
