Ricky Bobby's World

Ricky Bobby’s world
A look into the js performance

for loop vs foreach search
13,317,048
4,336,225

var result = [];
for(var i=0, len=arr.length; i < len; i++) {
result.push(doSomething(arr[i]));
}
return result;
For loops are faster!
arr.map(doSomething);

MyFramework.CSS
MyFramework.Animations
MyFramework.Http
MyFramework.Socket
PROPERTY LOOKUPS
"Nesting objects in order to use dot notation is a great way to namespace and organize your code. Unfortunately, w
http://www.phpied.com/extreme-javascript-optimization/
MyFramework.Rendering.CSS
MyFramework.Rendering.Animations
MyFramework.Network.Http
MyFramework.Network.Socket

var Fn1 = 0;
var Fn2 = 1;
function nextFibonacci() {
var f1 = Fn1,
f2 = Fn2,
f3 = f1 + f2;
Fn1 = f2;
Fn2 = f3;
return f3;
}
Global Variable Caching
var Fn1 = 0;
var Fn2 = 1;
function nextFibonacci() {
var ret = Fn1 + Fn2;
Fn1 = Fn2;
Fn2 = ret;
return ret;
}

”you are not allowed to care about the performance of * unless you
concatenate all your javascript, have it at the bottom, minify your css and
js, gzip all your assets, and losslessly compress all your images. If you
aren’t getting 90+ Page Speed scores, it’s way too early to be thinking
about selector optimization.”

JavaScript is a single threaded,
interpreted language

59 // src :: FlickrItem -> URL
60 var src = compose(_.get('m'), _.get('media'));
61
62 // srcs :: FlickrSearch -> [URL]
63 var srcs = compose(map(src), _.get('items'));
64
65 // images :: FlickrSearch -> [DOM]
66 var images = compose(map(imageTag), srcs);
67
68 // tags :: FlickrSearch -> [DOM]
69 var tags = compose(toP, _.countBy(_.identity), _.filter(_.isEmpty), chain(split(' '
70
71 // imagesAndTags :: Tuple [DOM] [DOM]
72 var imagesAndTags = liftA2(Tuple, images, tags)
73
74 // widget :: String -> PictureBox
75 var widget = compose(PictureBox, map(imagesAndTags), getJSON, url);
76
77 ///////////////////////////////////////////////////////////////////////////////////
78
79 mconcat([widget('cats'), widget('dogs')]).fork(log, function(x){
80 compose(setHtml($('#flickr')), _.first)(x)
81 compose(setHtml($(‘#tag_cloud')), _.last)(x)
82 });
83 });

compose(map(g), map(f)) == map(compose(g, f))
chain(xs).map(f).map(g).value() == chain(xs).map(compose(g, f)).value()
Loop Fusion

Loop Fusion
var bigFirst = compose(map(first), map(capitalize))
var bigFirst = map(compose(first, capitalize))
bigFirst(['ham', 'cake']) // ['H', 'C']

Loop Fusion
var bigFirst = function(xs) {
return chain(xs).map(capitalize).map(first).value()
}
var bigFirst = function(xs) {
return chain(xs).map(compose(first, capitalize)).value()
}
bigFirst(['ham', 'cake']) // ['H', 'C']

It works for Functors and
Monads too!

Shortcut Fusion
// g :: forall b. (t -> b -> b) -> b -> b
reduce(c, n, build(g)) = g(c, n)

Shortcut Fusion
//build :: (forall b. (a -> b -> b) -> b -> b) -> [a]
var build = function(g){
return g(concat, []);
}
//+ map :: (a -> b) -> [a] -> [b]
var map = curry(function(f, xs){
return build(function(c, n){
return reduce(function(acc, x){ return c(f(x), acc); }, n, xs);
});
});

Shortcut Fusion
var sum = reduce(add, 0);
var sqr = function(x) {return x * x }
var sumSqs = compose(sum, map(sqr))
// reduce(function(acc, x){ return add(sqr(x), acc) }, 0);

Shortcut Fusion
var sum = reduce(add, 0);
var sqr = function(x) {return x * x }
var sumSqs = function(xs) {
return chain(xs).map(sqr).sum().value()
// chain(xs).reduce(function(acc, x){ return add(sqr(x), acc) }, 0).value();
}

Good Producers
• List comprehensions
• concat
• foldr
• map
• take
• filter
• partition
• head
• and, or, any, all
• sequence
• sortBy
• zip
• zipWith
• List comprehensions
• Explicit lists
• cons
• concat
• map
• take
• filter
• iterate, repeat
• repeat
• zip
• zipWith
Good Consumers

var addTwenty = memoize(function(x) {
return x + 20;
})
Memoization

var addTwenty = memoize(function(x) {
return x + 20;
})
addTwenty(10) // 30
addTwenty(10) // 30 (didn't run)
addTwenty(11) // 31
Memoization

Memoization
var getPosts = memoize(function(id) {
return new Future(function(rej, res) {
$.getJSON('/posts/'+id, res);
});
});

Memoization
var getPosts = memoize(function(id) {
return new Future(function(rej, res) {
$.getJSON('/posts/'+id, res);
});
});
getPosts(2) // Future
getPosts(2) // Future (didn't run)
getPosts(3) // Future

Memoization
var pQuery = $.toIO()
pQuery(".troll") // IO(function(){ return $(".troll") })
pQuery.runIO() // [Dom, Dom]
pQuery.runIO() // [Dom, Dom, Dom]

Parallel code
f(f(x, y), z) == f(x, f(y, z))

Parallel code
add(add(2, 3), 5) == add(2, add(3, 5))

Parallel code
liftA3(fn, A1, A2, A3)

Parallel code
var longCalc // Int -> Future(Int)
var collectResults = curry(function(rslt1, rslt2, rslt3){})
liftA3(collectResults, longCalc(20), longCalc(30), longCalc(10))

Parallel code
var hasName // Attrs -> Validation
liftA3(save, hasName, hasEmail, hasPhone)

Compile while you
compose
var characters = [
{ 'name': 'barney', 'age': 36 },
{ 'name': 'fred', 'age': 40 },
{ 'name': 'pebbles', 'age': 1 }
];
var youngest = _.chain(characters)
.sortBy('age')
.map(function(chr) { return chr.name + ' is ' + chr.age; })
.first()
.value();
// → 'pebbles is 1’

Ricky Bobby's World

More Related Content

What's hot (20)

Viewers also liked (7)

Similar to Ricky Bobby's World (20)

Recently uploaded (20)

Ricky Bobby's World