Chrome各种方式打开新页面的内存占用浅析

本文主要从A标签,js打开新页面的方法,去探讨一下不同的方式打开的新页面对Chrome浏览器内存的占用情况

测试环境

时间:2021-8-13
系统:Windows 10 家庭中文版
Chrome版本:92.0.4515.131(正式版本) (64 位)

A标签

不加target

我们先从不加target的a标签开始,为了降低其他因素的影响,我们这里用了一个静态页面,然后起了一个本地服务来运行这个页面。
现在看一下这个页面占用的内存。
1.png
22M左右,我们给页面加了一个不包含target的a标签,点击这个标签试试看
2.png

内存占用变成了29M,多了7M,不过这个内存占用是会变化的,大概10秒之后,内存占用变成了27M,大概1分钟后,内存占用变成了26M。接着我又快速多点了几次,发现内存最高差不多升到45到50之间,之后再怎么点击,都不会升高。一分钟后,稳定在32M左右。
3.png

加target

接下来测试加了target的情况,加target后,每次点击都会新标签打开页面。我随便点了几次

4.png

可以看到每次都会新建一个进程,每个进程占用的内存都差不多。关闭页面后,对应的进程就会销毁。

js方式

window.open()

先来试试open的方式,我在页面写了一个按钮,然后open当前页面,open这个方法和a标签的target类似,都是以新标签打开页面,那他们的内存占用大小是不是一样呢,我们来看一下
QQ图片20210813162718.png

可以看到,open打开的页面,虽然新建了一个选项卡,但是并没有新建进程。而是和原来的页面公用一个进程,总暂用内存27M,比a标签新开选项卡的方式节省了将近17M的内存,我又点了几次,不管是点初始页面的按钮,还是新开页面的按钮,用的都是一个进程,内存以每个页面5M左右的量在增加。
这样看好像用open的形式更省内存,但是open是有坑的,接着往下看。
我把刚才用open打开的页面都关掉,按照之前a标签的逻辑,关闭页面后,进程消失,对应占用的内存也会释放出来。那现在占用的内存应该是22M左右,但并不是。。
5.png
可以看到,它还有34M的内存,我又点开几个页面在关掉,重复操作了几次,单个页面占用的内存竟然变成了47M
6.png
而且因为这些页面都是公用的一个进程,所以只要还有一个页面,那这个进程就不会消失,如果重复对这个页面进行操作,那么内存可能会变成几百兆,如果电脑性能不佳,就会造成页面卡顿。

window.location.href

window.location.href的方式和a标签不加target的表现形式一样。

标签: none

评论已关闭