构建高性能HTML5网站的实战指南

5星 · 超过95%的资源需积分: 10 150 浏览量更新于2024-07-27 收藏 8.63MB PDF 举报

"高性能 HTML5 2012" 在《高性能 HTML5 2012》这本书中，作者深入探讨了如何利用 HTML5 技术构建高性能、响应式的 web 应用，尤其针对 web 和移动 web 平台。书中的内容涵盖了从基础理论到实际应用的多个层面，旨在帮助开发者提升网站性能，优化用户体验。首先，书中的“前言”部分可能阐述了 HTML5 在当时背景下对 web 开发的重要性，以及高性能 HTML5 应用对于提升用户体验和业务价值的关键作用。作者可能还讨论了技术的发展趋势和本书的写作目的。关于“作者”，他们可能是经验丰富的 web 开发者或行业专家，具备深厚的 HTML5 知识和实践经验，能够提供权威的指导。同时，“技术审阅者”的存在确保了书中内容的准确性和专业性。在“致谢”中，作者可能感谢了对书籍创作提供支持的人或团队，包括同行、编辑、家人等。 “第一部分：介绍”是书籍的开端，第 1 章“介绍”可能会概述 HTML5 的核心特性，解释为什么它能提高 web 性能，并简述本书后续章节的结构和主题。 “第二部分：性能基础”是书中的关键部分，从开发原则（第 2 章）到性能指南（第 3 章），再到响应式网页设计（第 4 章）和理解 web 重用模式（第 5 章），这部分详细讲解了如何利用 HTML5 提升网页性能和适应不同设备。 “第三部分：构建网站”是实践部分，从页面模板（第 6 章）到导航（第 7 章）、页眉（第 8 章）、页脚（第 9 章）等网站基本元素的设计与优化，再到更具体的控件如链接控制（第 11 章）、侧边框控制（第 12 章）、按钮控制（第 13 章）、价格控制（第 14 章）、产品控制（第 15 章）、表格控制（第 16 章）、选项卡控制（第 17 章）和表单控件（第 18 章），全面介绍了构建高性能网站的实际步骤和技术要点。最后，书后的“索引”方便读者快速查找特定主题，是全书内容的总览。通过学习这本书，读者将掌握如何使用 HTML5 构建高效、响应式且易用的 web 应用，提升网页加载速度，优化用户体验，同时适应移动设备的多样化需求。无论是初学者还是经验丰富的开发者，都能从中获益。

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页未读，继续阅读

idownqq123

粉丝: 0
资源: 1

构建高性能HTML5网站的实战指南

使用Visual Studio 2012深度探索HTML5开发

TeeChartJS: HTML5 Canvas打造的高性能JavaScript图表库

使用Visual Studio 2012进行HTML5开发实战指南

Pro HTML5 with Visual Studio 2012.pdf

2012 年度 HTML 5 状况及发展形势报告

Addison Wesley - Learning HTML5 Game Programming.2012.pdf

TWaver HTML5官方开发指南(2012版)

HTML5技术引领2012：研讨会与App实例解析

高性能分布式网络爬虫技术探析

ASP.NET MVC4+EF5+EasyUI+Unity2.x：构建高性能后台管理系统

最新资源