《高性能网站建设进阶指南》阅读笔记 3_高性能网站建设进阶指南读后感-优快云博客

本文探讨了多种提高网页加载速度的方法，包括使用GZIP压缩减少文件大小、应用事件委托减少代码重复、利用相对URL路径缩短资源请求长度等。同时介绍了如何通过直接检测浏览器对GZIP的支持情况来增强网页性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

7 超越Gip 压缩

浏览器向web server发送Accept-Encoding HTTP header:

Accept-Encoding: gzip, deflate

web server 返回压缩后的响应：

Content-Encoding: gzip

即便如此，仍然有很多浏览器(15%)收到未压缩的响应，why?

web proxies and PC security software.

被压缩的内容显然不利监控，所以代理或者防火墙软件往往会修改你的request header，比如：

Accept-EncodXng: gzip, deflate

7.1 Design to minimize uncompressed szie

sending smaller responses makes pages faster

典型的技术有javascript的压缩，图片的sprites(多个图标集成在一张图片上)

event delegation

Event delegation is the name commonly given to the technique of attaching a single event handler to a parent element that contains all of the elements that need to respond to the event. When the event is triggered on the child element, it bubbles up to the parent where it is handled. That single handler can distinguish which child element is the target of the event and receive additional parameters via some attribute on that element.

有点像OOP里面extract method的意思,比如一片代码总是重复出现，你可能就需要抽象出一个单独的方法来封装这片重复的代码.

在事件委托中，子元素的事件委托给容器元素，从而避免为每个子元素添加事件handle，增加重复代码。

Use relative URLs

/index.html instead of http://www.example.com/index.html

Table 9-3. Relative equivalents of http://www.example.com/path/page.html

Fully specified destination URL Relative equivalent

http://subdomain.example.com/ //subdomain.example.com

http://www.example.com/path/page2.html page2.html

http://www.example.com/index.html /index.html

http://www.example.com/path2/page.html ../path2/page.html

http://www.example.com/path/page.html#f=bar #f=bar

http://www.example.com/path/page.html?q=foo ?q=foo

Strip whitespace

YUI Compressor: CSS http://developer.yahoo.com/yui/compressor/

ShrinkSafe: http://shrinksafe.dojotoolkit.org/

JSMin: http://www.crockford.com/javascript/jsmin.html

Strip attribute quotes

according to the HTML 4.01 specification, it's valid to omit quotes around attributes that matching

[a-zA-Z0-9/-._:]

letters, numbers, hyphens, periods, underscores, colons

avoid inline styling

Another way in which the uncompressed page size is often unnecessarily inflated is by

repeatedly styling content inline instead of relying on CSS

Do not repeat (DRY)

Alias JavaScript names

For instance, some popular JavaScript libraries alias document.getElementById as the variable $:

var $ = document.getElementById;

// Wasteful

var foo = $("foo");

foo.style.left = "0";

foo.style.right = "0";

foo.style.height = "10px";

foo.style.width = "10px";

// Better

var foo = $("foo").style;

foo.left = "0";

foo.right = "0";

foo.height = "10px";

foo.width = "10px";

7.3 Direct Detection of Gzip Support

This will load a test_gzip.html document, which you set up as follows:

1. Disable caching so that the current connection is always tested.

2. Compress the contents, regardless of the request headers.

3. Use JavaScript to set a session-only cookie indicating that the browser supports gzip.

12 尽早帅新文档的输出

this chapter explains how to start the page loading even before the HTML document is completed.

12.1 Flush the head

Each packet sent incurs some network latency, so it’s usually better to send a small number of large packets, rather than a large number of small packets.

Whether this speeds up the page depends on what you include in the HTML before the call to flush(). In this example, there is a line of text (“This is the Flush example”) and three resources (two images and one script). This is exactly what’s needed to com- bat the two shortcomings of a slow HTML document: blocked rendering and blocked downloads.

getting resources downloading early is the primary benefit that flushing provides.

http://cn.php.net/flush

12.2 Output Buffering

PHP output is written to STDOUT. Output buffering adds another layer where output is queued before it goes to STDOUT

php.ini:

output_buffering = 4096

<?php

echo "<br>output_buffering = " . ini_get('output_buffering');

echo "<br>PHP version = " . phpversion();

The most intuitive new function calls are ob_start and ob_flush; ob_start opens a new output buffer while ob_flush flushes the contents of this output buffer to STDOUT. Once the output buffer is flushed, we still need the call to flush() in order to flush STDOUT:

12.3 Chunked Encoding

Chunked encoding fosters faster pages in two other ways, both related to dynamic pages. Without chunked encoding, responses must contain a Content-Length header. This means the server can’t start sending the response until it finishes stitching the entire response together and measuring its size. With chunked encoding, the server can start transmitting the response sooner, because it only needs to know the size of each chunk being sent.

Normally, these headers must be sent in the beginning of the response, which means the server can’t start sending the response until these time-consuming database queries or web service calls have completed

The first chunk is sent immediately and uses the Trailer header to list the headers that will come later:

Trailer: Cookie

Trailer: ETag

The Cookie and ETag headers can then be included at the end of the HTML response.*

12.4 flushing and Gzip

Apache 2.x uses mod_deflate for compression.† This module has a buffer that is 8,096 bytes by default. You can reduce the size of this buffer using the DeflateBufferSize directive

12.5 Other Intermediaries

I look for headers such as Proxy-Connection, X-Forwarded-For, and Via or a status containing “HTTP/1.0” in the HTML document response. If any of these are present, you’re probably going through a proxy that may prevent flushing from working.

check list

• Is output buffering on? If so, you have to use the ob_ functions.

• Do you see the Transfer-Encoding: chunked response header? Chunked encoding is typically required for flushing to work.

• Is the response gzipped? If so, and you’re running a version of Apache earlier than 2.2.8, you have to add padding to your page.

• Are you behind a proxy or using antivirus software? These might buffer the chunks before sending them through to the browser.

• Are any of the resources referenced in the flushed chunk being blocked because they’re fetched from the same domain as the HTML document?

• Are you testing only in Safari or Chrome? The flushed HTML must be more than 2 KB to see the benefits in these browsers.

家庭作业：

压缩工具的使用