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

Even Faster Web Sites

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

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