文档章节

是谁拖了网站访问速度的「后腿」 ?

OneAPM蓝海讯通
 OneAPM蓝海讯通
发布于 2015/11/19 16:22
字数 1539
阅读 148
收藏 13

对做前端开发的同学来说,请求排队、网络、Web 应用程序、页面加载、资源下载这些针对网站的性能指标是很熟悉的。对白屏时间、首屏时间、页面加载完成时间、资源下载完成时间以及整页时间这些性能指标也不算陌生。

但是这10个指标分别都是什么意思?跟网站又有什么关系?为什么 TOPN 页面会惊现平均时间为1分钟?是谁在拖网站访问速度的「后腿」?本文希望能够帮助大家解决心中的困惑。

是谁拖了网站速度的「后腿」 ?

其实,性能指标不在多,找到适合自己业务的,作为判断标准才是最好的。

用户打开一个页面的过程

从用户在浏览器地址栏里面输入一个网址,到用户最终看到页面,在页面上可以进行各种操作,简单分为一下几个过程:

1、用户输入网址,浏览器发出请求。(主要是网络耗时) 2、Web 服务器接到请求,处理请求,(主要是 Web 服务器耗时) 3、Web 服务器返回数据,浏览器开始接受数据(主要是网络耗时) 4、浏览器边接受数据边加载页面中的脚本(下载 js 脚本等耗时) 5、浏览器下载页面中的样式、图片、视频等资源(下载图片等耗时)

OneAPM Browser Insight 指标介绍

OneAPM 基于浏览器端的性能监控产品 Browser Insight 针对这10个指标,分别从两个方面描述了网页加载过程:

第一个方面 页面加载5阶段的耗时,用于分片运营(请求排队、网络、Web 应用程序、页面加载、资源下载)

第二个方面 页面加载过程中的5个时间点,分别对应用户感知网页加载过程中的5个关键时间点和页面状态
  • 分段运营的5个指标中,请求排队和 Web 应用程序 是从 Ai 中获取到的
  • 网络 = 总网络时间- Web 应用程序耗时
  • 页面加载时间段=页面加载完成时间-白屏时间
  • 资源下载时间段=资源下载完成时间-面加载完成时间
  • 在试用的过程中,当应用程序异常时候,web应用程序面积就会增大
  • 当网络异常时候,网络的面积就会增大

平时大家看到页面加载时段或者资源下载时段面积大,是因为在一般情况下,Web 和网络都不是性能的瓶颈,性能瓶颈往往在复杂的前端页面和资源的加载过程。

是谁拖了网站速度的「后腿」 ?

页面加载过程中 5 个关键的时间点

白屏时间:打开一个页面感觉屏幕从白色开始变化时刻 首屏时间:页面刚开始加载是杂乱无章,无样式的(在网速缓慢时候特别明显),当页面样式加载完毕的时候,页面就好看多了

页面加载完成时间:

  • 页面加载完成时间是和业务关系最为密切的时间点,大量 js 业务逻辑都在这个时间点触发;

  • 如果你发现页面上一个按钮开始无法点击,过一会可以点击了,那么可以点击的时间点就是页面加载完成时间;

  • 对于移动端或者 PC 端,有很多应用是 js 控制出现一个 loading 动画,当有数据了在去掉 loading,js 控制出现 loading 的时刻就是页面加载完成时间;

  • 如果页面很长,开始没有滚动条,当滚动条出现的时候,就是页面加载完成时间;

  • 资源下载完成时间:可以看到页面上的图片、看到 iframe 嵌套页面里面的内容,浏览器标签不在出现loding不断旋转的时刻,就是资源加载完成的时间点;

是谁拖了网站速度的「后腿」 ?

  • 整页时间:页面彻底加载完成的时间,一般情况下资源下载完成时间和整页面时间很接近。

影响页面加载时段的主要因素

1: 基础的网络质量 2: 网页 Html 文件的大小 例如 你是10k,1M 10M 3:是页面中通过 script 标签引入的脚本下载和执行,包括 head 中的也包括 body 中

因为一个浏览器同时可以可以下载的文件是有限的,同一个域名下可以同时下载的文件也是有限的
总的来说一般的浏览器为2~4 性能好点的浏览器是8个左右
所以这个阶段网页中下载 CSS,图片等资源,都会影响页面加载时段的面积
因为css影响页面样式,所以一般放在 head 里面,公共的 js 文件放在 head 里面,业务的 js 建议通过动态加载

影响资源下载时段的主要因素

1:基础的网络质量 2:页面中图片、视频、iframe 嵌套页,广告等,都在这个阶段下载 3:下载资源个数和域名数,因为浏览器从同一个域名下同时下载资源是有限的,所以域名个数个和下载文件的个数都会影响整体性能 所以一般都会把一个域名下载资源分散到3个左右域名下,同时下载,提高页面性能 4:第三方资源 例如百度统计、谷歌统计、 百度地图 一般都会在这个阶段加载,如果第三方资源处现在问题,资源下载时段面积也会增大

查看那些资源的下载拖慢了整个页面的速度

是谁拖了网站速度的「后腿」 ?

Browser Insight 的 Trace 会收集缓慢页面的资源加载信息,可以作为性能优化的参考。欢迎大家访问官方网站,免费试用一下这款专业的前端性能优化产品。

© 著作权归作者所有

OneAPM蓝海讯通
粉丝 94
博文 631
码字总数 1266889
作品 0
海淀
私信 提问
20个免费的在线测试工具:测试网站速度

【IT168 技术】导读:本文将介绍20个网站速度的测试工具。网页性能很大程度上决定了用户体验,最终可以决定网站的成功。虽然我们都知道提高浏览速度的重要性,可是很多时候我们不知道什么元素...

mysqlops
2011/12/16
0
0
13个网站测速服务—转自Cnbeta

访问速度对于一个网站或博客来说实在太重要了,据有关部门的估计:一般一个浏览者如果在5-8秒钟没有打开一个网站,那么该网站会丢失1/3的浏览 用户。超过10秒,你的访客绝对会失去耐心!今天...

Qadir.luo
2010/11/29
423
0
yaf框架怎么使用,求大神

公司的新项目,是使用yaf框架开发,目前环境已经安装上了,但是这个东西怎么用啊,三个文件分别代表什么,我如果写代码,又是在哪写呢?刚毕业,求大神指点,不想拖团队后腿!!!

cosmopolitan
2014/09/03
1K
1
POJ 1979: Red and Black

题目在此 解题思路:直接 DFS 或 BFS 就行了。 之前被 STL 拖过后腿,偏执劲儿又上来了,这次刻意不用 std::queue,自己写队列,BFS 不用递归,结果就是……代码又臭又长,让人不忍直视…… ...

Alexander_zhou
2014/02/24
473
0
AV-TEST 发布“2017 最佳 Win 10 反病毒软件评测报告”

从 Windows 7 上的“Microsoft Security Essential”,到 Windows 10 上的“Windows Defender 安全中心”,微软操作系统“附赠”的反病毒软件已经迎来了强大的进化。而与全球知名第三方反病毒...

局长
2017/05/24
2.3K
13

没有更多内容

加载失败,请刷新页面

加载更多

链表中环的入口节点

给一个链表,若其中包含环,请找出该链表的环的入口结点,否则,输出null。 思路: public ListNode EntryNodeOfLoop(ListNode pHead) { if (pHead == null || pHead.next == null) ...

Garphy
7分钟前
2
0
Spring5 源码分析-容器刷新-invokeBeanFactoryPostProcessors()方法

上一篇:Spring5 源码分析-容器刷新-prepareBeanFactory()方法 该方法主要完成以下功能: 1.实例化ConfigurationClassPostProcessor,并调用ConfigurationClassPostProcessor.postProcessBe...

特拉仔
7分钟前
3
0
为什么MySQL用B+树做索引

索引这个词,相信大多数人已经相当熟悉了,很多人都知道MySQL的索引主要以B+树为主,但是要问到为什么用B+树,恐怕很少有人能把前因后果讲述的很完整。本文就来从头到尾介绍下数据库的索引。...

小致Daddy
33分钟前
4
0
网站前台的三级联动数据封装

我在进行项目时候遇到了一个进行数据封装的一个功能,进行数据的封装的功能也挺复杂,来回试了好几十种方法.最后使用的是这种方法. 使用一个pojo进行封装两个数据,一个是list一个是实体类. 具体...

小天丶羽
35分钟前
4
0
创龙基于TI AM437x ARM Cortex-A9 + Xilinx Spartan-6 FPGA的SPI FLASH、硬件加密芯片

TL437xF-EVM是一款广州创龙基于TI AM437x ARM Cortex-A9 + Xilinx Spartan-6 FPGA设计的开发板,底板采用沉金无铅工艺的4层板设计,尺寸为240mm*130mm,它为用户提供了SOM-TL437xF核心板的测...

Tronlong创龙
37分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部