Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Optimising your JavaScript
Search
Wendy Liu
February 26, 2014
Programming
1
530
Optimising your JavaScript
Presented at ConFoo (
http://confoo.ca/en/2014/session/optimising-your-javascript
)
Wendy Liu
February 26, 2014
Tweet
Share
More Decks by Wendy Liu
See All by Wendy Liu
Git and Github: Version control for a happier you
dellsystem
0
320
Git and Github: Tips and tricks
dellsystem
2
390
Git and Github: version control for the 21st century
dellsystem
1
300
Django: The web framework for perfectionists with deadlines
dellsystem
0
420
Git and GitHub: an introduction
dellsystem
2
260
What's in a name? Using first names as features for gender inference in Twitter
dellsystem
1
450
diva.js: A web-based document viewer for high-resolution images
dellsystem
0
360
Other Decks in Programming
See All in Programming
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
300
XP, Testing and ninja testing
m_seki
3
180
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
1k
F#で自在につくる静的ブログサイト - 関数型まつり2025
pizzacat83
1
310
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
160
CursorはMCPを使った方が良いぞ
taigakono
1
170
Is Xcode slowly dying out in 2025?
uetyo
1
190
ニーリーにおけるプロダクトエンジニア
nealle
0
360
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
190
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
1
340
Team operations that are not burdened by SRE
kazatohiei
1
200
WindowInsetsだってテストしたい
ryunen344
1
190
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
233
140k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Documentation Writing (for coders)
carmenintech
71
4.9k
Balancing Empowerment & Direction
lara
1
370
Typedesign – Prime Four
hannesfritz
42
2.7k
GraphQLとの向き合い方2022年版
quramy
47
14k
It's Worth the Effort
3n
185
28k
The Cult of Friendly URLs
andyhume
79
6.5k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
Transcript
optimising your javascript Wendy Liu February 26, 2014 :: ConFoo
BEFOre we begin ... Is optimisation even necessary?
IF SO ... What should you optimise?
PROFILING Chrome: bit.ly/chromeprofiler
tradeoffs Performance vs. readability
None
optimisation tips
faster code delivery Minimisation CDNs GZIP compression
event-handling Use a library Delegation
event-handling Use a library Delegation <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li>
... </ul>
unnecessary work Don't do it Check before calling Throttle event-handling
speeding up code Native functions Combine timers Avoid anything eval-like
speeding up code Native functions Combine timers Avoid anything eval-like
for (...) { element = $(...); ... }
speeding up code Native functions Combine timers Avoid anything eval-like
for (...) { element = document.getElementById(...); ... }
speeding up code Native functions Combine timers Avoid anything eval-like
setTimeout('someFunction', 1000); setTimeout(someFunction, 1000)
don't use: with try-catch in a loop globals for in
speeding up code Cache out of scope variables Cache array.length
String-building Cache calculations someFunction = someObject.someFunction; for (...) { someFunction(...); }
speeding up code Cache out of scope variables Cache array.length
String-building Cache calculations for (var i = 0, l = arr.length; i < l; i++) { ... }
speeding up code Cache out of scope variables Cache array.length
String-building Cache calculations var stringBuilder = []; for (...) { stringBuilder.push('a'); } var string = stringBuilder.join('');
speeding up code Cache out of scope variables Cache array.length
String-building Cache calculations
working with the dom Use CSS Keep it small (virtual
rendering) Minimise reflows/repaints position: absolute; left: 50%; margin-left: -200px; width: 400px;
Minimising reflows innerHTML/$.html over creating nodes Batch setting styles Stay
low in the DOM tree Detach/hide nodes
Minimising reflows Cache node properties Position: fixed/absolute for animations Avoid
tables for layout
HEAVY frameworks Do you really need them?
caching AJAX requests Server-side scripts Client-side caching (localStorage)
using prototypes properly Functions Value-type instance variables var Person =
function() {}; Person.prototype.doSomething = function(...) { ... }; var Person = function() { this.doSomething = function(...) { ... }; };
avoid closures Source of memory leaks Reuse static functions Adds
level to scope chain
faking it Loading screens Thumbnail previews for images Pre-loading
more resources Google/Stackoverflow jsperf.com bit.ly/canvas-perf bit.ly/high-performance-js (book) bit.ly/google-optimising-js bit.ly/repaint-reflow bit.ly/chrome-profiler
bit.ly/js-var-access
thanks! @dellsystem