测试页面,页面里边一次加载50张不同的图片,每张5M以上,查看浏览器的内存使用情况
测试页面
1、需要你写个测试页面,页面里边一次加载50张不同的图片,每张5M,查看浏览器的内存使用情况
2、可以10张 递增的方式测试
3、图片需要缩放,比如所有图片缩放成600*800的比例
目的
只是为了测试 图片占用浏览器的内存情况
测试情况
1、1张图
(google浏览器)没有缩放图情况下,图大小5MB以上,内存占用16MB,包含了浏览器内存,实际占用3MB。
PS:空的一个网页13MB

缩放情况下,内存占用19MB,实际占用6MB。

缩放照片不仅仅不会减少内存消耗,反而增加内存消耗。
(IE浏览器)没有缩放图情况下,图大小5MB以上,内存占用39MB

开一个空的网页占的内存,29MB
2、10张图,没有缩放图情况下,每张图大小分布在5MB大小附近,内存占用71MB。实际占用58MB

缩放情况下,内存占用68MB,实际占用55MB。

缩放照片会增加内存消耗,webkit内核在这个缩放上的算法已经优化。
3、20张图,没有缩放图情况下,每张图大小分布在5MB以上,内存占用149MB。

缩放情况下,内存占用152MB

缩放照片会增加内存消耗,webkit内核在这个缩放上的算法已经优化。
4、30张图,没有缩放图情况下,每张图大小分布在5MB大小附近,内存占用206MB。

缩放情况下,205MB

5、40张图,没有缩放图情况下,每张图大小在5MB大小附近,内存占用290MB。

缩放情况下,占用内存290MB

6、50张图,没有缩放图情况下,每张图大小在5MB大小附近,内存占用402MB。

缩放情况下,占用内存403MB

测试页面,页面里边一次加载50张不同的图片,每张5M以上,查看浏览器的内存使用情况的更多相关文章
- 基于JQuery实现滚动到页面底端时自动加载更多信息
基于JQuery实现滚动到页面底端时自动加载更多信息 关键代码: 代码如下: var stop=true; $(window).scroll(function(){ totalheight = par ...
- 页面加载异常 清除浏览器静态文件 js css 缓存 js动态加载js css文件,可以配置文件后辍,防止浏览器缓存
js清除浏览器缓存的几种方法 - 兔老霸夏 - 博客园 https://www.cnblogs.com/Mr-Rocker/p/6031096.html js清除浏览器缓存的几种方法 一.CSS和 ...
- 一个页面从输入URL到加载显示完成,发生了什么?
面试经典题--URL加载 一.涉及基本知识点: 1. 计算机网络 五层因特尔协议栈: 应用层(dns.http):DNS解析成IP并完成http请求发送: 传输层(tcp.udp):三次握手四次挥手模 ...
- chrome://inspect调试html页面空白,DOM无法加载的解决方案
chrome://inspect调试html页面空白,DOM无法加载的解决方案 先描述一下问题 有一段时间没碰huilder hybird app 开发了,今天调试的时候 chrome://inspe ...
- wp加载本地HTML(附带图片,CSS,JS)
wp加载本地HTML(附带图片,CSS,JS) Windows Phone:Load Local HTML with Img,Css,Js by 唐小崇 http://www.cnblogs.com/ ...
- 动态加载/删除css文件以及图片预加载
动态加载/删除css文件以及图片预加载 功能模块页面 最近,工作中遇到了一个比较奇葩的需求:要在一个页面(PC端)增加一个功能模块,但是这个页面在不久之后要重构,为了新增加的模块可以继续复用, ...
- RecyclerView加载更多用notifyDataSetChanged()刷新图片闪烁
首先来看看对比ListView看一下RecyclerView的Adapter主要增加了哪些方法: notifyItemChanged(int position) 更新列表position位置上的数据可 ...
- js动态加载js css文件,可以配置文件后辍,防止浏览器缓存
js的引用,在浏览器,或微信上访问经常会遇到文件改了,但就是没有更新的问题,使用此函数可以轻松解决缓存问题只需要把js的引用方式改为使用此函数加载即可 源码如下: /** * js动态加载js css ...
- jquery文档加载几种写法,图片加载写法
jquery文档加载写法: $(function(){ }) ; //个人最常使用方式 $(document).ready(function(){ }); //调用文档对象下的ready方法传入一个函 ...
随机推荐
- 翻译:使用 Redux 和 ngrx 创建更佳的 Angular 2
翻译:使用 Redux 和 ngrx 创建更佳的 Angular 2 原文地址:http://onehungrymind.com/build-better-angular-2-application- ...
- php调去存储过程
第一步,mysql端建存储过程 DELIMITER $$create procedure mintime()beginselect min(year(htime)) as minnian,max(ye ...
- 关于TCP/IP协议栈
1. TCP/IP协议栈 与OSI参考模型不同,TCP/IP协议栈共有4层,其中网络接口层对应OSI中的物理层和数据链路层,应用层对应OSI中的应用层.表示层和会话层. 在网络接口层的主要协议有:AR ...
- 中文分词工具thulac4j正式发布
1. 介绍 thulac4j是THULAC的Java 8实现,相比于官方Java实现THULAC-Java,我们做了如下工作: 规范化分词词典,并去掉一些无用词: 重写DAT(双数组Trie树)的构造 ...
- 1630/2023: [Usaco2005 Nov]Ant Counting 数蚂蚁
2023: [Usaco2005 Nov]Ant Counting 数蚂蚁 Time Limit: 4 Sec Memory Limit: 64 MBSubmit: 85 Solved: 40[S ...
- 升级后 VTE 类虚拟终端不工作
故障现象 运行 vte 终端,如 gnome terminal.sakura 等光标不出来.xterm 可以运行. 在 xterm 终端中运行 gnome terminal 出现一下错误: grant ...
- PDO(20161107)
PDO MySQLI是针对MySQL数据库扩展的,是专门访问MySQL数据库的 PDO是一个数据库访问的一个扩展类,通过一个类访问多个数据库,就是一个数据访问抽象层,把类结合在一块了 可以访问别的数据 ...
- 使用spring webflow,在前台页面中如何显示后端返回的错误信息
刚刚接触spring webflow,相关的资料并不是很多,并且大都是那种入门的 .xml文件的配置. 用到的CAS 最新的4.0版本用的就是web-flow流,前台页面使用的是表单提交.于是我就碰到 ...
- android国际化
语言的国际化 为了提供不同语言的版本,只需要在res中新建几个values文件夹就行 不过文件夹有自己的命名规则 values-语言代码-r国家或者地区的代码 然后我们只需要将不同语言的string. ...
- MyEclipse10的正确破解方法
无法转载,故给出原文链接,以供需要者. MyEclipse10的正确破解方法