通过chrome浏览器分析网页加载时间

最新推荐文章于 2024-04-12 00:50:17 发布
VIP文章 最新推荐文章于 2024-04-12 00:50:17 发布
阅读量2.9k 收藏 4
点赞数
文章标签： 网络 前端 javascript ViewUI
原文链接：http://www.cnblogs.com/yangtoude/p/chrome-devtools-network-performance.html
版权

今天趁着下班的时间看了下chrome浏览器的网页加载时间分析工具和相关文档，简单写点儿东西记录一下。

以百度首页加载为例，分析下一张图片1.jgp（就是背景图）的加载时间

看右侧的Timing标签，从下往上看各个阶段：

最下面一行，Explanation是一个链接，它链接到了chrome对Timing解释的文档(从这里可以看出chrome对开发人员真的很友好)，这张图片加载总共花费的时间为：36.32ms。

Content Download，浏览器下载响应文件所花费的时间26.84ms，与本地网络有关系。

Waiting(TTFB)，从发起请求到接收到服务器响应的首个字节所花费的时间，它的主要组成部分：服务器响应和网络传输（往返）。

Request sent. The request is being sent.  表示请求正在发出，这个是不占用时间的。

Stalled。The request could be stalled for any of the reasons de

最低0.47元/天 解锁文章
weixin_30699443
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
chrome浏览器打开axure生成的HTML静态文件页面
11-21
chrome浏览器打开axure生成的HTML静态文件页面 已升级manifest version 3版本 第一步：解压得到一个axure-chrome-extension的文件夹。 第二步：打开Google浏览器，在地址栏中输入chrome://extensions/ 或者右上角设置——更多工具——扩展程序，打开扩展程序界面。在页面右上角打开【开发者模式】。 第三步：点击【加载已解压的扩展程序】，选择刚刚解压得到的“axure_chrome_extension”文件夹，即可安装成功。 axure_chrome_extension文件夹不可删除
统计web网站页面加载时间
Anita__Li的博客
09-18 1836
前提：需要谷歌浏览器 1.先进入需要统计时间的页面 2.按F12 3.点击performance 4.点击开始录制 5.点击停止录制 6.点击call tree，就会显示从鼠标点击到页面渲染需要的时间
Chrome浏览器全屏显示并加载指定页面
05-25
本工具实现Chrome浏览器全屏显示加打开指定页面，并实现开机自启动及信息亭等功能。在触屏显示器上特别适用。本软件使用C#及Selenium自动化库进行编写。
Google Chrome浏览器下载
04-18
Google Chrome浏览器下载，谷歌浏览器(Google Chrome)是谷歌公司开发的一款免费的网络浏览器。它拥有简洁的界面,机智的地址栏,强大的浏览选项和web应用扩展。Chrome 浏览器的目标是让上网变简单、快速和安全。 主要特性: • 速度极快:Chrome浏览器采用了极简主义的设计理念,页面加载速度很快,很好地兼顾了页面显示速度和系统资源占用。 • 安全稳定:Chrome浏览器内置了安全沙箱机制,避免恶意软件对用户系统的攻击,保证上网安全。并且定期自动更新,修复安全漏洞。 • 界面简洁:Chrome浏览器界面简单实用,主页干净利落,地址栏和搜索栏完美结合,提供更加直观的上网体验。 • 强大扩展:Chrome浏览器支持各种web应用扩展,用户可以根据个人需要自由安装与卸载,比如广告拦截,网页翻译等功能。 • 跨平台支持: Chrome浏览器支持Windows、Mac、Android、iOS多个平台,PC端和移动端同步数据与设置,使上网体验无缝切换。 • 数据同步:Chrome浏览器通过与Google账号绑定,实现上网浏览数据跨设备自动同步,不论在手机还是电脑上浏
浏览器中Network各个耗时含义
ime33的博客
05-21 3148
一、Queueing 发起请求文件顺序的排序耗时； 优化点：浏览器在以下情况会对请求进行排序，1、JS执行发起http请求存在更高优先级的请求；2、并发列队tcp链接达到上限（谷歌HTTP1.0以上处理上限6个）；3、浏览器分配缓存空间； 措施：1、在JS执行过程中，识别哪些是需优先取数的请求，优先排序进队列；2、并发http数控制在浏览器上限合理范围，特别注意图片的加载尽量使用精灵图，减少请求次数； 二、Stalled 是浏览器得到要发出这个请求的指令到请求可以发出的等待时间，一般是代理协...
谷歌浏览器开发模式network界面 时间段 隐藏
liushilejimo的博客
08-05 2755
在开发者模式下 ，标识部分点击下，就可 隐藏时间段
golang获取utc时间_H3C交换机修改时间
weixin_28726391的博客
12-18 562
首先学习：　　NTP　　network time protocol　　网络时间协议　　UTC　　世界协调时间　　 # 查看时钟设置　dis clock #图片为已经配置好的时钟有两种时钟获取方式1.开取NTP ，由网络时钟服务器获取时间　　　　clock protocol ntp mdc mdc-id2.不置时钟服务器， 　　　　　　　　　　　　 clock protocol none# cloc...
chrome状态栏上的时间消失问题解析
fan380485838的专栏
04-18 642
frameworks/base/core/java/com/android/internal/policy/DecorView.java 由于修改了上面这个文件中的状态栏颜色，导致其它分辨率计算状态栏颜色的时候，当固定死的状态栏颜色一致，导致看不清楚。 --- a/android/frameworks/base/core/java/com/android/internal/poli...
前端日常调试:Chrome浏览器Network面板http请求时间分析
stc90c51的博客
10-23 1642
Chrome浏览器开发者工具Network窗口下，可以查看下载各组件所需的具体时间 根据上表进行简要分析—— Stalled（阻塞） 　　浏览器对同一个主机域名的并发连接数有限制，因此如果当前的连接数已经超过上限，那么其余请求就会被阻塞，等待新的可用连接；此外脚本也会阻塞其他组件的下载； 　　优化措施： 　　1、将资源合理分布到多台主机上，可以提高并发数，但是增加并行下载数量也会增大开销，这取决于带宽和CPU速度，过多的并行下载会降低性能； 　　2、脚本置于页面底部；   DNS Lo...
chrome浏览器如何断点调试异步加载的JS
11-23
前言 在我们日常开发中，常常利用chrome强大的控制台Sources下面进行代码断点调试，但是通过$.getScript等异步加载JS的方式在Sources里面就是找不到，那如何进行debug断点调试呢？下面来一起看看。 这是我们用Sources断点调试的实例图： 图中我们可以看到，在index.js中我们通过$.getScript引入test.js，看看表现如何： 我们在Network中看到test.js已经成功引入，但是它却属于XHR类请求，这样我们在Sources必然找不到它。 不出所料，Sources里果然没有发现test.js的踪迹！高潮来了，那还怎么进行断点调试呢？？？ 我
chrome 浏览器加载activex
05-22
资源为 chrome 浏览器调用 ocx 插件配套文件，具体使用方法请参考 http://blog.csdn.net/wangchao1988ok/article/details/45193489
Chrome Performance 页面性能分析
Andrew_Chenwq的博客
05-21 4291
首先在新的无痕窗口打开网页，打开Chrome DevTools 切换到 Performance 下可以看到以下画面1上图1、3区域按钮可以用来触发性能数据记录，黑色按钮可以记录交互阶段的性能数据，圆形箭头按钮用来记录加载阶段的性能数据。上图2区域 可以设置当前页面的网络加载速度与cpu运算速度。下面我们点击黑色按钮来生成一份交互阶段的性能报告Loading：加载时间Scripting：js计算时间Rendering：渲染时间Painting：绘制时间Other：其他时间Idle。
谷歌浏览器测试网页加载时间
patkritLee的博客
03-25 1万+
1、首先打开谷歌浏览器； 2、然后随便打开一个网页，右击鼠标，选择检查，进入到如下页面： 3、点击右侧的 TimeLine，显示如下： 4、然后刷新左侧页面，就会在右边显示 加载时间，如下： 5、如果想测试当前网址 在相应的手机网络上 响应时间，点击 手机 标志，如图： 6、再点击右侧的按钮，如下： 7、找到setting，然后设置机型或者网络环境，然后再重新刷新页
【调试】用chrome调试获得时间戳
Tuling2020的博客
08-22 836
new Date().getTime("2016-06-30") 转载于:https://www.cnblogs.com/CESC4/p/7411888.html
chrome----timing含义解释
FreeMing-imduingui0
02-23 1万+
Queueing 请求文件顺序的的排序 什么东西？ 浏览器有线程限制的，发请求也不能所有的请求同时发送，所以，队列喽。 从添加到待处理队列 到实际开始处理的时间间隔标示 Stalled 是浏览器得到要发出这个请求的指令到请求可以发出的等待时间，一般是代理协商、以及等待可复用的TCP连接释放的时间，不包括DNS查询、建立TCP连接等时间等 DNS Lookup 时间执行DNS查找。每个
谷歌浏览器network请求时间分析！
热门推荐
llhui1102的博客
09-12 2万+
谷歌浏览器network用法详解: network工具功能强大，能够让我看到网页加载的信息，比如加载时间，和先后顺序，是否是并行加载，还是堵塞加载。 谷歌浏览器当然还有其他工具，关于TimeLine和console的用法可以参阅以下两篇文章。 （1）.Timeline可以参阅谷歌浏览器Timeline用法详解一章节。 （2）.console的使用可以参阅谷歌控制台console相关命令介绍
Stalled:一次请求超时异常处理
顺其自然~专栏
11-05 3264
最近项目中出现一个问题，前端每隔1秒向同一个url发起请求，第一次请求响应时间2秒左右，此后每次请求耗时会增加大约1秒，直到超时。
网络安全之反弹Shell
最新发布
小飞的博客
04-12 1515
在网络安全和渗透测试领域，“正向Shell”（Forward Shell）和"反向Shell"（Reverse Shell）是两种常用的技术手段，用于建立远程访问目标计算机的会话。这两种技术都可以让攻击者在成功渗透目标系统后执行命令，但它们在建立连接的方式上有所不同。
chrome浏览器如何查看页面加载时间
06-08
您可以使用Chrome浏览器自带的开发者工具来查看页面加载时间。具体操作步骤如下： 1. 打开Chrome浏览器，访问您要测试的网站。 2. 按下F12键或者右键选择“检查”打开开发者工具。 3. 在开发者工具中选择“性能...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值