改善用户体验:Web前端优化策略总结(二)

34浏览 / 4回复

Sportboy

Sportboy

Sportboy(ID:guhonglul)

Sportboy
  • 帖    子:419
  • 精    华:0
  • 粉    丝:339
  • Z 金 豆:0
  • 城    市:北京
  • 最后登录:2017-12-03
  • 注册时间:2005-05-23
状元 状元状元状元状元

当前经验10792分,升级还需14758

下一等级:九品九品九品如何升级?

  • 帖子:419
  • 精华:0
  • Z金豆:0
  • 城市:北京
  • 注册:2005-05-23
  • 登录:2017-12-03

所有帖子>>

发布于 2010-05-25 08:53:31
快速回复 只看楼主 收藏本帖 私信楼主
分享

接上篇

4. Lazy Load j

  随着j框架的流行,越来越多的站点也使用起了框架。不过,一个框架往往包括了很多的功能实现,这些功能并不是每一个页面都需要的,如果下载了不需要的脚本则算得上是一种资源浪费-既浪费了带宽又浪费了执行花费的时间。目前的做法大概有两种,一种是为那些流量特别大的页面专门定制一个专用的mini版框架,另一种则是Lazy Load。YUI则使用了第二种方式,在YUI的实现中,最初只加载核心模块,其他模块可以等到需要使用的时候才加载。

5. 将CSS放在HEAD中

  如果将CSS放在其他地方比如BODY中,则浏览器有可能还未下载和解析到CSS就已经开始渲染页面了,这就导致页面由无CSS状态跳转到CSS状态,用户体验比较糟糕。除此之外,有些浏览器会在CSS下载完成后才开始渲染页面,如果CSS放在靠下的位置则会导致浏览器将渲染时间推迟。

  6. 异步请求Callback

  在某些页面中可能存在这样一种需求,需要使用scripq标签来异步的请求数据。类似:

 

  1. j :   
  2.  /*Callback函数*/   
  3.  function myCallback(info){   
  4.  //do something here   
  5.  }     
  6.  
  7. HTML:    
  8. "text/j" src="http://abc.com/cb">   
  9.  
  10. cb返回的内容:  myCallback('Hello world!');  

  像以上这种方式直接在页面上写对页面的性能也是有影响的,即增加了页面首次加载的负担,推迟了DOMLoaded和window.onl事件的触发时机。如果时效性允许的话,可以考虑在DOMLoaded事件触发的时候加载,或者使用setTimeout方式来灵活的控制加载的时机。

  7. 减少不必要的HTTP跳转

  对于以目录形式访问的HTTP链接,很多人都会忽略链接最后是否带’/',假如你的服务器对此是区别对待的话,那么你也需要注意,这其中很可能隐藏了301跳转,增加了多余请求。具体参见下图,其中第一个链接是以无’/'结尾的方式访问的,于是服务器有了一次跳转。

  8. 避免重复的资源请求

  这种情况主要是由于疏忽或页面由多个模块拼接而成,然后每个模块中请求了同样的资源时,会导致资源的重复请求。出现的几率不大,但是还是要注意排查,不然可能会出现如下局面,来自这里。

ldzw999

ldzw999

ldzw999(ID:ldzw999)

ldzw999
  • 帖    子:784
  • 精    华:0
  • 粉    丝:18
  • Z 金 豆:0
  • 城    市:北京
  • 最后登录:2014-06-12
  • 注册时间:2009-09-10
榜眼 榜眼榜眼榜眼

当前经验4642分,升级还需8108

下一等级:状元状元状元状元状元如何升级?

  • 帖子:784
  • 精华:0
1楼 发表于 2010-05-26 21:33:17

路过 支持下。。》~ 好东西。

zolxx

zolxx

zolxx(ID:banjvqi)

zolxx
  • 帖    子:1619
  • 精    华:0
  • 粉    丝:37
  • Z 金 豆:0
  • 城    市:北京
  • 最后登录:2018-01-15
  • 注册时间:2009-11-03
榜眼 榜眼榜眼榜眼

当前经验5515分,升级还需7235

下一等级:状元状元状元状元状元如何升级?

  • 帖子:1619
  • 精华:0
2楼 发表于 2010-05-28 15:24:54

轻轻飘过

静静地Angel

静静地Angel

静静地Angel(ID:jingangel_z)

静静地Angel
  • 帖    子:244
  • 精    华:1
  • 粉    丝:160
  • Z 金 豆:0
  • 城    市:北京
  • 最后登录:2018-01-15
  • 注册时间:2009-04-10
状元 状元状元状元状元

当前经验12102分,升级还需13448

下一等级:九品九品九品如何升级?

  • 帖子:244
  • 精华:1
3楼 发表于 2010-05-28 18:06:06

不错的文章,继续顶

4楼 发表于 2010-05-28 23:07:43
谢谢楼主!

回复本帖:改善用户体验:Web前端…… 高级回复表情
看完了感觉怎样?评论两句再走吧
Ctrl+Enter 快捷发布积分规则

针对ZOL论坛您有任何使用问题和建议 您可以 联系论坛管理员查看帮助  或  给我提意见

http://techbbs.zol.com.cn true http://techbbs.zol.com.cn/1/9_2424.html report 1834 接上篇 4. Lazy Load j   随着j框架的流行,越来越多的站点也使用起了框架。不过,一个框架往往包括了很多的功能实现,这些功能并不是每一个页面都需要的,如果下载了不需要的脚本则算得上是一种资源浪费-既浪
我的ZOL
免费抽奖

每日大转盘

免费抽奖
上一个 下一个

    回复4| 当前关注:0人