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

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

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

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

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

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

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

利用图片延迟加载来优化页面性能(jQuery)

图片延迟加载也称懒加载,常用于页面很长,图片很多的页面,以电子商务网站居多,比如大家常上的京东,淘宝,页面以图居多,整个页面少说几百K,多则上兆,如果想一次性加载完成,不仅用户要哭了,服务器也得哭了。

为了避免这种请况发生,目前主流的做法是页面初次加载时,只显示当前可视区域的图片,当用户滚动页面的时候,当图片进入可视区域时再加载,这样可以明显的提高页面加载速度,而更少的图片并发请求数,也可以大大的减轻服务器的压力,可谓一举多得。

图片延迟加载的原理比较简单,先把图片的真实地址写在自定义的一个属性上,比如 data-url(HTML5中以 data- 开头的自定义属性都是合法的),src 地址最好不要空着,放一个 1×1 的全透明占位图片就行了,如:

<img src="images/transparent_img.png" data-url="images/real_img.jpg">

也可以加上如果用户禁用JS后的替代方案:

<img src="images/transparent_img.png" data-url="images/real_img.jpg" >
<noscript><img src="images/real_img.jpg" ></noscript>

当页面滚动的时候开始计算图片是否处在当前窗口的可视区域,如果在的话,就把 src 的假地址替换成 data-url 的真实地址,ok,原理就是这样,很简单吧。

网上详细讲解这个效果的很多,例子也不少,大家有兴趣可以搜一下。最近在看前端性能优化方面的东西,正好上午没事想写个插件练练手,就写了这个简单的延迟加载的插件,基于 jQuery,代码不多,只有 60 行:

继续阅读 利用图片延迟加载来优化页面性能(jQuery)

理解浏览器的并发请求

最近看了月光的《为什么要少用 iframe ?》,很受启发,上面不但说了 iframe 的创建比其它包括 scripts 和 css 的 DOM 元素的创建慢了 1-2 个数量级,还说到了 iframe 阻塞页面加载,占用浏览器并发连接数的问题,因为 window 的 onload 事件需要在所有 iframe 加载完毕后(包含里面的元素)才会触发。当 onload 事件加载延迟后,它给用户的感觉就是这个网页非常慢。WebKit 内核浏览器通过 JavaScript 动态设置 iframe 的 src 可以避免这种阻塞情况。

虽说 iframe 用的越来越少了,但这个浏览器链接数的确是个值得注意的地方,随即在网上找了很多资料看,顺便整理出来,和大家共享。首先先来扫个盲,怎么理解浏览器并发链接数呢?

  1. 浏览器发出请求。
  2. DNS进行解析。
  3. 服务器返回请求内容。
  4. 浏览器按顺序分析获取的内容,并且依次获取页面的外链css、外链js、img等,一个下载完再下载下一个。

假设下载一个非常大的图片,那一个链接数肯定会让网页加载的非常慢,因为加载是队列式的,后面的内容被图片给“堵”住了。为此,现代浏览器都支持并发请求,比较老的浏览器,包含 IE6 & 7 和 Firefox 2,只能对一个域名同时打开两个连接。而最新的浏览器,对一个域名同时并发请求数达到了4到8个,这样浏览器就可以同时下载js,css,img了,一般情况下,堵塞的现象就很少了。

浏览器 HTTP 1.1 HTTP 1.0
IE 6,7 2 4
IE 8,9 6 6
Firefox 13 6 6
Chrome 20 6
Safari 5.1.7 6
Opera 11.64 8

上表数据来自SteveSouders.com

继续阅读 理解浏览器的并发请求