图片加载原理

Posted pp-pping

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了图片加载原理相关的知识,希望对你有一定的参考价值。

图片加载 是有 CPU GPU 联合协作的

CPU 是 用来计算 视图创建 视图frame 图片解码(将压缩的图片数据解码成未压缩的位图形式,为什么要压缩图片,因为图片数据太大,实际上不管是JPEG还是PNG 都是一种压缩的位图图形格式,只不过PNG 图片是无损压缩,并且支持alpha通道。而JPEG图片则是有损压缩,可以指定0 - 100%的压缩比。然而,将磁盘中图片渲染到屏幕之前,必须要得到图片的原始像素数据,才能让GPU渲染,GPU渲染流程 :

1.GPU获取图片的坐标

2.将坐标交给顶点着色器

3.将图片光栅化(获取图片对应屏幕上的像素点)

4.片元着色器计算(计算每个像素点的最终显示颜色值)

5.从帧缓冲区(Frame buffer)中渲染到屏幕上。

图片解压缩的原理:

当未解压缩的图片要渲染到屏幕时,系统会在主线程对图片进行解压缩,而如果图片已经解压缩了,系统就不会再对图片进行解压缩。因此,要在子线程提前对图片进行强制解压缩即可

而强制解压缩的原理就是对图片进行重新绘制,得到一张新的解压缩后的位图。核心函数是

CGBitmapContentCreate 创建一个位图上下文

CGContextDrawImage 将原始数据绘制到上下文中

 CGBitmapContextCreateImage 创建一张新的解压缩后的位图

 开源框架 YYImage ,SDWebImage 都是这个原理

 

以上是关于图片加载原理的主要内容,如果未能解决你的问题,请参考以下文章

图片利用 new Image()预加载原理

图片懒加载(延迟加载)原理及实现

图片加载原理

原生js实现图片懒加载原理

使用jQuery实现图片懒加载原理

懒加载——实现原理