This document discusses techniques for improving JavaScript performance, including: - Using for loops instead of foreach loops for improved speed when iterating over arrays - Memoization to cache function results and avoid repeated computations - Lazy evaluation with libraries like underscore.js to defer computation until results are needed - Parallelization using functional programming techniques like liftA3 to run operations concurrently - Compile-time optimizations like loop fusion that rearrange code to reduce operations The document emphasizes that functional programming allows optimizations like these through composability and avoiding side effects.

1. Ricky Bobby’s world
A look into the js performance

2. We’re speed freaks

20. [dahl]

24. Perf Paranoia

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

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

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

34. Speed Maintainability

35. 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);

36. 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

37. 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;
}

38. var iterations = Math.floor(values.length / 8);
var leftover = values.length % 8;
var i = 0;
if (leftover > 0){
do {
process(values[i++]);
} while (--leftover > 0);
}
do {
process(values[i++]);
process(values[i++]);
process(values[i++]);
process(values[i++]);
process(values[i++]);
process(values[i++]);
process(values[i++]);
process(values[i++]);
} while (--iterations > 0);
Loop unrolling
values.forEach(processData)

39. This is a tiny town…

45. ”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.”

48. Angels in the outfield

49. JavaScript is a single threaded,
interpreted language

51. Meanwhile…

55. Enter the declarative

57. var result = [];
for(var i=0, len=users.length; i < len; i++) {
if(users[i].name.length > 0) {
result.push(users[i]);
}
}
return result;
users.filter(function(u){
return u.name.length > 0
})
declarative
imperative

58. 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 });

59. PART 2

60. 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

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

62. 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']

63. It works for Functors and
Monads too!

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

65. 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);
});
});

66. 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);

67. 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();
}

68. 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

69. It works for Functors and
Monads too!

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

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

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

73. 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

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

76. It works for Functors and
Monads too!

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

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

79. Parallel code
add(2, 3, 5)

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

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

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

83. It works for Functors and
Monads too!

84. 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’

85. 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’

86. Lazy code

87. Lazy code

88. It works for Functors and
Monads too!

90. Just a handful

91. THANKS!
@drboolean