最近要想法提高网页的性能,在查看图片加载时,产生了试验的想法。一直以来都没有太去深究,还是挖掘一下的好。

很简单的试验,<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加载不同大小图像速度的更多相关文章

  1. [技术翻译]预加载响应式图像,从Chrome 73开始实现

    本次预计翻译三篇文章如下: 01.[译]9个可以让你在2020年成为前端专家的项目 02.[译]预加载响应式图像,从Chrome 73开始实现 03.[译]您应该知道的13个有用的JavaScript ...

  2. EmguCV从位图(Bitmap)加载Image<Gray,byte>速度慢的问题

    先说背景.最近在用C#+EmguCV(其实就是用P/Invoke封闭了OpecCV,与OpenCVDotNet差不多) 做一个视频的东西.视频是由摄像头采集回来的1f/s,2048X1000大小,其实 ...

  3. 使用SVG图像作为loading加载 以保证图像高清不模糊

    使用教程 接下来设计达人网小编为大家讲解这个使用方法,其实是相当简单的. STEP 1: 复制你想要的SVG加载动画代码到<body>里面,小编随意复制一个代码如下:<svg ver ...

  4. WINDOWS程序设计对话框加载显示bmp图像及刷新

    参考文章:http://blog.csdn.net/wangjian8006/article/details/7464431 图片的加载与显示也是属于窗口绘制这一部分的.所以其代码要写在消息函数的WM ...

  5. opencv 加载 修改 保存 图像

    #include <opencv2/opencv.hpp> #include <iostream> using namespace cv; /* 1 加载图像 cv::imre ...

  6. 【IIS7.5】Asp文件上传限制,加载页面大小限制

    运行环境 window server 2008 R2 X64.IIS7.5.应用程序池.Net4.0 经典模式 分析 IIS7.5默认有两处上传限制: 第一处在,选择左侧的站点,然后找到后侧的管理—— ...

  7. js操纵css更改加载图片大小

  8. jquery更改加载图片大小

    <script type="text/javascript"> $("img").css("width","80%&q ...

  9. iOS图片加载速度极限优化—FastImageCache解析

    FastImageCache是Path团队开发的一个开源库,用于提升图片的加载和渲染速度,让基于图片的列表滑动 优化点 iOS从磁盘加载一张图片,使用UIImageVIew显示在屏幕上,需要经过以下步 ...

随机推荐

  1. [bzoj4766] 文艺计算姬 (矩阵树定理+二分图)

    传送门 Description "奋战三星期,造台计算机".小W响应号召,花了三星期造了台文艺计算姬.文艺计算姬比普通计算机有更多的艺 术细胞.普通计算机能计算一个带标号完全图的生 ...

  2. CentOS安装新版RabbitMQ解决Erlang 19.3版本依赖

    通过yum等软件仓库都可以直接安装RabbitMQ,但版本一般都较为保守. RabbitMQ官网提供了新版的rpm包(http://www.rabbitmq.com/download.html),但是 ...

  3. 50.常用的query查询方式

    主要知识点 match all match multi match range query term query terms query exist query         1.match all ...

  4. Bootstrap 表单控件一(单行输入框input,下拉选择框select ,文本域textarea)

    单行输入框,常见的文本输入框,也就是input的type属性值为text.在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootst ...

  5. 在Win32 Application 环境下实现MFC窗口的创建

    // Win32下MFC.cpp : Defines the entry point for the application.// #include "stdafx.h" clas ...

  6. Spring MVC灵活控制返回json的值(自定义过滤字段)

    在使用spring MVC开发过程中,为了提高项目执行效率,所以在一些外键字段的实体中会注解”@ManyToOne(fetch = FetchType.LAZY)”以实现延迟加载的效果. 但是,在使用 ...

  7. jre1.6下载地址

    官方下载地址http://java.sun.com/javase/downloads/widget/jdk6.jsp

  8. 【ACM】hdu_1862_EXCEL排序_201308091948

    EXCEL排序 Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Su ...

  9. Linux Storage Stack Diagram 4.0

    https://www.thomas-krenn.com/en/wiki/Linux_Storage_Stack_Diagram

  10. 阿里巴巴集团2014年校园招聘系统project师北京笔试题

    第一部分 单选题(前10题,每题2分;后10题,每题3分;共50分.选对得满分,选错倒扣一分,不选得0分.) 1.字符串"alibaba"有 个不同的排列. A. 5040 B. ...