最近负责使用纯React Native搭建一个新客户端,封装native组件时,对图片加载的方式进行了不同场景的优化,尽可能提高了客户端的性能。

Apple官方为生成一个UIImage对象提供了两种方法:

  • imageNamed,参数为图片的名字
  • imageWithContentsOfFile,参数是图片文件的路径

根据官方文档:

  • imageNamed

    imageNamed: 这个方法用一个指定的名字在系统缓存中查找并返回一个图片对象,如果它存在的话。如果缓存中没有找到相应的图片,这个方法从指定的文档中加载然后缓存并返回这个对象。

    不难看出,imageNamed的优点是加载时会缓存图片。所以当图片频繁使用时,用imageNamed方法是比较合适的。如果你的一个TableCiew中每个Cell都需要加载同一个图标,使用该方法,系统会把此图标Cache到内存,每次使用时,图标指针指向同一块内存。这样的图片加载效率是非常高的。

  • imageWithContentsOfFile

    从项目的bundle中,仅加载图片,图像数据不会缓存。

    因此,对于比较大的图片以及使用情况较少时,便可使用该方法,降低内存消耗。

两种方法各有优点,在不同场景使用不同的方法,才能有效优化性能。

比如,加载APP的启动loading图片,图片较大,且加载频率很低,很明显使用bundle加载是很合适的。使用imageNamed的举例已在上文提及。