Pro HTML5 Performance.pdf

(2936 KB) Pobierz
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.
|||||||||||||||||||||||||||||||||||||||||||||||||
Contents at a Glance
Foreword .............................................................................................................................xiii
About the Authors...............................................................................................................xiv
About the Technical Reviewer.............................................................................................xv
Acknowledgments ..............................................................................................................xvi
Part 1: Introduction................................................................................................................1
Chapter 1: Introduction .........................................................................................................3
Part 2: Performance Basics ...................................................................................................7
Chapter 2: Development Principles ......................................................................................9
Chapter 3: Performance Guidelines ....................................................................................21
Chapter 4: Responsive Web Design ....................................................................................37
Chapter 5: Understanding the Web Reuse Pattern .............................................................51
Part 3: Building a Web Site..................................................................................................65
Chapter 6: Page Template ...................................................................................................67
Chapter 7: Navigation ..........................................................................................................81
Chapter 8: Masthead .........................................................................................................107
Chapter 9: Footer ...............................................................................................................115
Chapter 10: Fractal Design Patterns .................................................................................131
Chapter 11: Link Control ...................................................................................................141
Chapter 12: Sidebox Control .............................................................................................155
Chapter 13: Button Control................................................................................................165
Chapter 14: Price Control ..................................................................................................181
Chapter 15: Product Control..............................................................................................193
Chapter 16: Table Control ..................................................................................................205
Chapter 17: Tab Control .....................................................................................................223
Chapter 18: Form Controls ................................................................................................247
Index ..................................................................................................................................275
iii
|||||||||||||||||||||||||||||||||||||||||||||||||
www.it-ebooks.info
Part 1
■■■
Introduction
This book deals with creating high-performance web sites. Its focus is large and high-volume sites. We met
while working for a company whose web site has upwards of 50,000 pages and gets more than 80,000,000
visitors a month (many more during the holiday shopping season). The advice the book gives, however,
applies equally to smaller sites, sites that don’t get nearly as much traffic. Regardless of the site’s
complexity or traffic load, everyone wants good performance, after all.
We discuss three kinds of performance in the book:
•
•
•
client-side (that is, browser) performance
server-side and network performance
developer performance
As this list implies, we cover how to get the best possible page load times, how to limit HTTP requests
and bandwidth usage as much as possible, and how developers can reuse content. In the book’s last two-
thirds, we detail a system whereby developers can create reusable components and then use them to build
pages. That technique is our ultimate lesson in how to boost developer performance. While we address
making reusable components and building pages from them, we continue to focus on providing advice
and techniques, supported by code samples, for maximizing client-side and server-side performance.
Along the way, we offer techniques for solving some of the trickier web development problems, such
as fashioning tabs that can be individually addressed and leaders that always render correctly. We also
show how to create visual interest with CSS, through the use of some lesser-known CSS selectors, including
the
:before
and
:after
pseudo-selectors.
In other words, we’ve created a book about performance and then laced it with other tips and tricks.
We hope you enjoy it and find some of the techniques presented in it useful.
1
|||||||||||||||||||||||||||||||||||||||||||||||||
www.it-ebooks.info
chaPter 1
■■■
Introduction
Not long ago, while interviewing candidates for job openings, we discovered some appreciable knowledge
gaps in the performance and scalability areas among our fellow developers. While many developers were
fully versed in their server-side language of choice, they seemed to have no more than an anecdotal level
of learning in HTML5 and CSS3. (By “anecdotal level,” we mean they’d seen examples of HTML5 and
CSS3—or perhaps had read a synopsis of the new aspects of HTML5—and drew conclusions from those
patterns but missed some of the deeper meaning behind them.) In other words, we found a lot of people
who could tell us how to do something but not why they’d want to do that something. More importantly,
they didn’t know how their favored techniques could make code perform better or reduce the time it took
them to get work done. Seeing in this situation a great opportunity to help fellow developers elevate their
front-end game, we decided to write this book.
The two of us met while working for a Fortune 50 company second only to Amazon in e-commerce
business. In other words, we got to see what did and didn’t work at the high end of the scale. In addition,
we were on a team tasked with writing a framework to be used across the company’s site, a site consisting
of tens of thousands of pages. Also, we were starting from scratch during a conversion to MVC. So while
our code had to perform extremely well for each visitor (to the tune of 80 million visitors a month), it also
had to be efficient enough to meet the needs of many teams across the company— literally dozens of
client teams.
The things we hope to pass on in this book derive from the lessons learned in that endeavor and from
the unique perspective our experience provided: a deeper understanding of HTML5/CSS3 performance
and, hopefully, some game-changing patterns that will elevate your front-end skills to the next level. We’d
like to think we might even see a paradigm shift in web development, at least for large and complex sites.
A Live Site with Working Code Examples
In order to get the concepts and techniques we cover in this book across to as many readers as possible, we
created a live site that has the working code examples shown in the book, as well as a responsive
e-commerce POC. You can find the sample site at http://www.clikz.us
Figure 1-1 shows our sample site.
3
|||||||||||||||||||||||||||||||||||||||||||||||||
www.it-ebooks.info

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika:

Zgłoś jeśli naruszono regulamin