日期:2014-05-17  浏览次数:20539 次

如何提高HTML页面加载速度
降低页面的比重

1去除不必要的空白和注释, 将inline的script和css放到外部文件中。 HTML Tidy这个工具可以用来自动的去除空白。还有一些其他的工具能够压缩javascript代码,比如将比较长的标志符换成短的,通过这种方式,尽量的减少页面的比重。

减少文件的数量
将少一个webpage被加载时所需要的下载的文件数量,有些browser具有cache的设置,如果一个css或是javascript文件没有被改变的话,它就不会再去下载一遍。通过这样的设置,也可能减少文件下载的数量。

减少Domain查询
对于每个Domain的查询,都需要去检索DNS, 过多的Domian查询会导致页面加载速度变慢。

缓存重用的内容
确保所有可以被缓存的数据都已被缓存,并在恰当的时间过期。
尤其要注意的是:Last-Modified header,它会记录下静态最近被改动的时间,而对于大多数web服务器来讲,都会默认的为静态文件提供这样的头。

js:避免使用eval或者是函数构造器
js解释器在执行代码前,会进行类似预编译的操作,首先会创建一个当前执行环境下的活动对象,并将那些用var声明的变量设置为活动对象的属性,但是此时这些变量的赋值都是undefined, 并将那些以funciton定义的函数也添加为活动对象的属性,而他们的值真是函数的定义。
使用eval时,传递给它的string内容,因为无法进行预编译,所以解释器也无法丢代码进行优化。这样的结果就是eval的效率相当低。
同时,在所以可以用string代替函数的地方,都不要用string来代替,而应该直接传一个函数过去。

js: 尽量使用局部变量而非全局变量
局部变量的查找速度比全局变量高出许多。

举个例子
var aGlobalVar = 1;

function doSomething(val) {
  var i = 1000;
  var agv = aGlobalVar;

  while(i--) {
    agv += val;
  };
  aGlobalVar = agv;
};

doSomething(10);


js: 尽量不要使用String的+操作。
可以用数组的join方法来替代, 可以大幅提高效率。
function StringBuffer() {
  this.buffer = [];
}

StringBuffer.prototype.append = function append(string) {
  this.buffer.push(string);
  return this;
};

StringBuffer.prototype.toString = function toString() {
  return this.buffer.join("");
}

var buf = new StringBuffer();
buf.append("hello");
buf.append("world");

alert(buf.toString());


js: 如果需要对某个String类型的变量调用很多次其方法时,尽量采用new String的方式创建。 否则每次调用该变量的String方法,都会先做一次类型转换。

js: indexOf方法比match方法快,尽量避免match一个很大的String。 同时正则表达式的创建也是需要时间的,因此尽量只产生一次。

DOM: 减少往DOM tree上添加节点的次数,尽量先生成好子tree,然后一下子append上去。或者通过cloneNode的方式先把node拷贝出来,进行修改,再重新replace上去。
var foo = document.createDocumentFragment();
foo.appendChild(document.createElement('p'));
foo.appendChild(document.createElement('p'));
foo.firstChild.appendChild(document.createElement('p'));
document.body.appendChild(foo);


var original = document.getElementById('container');
var cloned = original.cloneNode(true);
cloned.setAttribute('width', '50%');

var elem, contents;
for(var i = 0; i < textlist.length; i++) {
  elem = document.createElement('p');
  contents = document.createTextNode(textlist[i]);
  elem.appendChild(contents);
  cloned.appendChiled(elem);
}

original.parentNode.replaceChild(cloned, original);


DOM: 如果需要改变多个style属性,尽量一次性完全改掉,而不是一个一个的改,因为每改一个,都会导致页面的重绘。
有一个解决办法就是,为该elements设置两个class,当发生变化的时候,直接改掉它的class就好了。
或者将所有的新属性拼接成string,设置到style中。elt.style.cssText.

js: 将scripts放到文件最底下。 这样就可以保证html+css最先被加载。