沪江 iOS 技术沙龙随想

[align=left]周末参加了沪江举办的技术沙龙，这里简单的总结了下，同时给出了一些相关技术的资源链接
[/align]
[align=left][/align]
[align=left]一：UI性能优化三招[/align]
[align=left]需求：页面复杂包含的子视图多，同时要支持上下和左右的滑动，带有特效动画[/align]
[align=left]产品：界面掉帧厉害，卡成翔 [/align]
[align=left]优化:[/align]
[align=left]1:数据源处理，异步分组加载数据 [/align]
[align=left]2：减少 CPU、GPU 的负担来提升性能 [/align]
[align=left]3：异步绘制 [/align]
[align=left] [/align]
[align=left]资源地址：https://github.com/indexjincieryi/The-document-of-Hj-technique-salon [/align]
[align=left] [/align]
[align=left]小结：上面简单罗列出了优化的相关步骤，详细的优化方案大家可参考上面的资源。 [/align]
[align=left]优化方案： [/align]
[align=left]1：从数据角度出发，预加载数据，采用适合的加载算法 [/align]
[align=left]2：掉帧的主要因素：CPU、GPU 的负担过重 [/align]
[align=left]性能优化步骤： [/align]
[align=left]1>了解Instruments工具的使用 [/align]
[align=left]链接：https://segmentfault.com/a/1190000000387082 [/align]
[align=left]Instruments-Core Animation:http://www.cocoachina.com/ios/20161213/18341.html [/align]
[align=left]2>了解掉帧原理及针对性优化 [/align]
[align=left]链接：http://blog.ibireme.com/2015/11/12/smooth_user_interfaces_for_ios/ [/align]
[align=left] [/align]
[align=left]如图（来源上面链接图片）： [/align]



[align=left][/align]
[align=left] [/align]
掉帧原理：在 VSync 信号到来后，系统图形服务会通过 CADisplayLink 等机制通知 App，App 主线程开始在 CPU 中计算显示内容，比如视图的创建、布局计算、图片解码、文本绘制等。随后 CPU 会将计算好的内容提交到 GPU 去，由 GPU 进行变换、合成、渲染。随后 GPU 会把渲染结果提交到帧缓冲区去，等待下一次 VSync 信号到来时显示到屏幕上。由于垂直同步的机制，如果在一个
VSync 时间内，CPU 或者 GPU 没有完成内容提交，则那一帧就会被丢弃，等待下一次机会再显示，而这时显示屏会保留之前的内容不变。这就是界面卡顿的原因。 
[align=left]从上面的图中可以看到，CPU 和 GPU 不论哪个阻碍了显示流程，都会造成掉帧现象。所以开发时，也需要分别对 CPU 和 GPU 压力进行评估和优化。[/align]
[align=left] [/align]
[align=left]从bireme大神的文章中知道可以从下面这些方面对 CPU 和 GPU 进行优化(这里不赘述，大家可以在文章看具体优化措施)[/align]
[align=left] [/align]
[align=left]CPU相关： [/align]
[align=left]对象创建[/align]
[align=left]对象调整[/align]
[align=left]对象销毁[/align]
[align=left]布局计算[/align]
[align=left]Autolayout[/align]
[align=left]（链接：http://cache.baiducontent.com/c?m=9d78d513d9981cee4fede5697d16c0166843f0142ba1d4027fa58439e3732c405016e6ac54280443939b733d47e90b4beb832b6f675d7de28cc8ff1b9cedce3f2fff7b633601c14311d11aafcd4226c43dc31aaff448b9eded64c4e8818881154ecd53037983f48859&p=8665c30a86cc41ac5aa4db2d0214cb&newp=cb6cc64ad49e11a058ee9634176493231610db2151d2d201298ffe0cc4241a1a1a3aecbf26291301d9c3796c0aab4d5eecf23c78360234f1f689df08d2ecce7e72&user=baidu&fm=sc&query=iOS+%B2%BC%BE%D6+%CB%E3%B7%A8&qid=f5bc4366002cdc06&p1=1[/align]
[align=left]备注：复杂页面采用 autolayout 布局，很是影响性能了，一般子视图特多，不建议用 autolayout，可以用 frame，但是 frame 又得写很多代码来适配不同机型，虽然[/align]
[align=left]AsyncDisplayKit中的布局很好的解决了这个问题，但是还是不建议使用，毕竟侵入性太强，也不利于后期维护，可以使用 FB 出品的ComponentKit框架，AsyncDisplayKit的布局引擎也是对ComponentKit的封装，ComponentKit使用链接:https://segmentfault.com/a/1190000002706612[/align]
[align=left]）[/align]
[align=left]文本计算[/align]
[align=left]文本渲染[/align]
[align=left]图片的解码[/align]
[align=left]图像的绘制[/align]
[align=left] [/align]
[align=left]GPU相关： [/align]
[align=left]纹理的渲染[/align]
[align=left]视图的混合 (Composing)[/align]
[align=left]图形的生成。（离屏渲染：http://www.cocoachina.com/ios/20160526/16457.html）[/align]
[align=left] [/align]
[align=left]二：iOS FlexBox Layout[/align]
[align=left]因为考虑到Autolayout影响性能，饿了么团队布局方式采用的是 FB 出品的 Yoga[/align]
[align=left] [/align]

[align=left]资源地址：https://github.com/indexjincieryi/The-document-of-Hj-technique-salon [/align]
[align=left]参考地址：http://www.cocoachina.com/ios/20170314/18878.html[/align]

[align=left] [/align]
[align=left]小结： [/align]
[align=left]由于饿了么团队已经接入 Weex 和 RN，接入 Yoga 布局方式最适合此时的大环境 [/align]
autolayout
布局算法： 
[align=left]Cassowary 算法[/align]
[align=left]在上世纪 90 年代，一个名叫 Cassowary 的布局算法解决了用户界面的布局问题，它通过将布局问题抽象成线性等式和不等式约束来进行求解。[/align]
Auto Layout
其实就是对 Cassowary 算法的一种实现，
Auto Layout
的原理就是对线性方程组或者不等式的求解。 
[align=left] [/align]
[align=left]三：Swift内存布局[/align]
[align=left]1. Swift值类型和值类型和引用类型内存分配和布局[/align]
[align=left]2. 值类型和引用类型的效率，包括内存分配的效率和访问内存的效率[/align]
[align=left]3. Copy-on-write技术结合值类型和引用类型的优点[/align]
[align=left]4. protocol是引用类型还是值类型？[/align]
[align=left]5. protocol类型的变量的内存布局[/align]
[align=left]6. Swift的generics是如何实现的？它和protcol有什么关系？它和C++ template有何异同？[/align]
[align=left] [/align]
[align=left]资源地址：https://github.com/indexjincieryi/The-document-of-Hj-technique-salon [/align]
[align=left] [/align]
[align=left]小结：很棒的一个工程师，知识点讲得很透彻，大家感兴趣的可以看看资源 [/align]
[align=left] [/align]
[align=left]四：一个 5800 行文件的重构历程[/align]
[align=left] [/align]
[align=left]资源地址：https://github.com/indexjincieryi/The-document-of-Hj-technique-salon [/align]
[align=left] [/align]

[align=left]小结：分享的最后，有个小伙伴问了如何重构的一个问题，谈到了组件化，我个人认为得选择最适合公司业务的方案，路由注册、target-action、protocol 这三种都有利有弊，没有绝对的好与坏。同时建议重构时先部分重构，看到成效后再一块一块重构，降低重构风险。[/align]