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
それ CLI フレームワークがなくてもできるよ / Building CLI Tools Without Frameworks
orgachem
PRO
17
3.6k
Bedrock AgentCore ObservabilityによるAIエージェントの運用
licux
8
560
DynamoDBは怖くない!〜テーブル設計の勘所とテスト戦略〜
hyamazaki
0
180
TypeScriptでDXを上げろ! Hono編
yusukebe
4
930
CLI ツールを Go ライブラリ として再実装する理由 / Why reimplement a CLI tool as a Go library
ktr_0731
3
950
0から始めるモジュラーモノリス-クリーンなモノリスを目指して
sushi0120
0
250
React は次の10年を生き残れるか:3つのトレンドから考える
oukayuka
41
16k
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
520
階層化自動テストで開発に機動力を
ickx
1
470
Go製CLIツールをnpmで配布するには
syumai
2
1.1k
Gemini CLIの"強み"を知る! Gemini CLIとClaude Codeを比較してみた!
kotahisafuru
3
910
Comparing decimals in Swift Testing
417_72ki
0
160
Featured
See All Featured
Faster Mobile Websites
deanohume
308
31k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Being A Developer After 40
akosma
90
590k
Embracing the Ebb and Flow
colly
86
4.8k
Mobile First: as difficult as doing things right
swwweet
223
9.9k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
A Tale of Four Properties
chriscoyier
160
23k
Six Lessons from altMBA
skipperchong
28
3.9k
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