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
300
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
340
Git and GitHub: an introduction
dellsystem
2
230
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
Try creating your own orderedmap
kazamori
1
200
Anthropic Cookbook のおすすめレシピ
schroneko
7
1.2k
PostmanでAPIの動作確認が楽になった話
h455h1
0
180
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
mizdra
7
970
業務ツールとして使うPostman
msys75
0
100
AmperとFleetを使ったAndroidアプリ
yoppie
0
260
SwiftUIで使いやすいToastの作り方 / How to build a Toast system which is easy to use in SwiftUI
lovee
3
170
ServerAction で Progressive Enhancement はどこまで頑張れるか? / progressive-enhancement-with-server-action
takefumiyoshii
6
430
Git Rebase
bkuhlmann
11
1.6k
Komplexe Oberflächen mit SVG und der Web Animation API
joergneumann
0
680
StoreKit2によるiOSのアプリ内課金のリニューアル
kangnux
0
120
Exploring the Implementation of “t.Run”, “t.Parallel”, and “t.Cleanup”
akarin
1
120
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
358
22k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
126
32k
Facilitating Awesome Meetings
lara
43
5.6k
Code Review Best Practice
trishagee
56
15k
For a Future-Friendly Web
brad_frost
172
9k
Raft: Consensus for Rubyists
vanstee
133
6.3k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
275
13k
Clear Off the Table
cherdarchuk
85
310k
GraphQLの誤解/rethinking-graphql
sonatard
55
9.3k
How STYLIGHT went responsive
nonsquared
92
4.8k
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.2k
Typedesign – Prime Four
hannesfritz
36
2.1k
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