测试页面

1、需要你写个测试页面，页面里边一次加载50张不同的图片，每张5M，查看浏览器的内存使用情况

2、可以10张 递增的方式测试

3、图片需要缩放，比如所有图片缩放成600*800的比例

目的

只是为了测试 图片占用浏览器的内存情况

测试情况

1、１张图

（google浏览器）没有缩放图情况下，图大小5MB以上，内存占用16MB，包含了浏览器内存，实际占用3MB。

PS：空的一个网页13MB

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

缩放照片不仅仅不会减少内存消耗，反而增加内存消耗。

 

（IE浏览器）没有缩放图情况下，图大小5MB以上，内存占用39MB

开一个空的网页占的内存，29MB

 

 

２、１０张图，没有缩放图情况下，每张图大小分布在５MB大小附近，内存占用71MB。实际占用58MB

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

缩放照片会增加内存消耗，webkit内核在这个缩放上的算法已经优化。

 

3、2０张图，没有缩放图情况下，每张图大小分布在５MB以上，内存占用149MB。

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

缩放照片会增加内存消耗，webkit内核在这个缩放上的算法已经优化。

 

4、3０张图，没有缩放图情况下，每张图大小分布在５MB大小附近，内存占用206MB。

缩放情况下，205MB

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

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

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

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

测试页面，页面里边一次加载50张不同的图片，每张5M以上，查看浏览器的内存使用情况的更多相关文章

  1. 基于JQuery实现滚动到页面底端时自动加载更多信息

    基于JQuery实现滚动到页面底端时自动加载更多信息 关键代码: 代码如下: var stop=true; $(window).scroll(function(){ totalheight = par ...

  2. 页面加载异常 清除浏览器静态文件 js css 缓存 js动态加载js css文件,可以配置文件后辍，防止浏览器缓存

    js清除浏览器缓存的几种方法 - 兔老霸夏 - 博客园 https://www.cnblogs.com/Mr-Rocker/p/6031096.html js清除浏览器缓存的几种方法   一.CSS和 ...

  3. 一个页面从输入URL到加载显示完成，发生了什么？

    面试经典题--URL加载 一.涉及基本知识点: 1. 计算机网络 五层因特尔协议栈: 应用层(dns.http):DNS解析成IP并完成http请求发送: 传输层(tcp.udp):三次握手四次挥手模 ...

  4. chrome://inspect调试html页面空白，DOM无法加载的解决方案

    chrome://inspect调试html页面空白,DOM无法加载的解决方案 先描述一下问题 有一段时间没碰huilder hybird app 开发了,今天调试的时候 chrome://inspe ...

  5. wp加载本地HTML（附带图片，CSS，JS）

    wp加载本地HTML(附带图片,CSS,JS) Windows Phone:Load Local HTML with Img,Css,Js by 唐小崇 http://www.cnblogs.com/ ...

  6. 动态加载/删除css文件以及图片预加载

    动态加载/删除css文件以及图片预加载   功能模块页面   最近,工作中遇到了一个比较奇葩的需求:要在一个页面(PC端)增加一个功能模块,但是这个页面在不久之后要重构,为了新增加的模块可以继续复用, ...

  7. RecyclerView加载更多用notifyDataSetChanged()刷新图片闪烁

    首先来看看对比ListView看一下RecyclerView的Adapter主要增加了哪些方法: notifyItemChanged(int position) 更新列表position位置上的数据可 ...

  8. js动态加载js css文件,可以配置文件后辍，防止浏览器缓存

    js的引用,在浏览器,或微信上访问经常会遇到文件改了,但就是没有更新的问题,使用此函数可以轻松解决缓存问题只需要把js的引用方式改为使用此函数加载即可 源码如下: /** * js动态加载js css ...

  9. jquery文档加载几种写法，图片加载写法

    jquery文档加载写法: $(function(){ }) ; //个人最常使用方式 $(document).ready(function(){ }); //调用文档对象下的ready方法传入一个函 ...

随机推荐

  1. 用JavaScript实现图片剪切效果

    学会如何获取鼠标的坐标位置以及监听鼠标的按下.拖动.松开等动作事件,从而实现拖动鼠标来改变图片大小. 还可以学习css中的clip属性. 一.CSS实现图片不透明及裁剪效果. 图片剪切三层结构 1.第 ...

  2. Selenium 显示等待和隐式等待

    1. 设置显示等待 Java代码: 1 2 3 4 5 public static WebElement WaitForElement(WebDriver driver, String locator ...

  3. java基础：输出数组中指定位置的数据

  4. Vue基本入门

    介绍 1.Vue.js是什么? Vue.js(读音:/vju:/,类似于view)是一套构建用户界面的渐进式框架,与其他重量级框架不同的是,Vue采用的是自底向上增量开发的设计. Vue的核心库只关注 ...

  5. node删除当前文件底下全部文件的正确姿势

    今天在项目上犯了一个很愚蠢的错误 执行如下,结果删除掉了项目根目录底下的所有配置文件,导致本地虚拟机挂掉,这次多一个/的给我教训真是莫大的...哎 正确的姿势为:

  6. .NET Core中的包、元包与框架

    本文为翻译文章,原文:Packages, Metapackages and Frameworks .NET Core是一个由NuGet包组成的平台.一些产品受益于细粒度包的定义,也有一些受益于粗粒度包 ...

  7. java自加和自减

    public class Add { public static void main(String[] args) { int i = 0; i=i++ + ++i; int j = 0; j= ++ ...

  8. 梳理下Cordova的热更新

    公司的大部分都是Hybrid 产品,也就是混合开发,所以比较重要的一个核心功能就是热更新了. 做这个功能的时候中间碰到不少坑,记录一下,比较简单,大致思想就是从服务器拉取JS文件替换掉本地对应文件 之 ...

  9. 移动端高清、多屏适配方案——rem

    背景: 开发移动端H5页面 一套设计图 不同尺寸的手机 不同分辨率的手机 方案:使用rem作为单位解决一套设计图适应不同分辨率,不同尺寸的手机. 概念: REM(font size of the ro ...

  10. 一个想法照进现实-《IT连》创业项目：关于团队组建

    前言: 从上一篇<三天的风投对接活动内幕分享>归来后,从中领悟了不少内涵. 之后暂停了找钱的想法,这些天也拒绝了不少想要参与众筹的同学. 目前主要精力放在以下三件事: 1:重新规划顶层设计 ...