js监控内存的几种方式（浏览器环境）

最新推荐文章于 2024-05-15 15:39:03 发布
最新推荐文章于 2024-05-15 15:39:03 发布
阅读量2.7k 收藏 1
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42531108/article/details/130917631
版权

1.浏览器任务管理器监控内存

按shift+esc键调出浏览器任务管理器
另外一种方式：点击浏览器右上角…图标，选择更多工具>任务管理器

打开之后出现如下界面
在这里插入图片描述
右键点击表头列 把javaScript内存那一项选上 就可以看到js内存占用情况了
在这里插入图片描述

2.TimeLine记录内存

打开performance面板 点击左上角圆点开始录制一段性能记录
然后把memory勾选上
在内存界面可以将与js堆无关的选项取消掉 这样就可以看到某一段时间的js内存使用情况了
如果频繁出现内存上升下降，表示系统正在频繁进行垃圾回收
在这里插入图片描述

3.堆快照查找分离DOM

分离dom就是未挂载在dom数上，但在代码中还存在引用关系的dom节点
查找分离dom的方式
1.打开内存面板，把堆快照勾选，再点击获取快照
在这里插入图片描述
2. 筛选出与关键字detached有关的选项，如果没有结果，说明当前页面未产生分离dom
在这里插入图片描述
如果有结果，表示页面存在分离dom。这个时候要想办法找到这些dom节点并释放掉，否则会造成内存浪费

qq_42531108
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
JavaScript实现获取电脑内存信息
希望我的博客，能帮上你解决学习中工作中所遇到的问题
10-22 660
JavaScript实现获取电脑内存信息
JS针对浏览器窗口关闭事件的监听方法集锦
10-22
下面将详细介绍几种常用的浏览器关闭事件监听方法。 1. 方式一：适用于IE浏览器，仅在关闭时提示 ```javascript window.onbeforeunload = onclose; function onclose() { if (event.clientX > document.body....
浏览器内存监测工具(Drip,sIEve,JSLeaksDetector)
03-08
浏览器内存监测工具(Drip,sIEve,JSLeaksDetector)
javaScript内存管理及监控
我就是我
12-13 2779
javascript 内存管理及查看内存
JavaScript前端性能监控和调优的最佳实践
SherryMacadam的博客
04-25 646
而通过掌握前端性能调优的最佳实践，我们可以不断提升Web应用的性能，提升用户体验。在未来的前端开发中，我们应该继续关注新技术和新工具的发展，不断优化我们的性能监控和调优策略，为用户提供更加流畅和高效的Web体验。本文将介绍JavaScript前端性能监控和调优的最佳实践，帮助开发者提升Web应用的性能。这些工具可以提供详细的性能指标，如页面加载时间、脚本执行时间、渲染时间等，以及可能的优化建议。例如，通过监控用户的滚动行为，我们可以优化懒加载策略，减少不必要的资源加载。资源加载是Web应用性能的关键环节。
一文彻底搞懂js垃圾回收和内存泄露
2401_84049200的博客
04-01 1102
一个很简单的例子：一个DOM对象被一个Javascript对象引用，与此同时又引用同一个或其它的Javascript对象，这个DOM对象可能会引发内存泄露。这个DOM对象的引用将不会在脚本停止的时候被垃圾回收器回收。要想破坏循环引用，引用DOM元素的对象或DOM对象的引用需要被赋值为null。最重要的是，勇敢的去追随自己的心灵和直觉，只有自己的心灵和直觉才知道你自己的真实想法，其他一切都是次要。最重要的是，勇敢的去追随自己的心灵和直觉，只有自己的心灵和直觉才知道你自己的真实想法，其他一切都是次要。
监控谷歌浏览器CPU及内存使用情况
qq_39879126的博客
02-21 4456
【代码】监控谷歌浏览器CPU及内存使用情况。
【JavaScript】本地存储
小秀的博客
08-06 647
在JavaScript中，本地存储是一种可以在浏览器中存储数据的机制。它允许开发者在浏览器中保存键值对，并且这些数据可以在同一个域名下的不同页面间进行共享。需要注意的是，对于安全性敏感的数据，如用户凭证或个人隐私信息，应避免在本地存储中存储，而应考虑使用服务器端的认证和加密机制来保护数据安全。仅在当前会话（当前浏览器标签页或窗口）中保留数据，在关闭会话后数据会被清除。在整个浏览器窗口关闭后仍然保留数据，因此可以用于持久化存储。两种本地存储机制都只能存储字符串类型的数据。
如何查看网页内存大小
大猪的博客
03-22 6549
我们在做Web端开发的时候，会有需要查看项目的内存占用情况，那么我们的查看内存的操作是这样的： 比如，在Google浏览器测试项目的时候，是先在Memory页签下点击“Take heap snapshot”来查看当前网页的占用内存状况。如下图： 像图中的Snapshot 1，我们可以看到，这个网页所占的内存2.6M，那么问题来了，这个2.6M并不这个网页所占的所有的内存总和，只是这个JS运...
JavaScript性能优化 -- 原理及代码优化
weixin_50983325的博客
10-12 361
JavaScript内存管理 内存管理介绍 内存：由读写单元组成，表示一片可操作的空间 管理：人为的去操作一片空间的申请、使用和释放 内存管理：开发者主动申请空间、使用空间、释放空间 管理流程：申请 – 使用 – 释放 JavaScript的垃圾回收 JavaScript的垃圾 JavaScript 中内存管理是自动的 对象不再被引用时是垃圾 对象不能从根上访问到时是垃圾 JavaScript 中的可达对象 可以访问到的对象就是可达对象（引用、作用域链） 可达的标准就是从根出发是否能够被找到 Ja
js内存泄露学习(转)
weixin_30475039的博客
07-29 1211
http://blog.csdn.net/kaitiren/article/details/19974269内存泄露不错的帖子，感谢分享 Google Chrome浏览器提供了非常强大的JS调试工具，Heap Profiling便是其中一个。Heap Profiling可以记录当前的堆内存（heap）快照，并生成对象的描述文件，该描述文件给出了当时JS运行所用到的所有对象，以及这些...
如何检查Javascript中的内存泄漏
weixin_34194702的博客
06-13 437
js内存泄漏通常是由于闭包所引起的，我们在判断是否存在内存泄漏的时候往往会觉得无从下手。通常我们通过codereview去判断是否泄漏，但是这种方法不够客观。我们需要一种客观的方法来证明泄漏的存在。 Chrome Devtool 其实Devtool已经提供了检查的工具，这就是Memory面板。它大概长这样。 我们可以通过这个工具对页面中某一时刻的内存状态做一个快照，这个快照中包含此刻页面上所有的...
JS检测浏览器开发者工具是否打开的方法详解
10-14
本篇文章主要讲述几种前端JS检测开发者工具是否打开的方法,需要的朋友可以参考下
Web浏览器基于Flash实时播放监控视频
12-30
"Web浏览器基于Flash实时播放监控视频"这个主题主要涵盖了如何在Web页面上利用技术实现视频流的实时播放，特别关注的是使用videojs和vue-video-player这两种流行的JavaScript库。下面将详细探讨这两个工具及其在视频...
JavaScript中三种异步上传文件方式
11-23
总结来说，JavaScript中的异步文件上传有多种实现方式，包括依赖浏览器插件、隐藏iframe模拟和XMLHttpRequest2。随着技术的发展，XMLHttpRequest2已经成为现代Web开发的首选，因为它提供了更好的控制和兼容性，同时...
js实现延迟加载的几种方法
10-19
JavaScript延迟加载（Lazy Loading）是一种优化网页性能的技术，它的核心思想是只在真正需要时才加载资源，以减少页面初始化时不必要的数据传输，提高页面的加载速度和用户体验。以下是介绍的三种JavaScript延迟加载...
NodeJS V8引擎内存和垃圾回收器
最新发布
zjuwwj的博客
05-15 1284
程序运行过程中会用到一些数据，这些数据被放在堆栈中，在程序运行结束后，这些不再使用的数据，就是垃圾。
浏览器开发者工具之JavaScript内存监控（Performance）
qq_45487080的博客
07-18 3433
为什么要使用Performance GC的目的是为了实现内存空间的良性循环 良性循环的基石是合理使用 即刻关注才能确定是否合理 Performance提供多种监控方式 内存问题的表现 网络环境是正常的，且???? 页面出现延迟加载或者经常性暂停 页面持续性出现糟糕的性能 页面的性能随时间延长越来越差 定义内存问题的标准 内存泄漏：内存使用持续升高 内存膨胀：在多数设备上都存在性能问题 频繁垃圾回收：通过内存变化图进行分析 监控内存的几种方式 1. 浏览器任务管理器 快捷键shift+ESC
Javascript对象和内存消耗
weixin_26750481的博客
09-08 1166
A while ago I read an article on different object creation patterns in Javascript. This article described how different patterns could consume more memory than others, and after reading it I wanted to...
用js监控页面是否白屏给出白屏的可能出现的原因和解决方式
04-25
白屏可能出现的原因有以下几种： 1. 网络问题：服务器宕机、DNS 解析失败、网络延迟等。 解决方式：检查网络连接、重启路由器等。 2. 脚本错误：JavaScript 脚本错误导致页面无法渲染。 解决方式：检查代码逻辑、调试代码并修复错误等。 3. 资源问题：页面引用的资源不存在、加载过慢等。 解决方式：检查资源文件是否存在、优化资源文件大小和加载时间等。 4. 浏览器问题：浏览器兼容性问题、缓存问题等。 解决方式：检查浏览器兼容性、清除浏览器缓存等。 至于如何通过 JavaScript 监控页面是否白屏，可以通过判断页面是否有内容进行实现，可以使用如下代码实现： ``` if (document.readyState === "complete") { // 页面已经全部加载完毕，可以开始监控 if (!document.body.innerHTML) { // 页面无内容，出现了白屏 // 执行相应处理逻辑 } else { // 页面有内容，不是白屏 // 执行相应处理逻辑 } } ``` 代码中的 `document.readyState` 属性表示文档的加载状态，当值为 "complete" 时表示页面已经全部加载完毕，此时可以开始监控页面是否白屏。判断页面是否有内容可以通过判断 `document.body.innerHTML` 属性是否存在。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值