web打印页面加载数据耗时

最新推荐文章于 2023-05-25 08:30:00 发布
最新推荐文章于 2023-05-25 08:30:00 发布
阅读量564 收藏 1
点赞数
分类专栏： 前端开发 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/denglouhen/article/details/126306637
版权
本文深入探讨了Web页面加载过程中的关键性能指标，包括重定向、DNS查询、TCP连接、请求响应时间等，并提供了计算各阶段耗时的方法。通过分析这些指标，开发者可以优化网页加载速度，提升用户体验。
摘要由CSDN通过智能技术生成
  1. navigationStart 加载起始时间
  2. redirectStart 重定向开始时间（如果发生了HTTP重定向，每次重定向都和当前文档同域的话，就返回开始重定向的fetchStart的值。其他情况，则返回0）
  3. redirectEnd 重定向结束时间（如果发生了HTTP重定向，每次重定向都和当前文档同域的话，就返回最后一次重定向接受完数据的时间。其他情况则返回0）
  4. fetchStart 浏览器发起资源请求时，如果有缓存，则返回读取缓存的开始时间
  5. domainLookupStart查询DNS的开始时间。如果请求没有发起DNS请求，如keep-alive，缓存等，则返回fetchStart
  6. domainLookupEnd 查询DNS的结束时间。如果没有发起DNS请求，同上
  7. connectStart 开始建立TCP请求的时间。如果请求是keep-alive，缓存等，则返回domainLookupEnd,(secureConnectionStart) 如果在进行TLS或SSL，则返回握手时间
  8. connectEnd 完成TCP链接的时间。如果是keep-alive，缓存等，同connectStart
  9. requestStart 发起请求的时间
  10. responseStart 服务器开始响应的时间
  11. unloadEventStart unload事件触发的时间
  12. unloadEventEnd unload事件执行完的时间
  13. responseEnd 当浏览器接收到响应的最后一个字节时的时间
  14. domLoading 表示开始解析第一批收到的 HTML 文档的字节
  15. domInteractive 表示完成全部 HTML 的解析并且 DOM 构建完毕
  16. domContentL
最低0.47元/天 解锁文章
登楼痕
关注
专栏目录
利用window.performance.timing检测页面加载速度
xhmz的专栏
01-06 4893
如何在浏览器中查看当前页面请求各个指标数据 在控制台中输入window.performance.timing(html5的属性);即可            各字段的含义： ·         navigationStart：当前浏览器窗口的前一个网页关闭，发生unload事件时的Unix毫秒时间戳。如果没有前一个网页，则等于fetchStart属性。 ·   unloadEve
计时页面加载时间并打印出来
09-20 430
<!--埋点，开始计时--> <script type="text/javascript"> var start_time = new Date().getTime(); <script> <!--页面一打开就调用ADD函数--> <body onload="add(10000)"> </body> ...
输出页面加载时间或者方法执行耗费时间
焦点男孩
08-08 1293
了解page页面是的生命周期，对输出页面加载时间就非常简单。 protected DateTime dt; protected void Page_Load(object sender, EventArgs e) { } protected override void
Chrome浏览器加载缓慢，解决步骤
txtxtx
04-21 3192
收集到的解决方法（仅供参考） 打开设置，改变搜索引擎和特定网址 进入高级–>系统，关闭硬件加速模式 打开代理设置，打开自动检测设置，自己也可手动设置代理
性能优化-网页加载耗时数据的搜集
baique2052的博客
04-19 176
最近需要针对现有的一些线上产品，进行优化工作。首先得对这些产品的性能做一个统计，找出目前问题最严重的，优先进行改进。前面我都是通过在自己本地电脑上测试，利用诸如YSLOW、PageSpeed之类的工具来检测性能。但是通过这些方法，得到的结果都是比较理想的，没有并发因素，网络也因为是内网环境，非常给力，每个产品体现出来都还挺快。因此最终还是决定搜集用户端真实的页面加载耗时来作为参考标准。 ...
jQuery学习笔记之 Ajax操作篇（一） - 数据加载
10-25
它通过在后台与服务器交换数据并更新部分网页内容，实现了页面的动态交互。Ajax的核心是XMLHttpRequest对象，而随着Web技术的发展，许多技术框架和库提供了对Ajax的封装，其中最著名的就是jQuery库。 #### jQuery ...
Python爬虫动态页面处理：应对动态加载的网页，获取完整数据
[Python爬虫动态页面处理：应对动态加载的网页，获取完整数据](https://shengchangwei.github.io/assets/img/optimizing/b-0.png) # 1. 动态页面的原理与挑战 动态页面是一种网页，其内容在加载后会动态更新，通常...
webAPI
weixin_45756606的博客
06-29 496
MDN 详细 API : https://developer.mozilla.org/zh-CN/docs/Web/API https://developer.mozilla.org/zh-CN/docs/Web/API/Document/getElementById根据ID获取 根据标签名获取元素 根据类名获得某些元素集合:返回指定选择器的第一个元素对象:(.box #nav)根据指定选择器返回 获取body元素 获取html 元素 innerText和innerHTML的区别 获取内容时的区别：
Android WebView性能分析与优化
idaretobe的专栏
12-08 1255
Android WebView性能分析与优化
js统计页面加载时间
热门推荐
叶少翔
11-04 1万+
window.onload = function () {    var loadTime = window.performance.timing.domContentLoadedEventEnd-window.performance.timing.navigationStart;     console.log('Page load time is '+ loadTime);}
js中使用console.time显示程序运行耗时
shidaping的博客
08-04 4675
在js中可以使用console.time和console.timeEnd来监测程序的运行耗时，以便优化性能。代码如下 console.time('aa'); for(var i=0;i<1000;i++){console.log(i);}; console.timeEnd('aa') 最后打印出 aa:120ms 表示aa之间的代码共耗时120ms
JavaScript 中如何计算代码段运行时间
最新发布
编程洪同学
05-25 2614
JavaScript 中如何计算代码段运行时间
测试-前端网页加载时间测试的几种方法
chrisyoungest的博客
08-20 5444
jemter chrome开发者模式 python+selenium+js 先通过python+selenium，模拟用户操作，录制脚本 再添加；js = 'return window.performance.timing' timing = driver.execute_script(js) DNS查询耗时 ：domainLookupEnd - domainLookupStart TCP链接耗时 ：connectEnd - connectStart SS...
【优化】前端性能优化---计算首屏加载时间和首屏加载速度慢怎么解决？
余浩的博客
03-06 3007
SPA单页面应用：计算首屏加载时间和首屏加载速度慢怎么解决？ 首屏加载时间，指的是浏览器从相应用户输入网址，到首屏内容渲染完成的时间，此时整个网页不一定全部渲染完成，但需要展示当前视窗需要的内容。 计算首屏加载时间公式： times = (performance.timing.domComplete - performance.timing.navigationStart) / 1000
了解资源耗时 | Chrome F12 network
weixin_33726318的博客
03-25 889
了解资源耗时 了解通过网络收集资源的阶段至关重要。这是解决加载问题的基础。 TL;DR 了解资源耗时的阶段。 了解每个阶段向 Resource Timing API 提供的内容。 了解时间线图表中不同的性能问题指示器，例如一系列透明栏或者大片的绿块。 所有网络请求都被视为资源。通过网络对它们进行检索时，资源具有不同生命周期，以资源耗时...
js获取程序执行的时间长短 控制台之console。
szy1000的专栏
12-03 5322
今天在地铁上面刷公众号！一不小心看到了一个有意思的命令 console.time(); console.timeEnd(); 只要你把他们两一个放到要执行的程序前面，一个放到程序的结尾。就可以得到程序执行的时长。 console.time("global"); var s = 0; for(var i=0;i<999999;i++){ s+=i; }
前端性能监控Web API:performance属性和使用
伯约同学的前端学习之路
11-04 575
前端性能监控的关注点有很多，这篇文章主要介绍Web API之performance属性和使用。 一、属性 在浏览器下方打印window可以看到里面的performance属性，展开后可以看到里面有数十条属性，下面用表格的形式列一下对应属性的说明。 属性 说明 用途 performance.eventCounts 它记录了所有已经分发过的 Event，处理时间是否大于 50ms。 performance.memory 记录内存属性 performance.memory.jsHeap
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值