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
520
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
310
Git and Github: Tips and tricks
dellsystem
2
380
Git and Github: version control for the 21st century
dellsystem
1
290
Django: The web framework for perfectionists with deadlines
dellsystem
0
400
Git and GitHub: an introduction
dellsystem
2
250
What's in a name? Using first names as features for gender inference in Twitter
dellsystem
1
420
diva.js: A web-based document viewer for high-resolution images
dellsystem
0
340
Other Decks in Programming
See All in Programming
令和トラベルにおけるコンテンツ生成AIアプリケーション開発の実践
ippo012
1
200
아직도 SOLID 를 '글'로만 알고 계신가요?
sh1mj1
0
310
Drawing Heighway’s Dragon- Recursive Function Rewrite- From Imperative Style in Pascal 64 To Functional Style in Scala 3
philipschwarz
PRO
0
220
Rails 1.0 のコードで学ぶ find_by* と method_missing の仕組み / Learn how find_by_* and method_missing work in Rails 1.0 code
maimux2x
1
290
Generative AI for Beginners .NETの紹介
tomokusaba
1
240
Webフレームワークとともに利用するWeb components / JSConf.jp おかわり
spring_raining
1
170
フロントエンドオブザーバビリティ on Google Cloud
yunosukey
0
140
GDG Super.init(version=6) - From Where to Wear : 모바일 개발자가 워치에서 발견한 인사이트
haeti2
0
480
Goで作るChrome Extensions / Fukuoka.go #21
n3xem
2
2.1k
CTFのWebにおける⾼難易度問題について
hamayanhamayan
0
320
ローコードサービスの進化のためのモノレポ移行
taro28
1
210
보일러플레이트 코드가 진짜 나쁜 건가요?
gaeun5744
0
320
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
48
7.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
115
51k
Documentation Writing (for coders)
carmenintech
69
4.7k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
134
33k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.5k
Producing Creativity
orderedlist
PRO
344
40k
Embracing the Ebb and Flow
colly
84
4.6k
Making Projects Easy
brettharned
116
6.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