Ajax performance
This presentation is the property of its rightful owner.
Sponsored Links
1 / 52

Ajax Performance PowerPoint PPT Presentation


  • 36 Views
  • Uploaded on
  • Presentation posted in: General

Ajax Performance. Douglas Crockford Yahoo!. Memento. The Sessionless Web. Cookies for pseudosessions. Cookies enable CSRF attacks. Every action results in a page replacement. Pages are heavy, complicated, multipart things. The web is a big step backwards in individual productivity.

Download Presentation

Ajax Performance

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Ajax performance

AjaxPerformance

Douglas CrockfordYahoo!


Memento

Memento


The sessionless web

The Sessionless Web

  • Cookies for pseudosessions.

  • Cookies enable CSRF attacks.

  • Every action results in a page replacement.

  • Pages are heavy, complicated, multipart things.

  • The web is a big step backwards in individual productivity.


When your only tool is a hammer every problem looks like a webpage

“When your only tool is a hammer, every problem looks like a webpage.”


The ajax revolution

The Ajax Revolution

The page is an application with a data connection to a server.


Ajax performance

When the user does something, we send a JSON message to the server, and receive a JSON message as the result.


Ajax performance

A JSON message is less work for the server to generate, moves faster on the wire, and is less work for the browser to parse and render than an HTML document.


Ajax performance

NOT TO SCALE


Division of labor

Division of Labor

How is the application divided between the browser and the server?


Pendulum of despair

Pendulum of Despair

Server

The browser is a terminal.


Pendulum of despair1

Pendulum of Despair

Server Browser

The browser is a terminal

The server is a file system.


Seek the middle way

Seek the Middle Way.

A pleasant dialogue between specialized peers.


Ajaxify

Ajaxify

  • The client and server are in a dialog.

  • Make the messages between them as small as possible.

  • The client does not need a copy of the database. It just needs, at any moment, just enough information to serve the user.

  • Don't rewrite the server application in JavaScript!


The poor poor browser

The Poor, Poor Browser

  • The browser is a very inefficient application platform.

  • If your application becomes bloated, performance will be very bad.

  • Try to keep the client programming light.


Amazingly the browser works

Amazingly, the browser works

  • But it doesn't work well.

  • It is a difficult platform to work with.

  • There are significant security problems.

  • There are significant performance problems.

  • It was not designed to be an application delivery system.

  • Ajax pushes the browser really hard.


Correctness first

Correctness First

  • Do not worry about optimization until you have the application working correctly.

  • If it isn’t right, it doesn’t matter if it is fast.

  • Test for performance early.

  • Test in customer configurations:

    • Slow networks, slow computers.

    • Internal networks and developer-class machines can mask performance problems.


Premature optimization is the root of all evil donald knuth

Premature optimization is the root of all evil. — Donald Knuth

  • Use YSlow to reduce startup time.

  • Don't optimize until you need to, but find out as early as possible if you need to.

  • Clean, correct code is easier to optimize.

  • Tweaking is usually ineffective.

  • Sometimes restructuring or redesign is required.


Example

Example

var fibonacci = function (n) {

return n < 2 ? n :

fibonacci(n - 1) +

fibonacci(n - 2);

};

  • fibonacci(40)

  • Calls itself 331,160,280 times.


Memoizer

Memoizer

var memoizer = function (memo, fundamental) {

var shell = function (n) {

var result = memo[n];

if (typeof result !== 'number') {

result = fundamental(shell, n);

memo[n] = result;

}

return result;

};

return shell;

};


Memoizer1

Memoizer

var fibonacci =

memoizer([0, 1], function (recur, n) {

return recur(n - 1) + recur(n - 2);

});

  • fibonacci(40)

  • Calls itself 38 times.

  • The key to optimization is work avoidance.


Code quality

Code Quality

  • High quality code is most likely to avoid platform problems.

  • Code Conventions for the JavaScript Programming Language

  • http://javascript.crockford.com/code.html

  • Use JSLint.com. Pass with no warnings.


Avoid unnecessary displays or animation

Avoid unnecessary displays or animation.

  • Everything costs.

  • Wow costs.

  • As the number of widgets on the page increases, overall ongoing performance gets worse.


Only speed up things that take a lot of time

Only speed up things that take a lot of time.

Speeding up things that take very little time will yield very little improvement.


Only speed up things that take a lot of time1

A

B

C

D

Only speed up things that take a lot of time.

  • If profiling shows that you are spending most of your time in A, don't bother optimizing C.


Improving performance

Improving performance

  • If JavaScript were infinitely fast, most pages would run at about the same speed.

  • The bottleneck is the DOM interface.

  • There is a significant cost every time you touch the DOM tree.

  • Each touch can result in a reflow computation, which is expensive.


Touch lightly

Touch lightly

  • It is faster to manipulate new nodes before they are attached to the tree.

  • Touching unattached nodes avoids the reflow cost.

  • Setting innerHTML does an enormous amount of work, but browsers are really good at it, and it only touches the DOM once.


How ie8 spends its time

Rendering 27.25%

Layout 43.16%

Format 8.66%

Marshalling 7.34%

DOM 5.05%

JScript 3.23%

HTML 2.81%

Other 2.5%

How IE8 Spends Its Time

  • Average time allocation of the Alexa 100:


How ie8 spends its time1

Format 38.97%

JScript 14.43%

DOM 12.47%

Layout 9.41%

Rendering 9.21%

Marshalling 7.85%

Other 3.72%

HTML 1.57%

How IE8 Spends Its Time

  • Opening a thread in GMail:


Coding efficiency

Coding Efficiency

  • Common subexpression removal.

  • Loop invariant removal.

  • Most compilers in most programming languages do these optimizations for you.

  • But not JavaScript.


Before

Before

var i;

for (i = 0; i < divs.length; i += 1) {

divs[i].style.color = "black";

divs[i].style.border = thickness +

'px solid blue';

divs[i].style.backgroundColor = "white";

}


After

After

var border = thickness + 'px solid blue',

nrDivs = divs.length,

ds, i;

for (i = 0; i < nrDivs; i += 1) {

ds = divs[i].style;

ds.color = "black";

ds.border = border;

ds.backgroundColor = "white";

}


Strings

Strings

  • Concatenation with +

    • Each operation allocates memory

    • foo = a + b;

  • Concatenate with array.join('')

    • The contents of an array are concatenated into a single string

    • foo = [a, b].join('');


Don t tune for quirks

Don't Tune For Quirks

  • Some browsers have surprising inefficiencies.

  • A trick that is faster on Browser A might be slower on Browser B.

  • The performance characteristics of the next generation may be significantly different.

  • Avoid short-term optimizations.


Don t optimize without measuring

Don't Optimize Without Measuring

  • Intuitions are often wrong.

    • start_time = new Date().valueOf();

    • code_to_measured();

    • end_time = new Date().valueOf();

    • elapsed_time = end_time - start_time;

  • A single trial is unreliable. Timers can be off by as much as 15 msec.

  • Even accurate measurements can lead to wrong conclusions.


Ajax performance

O (1)

  • An operation that is performed only once is not worth optimizing.


Ajax performance

O (n)

  • An operation that is performed many times may be worth optimizing.

Slope: Time per Iteration

Time

Fixed time: Startup and cleanup

n


The axis of error

The Axis of Error

  • Inefficiency

Inefficiency

Time

n


The axis of error1

The Axis of Error

  • Frustration

Frustration

Time

n


The axis of error2

The Axis of Error

  • Failure

Failure

Time

n


Ajax performance

O (n)

Slope: Time per Iteration

Time

n


O n log n

O (n log n)

Time

n


O n 2

O (n2)

Generally not suitable for browser applications except when n is very small.

Time

n


The most effective way to make programs faster is to make n smaller

The most effective way to make programs faster is to make n smaller.

Ajax allows for just-in-time data delivery.


  • Login