Optimize compiled templates #87

omarkhan · 2011-10-20T21:55:52Z

I have been experimenting with optimizing coffeekup templates using UglifyJS to analyze the template source and prerender the html. The idea is to turn this:

function() {
  //
  // Lots of boilerplate code...
  //
  html(function() {
    head(function() {
      return title(this.title);
    });
    return body(function() {
      h1(this.title);
      return p('Super fast templates');
    });
  });}).call(data);return __ck.buffer.join('');
}

into this:

function() {
  //
  // Much less boilerplate
  //
  ((function() {
    text("<!DOCTYPE html>");
    text("<html>");
    text(function() {
      text("<head>");
      text(function() {
        return function() {
          text("<title>");
          text(this.title);
          text("</title>");
        }.call(data);
      }.call(data));
      text("</head>");
      return function() {
        text("<body>");
        text(function() {
          text("<h1>");
          text(this.title);
          text("</h1>");
          return function() {
            text("<p>");
            text("Super fast templates");
            text("</p>");
          }.call(data);
        }.call(data));
        text("</body>");
      }.call(data);
    }.call(data));
    text("</html>");
  })).call(data);return __ck.buffer;
}

The advantages of this approach are shorter template functions (unless the template is very long) thanks to reduced boilerplate, and faster execution owing to much of the work being done at compile time. A further performance improvement is achieved by using string concatenation rather than array join to build the output. Here are my benchmark results, running a compiled template 5000 times on node:

CoffeeKup (precompiled): 263 ms
CoffeeKup (precompiled, optimized): 24 ms
Jade (precompiled): 530 ms
haml-js (precompiled): 89 ms
Eco: 92 ms

See here for browser rendering performance: http://jsperf.com/coffeekup-optimized/2

As far as I can tell, these optimizations give a 10x performance boost on node, a 30x boost in Chrome and a more modest 3x improvement in Firefox.

Usage

template = coffeekup.compile 'h1 @title', optimize: yes
template(title: 'Super fast template')
# '<h1>Super fast template</h1>'

Caveats

As this compiler uses static analysis to optimize your templates, too much complex logic may cause it to fall over. But templates should be logic-free so that shouldn't be a problem, right?

I have aimed for API compatibility with regular coffeekup, but there are a few differences to be aware of:

The coffeescript helper function does not add "text/coffeescript" to the <script> tag. I could implement this, but it doesn't strike me as very useful.
Output formatting is not implemented (yet). You get a single line of html.
Arrays are not rendered directly in the template output. Join them into a string before passing them to the compiled template function.
You can't set up a hash of options and then pass it to the tag function, e.g.

attrs =
  name: 'email'
  type: 'text'
input attrs

Do this instead:

input
  name: 'email'
  type: 'text'

I have made some minor modifications to the test suite to account for the above.

…ests adjusted accordingly

flosse · 2011-11-27T03:30:14Z

Great work!

wmertens · 2012-03-30T08:32:37Z

I wish github had a +1 button, this is awesome! I know it's in https://github.com/gradus/coffeecup now but I just wanted to express my awe :-)

gradus · 2012-03-30T10:30:47Z

@wmertens

It does. Just type.

+1

Omar Khan added 30 commits October 18, 2011 00:28

Simplified executable

ab4a134

Added basic optimised compiler

c029eba

Get exports from main script

f22d1b4

Removed function wrapper

f4becea

Added hardcoded locals

f8a1739

Compiler can handle tag arguments other than functions and objects

0d53c78

Wrap compiled code in bound function to preserve scope

6f2f320

Unwrap calls to tag functions from function wrapper when not needed

42952c0

Fixed function wrapper

61adb49

Hardcoded locals also checked for markup tags

bf775ed

Added doctype

cf5fb39

Allow for tags without content

53039fd

Removed broken jade benchmarks

c87c3ee

Merge branch 'master' into optimize

362152a

Skeleton test() function takes numbers as well as strings

cce76e0

Code cleanup, comments

5b50c62

Added escape function h() to skeleton

3ba8a58

Added tag() function

631b630

Added comment() function

43ee3fc

Don't try to put too much in a single call to text()

8ac5838

Refactor

e01a404

Added support for script and coffeescript functions

ecb2c59

Comments for clarity

571732c

Do not parse id class string for script tags

48700e0

Fixed coffeescript tag function

060acd3

Added locals option

83f98b1

Added ie conditional comment helper

064faff

Tag functions can handle prefixed attributes

2d9611f

Boolean true in tag attrs rendered as selected="selected"

04cda25

Functions can be passed to tag attrs object

000dc5e

Omar Khan added 27 commits October 20, 2011 12:53

Do not escape calls to yield

87fc65e

Escape tag contents by default

85d1302

Escape return values of functions passed as arguments to tag functions

7267231

Escape dynamically generated html comments

c094b0d

ie helper allows for dynamic conditions

f667ee7

Fixed coffeescript helper

b817c05

Default doctype

147b194

Tests run from command line

83ab4a1

Self-closing tag tweak so that test passes

7d38b5d

Optimized compiler does not escape literal strings in the template, t…

39a48f0

…ests adjusted accordingly

text() function accepts arrays

196fb6f

Code object can generate if blocks

e0b07c4

Functions passed as object attributes are prerendered as text

7d2ec29

Minor tweak to expected test result

e384f60

Minor refactor

064c2c5

Modified ie conditional comment test: formatting not yet supported

0b507bb

Added optimize option

8d4f3ae

Created separate test suite for optimized templates

edcbd37

Do not optimize templates when cache is off

db169a2

Benchmark optimized templates

af483dc

Escape hardcoded string literals

cb44056

Fixed tests

1dacf02

Updated package.json

d23557e

text() does not render arrays

41653d7

Use string concatenation instead of array join

e7e992f

Added precompiled eco template benchmark

6ca8b69

Bugfix: missing 'var' before skeleton variables

2285f55

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Optimize compiled templates #87

Optimize compiled templates #87

omarkhan commented Oct 20, 2011

flosse commented Nov 27, 2011

wmertens commented Mar 30, 2012

gradus commented Mar 30, 2012

Optimize compiled templates #87

Are you sure you want to change the base?

Optimize compiled templates #87

Conversation

omarkhan commented Oct 20, 2011

Usage

Caveats

flosse commented Nov 27, 2011

wmertens commented Mar 30, 2012

gradus commented Mar 30, 2012