ajax-perf.ppt
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (417.11 KB, 42 trang )
High Performance
Ajax Applications
Julien Lecomte
/> />Part 1
Developing For
High Performance
Planning and designing
for high performance
•
Plan for performance from day 1
•
Work closely with designers and product managers
•
Understand design rationale
•
Explain the tradeoffs between design and performance
•
Offer alternatives and show what is possible (prototype)
•
Challenge yourself to implement challenging designs (don't just say no)
•
Help simplify the design and interaction if needed (compromise)
Engineering high performance:
A few basic rules
•
Less is more
–
Don’t do anything unnecessary.
–
Don’t do anything until it becomes absolutely necessary.
•
Break the rules
–
Make compromises and break best practices, but only as a last resort!
•
Work on improving perceived performance
–
Users can deal with some reasonable amount of slowness if:
•
They are informed appropriately that an operation is pending.
•
The user interface remains reactive at all time.
–
Cheat whenever you can by first updating the UI and then do the work.
•
Need to “lock” all or part of the user interface.
Measuring performance
•
Test performance using a setup similar to your users’ environment
•
Profile your code during development
•
Automate profiling/performance testing
•
Keep historical records of how features perform
•
Consider keeping some (small amount of) profiling code in production
Part 2
High Performance
Page Load
Yahoo!'s Exceptional Performance
rules
1. Make Fewer HTTP Requests
2. Use a Content Delivery Network
3. Add an Expires Header
4. Gzip Components (including JS!)
5. Put CSS at the Top
6. Move Scripts to the Bottom
7. Avoid CSS Expressions
8. Make JavaScript and CSS External
9. Reduce DNS Lookups
10. Minify JavaScript
11. Avoid Redirects
12. Remove Duplicate Scripts
13. Configure ETags
14. Make Ajax Cacheable
See for more information.
•
A web page works in 3 (sometimes imbricated) stages:
1) load
2) render
3) run
•
These rules cover mostly the first stage.
Asset optimization
•
Minify CSS and JavaScript files:
–
Use the YUI Compressor [ ]
–
Stay away from so-called advanced compression schemes - like Packer
•
Combine CSS and JavaScript files:
–
At build time [ ]
–
At run time
•
Optimize image assets:
–
PngCrush [ ]
–
PngOptimizer [ ]
–
etc.
Reduce unminified code size
•
Loading and parsing HTML, CSS and JavaScript code is costly.
•
Be concise and write less code.
•
Make good use of JavaScript libraries.
•
Consider splitting your large JavaScript files into smaller files (bundles) when the parsing
and compilation of the script takes an excessive amount of time (Firefox bug #313967)
•
Load code (HTML, CSS and JavaScript) on demand (a.k.a “lazy loading”)
–
See />–
Use the YUI Loader
–
Dojo's package system
–
JSAN Import System
Optimize initial rendering (1/4)
Miscellaneous tips...
•
Consider rendering the first view on the server:
–
Be aware of the added page weight
–
You will still need to attach event handlers once the DOM is ready
•
Close Your HTML Tags to Speed Up Parsing:
–
Implicitly closed tags add cost to HTML parsing
–
/>•
Consider flushing the apache buffer very early on:
–
The download of external CSS files (should be at the top of the page!) may get a head start.
–
May not influence the rendering speed however. Browsers buffer their input before displaying it.
•
Load only essential assets / load assets on a delay or on demand
–
Use the YUI Image Loader
Optimize initial rendering (2/4)
Don’t always wait for onload...
•
Most DOM operations can be accomplished before the onload event has fired.
•
If you have control over where your code is going to be inserted in the page, write your
init code in a <script> block located right before the closing </body> tag.
•
Otherwise, use the YUI Event utility’s onDOMReady method:
YAHOO.util.Event.onDOMReady(function () {
// Do something here...
// e.g., attach event handlers.
});
Optimize initial rendering (3/4)
Post-load script loading
•
A well designed site should be fully functional, even without JavaScript enabled.
•
Therefore, you may be able to load scripts on a delay.
•
Doing so benefits the loading of other assets (style sheets, images, etc.)
•
Which makes your site load faster
•
Right before the closing </body> tag, insert the following:
<script>
window.onload = function () {
var script = document.createElement("script");
script.src = ...;
document.body.appendChild(script);
};
</script>
Optimize initial rendering (4/4)
Conditional preloading
•
Preloading assets (JavaScript, CSS, Images, etc.) has the potential to really enhance the
user experience.
•
However, one must be smart about when the preloading takes place. Otherwise, the
preloading may actually worsen the user experience...
•
/>•
Try it at />Part 3
High Performance
JavaScript
Reduce the amount of symbolic
look-up: The scope chain (1/2)
var g = 7;
function f(a) {
var v = 8;
x = v + a + g;
}
f(6);
parent
•
Look-up is performed every time a variable is accessed.
•
Variables are resolved backwards from most specific to least specific scope.
Reduce the amount of symbolic
look-up: The scope chain (2/2)
•
Therefore, declare (with the var keyword) and use variables in the same scope whenever
possible, and avoid global variables at all costs.
•
Never use the with keyword, as it prevents the compiler from generating code for fast
access to local variables (traverse the object prototype chain first, and then up the scope
chain, and so on)
•
Cache the result of expensive look-ups in local variables:
var arr = ...;
var globalVar = 0;
(function () {
var i;
for (i = 0; i < arr.length; i++) {
globalVar++;
}
})();
var arr = ...;
var globalVar = 0;
(function () {
var i, l, localVar;
l = arr.length;
localVar = globalVar;
for (i = 0; i < l; i++) {
localVar++;
}
globalVar = localVar;
})();
(faster on all A-grade browsers)
