背景

在开发好页面后，如何让页面更快更好的运行，是区分一个程序猿技术水平和视野的一个重要指标。所以面试时，面试官总会问你一个问题，如何进行性能优化呢？

如果你这时是头脑一片空白，或是像之前的我一样，靠死记硬背或是之前的经历，答一下压缩代码，打包代码，雪碧图，cdn，事件代理，这说明你对性能优化还是缺乏一个整体，系统的掌握，对性能优化还只是处于听说过一个方法就加上去的阶段。这样也就无从去更好的优化性能。

最近一个星期经过疯狂的面试和查询资料，我总算积累了一些经验和思考，在这个招聘的黄金时间，分享给大家，希望大家可以有一点收获。如果有收获，欢迎关注和star一下博客，github

性能优化是什么

从前端的角度来说，性能优化可以分为两个方向。从用户角度来看，一个是页面加载的很快，另一个是页面使用起来很流畅。因此，对性能优化的探索，我们可以分为页面加载时间跟页面运行效率两个方向来进行研究

从浏览器打开到页面渲染完成，花费了多少时间

是的，这个问题有点熟悉，面试官比较常问的是从浏览器打开到页面渲染完成，发生了什么事情。这个问题网上很多回答，我也不就重复的细说了。主要的过程是：

浏览器解析->查询缓存->dns查询->建立链接->服务器处理请求->服务器发送响应->客户端收到页面->解析HTML->构建渲染树->开始显示内容(白屏时间)->首屏内容加载完成(首屏时间)->用户可交互(DOMContentLoaded)->加载完成(load)

很显然，如果我们要进行加载时间的优化，我们需要从这里的每一个步骤都去思考，去总结，而避免东凑一点，西凑一点。

页面加载时间监控

有一句话说得好，If You Can't Measure It, You Can't Manage It。在对这些环节进行优化之前，我们需要知道如何监控这些环节花费了多少时间。

首先推荐一个PerformanceTiming,可以获取到很多页面加载相关的数据。
比较常用的有

DNS解析时间： domainLookupEnd - domainLookupStartTCP建立连接时间： connectEnd - connectStart白屏时间： responseStart - navigationStartdom渲染完成时间： domContentLoadedEventEnd - navigationStart页面onload时间： loadEventEnd - navigationStart

如果不使用该API，可以以服务器渲染返回的时间，或是SPA路由跳转离开的时间为起点，domContentLoaded，load等事件为结束点进行记录。或是直接上google analytics。方法很多，就不细说了。

首先从功能上，整改一些按键功能，或去除，或者合并一些功能按键，增加一些互动的交互效果，

然后是布局上，改变布局可以让操作更方便，和使用感的新奇感，

再者就是色调，icon，风格变换，  最后就是 banner 图了，往往一个 APP 界面上，海报图，小图占了一大部分空间，这些图如果精美，也会提升很多的界面美观度

完整的流程，分层次设计，自下而上去完成：

1、策略层，定义产品使命、价值、目标人群

2、愿景/功能层：定义核心场景、功能列表

3、结构层：做流程图、信息架构，确定主导航、主菜单

4、框架层：梳理每一个主界面的内容、布局

5、表现层：视觉设计，涉及图标、配色、切图。

产品经理主要关注1~2，在去找设计师之前，请先问自己以下几个问题，以保证需求明确：

1、产品给用户带来的价值是什么？

2、竞品有什么？我们做这个有什么优势？

3、为什么样的用户而做？

4、用户会在什么样的场景下使用这个产品？

5、要完成这个产品，最大的瓶颈是什么？是技术攻关？体验出彩？还是运营资源？

交互设计师主要关注3~4，在交付方案之前请先不断问自己以下几个问题，以保证体验质量：

1、该界面要求用户完成的最重要的任务是什么？

2、这是最简单的解决方案吗？

3、信息是否组织得当？

4、设计是否易用且一目了然？

5、标准是否一致？

6、能否减少用户点击次数？

视觉设计师主要关注5，在与产品经理PK之前请先不断问自己以下几个问题，以保证减少返工：

1、界面上需要突出的重点是什么？是否进行了有效的突出？

2、界面上一共有几个层级，是否用清晰的视觉语言予以展现？

3、同样层级、同样性质的元素是否用了一致的设计语言？

4、主色调、材质，是否符合整体品牌感？

5、细节有无丢失？按钮点击态、反馈、缺省状态、字数超出、加载中、未加载态、加载失败态，是否都提供了？

另外，合作不易，三个角色分别需要注意的问题：

对于产品经理：

1、APP的设计，不要只看竞争对手确定自己的定位，不要“因为竞品A和B没有做到，所以我们要做比A和B更牛B的XX功能”，而是要以用户为导向，思考自己为客户提供的价值。在向其他人描述你的想法时，请用这样的句式来描述和思考：XXX这一类型的人在XXX的时候、XXX的环境下，想要做XXX事情，遇到了XXX问题。而我们这个APP能够通过XXXX方式巧妙的帮助他解决了这个问题。

2、不要直接拿线框图给交互设计师看，直接描述你的需求即可，描述清楚。让设计师知道你的目标是什么，接下来让交互去画原型，让更专业的人做专业的事。

3、不要太纠缠视觉，对于一些无关紧要的细节，该放手就放手，尽量减少提出主观意见。

4、别太迷信用户反馈，能提反馈的，大部分都是粉丝、深度用户、高级用户，他们代表不了全部用户的心声。

5、让开发主管去评估工作量，如果对某一部分工作量的评估觉得时间太长，就把它拆分成子任务。

6、每周对一到两次开发成果，别频繁的去打扰人家。

7、bug不断发现，不断修复，发现/修复率小于1，才开始变得可控了，才能确定bug的具体规模并精准预测发布日期

8、少做少错，新版本尽量别加太多锦上添花的功能，满足最核心的就行了。

对于交互设计师：

1、不要一提商业化就头疼，谁不想做一个干干净净没广告的APP ? 别老想着高大上，目标最重要。通过你的设计，让用户消无声息的贡献点击，让商业化变得人性化，这才是你的本事。

2、别太窝囊，别产品说怎么改，就怎么改，要跟他争，把自己当成产品的owner，产品的数据、规划，你全都要知道，这样信息对等了，才有话语权，才能有机会站在用户角度提供人性化的设计建议，否则只能是个画线框图的。

对于视觉设计师：

1、简洁不等于好（在业界大谈特谈简约至上的风气下，一定有人对这句有疑问，不细解释，请自行先翻一下诺曼的《如何管理复杂》这本书）。符合用户的心智模型，让人一目了然，才是好。

2、别做一大堆方案，ABC方案抛出去让人选，这样累不累？自己先判断哪一个方案最好，把它做到自己满意、可行、拿得出手，就行了，不要沦为美工。

3、给开发的视觉稿，先自己想一下，布局如何实现，不同屏幕尺寸如何适配。如果有动画效果，别天马行空的描述，能做出动画示意最好，做不出来，也找一个靠谱的示意。别让开发gg太上火。

最后，90%的问题本质上都是沟通问题！90%的争论本质上都是名词之争！

颜色、排版、结构、视觉风格等

1.在后台取消一些线程中的动作

我们知道App运行过程中所有的操作都默认在主线程（UI线程）中进行的，这样App的响应速度就会受到影响。会导致程序陷入卡顿、死掉甚至会发生系统错误。

为 了加快响应速度，需要把费时的操作（比如网络请求、数据库操作或者复杂的计算）从主线程移动到一个单独的线程中。最高效的方式就是在类这一级完成 这项操作，可以使用AsyncTask或者IntentService来创建后台操作。如果选择使用IntentService，它会在需要的时候启动起 来，然后通过一个工作线程来处理请求（Intent）。

页面内容的排版通常以“切割”方式进行划分，在切割时为了给用户良好的视觉体验，设计师要根据内容的具体使用场景，选择正确的“线切割”、“面切割”和“留白切割”方式进行排版！

进入美团外卖小程序的界面首页，我们发现它采用的是“留白切割”方式进行排版，通过这种切割方式，它在每段的内容都有所不同，比如上图中，第一段图片中“鲜汁道龙虾饭店”是其每日热门饭菜店面的推荐，然后第二段“神价格”是不同类型食谱非常优惠的饭菜信息，再看第三段“附近商家”这个功能为用户推送快速饮食的选择！每段的功能内容在图片的底部加了一层底灰色，实现立体效果！

战略层面：通过视觉手段进行品牌升级，让产品更加符合品牌定位，打造用户信赖的品牌；
产品层面：目前市场上的产品同质化严重，需要根据产品自身特点设计出区别于其他的竞品，来提升产品的友好度；
个人层面：设计出优秀的产品也是设计师自身的价值的体现，并使设计师具有成就感。
做为视觉设计师，我们首先要做到的就是设计上满足业务需求，但在此基础上怎么让界面更加精细美观具有设计感是设计师需要努力的方向，所以设计师应该更全面的了解每一个模块，进行深层次的设计探索，让设计更具有价值。与此同时，再对交互逻辑和业务需求全面深入的了解是设计师更高的进阶方向，紧跟UXD趋势，使自己不断涉猎新的东西，保持创新的理念，提升设计价值和自身的社会竞争力。