Created
June 26, 2011 22:10
-
-
Save smerrill/1048050 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
| <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> | |
| <head> | |
| <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> | |
| <meta http-equiv="Content-Language" content="en-us" /> | |
| <title>/1340$front-end-performance</title> | |
| </head> | |
| <body><br | |
| /><ul><li>Front-end performance</li | |
| ><li>How to measure?<ul><li>HAR files<ul><li>HTTP archive</li | |
| ><li>NetExport</li | |
| ><li>BrowserMob proxy</li></ul | |
| ></li | |
| ><li>Browser-based grading tools<ul><li>YSlow!</li | |
| ><li>Google Page Speed<ul><li>Run it automatically online<ul><li><a href="http://code.google.com/speed/page-speed/docs/online.html">http://code.google.com/speed/page-speed/docs/online.html</a></li></ul | |
| ></li | |
| ><li>Use the API<ul><li><a href="http://code.google.com/apis/pagespeedonline/">http://code.google.com/apis/pagespeedonline/</a></li></ul | |
| ></li></ul | |
| ></li | |
| ><li>Automation<ul><li>ShowSlow</li | |
| ><li>GTMetrix</li | |
| ><li>WebPageTest.org</li></ul | |
| ></li></ul | |
| ></li></ul | |
| ></li | |
| ><li>Best practices<ul><li><a href="http://developer.yahoo.com/performance/rules.html">http://developer.yahoo.com/performance/rules.html</a></li | |
| ><li><a href="http://code.google.com/speed/page-speed/docs/rules_intro.html">http://code.google.com/speed/page-speed/docs/rules_intro.html</a><br/><br | |
| /></li></ul | |
| ></li | |
| ><li>Be careful with best practices.<ul><li>2 resources per domain?<ul><li>Nope, up to 6 in most modern browsers.</li></ul | |
| ></li></ul | |
| ></li | |
| ><li>JS can be slow.<ul><li>We can use JS to load JS!<ul><li>Sorry, that will always be serialized and block.</li></ul | |
| ></li | |
| ><li>Don't cause a repaint / reflow<ul><li>From <a href="http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html">http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html</a>, the following JS properties on any element will cause a reflow:<ul><li>clientHeight, clientLeft, clientTop, clientWidth, focus(), getBoundingClientRect(), getClientRects(), innerText, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerText, scrollByLines(), scrollByPages(), scrollHeight, scrollIntoView(), scrollIntoViewIfNeeded(), scrollLeft, scrollTop, scrollWidth</li | |
| ><li>Batch all your reads and writes of these together to avoid extra reflows.</li | |
| ><li>Use the timeline tab in Safari / Chrome to monitor this.</li></ul | |
| ></li></ul | |
| ></li></ul | |
| ></li | |
| ><li>Mobile considerations:<ul><li>If the phone hasn't talked to a tower in 5 minutes, you will have a guaranteed extra 2 to 3 seconds of latency on the first HTTP request thereafter.</li | |
| ><li>Consider using the HTML5 app caching manifest to keep commonly-used items in a phone's cache so that the app responds quickly and then waits for server data.</li | |
| ><li>Mobile browser cache sizes are limited. As of a couple years ago, items that were bigger than 25k _after unzippiing_ would not be stored in a phone's cache.<br/><br | |
| /></li></ul | |
| ></li></ul | |
| ></body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment