Pro JavaScript Performance.pdf

(35450 KB) Pobierz
965534265.034.png 965534265.045.png 965534265.056.png 965534265.067.png 965534265.001.png
 
 
 
 
 
 
 
 
 
 
 
 
 
965534265.002.png 965534265.003.png 965534265.004.png 965534265.005.png 965534265.006.png 965534265.007.png 965534265.008.png 965534265.009.png 965534265.010.png 965534265.011.png 965534265.012.png 965534265.013.png 965534265.014.png 965534265.015.png 965534265.016.png 965534265.017.png 965534265.018.png 965534265.019.png 965534265.020.png 965534265.021.png 965534265.022.png
 
For your convenience Apress has placed some of the front
matter material after the index. Please use the Bookmarks
and Contents at a Glance links to access them.
965534265.023.png 965534265.024.png
Contents at a Glance
About the Author .................................................................................................................. ix
About the Technical Reviewer ............................................................................................... x
Acknowledgments ................................................................................................................ xi
Chapter 1: What is Performance ........................................................................................... 1
Chapter 2: Tools and Technology to Measure and Impact Performance ........................... 13
Chapter 3: WPTRunner—Automated Performance Monitoring and Visualization... ......... 43
Chapter 4: perfLogger—JavaScript Benchmarking and Logging ..................................... 65
Chapter 5: Looking Forward, a Standard for Performance ................................................ 83
Chapter 6: Web Performance Optimizations..................................................................... 109
Chapter 7: Runtime Performance ...................................................................................... 139
Chapter 8: Balancing Performance with Software Engineering Best Practices... .......... 175
Index .................................................................................................................................. 203
iv
965534265.025.png 965534265.026.png 965534265.027.png
Chapter 1
■ ■ ■
What is Performance
Performance refers to the speed at which an application functions. It is a multifaceted aspect of quality.
When we’re talking about web applications, the time it takes your application to be presented to your users
is what we will call web performance . The speed at which your application responds to your users’
interactions is what we’ll call runtime performance . These are the two facets of performance that we will be
looking at.
Performance in the context of web (and especially mobile web) development is a relatively new
subject, but it is absolutely overdue for the attention it has been getting.
In this book we will explore how to quantify and optimize JavaScript performance, in the context of
both web performance and runtime performance. This is vitally important because JavaScript is
potentially the largest area for improvement when trying to address the total performance of your site.
Steve Souders, architect of both YSlow and PageSpeed, and pioneer in the world of web performance, has
demonstrated this point in an experiment where he showed an average performance improvement of 31%
when removing JavaScript from a sample of web sites. 1 We can completely remove any JavaScript from our
site as Steve did in his experiment, or we can reine how we write JavaScript and learn to measure the
eficiencies in what we write.
It’s not realistic to remove JavaScript from our front-end, so let’s look at making our JavaScript more
eficient. Arguably even more important, let’s look at how we can create automated tools to track these
eficiencies and visualize them for reporting and analysis.
Web Performance
Sitting with your laptop or holding your device, you open a web browser, type in a URL and hit Enter, and
wait for the page to be delivered to and rendered by your browser. The span of time that you are waiting for
the page to be usable depends on web performance. For our purposes we will deine web performance as
an overall indicator of the time it takes for a page to be delivered and made available to your end user.
There are many things that inluence web performance, network latency being the irst. How fast is
your network? How many round trips and server responses are needed to serve up your content?
To better understand network latency, let’s irst look at the steps in an HTTP transaction (Figure 1.1).
When it requests a URL, whether the URL for a web page or a URL for each asset on a web page, the
browser spins up a thread to handle the request and initiates a DNS lookup at the remote DNS server. This
allows the browser to get the IP address for the URL entered.
1
Chapter 1 ■ What is performanCe
Browser
DNS Server
Server
DNS Lookup
DNS Reply
SYN
SYN-ACK
ACK
HTTP GET
HTTP Response
2XX | 3XX | 4XX | 5XX
FIN
FIN-ACK
ACK
Figure 1-1. Sequence diagram of network transactions in a request for a web page and repeated for each
remote -object included in a web page
2
965534265.028.png 965534265.029.png 965534265.030.png 965534265.031.png 965534265.032.png 965534265.033.png 965534265.035.png 965534265.036.png 965534265.037.png 965534265.038.png 965534265.039.png 965534265.040.png 965534265.041.png 965534265.042.png 965534265.043.png 965534265.044.png 965534265.046.png 965534265.047.png 965534265.048.png 965534265.049.png 965534265.050.png 965534265.051.png 965534265.052.png 965534265.053.png 965534265.054.png 965534265.055.png 965534265.057.png 965534265.058.png 965534265.059.png 965534265.060.png 965534265.061.png 965534265.062.png 965534265.063.png 965534265.064.png 965534265.065.png 965534265.066.png 965534265.068.png 965534265.069.png 965534265.070.png 965534265.071.png 965534265.072.png 965534265.073.png 965534265.074.png
 

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika:

Zgłoś jeśli naruszono regulamin