网页分块加快输出

为了加快网页的响应速度,可以先把一些静态资源先加载输出,然后把一些动态请求后台资源分块加载输出。有什么办法可以做到,优化用户体验效果?

评论 (3)链接2012-01-30 
  • 0 支持
    用 ajax 行么? – 冯义军 2012-01-30
  • 0 支持
    页面尽量用div+css,别用table – 张洪保 2012-01-30
  • 0 支持
    jquery lazyload 我们用的是这个 – tarfly 2012-01-31

1、合并图片

尽量把几个可能组合在一起的图片制作成一张图片,这是因为浏览器对网页中的每个图片都会做个别请求,也就是说如果网页中有5张图片,那么浏览器就会向WEB服务器提出5次请求,这必然会增加服务器的负担,从而使得速度变慢!当然大图片除外。

2、指定宽高

在网页中镶入图片的时候,一定注明高度和宽度,如:<IMG SRC="TEST.GIF" WIDTH=100 HEIGHT=100>,如果没有注明,浏览器在下载完图片以前,将无法确定图片的大小,页面的提交就会延迟,甚至可能重复向WEB服务器提出请求。

3、选择图片格式

选择适当的图片格式,常见的格式为:JPG和GIF,两种图片分别采用不同的方法压缩图片。JPG支持的颜色数量比较多,一般对于照片或者颜色变化显著的图片用JPG格式,还应该适当的选择压缩比,在基本不损坏效果的前提下尽量压缩。GIF最多支持256种颜色,适合小图片、色彩比较少的图片,对于GIF图片可以在不影响图片效果的前提下尽量减少图片的颜色数量。适当的选择图片的格式,对图片的大小会有不小的影响。可以借助一些图片处理软件。

4、图片处理

应该采用逐步提交方式提交图片,GIF和JPG两种图片格式都支持逐步提交格式,图片在逐步提交时,在浏览器收到完整图片信息之前就开始显示了。这样看起来快一些。GIF保存为交错格式,JPG选择逐步编码来保存。

5、替换文字

对于所有图片应该带有文本,用<IMG>ALT标签实现,因为很多朋友为了增加浏览速度关闭了浏览器的图片功能。提供了文本有助于搞清页面的内容。

6、关于表格

表格的应用不仅仅限于,在一些内容列表的时候时候,对于网页的整个布局,表格有着非常重要的作用。为了能使大量的内容在网页上布置的井井有条,一般通过没有边框的来将网页分块,然后将不同的内容放在不同的单元格中。表格的使用是有一些技巧的:首先,尽量避免使用结构复杂的表格,因为结构复杂的表格,有可能使浏览器多次刷新表格。其次,能将一个表格分为两个或两个以上的时候应该分为两个,因为浏览器只有在整个表格的内容全部读入以后再输出显示,如果表格中的内容非常的多,那么在加载过程中,浏览器在表格读入完毕以前将一直显示空白。最后,表格嵌套不要超过3层,层次太多的话在加载表格的时候会使浏览器花大量的时候处理表格结构.

7、减少下载

减少WEB页面下载时间的关键就是设法减小文件大小。当多个页面共用一些成分内容时,就可以考虑将这些公用部分单独分离出来。比如:我们可以将多个HTML页面都用到的脚本程序编写成独立存在的.JS文件,然后再在页面中按如下方式调用它:

<SCRIPT SRC="MYFILE.JS"></SCRIPT>

这样,公用文件只需要下载一次,然后就进入缓冲区。等下次再次调用包含公用文件的HTML页面时,下载时间明显减少。

8、让样式表内容进入地下工作

CSS是HTML装扮器,一个漂亮的WEB页面不可能没有它。HTML页面中有多种引用CSS的方法,不同的方法导致的效率也不一样。通常,我们可以将定义于<STYLE></STYLE>间的样式控制代码提取出来,保存到单独的.CSS文件中,然后在HTML页面中以<LINK>标记或者@IMPORT标记的方式进行引用:

<STYLE>
@IMPORT URL("MYSHEET1.CSS");
</STYLE>

请注意2点:1、.CSS文件中无需包括<STYLE>标记;2、@IMPORT和LINK标记要定义在HTML页面的HEAD部分。

9、数据加载采用异步,也就是我们经常说的ajax技术。这样在页面加载的过程中,还会通知服务器处理,直到处理结束通知页面更新。

该答案已被锁定,无法对其进行评论,编辑及投票。
()
评论 (0)链接 • 2012-01-31

1.有第三方的插件就可以实现,比如facebook推出的BigPipe技术,可以关注下。
2.页面多个iframe,可以实现“分块”的加载
3.合理的DIV+CSS布局,加载速度也会有所提升
4。使用ajax
5。对JS、css以及图片等较大文件,进行流压缩后呈现给用户,比如用gzip

大概想到的就这些了

该答案已被锁定,无法对其进行评论,编辑及投票。
()
评论 (0)链接 • 2012-01-30

合理嵌入JS文件

  
所有浏览器在下载JS的时候,会阻止一切其他活动,比如其他资源的下载,内容的呈现等等。至到JS下载、解析、执行完毕后才开始继续并行下载其他资源并呈现内容

所有我们要合理嵌入JS文件

1、放在底部,虽然放在底部照样会阻塞所有呈现,但不会阻塞资源下载。

2、如果嵌入JS放在head中,请把嵌入JS放在CSS头部。

3、使用defer

4、不要在嵌入的JS中调用运行时间较长的函数,如果一定要用,可以用setTimeout来调用

该答案已被锁定,无法对其进行评论,编辑及投票。
()
评论 (0)链接 • 2012-02-04

其实也还有一种方法,就是基于HTTP1.1协议的服务器推送,可以Flush数据到前端,当然,这个前提是要基于HTTP的长连接,目前有Comet可以实现,看看这篇技术资料(http://www.zhanshaoqian.cn/article/11-07-05/7.html),相信对你有很大帮助,不过目前很少有人使用HTTP的Push技术。

该答案已被锁定,无法对其进行评论,编辑及投票。
()
评论 (0)链接 • 2012-01-31
德问是一个专业的编程问答社区,请 登录注册 后再提交答案