chromium源码阅读--图片处理
JavaScript 图像替换
JavaScript 图像替换技术检查设备能力,然后“做正确的事”。 您可以通过 window.devicePixelRatio
确定设备像素比,获取屏幕的宽度和高度,甚至可通过 navigator.connection
或发出假请求来执行某种网络连接嗅探。收集了所有这些信息后,您就可以决定加载哪个图像。
此方法的一大缺陷是,使用 JavaScript 意味着您将延迟加载图像,至少要等到先行解析器结束。 这意味着,图像要等到pageload
事件触发后才能开始下载。此外,浏览器很可能会同时下载 1x 和 2x 图像,导致页面重量增加。
内联图像:光栅图像和矢量图像
创建和存储图像有两种全然不同的方式,这将决定您如何以自适应方式部署图像。
光栅图像:如相片及其他通过单个颜色点网格表示的图像。光栅图像可来自照相机或扫描仪,也可以借助 HTML canvas 元素创建。可使用 PNG、JPEG 和 WebP 之类的格式存储光栅图像。
矢量图像:如徽标和艺术线条,是由一系列的曲线、直线、形状、填充色和渐变色定义的。矢量图像可通过 Adobe Illustrator 或 Inkscape 之类的程序创建,或使用 SVG 等矢量格式在代码中手动写入。
SVG
使用 SVG 可在网页中包含自适应矢量图像。矢量文件格式比光栅文件格式有优势的地方在于,浏览器可以渲染任何大小的矢量图像。矢量格式描述的是图像的几何图形,即该图像是如何通过线条、曲线和颜色等构造的。而光栅格式仅提供与单个颜色点有关的信息,因此,在进行缩放时,浏览器必须猜测如何填充空白。
内联的优缺点
图像的内联代码可能很冗长,特别是 Data URI 格式的图像,那么您为什么要使用它呢?为了减少 HTTP 请求!SVG 和 Data URI 可实现通过一个请求检索整个网页,包括图像、CSS 和 JavaScript。
缺点:
- 与来自外部
src
的图像相比,在移动设备上 Data URI 格式图像的显示速度要慢得多。 - Data URI 会显著增加 HTML 请求的大小。
- Data URI 会增加标记和工作流的复杂性。
- Data URI 格式的图像比二进制格式的图像大很多(最多大 30%),因此不会减小总下载大小。
- Data URI 无法缓存,因此必须为使用它们的每一个页面分别进行下载。
- IE 6 和 7 不支持 Data URI,IE8 仅提供有限支持。
- 对于 HTTP/2,减少资产请求的次数将使优先级下降。
由于所有格式都可以自适应,因此,您需要测试哪一种格式效果最佳。使用开发者工具衡量下载文件大小、请求的次数以及总延迟时间。对于光栅图像,Data URI 有时候非常有用,例如,如果主页只有一两张图像且这些图像没有在其他地方使用,则可使用 Data URI。如果您需要内联矢量图像,SVG 是一个比较好的选择。
选择正确的格式
有两种图像类型可以考虑:矢量图像与光栅图像。对于光栅图像,您还需要选择正确的压缩格式,例如:GIF
、PNG
、JPG
。
光栅图像,如相片及其他通过单个的点或像素网格表示的图像。 光栅图像通常来自照相机或扫描仪,也可以在浏览器中借助 canvas
元素创建。 随着图像尺寸的增加,文件大小也相应地增加。 如果光栅图像放大时超过其初始尺寸,则会变得模糊,因为浏览器需要猜测如何填补缺失的像素。
矢量图像,如徽标和艺术线条,是由一系列的曲线、直线、形状和填充色定义的。 矢量图像使用 Adobe Illustrator 或 Inkscape 之类的程序创建,并保存为矢量格式,如 SVG
。由于矢量图像是建立在简单基元上的,因此,可以进行无损质量的缩放,且文件大小不变。在选择正确的格式时,务必综合考虑图像的源格式(光栅图像还是矢量图像)及内容(颜色、动画、文本等等)。没有一种格式能够适用所有图像类型,它们各有优劣。
在选择正确的格式时,先参考以下指导准则:
- 摄影图像使用
JPG
。 - 徽标和艺术线条等矢量插画及纯色图形使用
SVG
。 如果矢量插画不可用,试试WebP
或PNG
。 - 使用
PNG
而非GIF
,因为前者可以提供更丰富的颜色和更好的压缩比。 - 长动画考虑使用
<video>
,它能提供更好的图像质量,还允许用户控制回放。
chromium源码阅读--图片处理的更多相关文章
- [原创]chromium源码阅读-进程间通信IPC.消息的接收与应答
chromium源码阅读-进程间通信IPC.消息的接收与应答 chromium源码阅读-进程间通信IPC.消息的接收与应答 介绍 chromium进程间通信在win32下是通过命名管道的方式实现的 ...
- chromium源码阅读--Browser进程初始化
最近在研读chromium源码,经过一段懵懂期,查阅了官网和网上的技术文章,是时候自己总结一下了,首先IPC message loop开始吧,这是每个主线程必须有的一个IPC消息轮训主体,类似之前的q ...
- chromium源码阅读--HTTP Cache
最近积累了一些关于HTTP缓存的知识,因此结合Chromium的实现总结一下,主要从如下2个分面: 1.HTTP缓存的基础知识 2.Chromium关于HTTP缓存的实现分析 一.HTTP缓存的基础知 ...
- chromium源码阅读--进程的Message Loop
上一篇总结了chromium进程的启动,接下来就看线程的消息处理,这里的线程包含进程的主进程. 消息处理是由base::MessageLoop中实现,消息中的任务和定时器都是异步事件的. 主要如下几点 ...
- chromium源码阅读--进程间通信(IPC)
第一篇就有提到Chromium是目前默认是采用多进程架构,当然,chromium有singe-process的版本. 多进程与多线程的区别,确实有很多可以讲的,我的另一篇博客也讲了一些,这里是从浏览器 ...
- chromium源码阅读--V8 Embbeding
V8是google提供高性能JavaScript解释器,嵌入在chromium里执行JavaScript代码. V8本身是C++实现的,所有嵌入本身毫无压力,一起编译即可,不过作为一个动态语言解释器, ...
- chromium源码阅读
linux下chromium的入口函数在文件:src/chrome/app/chrome_exe_main_aura.cc 中 int main(int argc, const char** argv ...
- 【原】AFNetworking源码阅读(六)
[原]AFNetworking源码阅读(六) 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 这一篇的想讲的,一个就是分析一下AFSecurityPolicy文件,看看AF ...
- 【原】AFNetworking源码阅读(五)
[原]AFNetworking源码阅读(五) 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 上一篇中提及到了Multipart Request的构建方法- [AFHTTP ...
随机推荐
- 使用js获取表单元素的值
function getParams(formName) { var frmMain = document.getElementById(formName)?document.getElementBy ...
- 【TOJ 4309】表达式求值(模拟栈)
Description Dr.Kong设计的机器人卡多掌握了加减法运算以后,最近又学会了一些简单的函数求值,比如,它知道函数min(20,23)的值是20 ,add(10,98) 的值是108等等.经 ...
- Keras模型的保存方式
Keras模型的保存方式 在运行并且训练出一个模型后获得了模型的结构与许多参数,为了防止再次训练以及需要更好地去使用,我们需要保存当前状态 基本保存方式 h5 # 此处假设model为一个已经训练好的 ...
- 全盘解决eclipse之maven项目报错
每次新建maven的web(war包方式)项目时都会报错而且都要手动改,很麻烦 解决:(注意里面的jdk版本换成自己的) 改变maven配置文件 settings.xml 在文件的<prof ...
- (转)Windows安装和使用zookeeper
(转)原地址https://www.cnblogs.com/shanyou/p/3221990.html 之前整理过一篇文章<zookeeper 分布式锁服务>,本文介绍的 Zookeep ...
- Plugin was not installed: Cannot download 'https://plugins.jetbrains.com/pluginManager''
在Android studio中安装插件的时候,提示了类似这种的错误,解决这个问题有以下几步 1.打开Configure->Settings 2.System Settings->Upda ...
- JavaScript : CORS和Ajax请求
CORS(Cross-Origin Resource Sharing, 跨源资源共享)是W3C出的一个标准,其思想是使用自定义的HTTP头部让浏览器与服务器进行沟通,从而决定请求或响应是应该成功,还是 ...
- npm 如何提升最新版本
首先我们查看一下npm当前版本,打开cmd 运行命令: npm -v 如果不是最新版本,运行一下代码即可. npm install -g npm 这样npm就更新到最新版本了. 如果想更新到指定版本, ...
- Cent OS 下 VI 使用方法
vi的基本概念 基本上vi可以分为三种状态,分别是命令模式(command mode).插入模式(Insert mode)和底行模式(last line mode),各模式的功能区分如下: 1) 命 ...
- HyperLedger Fabric 1.4 交易流程(6.3)
区块链最主要的特性之一是去中心化,没有了中心机构的集中处理,为了达成数据的一致性,就需要网络中全民参与管理,并以某种方法达成共识,所以区块链的交易流程也就是共识的过程. 在Fabric中, ...