《高性能网站建设进阶指南》阅读笔记 1

高性能网站建设进阶指南

Performance Best Practices for web developers Even Faster Web Sites

1.2 Principles of optimization

把重点放在对程序整体开销影响最大的那部分。E.g，循环开销 = 固定开销 + n * 每次循环时间

减少固定开销通常收益不大，减少每次增量的开销，即便固定开销有所增加，也可能是一个很好的权衡。

 

循环嵌套越多，可优化的选择越少。如果循环开销是O(n logn)，O(n2)或者更糟，减少每次迭代的时间没有任何效果。唯一有效的选择是减少n或者跟俄归还算法。

 

Ajax，服务器和浏览器之间的正确分工至关重要。

 

酷炫特效应该只在确实能改善用户体验时才使用，而不应用于炫耀或弥补功能与可用性上的缺陷。

2.1 What is fast enough?

0.1s: 用户直接操作UI中对象的感觉极限。

1s：延迟被用户注意到，失去“流畅”的体验。

10s：用户走人

2.3 Threading

Brendan Eich “你将在什么时候为JavaScript添加多线程”，“等你死了以后”

 

我们需要的是一种像多线程那样能多任务并发执行却没有线程之间相互侵入危险的方法。

 

Html5 web workers API

 

7.1 Managing Scope

javascript 会创建一个执行上下文(Execution Context)，每个执行上下文都有一个与之关联的作用域链，用于解析标识符。全局执行上下文的作用域链中只有一个变量对象，定义了javascript中所有可用的全局变量和函数。

 

标识符在作用域链中的位置越深，查找和访问它所需的时间就越长。

 

使用局部变量：use local variables. eg

 

var doc = document;

elm = doc.getElementById

 

一般，脚本有四种地方存取数据：字面量值，变量，数组元素，对象属性。

7.3 Flow Control

if

switch

数组查询: 条件对应结果单一，而不是一系列操作

7.3.2 Fast loops

使用局部变量length;

将循环变量递减到0，与0进行比较，而不是总长度。

避免for-in 循环，如果你明确知道要操作的所有属性名，

var props = ["name", "age", "title"];

var i = props.length;

while(i--) {

   process(object[props[i]]);

}

展开循环，如果循环项较少。

7.4.1 String Concatenation

var buffer = [], i = 0;

buffer[i++] = "hello"; 

...

var text = buffer.join("");

7.4.2 Trimming Strings

text.replace(/^/s+|/s+$/g, "");

 

text.replace(/^/s+, "").replace(/s+$/, "");

将单个拆分成两次调用，每个正则表达式更简单，也更快。

7.5.2 Timer Patterns for Yielding

function chunk(array, process, context) {

         setTimeout(function() {

               var item = array.shift();

               process.call(context, item);

               if(array.length > 0) {

                 setTimeout(arguments.callee, 100);

               }

           }, 100);

}