页面性能中的几个宏观指标

标签: 页面 性能 宏观 | 发表时间:2012-04-24 12:34 | 作者:
出处:http://hujinpu.com/

最近在做提升淘宝页面性能相关的事情。从宏观层面,传统web页面,我比较关注的几个指标:

  • 用户的动作效果(比如点击),超过0.1s,用户就觉得不流畅;
  • 出现loading的最佳时间为0.4s后,这会让用户忽略前面0.4s的等待;
  • 对于用户的输入,0.1s-1s用户感觉计算机在为他处理事情,是可以接受的等待,必须在1s内给出对应输出,这也意味着网页的首屏显示时间最理想的为1s内;
  • 8s后页面无法打开,用户大部分选择离开,12s后,99%的选择关闭该网页;
  • 宽带用户更加没有耐心,愿意等待时间缩短到4-6s;
  • 首屏的最佳设计高度600px。

相关 [页面 性能 宏观] 推荐:

页面性能中的几个宏观指标

- - Jinpu's blog
最近在做提升淘宝页面性能相关的事情. 从宏观层面,传统web页面,我比较关注的几个指标:. 用户的动作效果(比如点击),超过0.1s,用户就觉得不流畅;. 出现loading的最佳时间为0.4s后,这会让用户忽略前面0.4s的等待;. 对于用户的输入,0.1s-1s用户感觉计算机在为他处理事情,是可以接受的等待,必须在1s内给出对应输出,这也意味着网页的首屏显示时间最理想的为1s内;.

使用performance api监测页面性能

- - jackyrong
对于前端开发来说,知道整个页面从开始加载到有内容展示出来的时间是很重要的事情. 通常我们要知道页面加载的时间的话.是采用计算几个关键的时间点的方法来得出页面加载的时间.但是这个方式存在一些问题,比如:我们不知道浏览器在开始解析页面之前卸载前一个文档,解析dns的时间. 那么performance API是啥,能做啥和不能做啥呢.

[转]浏览器的加载与页面性能优化

- Allen - linux大棚-roclinux.cn
本原创文章属于《Linux大棚》博客,博客地址为http://roclinux.cn. 为了防止某些网站的恶性转载,特在每篇文章前加入此信息,还望读者体谅. 文章部分转自“百度泛用户体验平台”,本文地址为:http://www.baiduux.com/blog/2011/02/15/browser-loading/.

浏览器的加载与页面性能优化

- 彦强 - 百度泛用户体验
本文将探讨浏览器渲染的loading过程,主要有2个目的:. 了解浏览器在loading过程中的实现细节,具体都做了什么. 研究如何根据浏览器的实现原理进行优化,提升页面响应速度. 由于loading和parsing是相互交织、错综复杂的,这里面有大量的知识点,为了避免过于发散本文将不会对每个细节都深入研究,而是将重点放在开发中容易控制的部分(Web前端和Web Server),同时由于浏览器种类繁多且不同版本间差距很大,本文将侧重一些较新的浏览器特性.

空路径对页面性能的影响

- ajian - 岁月如歌
今天同事小凡反馈,淘宝有个商品详情页,旺铺皮肤的 CSS 文件在 Firefox 下很奇怪的被加载了两次. 最近对 detail 的渲染速度进行了优化,因此遇到 bug 第一反应是往优化方面找原因. 然而调试了许久才发现,该 bug 居然是一个在淘宝深藏了很久的 bug, 在 IE 下会导致一些糟糕的情况产生.

空路径对页面性能影响的解决方案

- Lynn - 幸福收藏夹
前几天在 Google Reader 中看到玉伯博客的分享——空路径对页面性能的影响. 确实,在写 CSS 的时候,用 background:url(#) 还是会对页面进行多一次请求的. 不过,因为写多 CSS,一般需要用空背景来解决 bug 的时候,测试结果用 background:url(about:blank) 才是我们想要的:解 bug,不影响性能.

浏览器的加载与页面性能优化

- - 可咔酷 | 网络杂货铺
本文将探讨浏览器渲染的loading过程,主要有2个目的:. 了解浏览器在loading过程中的实现细节,具体都做了什么. 研究如何根据浏览器的实现原理进行优化,提升页面响应速度. 由于loading和parsing是相互交织、错综复杂的,这里面有大量的知识点,为了避免过于发散本文将不会对每个细节都深入研究,而是将重点放在开发中容易控制的部分(Web前端和Web Server),同时由于浏览器种类繁多且不同版本间差距很大,本文将侧重一些较新的浏览器特性.

使用Chrome DevTools的Timeline分析页面性能

- - SegmentFault 最新的文章
随着webpage可以承载的表现形式更加多样化,通过webpage来实现更多交互功能,构建web应用程序已经成为很多产品的首要选择. 这种方式拥有非常明显的优势:跨平台、开发便捷、便于部署和维护等等,但随着功能的不断积累,web应用程序也会变得越来越复杂. 但是,我们仍然想要在webpage支持丰富的呈现形式的同时,让页面效果能够达到>=60fps(帧)/s的刷新频率以避免出现卡顿,就需要我们使用一些比较直观的方式来分析衡量页面的性能问题,为性能优化方案提供依据.

Javascript高性能动画与页面渲染

- - 极客521 | 极客521
如果你不得不使用setTimeout或者setInterval来实现动画,那么原因只能是你需要精确的控制动画. 但我认为至少在现在这个时间点,高级浏览器、甚至手机浏览器的普及程度足够让你有理由有条件在实现动画时使用更高效的方式. 页面是每一帧变化都是系统绘制出来的(GPU或者CPU). 但这种绘制又和PC游戏的绘制不同,它的最高绘制频率受限于显示器的刷新频率(而非显卡),所以大多数情况下最高的绘制频率只能是每秒60帧(frame per second,以下用fps简称),对应于显示器的60Hz.

异步脚本载入提高页面性能

- - Harttle Land
可能很多人都知道JavaScript的载入和渲染会暂停DOM解析,但可能仍缺乏直观的体验. 本文通过几个例子详述脚本对页面渲染的影响,以及如何使用异步脚本载入策略提供页面性能和用户体验. 包括在脚本载入缓慢或错误时尽早显示整个页面内容,以及早点结束浏览器忙提示(进度条、旋转图标、状态栏等). 要理解异步脚本载入的用处首先要了解浏览器渲染DOM的流程,以及各阶段用户体验的差别.