精通HTML5性能优化（英文原版）

html5

performance

需积分: 10 95 浏览量更新于2024-07-21 收藏 8.93MB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

"Pro HTML5 Performance(英文原版)"是一本专注于提升网页性能的专业书籍，主要针对HTML5技术在性能优化方面的应用。本书首先通过【Introduction】部分，引导读者进入高性能网页设计的世界，介绍为何性能是现代网页开发的关键因素，以及HTML5如何在提升用户体验和页面加载速度上发挥作用。作者可能会探讨HTML5的新特性，如离线存储、WebSocket通信、多媒体支持等，这些特性如何影响网页性能，并提供相应的策略和最佳实践。在【Part2: Performance Basics】中，作者深入讲解了开发原则，如延迟加载、代码分割、缓存利用等，这些都是提高网页性能的基础。【Chapter2: Development Principles】可能涵盖了优化代码、减少HTTP请求、优化图片和CSS/JavaScript等方面。【Chapter3: Performance Guidelines】则会提供一套实用的性能优化指南，包括如何有效地利用浏览器缓存、压缩资源、优化网络请求等。【Chapter4: Responsive Web Design】则关注响应式设计，讨论如何在不同设备上实现最优的显示效果。【Chapter5: Understanding the Web Reuse Pattern】可能探讨了如何创建可复用和可维护的组件来提升性能。进入【Part3: Building a Web Site】，作者通过一系列章节展示了实际构建高性能网站的过程。【Chapter6: Page Template】至【Chapter18: Form Controls】详细介绍了从页面模板到表单控件的构建方法，每个章节都包含了如何利用HTML5特性来优化特定页面元素的性能，比如导航（Navigation）、页眉（Masthead）、页脚（Footer）、按钮（Button Control）、表格（Table Control）和表单（Form Controls）等。书末的【Index】提供了方便的索引，使读者能够快速查找和定位相关主题。整本书不仅提供了理论知识，还包含了大量的实践案例和技巧，旨在帮助开发者实现高效、流畅的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

www.it-ebooks.info

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.

www.it-ebooks.info

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.

www.it-ebooks.info

剩余284页未读，继续阅读

gagas

粉丝: 0
资源: 1

精通HTML5性能优化（英文原版）

ProHTML5Performance.pdf 英文原版

高性能HTML5.Pro HTML5 Performance

Pro iOS Apps Performance Optimization2017

ahb的英文原版协议pdf

数据结构与算法python 英文原版

QT使用ARM Performance Libraries

SolarWinds Network Performance Monitor 下载

use performance_schema和performance_schema的区别

ue5 multi channel media player by opencv high performance webcamera

performance_schema的优化配置

linux performance tuning pdf

collector.performance_schema.eventswaits - collector.performance_schema.file_events - collector.performance_schema.indexiowaits - collector.performance_schema.tableiowaits - collector.performance_schema.tablelocks这几参数结尾都需要等号吗

performance测试

- collector.performance_schema.eventswaits - collector.performance_schema.file_events - collector.performance_schema.indexiowaits - collector.performance_schema.tableiowaits - collector.performance_schema.tablelocks这几参数都需要等号吗

软件测试可以用html5来进行吗

window.performance 性能监控

verisilicon video decoder performance

修复 performance_schema 数据库

mysql 5.7开启performance schema需要注意什么

最新资源