App 面向UI编程

image-20190324231208978.png

前言

对于优化的必要行和优化的可行性,App 渲染性能优化是一个普遍存在的问题。页面卡顿,手机耗电等问题渲染的优惠都能解决或者减轻 问题造成的影响。

app 性能 是个相比渲染更大的命题,渲染的优化是性能优化很重要的一部分。

阻塞主线程的任务,主要分为上面这三大类。文本和布局的计算、渲染、解码、绘制都可以通过各种方式异步执行,但 UIKit 和 Core Animation 相关操作必需在主线程进行。

具体方法和途径

其中之一 同步渲染排版

在图文混排的情况下,解决方案 实践得出的一个方案

可能不是最优,但是 代码量和实践复杂度是最小

如一个 Controller 中添加一个view, viewdidload 在整体绘制之前,我们要得到所有图片在CTFrame中位置

编排一个 自己的class 对于绘制的Data 进行进一步封装

CoreTextData *data = [[CoreTextData alloc] init];
data.ctFrame = frame; //CTFrame
data.height = textHeight;

这个是核心,核心的表现是,Frame 和Height 这两个属性 一旦确定,对于上下文的Context 就有自己的归宿。CGContext 为CoreGraphic 库Class ,虽然CoreText 为了文案 的绘制提供了便利,但是,还是要借助CoreGraphic对图片进行绘制,和必要条件的获取。

起步开始-我的Attribute

在这之前,要做的事情:

  1. text 直接变成 attributeString

  2. image 记录下name & 位置 将image 也变成 attributeString(其实是为了占位)

这样 产生的 NSAttributedString 是全部的了

重点的CGFrame

绘制区域是最为困难想明白的部分,CoreText 对于不常用的API 集合 Frame 的获取有很多方式,最常用的方式

  1. 通过
    1. 通过CTFramesetterRef CTFramesetterCreateWithAttributedString 方法 开始使用 attributeString 对象. ->生成 CTFramesetterRef 对象
    2. 利用 CTFramesetterRef 对象 获得要绘制的区域的高度(宽度是自己定)获取 width / height
    3. 一切为了 CTFrameRef 对象的生成服务

​ // 1.有了width / height 配置 对应的CGMutablePathRef path 对象

 CGMutablePathRef path = CGPathCreateMutable();
 CGPathAddRect(path, NULL, CGRectMake(0, 0, config.width, height));
    
CTFrameRef  对象生成 用到上文 费了半天功夫来配置出来的path 

​ ( CTFramesetterRef 对象 根据 attributeString 来的)

CTFrameRef CTFramesetterCreateFrame(
    CTFramesetterRef framesetter,
    CFRange stringRange,
    CGPathRef path,
    CFDictionaryRef _Nullable frameAttributes )

提示: CGPathRef参数 根据Height->也是attributeString ; CTFramesetterRef 对象也是根据 attributeString 获得

最后的Draw InView

Draw 在view 里面 通过自己的编排生成的 CoreTextData 对象,来CTFrameDraw 画到view 上。

在custom view 里面的draw 方法

CustomView.m 
- (void)drawRect:(CGRect)rect{
  
}
  
 CGContextRef context = UIGraphicsGetCurrentContext();//1.获取当前绘图上下文
 CGContextSetTextMatrix(context, CGAffineTransformIdentity);//2
 CGContextTranslateCTM(context, 0, self.bounds.size.height);//2
 CGContextScaleCTM(context, 1.0, -1.0); //2.旋转坐坐标系(默认和UIKit坐标是相反的)

 draw //3 绘制

4.1 draw 普通文本

CTFrameDraw(self.data.ctFrame, context); //文字绘画

这个可以扩展 CTLineDraw / CTRunDraw

4.2 draw 图片
CG_EXTERN void CGContextDrawImage(
CGContextRef cg_nullable c,
CGRect rect,
CGImageRef cg_nullable image)

提示1 上下文 2 图片位置 3 图片(UIImage image = [UIImage imageNamed:imageData.name];

重点在队列的-异步排版

阻塞主线程的任务,主要分为上面这三大类。文本和布局的计算、渲染、解码、绘制都可以通过各种方式异步执行,但 UIKit 和 Core Animation 相关操作必需在主线程进行。

异步排版-目前看到的异步排版 一般是在 Draw 的时候,对于Draw 方式很多,CoreText 提供丰富的Draw 方式

CTLineDraw

RunDraw

FrameDraw 等等 衍生的API

数据

难点

  1. 异步排版的队列控制 -线程安全 就是一个实现方法很多的命题

  2. 如何优雅的获取AttributeString ,对于纯文本还好,但是对于图文,可能获取的时候,图片的占位 要有自己的设计结构 (优雅的布局框架)

  3. 数据监听,工具选择 和 内存监听实时

  4. 网络参考资料匮乏,大部分都是老资料,新款iPhone 和新系统的进一步优化方案FrameWork 资料匮乏

总结

总结: 都是 AttributeString 文字 用CoreText 图片 用 CoreGraphics

资料参考

基础知识

基础知识_2

基础知识_3

开源demo

开源demo2

性能测试demo

实践优化

Graver 美团排版

TextKit wwdc

页面流畅的技术点

Texture

https://my.oschina.net/FEEDFACF/blog/1858441

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,657评论 6 505
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,889评论 3 394
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,057评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,509评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,562评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,443评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,251评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,129评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,561评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,779评论 3 335
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,902评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,621评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,220评论 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,838评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,971评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,025评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,843评论 2 354

推荐阅读更多精彩内容