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
500
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
280
Django: The web framework for perfectionists with deadlines
dellsystem
0
370
Git and GitHub: an introduction
dellsystem
2
240
What's in a name? Using first names as features for gender inference in Twitter
dellsystem
1
380
diva.js: A web-based document viewer for high-resolution images
dellsystem
0
340
Other Decks in Programming
See All in Programming
Google's Recipe for Scaling (Web) Security – LocoMocoSec 2024
lweichselbaum
0
170
Introduction of Happy Eyeballs Version 2 (RFC8305) to the Socket library
coe401_
1
220
大規模マルチテナントを解決するYugabyteDBという選択肢
nnaka2992
1
250
APIのない大学ログインWebサービスをWKWebViewとJavaScriptでアプリ化した話
akidon0000
1
330
Android開発者のための Kotlin Multiplatform入門
ntaro
0
190
入社1ヶ月でここまでやった!Findy Toolsインフラ支援の最適化
rvirus0817
6
1.4k
コード生成を伴うLLMエージェント - 2024.07.18 Tokyo AI
smiyawaki0820
11
4.1k
わかりやすい正解を捨てて、コトに向き合う - スクラムフェス金沢2024 スポンサーセッション
yusukekokubo
0
170
DDDを志して3年経ったら「DDDの皮を被ったクリーンアーキテクチャ」になった話【デブサミ2024夏】
texmeijin
1
620
最近追加した型の紹介とその振り返り
aki19035vc
0
180
開発部に不満を持っていたCSがエンジニアにジョブチェンしてわかった「勝手に諦めない」ことの大切さ
sakuraikotone
28
16k
社内 LT 会を発足し、アウトプット文化を醸成させるために考えたこと・やったこと / Starting internal LT meetings and fostering an output culture
mackey0225
3
120
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
134
6.5k
The Illustrated Children's Guide to Kubernetes
chrisshort
39
47k
The Mythical Team-Month
searls
217
43k
Side Projects
sachag
451
42k
Building Effective Engineering Teams - LeadDev
addyosmani
47
2.2k
The Power of CSS Pseudo Elements
geoffreycrofte
64
5.2k
Optimizing for Happiness
mojombo
373
69k
Why Our Code Smells
bkeepers
PRO
332
56k
Robots, Beer and Maslow
schacon
PRO
157
8.1k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
90
47k
Mobile First: as difficult as doing things right
swwweet
219
8.8k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
17
8.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