旧读书笔记：Even Faster Web Sites（最近这本书的中文翻译版刚出来）

Even Faster Web Sites

目录 [隐藏] 1 Loading Scripts Without Blocking 2 将长的else-if改造成嵌套的二分if-else？ 3 unrolling the loop（利用switch-case的fall-through） 4 String Concatenation：[].join() 5 the fastest way to execute string trimming 6 Avoid Long-Running Scripts 7 Scaling with Comet 8 beyond HTTP gzipping 8.1 Why would anyone or anything intentionally slow down users’ web browsing experience by disabling compression? 8.2 Use event delegation 8.3 Alias JavaScript names 9 Optimizing Images 10 Sharding Dominant Domains 10.1 Downgrading to HTTP/1.0（靠！这个实在是太神奇了） 11 Flushing the Document Early 11.1 Chunked Encoding 11.2 Flushing and Gzip 12 Using Iframes Sparingly 13 Simplifying CSS Selectors 13.1 Avoid universal rules 13.2 Don’t qualify ID selectors 13.3 Don’t qualify class selectors 13.4 Make rules as specific as possible 13.5 Avoid descendant selectors 13.6 Avoid tag-child selectors 13.7 Rely on inheritance 14 YSlow（由作者开发的，现在是FireBug的一个扩展）

[编辑]Loading
Scripts Without Blocking

这不就是Dojo吗？可惜我对它没啥兴趣。

[编辑]将长的else-if改造成嵌套的二分if-else？

[编辑]unrolling
the loop（利用switch-case的fall-through）

var iterations = Math.ceil(values.length / 8);
 var startAt = values.length % 8;
 var i = 0;
 do {
     switch(startAt){
         case 0: process(values[i++]);
         case 7: process(values[i++]);
         case 6: process(values[i++]);
         case 5: process(values[i++]);
         case 4: process(values[i++]);
         case 3: process(values[i++]);
         case 2: process(values[i++]);
         case 1: process(values[i++]);
     }
     startAt = 0;
 } while (--iterations > 0);

[编辑]String
Concatenation：[].join()

[编辑]the
fastest way to execute string trimming

利用正则表达式去掉前面的，再用charAt、substring忽略尾部的：

function trim(text){
   text = text.replace(/^\s+/, "");
   for (var i = text.length - 1; i >= 0; i--) {
     if (/\S/.test(text.charAt(i))) {
       text = text.substring(0, i + 1);
       break;
     }
   }
   return text;
 }

[编辑]Avoid
Long-Running Scripts

利用timer将长时间执行的语句分割。

[编辑]Scaling
with Comet

Long Polling
Forever Frame
XHR Streaming

[编辑]beyond
HTTP gzipping

[编辑]Why
would anyone or anything intentionally slow down users’ web browsing experience by disabling compression?

The culprits fall into two main categories: web proxies and PC security software.（哦，原来如此！）

[编辑]Use
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.

[编辑]Alias
JavaScript names

// 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";

[编辑]Optimizing
Images

[编辑]Sharding
Dominant Domains

将文件分布到多个子域服务器上？

[编辑]Downgrading
to HTTP/1.0（靠！这个实在是太神奇了）

However, Internet Explorer 6 and 7 open more connections when HTTP/1.0 is used. The normal limit of two connections per server is increased to four when HTTP/1.0 is used.
Firefox 2 uses two connections for HTTP/1.1, but increases that to eight connections in the presence of HTTP/1.0.

[编辑]Flushing
the Document Early

[编辑]Chunked
Encoding

Trailer：Cookie/ETag

[编辑]Flushing
and Gzip

I’ve seen developers spend hours debugging why flushing wasn’t working, only to realize they were connected to the Internet through a company proxy that breaks flushing.

[编辑]Using
Iframes Sparingly

[编辑]Simplifying
CSS Selectors

In reality, CSS selectors are matched by moving from right to left!

[编辑]Avoid
universal rules

In addition to the traditional definition of universal selectors, Hyatt lumps adjacent sibling selectors, child selectors, descendant selectors, and attribute selectors into this category of
“universal rules.” He recommends using ID, class, and tag selectors exclusively.

[编辑]Don’t
qualify ID selectors

Because there is only one element in the page with a given ID, there’s no need to add additional qualifiers. For example, DIV #toc is unnecessary and should be simplified to #toc.

[编辑]Don’t
qualify class selectors

Instead of qualifying class selectors for specific tags, extend the class name to be specific to the use case. For example, change LI .chapter to .li-chapter, or better yet, .list-chapter.

[编辑]Make
rules as specific as possible

Don’t be tempted to build long selectors, such as OL LI A. It’s better to create a class, such as .list-anchor, and add it to the appropriate elements.

[编辑]Avoid
descendant selectors

Descendant selectors are typically the most expensive to process. Child selectors are often what’s intended and can be more efficient. It’s even better to follow the next guideline to avoid
child selectors as well.

[编辑]Avoid
tag-child selectors

If you have a child selector that is based on a tag, such as #toc > LI > A, use a class associated with each of those tag elements, such as .toc-anchor. Question all usages of the child selector
This is another reminder to review all places where child selectors are used, and replace them with specific classes when possible.

[编辑]Rely
on inheritance

Learn which properties are inherited, and avoid rules that specify these inherited styles. For example, specify list-style-image on the list element instead of on each list item element. Consult
the list of inherited properties to know which properties are inherited for which elements.

[编辑]YSlow（由作者开发的，现在是FireBug的一个扩展）

Here are the original 13 rules that are still the basis for YSlow’s performance analysis:

Rule 1: Make Fewer HTTP Requests
Rule 2: Use a Content Delivery Network
Rule 3: Add an Expires Header
Rule 4: Gzip Components
Rule 5: Put Stylesheets at the Top
Rule 6: Put Scripts at the Bottom
Rule 7: Avoid CSS Expressions
Rule 8: Make JavaScript and CSS External
Rule 9: Reduce DNS Lookups
Rule 10: Minify JavaScript
Rule 11: Avoid Redirects
Rule 12: Remove Duplicate Scripts
Rule 13: Configure ETags