怎么提高HTML页面加载速度

如何提高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最先被加载。

查看更多 下一篇