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显示在屏幕上,需要经过以下步 ...
随机推荐
- Codeforces Round #550 (Div. 3)E. Median String
把字符串看作是26进制的数,从后往前翻译,那么就可以把两个串变成对应的26进制的数字,那么只要把两个数加起来除以二就得到中间的串对应的数了,同理再转化回来就行了.但是这样会有一个问题就是串的长度有2e ...
- Nginx设置alias别名目录访问phpmyadmin
引言:Nginx服务器通过设置alias别名可以使特定的目录(phpmyadmin目录)不出现在网站根目录下面,即使网站根目录被攻破,也不会影响到phpmyadmin目录里面的文件. 说明: 站点:h ...
- Codeforces 899C - Dividing the numbers
传送门:http://codeforces.com/contest/899/problem/C 本题是一个数学问题——集合划分. 将集合{1,2,...,n}划分成两个集合,使得两个集合的元素之和的绝 ...
- 合并目录中的txt文件
txt 文件 合并 并 按章节 分隔 # -*- coding: utf8 -*- import os result_name = 'result.txt' def resplit_txt_in_fo ...
- java extend 和 implements 的区别
1. 在类的声明中,通过关键字extends来创建一个类的子类.一个类通过关键字implements声明自己使用一个或者多个接口.extends 是继承某个类, 继承之后可以使用父类的方法, 也可以重 ...
- Wireshark中的一些SNMP相关的过滤器
Wireshark中的一些SNMP相关的过滤器 转自 http://linmingren2003.blog.163.com/blog/static/567510032011419825097/ 由 ...
- Mycat连接数据库之后导致表名全小写的问题分析研究
初步研究:通过部署发现在Mycat中部署逻辑表表名大小写混合时,在Mycat连接后出现全变小.容易造成错误逻辑表(按混合表名创建物理表): 可能拯救的方法: 1.Linux下部署安装MySQL,默认不 ...
- POJ 3905
加深了对有向边意义的理解了.2-SAT #include <iostream> #include <cstdio> #include <cstring> #incl ...
- ps -ef与ps aux的区别
ps -ef与ps aux的区别 学习:http://www.linuxidc.com/Linux/2016-07/133515.htm ps aux可以查看其内存使用情况:
- OLR文件丢失的恢复
11.2.0.1的RAC中,rac1和rac2 一.OLR有备份的情况 1.手动将rac1中的olr重命名,模拟丢失 mv rac1.olr rac1.olr.test 2.重新启动crs ./crs ...