怎么通过js获取当前页面加载的所有资源的url和内容呢

feihuadao 2016-03-10 11:01:20
ie的f12debug功能,在《网络》也能看到所有加载的资源的url和耗时,请教下js里面怎么能拿到这里的url列表和没个列表的内容?
js支持这么做么
...全文
2232 5 打赏 收藏 转发到动态 举报
写回复
用AI写文章
5 条回复
切换为时间正序
请发表友善的回复…
发表回复
feihuadao 2016-03-10
  • 打赏
  • 举报
回复 1
引用 1 楼 slwsss 的回复:
不支持

window.performance.getEntriesByType("resource");
这个能获取到加载的列表,但是获取不到加载的内容
slwsss 2016-03-10
  • 打赏
  • 举报
回复
不支持
feihuadao 2016-03-10
  • 打赏
  • 举报
回复
确实不支持这么做,但是我可以截获ajax请求$(document).ajaxComplete,完美解决

$( document ).ajaxComplete(function( event, xhr, settings ) {
  if ( settings.url === "ajax/test.html" ) {
    $( ".log" ).text( "Triggered ajaxComplete handler. The result is " +
      xhr.responseText );
  }
});
feihuadao 2016-03-10
  • 打赏
  • 举报
回复
引用 3 楼 showbo 的回复:
不涉及跨域的情况下你可以用ajax动态加载你获取到的资源的内容 [quote=引用 2 楼 feihuadao 的回复:] [quote=引用 1 楼 slwsss 的回复:] 不支持

window.performance.getEntriesByType("resource");
这个能获取到加载的列表,但是获取不到加载的内容[/quote][/quote] 多谢两位帮忙,我的想做的是, 页面加载完成之后,使用js判断某个特定的url(ajax请求)是否加载,如果加载了就执行一些hook动作 因为一些原因只能这么做,现在想直接获取的url响应的内容 2 还一种方法是,我重新请求一下这个url,然后往下执行,这个已经实现了,看有没有上面提到的那种方法。
Go 旅城通票 2016-03-10
  • 打赏
  • 举报
回复
不涉及跨域的情况下你可以用ajax动态加载你获取到的资源的内容
引用 2 楼 feihuadao 的回复:
[quote=引用 1 楼 slwsss 的回复:] 不支持

window.performance.getEntriesByType("resource");
这个能获取到加载的列表,但是获取不到加载的内容[/quote]
通过页面性能测试概念+页面加载过程+页面性能指标+页面性能测试工具的学习,可以学到如下内容:①WEB网站页面性能的指标(白屏时间、首屏加载完成时间、FP、FCP、DCL、CLS、FPS等);②WEB网站页面性能测试策略;③WEB网站页面加载过程(前端基础语言:HTML+CSS+JavaScript,DOM、CSSOM、渲染树、布局、绘制);④WEB网站页面性能测试工具的实际操作和功能介绍(开发者工具:控制台、网络、性能、Lighthouse、FPS渲染统计等);⑤WEB网站页面性能测试报告编写。⑥WEB网站页面性能测试步骤和实际操作。课程内容:第一章:课程简介1、课程介绍2、课程大纲第二章:页面性能测试1、页面性能测试概念2、页面性能测试专业术语3、页面性能测试策略第三章:页面加载过程1、HTML概念,HTML5实例,HTML5文档2、CSS概念,CSS实例,CSS文档3、JavaScript概念,JavaScript脚本实例和作用4、DOM和CSSOM理解5、HTML5渲染引擎理解6、HTML5页面内容渲染的过程,HTML渲染树第四章:页面性能测试工具1、页面性能测试具体工具2、Chrome开发者工具介绍第五章:页面性能测试工具-控制台:window.performance1、控制台:window.performance介绍2、window.performance.timing执行结果加载字段理解3、window.performance.timing执行结果属性对应页面阶段理解4、window.performance页面性能参数计算5、window.performance页面性能关键指标计算第六章:页面性能测试工具-网络面板1、Chrome-开发者工具-网络面板介绍2、Chrome-开发者工具-网络-瀑布流指标第七章:页面性能测试工具-性能面板1、Chrome-开发者工具-性能面板-使用方法2、Chrome-开发者工具-性能面板介绍3、Chrome-开发者工具-性能面板-控制按钮区域4、Chrome-开发者工具-性能面板-Overview区域5、Chrome-开发者工具-性能面板-火焰图区域6、Chrome-开发者工具-性能面板-内存图区域7、Chrome-开发者工具-性能面板-统计汇总区域8、Chrome-开发者工具-性能面板-统计汇总区域-摘要内容9、Chrome-开发者工具-性能面板-统计汇总区域-事件时长、调用、发生顺序第八章:页面性能测试工具-FPS监控1、Chrome-开发者工具-FPS监控-FPS介绍、FPS视觉效果、FPS查看方法第九章:页面性能测试-Lighthouse面板1、Chrome-开发者工具-Lighthouse介绍、操作方法、运行的生命周期2、Chrome-开发者工具-Lighthouse报告指标分析3、Chrome-开发者工具-Lighthouse的报告优化建议第十章:页面性能测试工具-Performance insights面板1、Chrome-开发者工具-Performance insights操作方法2、Chrome-开发者工具-Performance insights分析报告第十一章:网速调研1、全国网速的调研和本机网速测试第十二章:页面性能测试总结1、页面性能测试指标采集方式2、页面性能测试报告3、页面性能测试-操作步骤​

87,914

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧