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
490
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
290
Git and Github: Tips and tricks
dellsystem
2
370
Git and Github: version control for the 21st century
dellsystem
1
270
Django: The web framework for perfectionists with deadlines
dellsystem
0
330
Git and GitHub: an introduction
dellsystem
2
220
What's in a name? Using first names as features for gender inference in Twitter
dellsystem
1
360
diva.js: A web-based document viewer for high-resolution images
dellsystem
0
330
Other Decks in Programming
See All in Programming
脱・初心者!脱・マネコン!AWS CDKを使ってみませんか!?
har1101
0
180
WebComponentsで フレームワークを1ページに共存させる
webuilder240
0
150
デザインシステムで Tailwind CSSとCSS in JSに分散投資をしたら良かった話
fsubal
14
3.5k
Dockerで始めるAWS Lambda開発
stutkhd0709
14
2.5k
CircleCIを活用して AWSへの継続的デリバリーを 実践する
coconala_engineer
1
110
Compiling Python to WebAssembly with py2wasm
syrusakbary
0
140
Why 1 + 1 = 2 in Swift?
1plus4
1
250
自動テスト実行結果の目的を整理する / Organizing objectives of automated test results
twada
PRO
10
2.1k
OpenTelemetry のサービスという概念について
azukiazusa1
1
410
受託開発でGitLab CI を活用していく
xiombatsg
1
130
プロンプトエンジニアリング入門
tomokusaba
2
990
LPIXEL×CADDi_kaerururu
kaerururu
3
300
Featured
See All Featured
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
178
11k
Designing on Purpose - Digital PM Summit 2013
jponch
109
6.4k
jQuery: Nuts, Bolts and Bling
dougneiner
57
7.1k
Debugging Ruby Performance
tmm1
68
11k
The World Runs on Bad Software
bkeepers
PRO
60
6.6k
Fireside Chat
paigeccino
19
2.6k
Thoughts on Productivity
jonyablonski
57
3.8k
Stop Working from a Prison Cell
hatefulcrawdad
265
19k
Build The Right Thing And Hit Your Dates
maggiecrowley
23
1.9k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
242
20k
WebSockets: Embracing the real-time Web
robhawkes
59
6.9k
The Brand Is Dead. Long Live the Brand.
mthomps
48
22k
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