用小技巧来优化大数据量的网页

有些网页忒坑爹,里面数据量大的惊人,都上兆了,先不说下载了,就是浏览器去渲染都得渲染好久。当然了,说的这个例子比较极端,但比较长,渲染比较耗时的页面还是会碰到的,想给用户很“快速”的感觉,得想点办法:)

页面里数据量太大,对元素进行解析和渲染会耗费很多时间,但如果我们先让第一屏的内容正常显示出来,然后将后面的内容以加上注释的形式,加载到一个容器中,这样因为内容是注释的,浏览器只会当他是文本去处理,不用去解析和渲染,页面加载的会非常快,然后再用 js 把加上注释的内容取出来 innerHTML ,就 OK 了。

(function(){
  //获取容器test
  var dom = document.getElementById("test");
  //获取容器内的注释内容
  var html = test.childNodes[0].nodeValue;
  //将容器test的内容替换,然后解析并渲染
  dom.innerHTML = html;
})();

这样相当于给用户一个“快速”的假象,也可以把内容放在 textarea 里,原理都是一样的。

其实这个方法不一定非要大数据量的网页才会用到,如果想控制页面里元素的加载顺序,又不想改 html 的书写顺序的话,可以用用:)

继续阅读 用小技巧来优化大数据量的网页