HTML5 性能优化指南：提高网站性能的实践指南

需积分: 10 88 浏览量更新于2024-07-19 收藏 6.58MB PDF 举报

Pro HTML5 Performance 无水印原版pdf 本资源是关于 HTML5 性能优化的电子书籍，标题为 Pro HTML5 Performance，无水印原版pdf。该书籍介绍了如何创建高性能的网站，着重于大型和高流量网站的性能优化。书籍的目录结构清晰，分为四个部分：Introduction、Performance Basics、Building a Web Site 和 Index。每个部分包含多个章节，涵盖了 HTML5 性能优化的各个方面。在 Introduction 部分，作者介绍了 HTML5 的基本概念和性能优化的重要性，并对本书的结构和内容进行了概述。在 Performance Basics 部分，作者讨论了性能优化的基本原则和指导方针，包括开发原则、性能指南、响应式 Web 设计和 Web 重用模式等。在 Building a Web Site 部分，作者详细介绍了如何构建高性能的网站，包括页面模板、导航、头部、底部、碎片设计模式、链接控件、侧边控件、按钮控件、价格控件、产品控件、表控件、选项卡控件和表单控件等。在 Index 部分，作者提供了一个详细的索引，方便读者快速查找相关内容。本书籍为读者提供了一个完整的 HTML5 性能优化指南，涵盖了从基本概念到实际应用的所有方面。对于想要提高网站性能的开发者和设计师来说，这本书籍是一个非常有价值的资源。知识点： 1.HTML5 性能优化的重要性 2.开发原则和指导方针 3.响应式 Web 设计 4.Web 重用模式 5.页面模板设计 6.导航设计 7.头部和底部设计 8.碎片设计模式 9.链接控件和侧边控件 10.按钮控件和价格控件 11.产品控件和表控件 12.选项卡控件和表单控件 13.HTML5 性能优化的实践经验这些知识点涵盖了 HTML5 性能优化的各个方面，读者可以通过学习这些知识点来提高自己的网站性能和用户体验。

CHAPTER 2

■ DEVELOPMENT PRINCIPLES

width: 100px;

height: 100px;

background-color: #2067f5;

background-image: -webkit-gradient(linear, left top, left bottom, from(#2067f5), to(#154096));

}

Here we have a div that will make a 100 × 100 pixel box. The background of that div now has some

progressive enhancements in the CSS. Every browser can understand the ﬁrst background declaration:

background-color: #2067f5. Now if your site’s visitors happen to view this code on a browser that

understands one of the next six declarations, they would see not only a blue box but one with a nice

gradient to it. In essence, everyone gets a blue box, but some visitors get a nicer blue box.

A number of tools exist to help with creating the various browser-speciﬁc settings. One that we use is

http://css3please.com

Figure 2-3 shows the result of the someClass style in the Chrome browser.

Figure 2-3. The someClass Style example in chrome

As you can see, it makes a gradient from a medium shade of blue down to a darker shade of blue.

Using Feature Detection to Drive Progressive Enhancement

With HTML5, never has progressive enhancement been more pronounced. Browsers that support HTML5

provide a great deal of functionality that we can use for very little overhead because they’re native to the

browser. With HTML5, rather than send JavaScript Files to the browser, we simply specify new markup

options and CSS3 and have the browser do the fancy work for us. However, for the time being, a lot of the

great functionality of HTML5 will instead have to be done with scripts on older browsers so that we can get

the same functionality on all browsers, whether they support HTML5 or not.

Enter feature detection. By using feature detection, we can switch to the more native and thus better

performing features that get handled in the browsers. This is done with a mix of Boolean switches in

JavaScript, to detect the features the browser supports, and CSS, to provide an alternative implementation

when a feature is not supported. A browser will ignore (rather than throw an error for) a CSS selector or

CHAPTER 2 ■ DEVELOPMENT PRINCIPLES

property it doesn’t understand. Thus, we can put in CSS3 progressive enhancements, and IE8 (for example)

will ignore them (see Listing 2-7).

Before we talk more about feature detection, let’s consider a common alternative. Many sites try to

detect which browser each visitor uses and present a page optimized for that browser. Let’s say, for

example, that we detect a visitor using IE8 and offer some non-HTML5 alternative functionality. While

workable in theory, this approach turns out to be a huge burden in practice. As browsers and versions

proliferate, maintaining a version of a site quickly becomes very expensive. Adding yet more overhead,

browsers like Chrome and Firefox have been versioning quickly, and, in the case of Chrome, auto-

updating. So tying code to a speciﬁc version of a browser becomes even more unmanageable. Worse still,

sites that try this strategy soon ﬁnd that the developers do nothing but maintain all those browser-speciﬁc

versions and never embrace new technologies that can create a better visitor experience and ultimately a

more proﬁtable web site. And none of the preceding addresses the issue of spooﬁng the User Agent, which

further complicates the picture.

Consequently, we strongly recommend using feature detection rather than browser-speciﬁc versions

of your web site. That way, you can detect whether the features you need are available and, if so, use them

or, if not, present an attractive alternative to that visitor. Since few sites use every available feature, you can

focus on just the few features you need, which makes for much more maintainable code and ensures that

each visitor sees an attractive web site.

At the time of writing, we believed the best way to implement feature detection was to use the

Modernizr open-source library. You can ﬁnd the Modernizr project at http://www.modernizr.com/ and

download it from http://www.modernizr.com/download/

Modernizr works by testing whether a feature is available using JavaScript; it then adds a class to the

body tag either noting it’s available or not available (that is, the class canvas or no-canvas is added). You

can also check its availability with JavaScript (that is, if(Modernizr.canvas){ do something }). However,

each one of the tests it runs has a performance cost; while it’s very slight, each test still takes time. So

another great thing about Modernizr is that you can choose just those features you want to detect when

you download the Modernizr script ﬁles. For example, if you know your web site doesn’t use the canvas

element, you can uncheck the canvas options.

For more information on using Modernizr, consult the Modernizr documentation at http://

modernizr.com/docs

Embrace Separation of Concerns

As we mentioned in Chapter 1, one kind of performance to consider is developer performance. Provided

they won’t make the experience worse for site visitors, things you can do to improve the performance of

the web developers often more than pay for the time needed to adopt a new methodology. Embracing

separation of concerns is one of those things. Those familiar with MVC will have heard “separation of

concerns” quite often, but the expression’s roots go back to 1974.

If you haven’t heard about the idea

before, it’s separating functions into logical areas so they’re less fragile and easier to understand. Indeed,

we assert not only that separation of concerns in web development leads to code that is less fragile and

easier to understand but that it also increases browser performance because separating out style to CSS is

faster than using HTML or JavaScript to control the appearance. In the front end, HTML, CSS, and

JavaScript constitute the critical trio.

In times past it was common to use an overlapping combination of HTML, CSS, and JavaScript as a

solution to any problem—a technique lovingly (or not so lovingly) called DHTML. Figure 2-4 shows this

overly interwoven relationship.

1 Edsger W. Dijkstra, “On the role of scientiﬁc thought,” in Edsger W. Dijkstra, Selected Writings on

Computing: A Personal Perspective (New York, NY: Springer-Verlag, 1982), pp. 60–66. ISBN 0-387-90652-5.

CHAPTER 2 ■ DEVELOPMENT PRINCIPLES

CSS

CSS is the master of presentation. For presentation purposes, CSS offers the best performance, especially if

you’re mindful of using the correct selectors (which we’ll get to in Chapter 3). In addition to the existing

beneﬁts of CSS, CSS3 lets you reduce your dependency on images to assist in presentation of rounded

corners, drop shadows, complex gradients, and other effects. You can also leverage SVG in your CSS to

create some stunning effects. CSS3 also lets us create a great deal of interaction without reaching for

JavaScript or other technologies that would normally handle menu ﬂy-outs or other animation effects in

your website. And while you still need to use JavaScript with browsers that don’t support CSS3 for the

animation, you can use feature detection to only use that JavaScript when necessary. As Figure 2-4 shows,

CSS can lessen the dependency on JavaScript to deﬁne interaction.

JavaScript

JavaScript is the king of dynamic data. For one thing, it’s the crucial part of AJAX. It overlaps HTML,

because it can feed HTML into the browser (usually generated from a database interaction). Formerly also

the king of interaction, JavaScript now has a new partner in the ﬁght for user input, namely CSS (as noted

in the preceding paragraph). In addition to being able to ofﬂoad a lot of mouse interaction functionality,

including hovers and clicks, CSS can also handle animation functionality, which used to be the exclusive

purview of JavaScript.

Let’s consider an example of interaction: making the text appear when visitors hover over the title or

the icon. Figure 2-6 shows the initial state (before the user moves the mouse over the title or the icon).

Figure 2-6. Interaction example initial state

When visitors hover over the title or icon, the description appears when the mouse slides down, as

shown in Figure 2-7.

Figure 2-7. Interaction example during the interaction

We created this effect by using the pseudo hover class on the “browserArticle” class. Normally we

would use JavaScript, such as jQuery’s $(".browserArticle").slideDown() and $(".browserArticle").

slideUp(), to get the “slide out” effect. But we can use native modern browser functionality and call a

transition deﬁned in the “browserArticle” class (transition: all 0.5s ease-in-out;) that says if there are

any changes (the all part), attempt to express them as a transition (animation) to happen over .5 seconds

with an easing of ease-in-out. So when we have a hover set up to make the height 45 pixels, it displays a

nice transition. And to keep in line with progressive enhancement, the description still appears on older

browsers (such as IE 7 and 8), just without the animation effect. Listing 2-8 shows the modiﬁed CSS that

makes the animation work.

剩余284页未读，继续阅读

yinkaisheng-nj

粉丝: 762
资源: 6231

HTML5 性能优化指南：提高网站性能的实践指南

prohtml5 prohtml5

高性能HTML5

High Performance Computing 无水印原版pdf

Foundations of Software and System Performance Engineering 无水印原版pdf

Pro .NET Performance 无水印pdf

CUDA for Engineers An Introduction to High-Performance Parallel 无水印原版pdf

vSphere High Performance Cookbook(2nd) 无水印原版pdf

Foundations of Software and System Performance Engineering Process, 无水印原版pdf

New Frontiers in High Performance Computing and Big Data 无水印原版pdf

High Performance Computing 4th Latin American Conference 无水印原版pdf

最新资源