全网SEO优化品牌服务商

网站优化+关键词排名=一站式seo优化外包服务

咨询热线:0571-88730320

整站优化新闻

当前位置: 首页 > 整站优化新闻

为什么我们觉得打开网页很慢?

来源:建站公司发布时间:2021-10-12 15:49:00

在我们的日常测试中,我们会遇到web性能感知测试的工作,比如:测试访问一个web页面需要时间。对于这种测试,笔者经历了两种简单的方法:测试页面中使用的后端接口的响应时间与web页面的响应时间相同;使用秒表计算网页的耗时响应。

测试网页的响应非常耗时。我们需要知道整个过程包含什么,直到网页被刷新和响应。

从总体上看,主要包括两部分:后端接口请求的响应时间和加载前端页面资源的时间。但是,如果没有前端页面资源加载时间,将后端接口响应时间等同于网页响应时间是不准确的;网页响应时间不是清除浏览器本身的资源配置和消耗,而是简单地用秒表来计算,结果粗糙且不准确。

那么,我们应该如何测试Web响应时间呢?当我们觉得打开网页很慢时,原因是什么?

如果你想做好事,你必须首先使用工具。您知道测试web应用程序对于浏览器是必不可少的。但是,如何使用浏览器来分析web性能,您知道吗?

以chrome为例。让我们先来了解一下这个强大而丰富的工具,开发者工具。

使用Ctrl+Shift+I打开开发者工具,可以看到元素、源、网络、性能等9个面板,在分析web性能时,我们主要使用性能面板。

以百度搜索“51Testing”为例,打开chrome开发者工具,切换到性能面板,点击录制按钮,录制网页操作,录制结果如图2所示。

在分析web性能之前,我们首先了解performance面板的一些特性。如图2所示,performance面板分为四个功能区域:specific operation区域、overview区域、performance analysis区域和performance summary区域。

1.具体操作区域:包括记录、刷新页面分析、清除结果等操作;

2.概述区:高度概括了时间线上的变化,包括FPS、CPU、net、每个时间段中执行的事件序列,并且您可以知道每个时间段中执行了什么(精确到毫秒)。当鼠标打开时,我们还可以以大图片的形式查看每个时间段界面的渲染情况;

3.性能分析区:从不同角度分析选框区。

例如,网络可以直观地看到后台请求的响应时间,帧可以直接看到每个帧的加载时间。Main是performance tool的重要组成部分,它记录了渲染过程中主线程的执行记录,点击Main可以看到某个任务执行的具体情况;

4.性能摘要区域:分析到毫秒级别,并按调用级别和事件分类进行排序。

在了解了性能面板之后,我们来谈谈康康,如何分析和解决性能面板遇到的问题。

结合“性能面板”的“概述”区域和“性能分析”区域的“帧”视图,拖动观察区域可以清楚地知道每个帧的加载时间。以图2为例,我们可以看到从输入关键字“51Testing”到显示搜索结果的整个过程需要1332ms。

使用性能面板,您可以更准确地计算网页的响应时间。另外,通过FPS图可以看到帧速率的波动(如下图箭头所示)。通常,绿条越高,FPS越高。只要在FPS上方看到一个红色条,就意味着帧速率下降得很低。当动画以60帧/秒的速度运行时,用户会感到非常平滑。

5.如何分析Web响应过程中每个阶段的耗时?

单击性能分析区域中的主功能。在性能摘要区域中,您可以看到每个阶段的时间消耗,例如加载、脚本编写和呈现。

您还可以看到每个事件的时间消耗(条形图表示事件的执行,长度越长,花费的时间就越多),以及事件的调用堆栈及其调用堆栈的时间消耗(垂直表示调用堆栈)。从下图可以看出,从搜索“51测试”到响应结果的过程中,脚本所占的比例较高。通过main函数,您可以看到如果这些条的右上角是红色的,则表示在执行代码的过程中可能存在性能问题,如下图中的箭头所示。

6.如何分析Web响应中每个接口的调用时间?

在性能分析区点击网络功能,可以看到在网页响应过程中,每个请求的网络时间和资源加载时间。

在性能记录开始时,勾选特定操作区中的“内存”选项,性能面板将记录网页加载过程中不同时段、不同事件(如jsheap、文档等)的内存消耗情况。通过观察内存的概览区域随时间线的变化,如果内存在增长,则可能出现内存溢出。

扫码咨询