html img加载不同大小图像速度
最近要想法提高网页的性能,在查看图片加载时,产生了试验的想法。一直以来都没有太去深究,还是挖掘一下的好。
很简单的试验,<img>加载两个图像,一个2.3MB,5000*5000,一个22kb,160*160。
两个全部在页面上显示限定160*160的尺寸。
<img src="data:images/***.png" width=160 height=160 />
实际测试结果:5000的图像加载需要383ms,而22kb只需要12ms。差距非常大。
但是这只是第一次加载的数据,在后续次数的对比,两者数据就变的完全一样。3-7ms。
原因是直接使用了浏览器的缓存图片,5000的图像在缓存里,依然也是第一次显示之后的160尺寸的缓存图片。
可见,对于网页显示图像,小尺寸的显示区域,还是没必要显示尺寸特别大的图。
使用缩略图是很有必要的。
以上。
html img加载不同大小图像速度的更多相关文章
- [技术翻译]预加载响应式图像,从Chrome 73开始实现
本次预计翻译三篇文章如下: 01.[译]9个可以让你在2020年成为前端专家的项目 02.[译]预加载响应式图像,从Chrome 73开始实现 03.[译]您应该知道的13个有用的JavaScript ...
- EmguCV从位图(Bitmap)加载Image<Gray,byte>速度慢的问题
先说背景.最近在用C#+EmguCV(其实就是用P/Invoke封闭了OpecCV,与OpenCVDotNet差不多) 做一个视频的东西.视频是由摄像头采集回来的1f/s,2048X1000大小,其实 ...
- 使用SVG图像作为loading加载 以保证图像高清不模糊
使用教程 接下来设计达人网小编为大家讲解这个使用方法,其实是相当简单的. STEP 1: 复制你想要的SVG加载动画代码到<body>里面,小编随意复制一个代码如下:<svg ver ...
- WINDOWS程序设计对话框加载显示bmp图像及刷新
参考文章:http://blog.csdn.net/wangjian8006/article/details/7464431 图片的加载与显示也是属于窗口绘制这一部分的.所以其代码要写在消息函数的WM ...
- opencv 加载 修改 保存 图像
#include <opencv2/opencv.hpp> #include <iostream> using namespace cv; /* 1 加载图像 cv::imre ...
- 【IIS7.5】Asp文件上传限制,加载页面大小限制
运行环境 window server 2008 R2 X64.IIS7.5.应用程序池.Net4.0 经典模式 分析 IIS7.5默认有两处上传限制: 第一处在,选择左侧的站点,然后找到后侧的管理—— ...
- js操纵css更改加载图片大小
- jquery更改加载图片大小
<script type="text/javascript"> $("img").css("width","80%&q ...
- iOS图片加载速度极限优化—FastImageCache解析
FastImageCache是Path团队开发的一个开源库,用于提升图片的加载和渲染速度,让基于图片的列表滑动 优化点 iOS从磁盘加载一张图片,使用UIImageVIew显示在屏幕上,需要经过以下步 ...
随机推荐
- Git 基础教程 之 --no-ff模式合并
① 创建并切换dev分支 ② 修改readme.txt,并add,commit ③ 切回master ④ 合并 git merge --no-ff -m “merge with no-ff”d ...
- python下的线程 进程,以及如何实现并发服务器
在一个CPU(一核)的电脑上, 程序的运行是并发运行的,调度的算法叫时间片轮转法,也叫轮询法 在多CPU(多核)的电脑上,一个CPU跑一个程序,刚程序运行数量小于核心数时,程序是并行的 并发:看上去一 ...
- spring-cloud-feign 使用@RequetParam报错QueryMap parameter must be a Map: class java.lang.String
这里使用spring-cloud-start-feign: 1.2.2 REALEASE版本,依赖管理器版本是 Camden.SR2 出错的原因是@RequestParam的value为empty时, ...
- mdl 锁 SYSTEMTAP跟踪
systemtap : 各种资源的使用限制由所生成的C代码中的宏来设置.这些值可在编译时由-D选项来重写.下面描述了部分挑选出来的宏: MAXNESTING 递归函数的最大调用层数,默认值是10. M ...
- 赵雅智_ListView_SimpleAdapter
项目步骤 声明listView控件并获取显示的视图 获取显示的数据 设置显示的adapter 注冊点击事件 详细案例 实现效果: 查找的方法 public List<Map<String, ...
- swift 声明特性 类型特性
原文地址:http://www.cocoachina.com/newbie/basic/2014/0612/8801.html 特性提供了关于声明和类型的很多其它信息.在Swift中有两类特性,用于修 ...
- 出错Can't convert 'WebElement' object to str implicitly
- Spring——概览
Spring是什么? Spring是帮助开发者简化开发工作的工具. Spring的出现就是为了简化人们的复杂的开发.能够在不论什么Java应用中使用,使用了主要的JavaBean取代EJB. Spri ...
- Linux 查看负载
top iostat -x 1 10 free uptime cat /proc/cpuinfo cat /proc/meminfo src lsof 1,查看磁盘 df -h 2,查看内存大小 f ...
- C++派生类中如何初始化基类对象(五段代码)
今天收到盛大的面试,问我一个问题,关于派生类中如何初始化基类对象,我在想派生类对于构造函数不都是先构造基类对象,然后在构造子类对象,但是如果我们在成员初始化列表先初始化派生类的私有成员,在函数内去调用 ...