作为产品经理，要对所负责产品的整体用户体验负责，产品的性能优化是很重要的一个环节，为了避免用户在使用产品过程中出现卡顿、加载缓慢、崩溃等性能问题，同时也为了在安排性能优化工作时做到心中有数，我们有必要加深一下对性能优化的理解。

WEB端性能优化

网页并不是单独存在的东西，它需要一个载体（浏览器），无论是pc端还是移动端。使用网页的一个基本流程：在浏览器输入网址、DNS解析（将输入的域名转换为IP地址）、下载html文件、下载css文件、下载js文件等等，当然这一切都是基于网络的，如果没有网络的话，网页也就不能使用了。

前端页面优化

加载优化

对于网页来说，加载过程是最为耗时的过程，可能会占到总耗时约80%的时间，因此作为优化的重点。

1. 减少HTTP请求。每个请求建立连接也需要时间，dns解析也需要时间，所以做到尽量减少网络请求个数。可采用如下方案：合并CSS、JS。合并小图片，使用雪碧图（把每张小图标以.png格式文件的形式引用到页面上，使用雪碧图只需要引用一张图片，对内存和带宽更加友好）。使用iconfont或SVG代替小图片。
2. 使用缓存（关于缓存，可查看浅析互联网中的缓存机制）。使用缓存可以减少向服务器的请求次数，节省加载时间，所以所有静态资源都要在服务器端设置缓存。使用缓存的方案：缓存一切可缓存的资源。使用外联式引用CSS、JS。
3. 压缩HTML、CSS、JS。减少资源大小可以加快网页的显示速度，所以要对HTML、CSS、JS等进行代码压缩。
4. 避免相互阻塞。CSS的代码放在页面的头部并使用Link方式引入，避免在HTML标签中写style样式，JS放在页面尾部。
5. 使用首屏加载。首屏的快速显示，可以很大程度上提升用户对页面速度的感知，因此应尽量针对首屏的快速显示做优化。
6. 按需加载。将不影响首屏的资源和当前屏幕资源不用的资源放到用户需要时才加载。可采用如下方案：延迟加载LazyLoad。滚屏加载。注：按需加载会出现重绘制，会影响渲染的性能。
7. 预加载。大型的重资源页面可使用提前加载下一页的方式加载页面。
8. 图片优化。图片过大会影响页面的加载速度。优化方案：使用iconfont或SVG代替。webp优于jpg。PNG8优于gif。
9. 减少Cookie。Cookie会影响页面的加载速度。
10. 避免重定向（通过各种方法将各种网络请求重新定个方向转到其它位置）。重定向会影响加载速度，在服务器中应正确设置避免重定向。

代码优化

相关代码的一些优化，也会提升网页的性能。以下这些是我从开发哥哥那里得到的答案还有一些查询的资料，这一块的优化还需要多和开发哥哥沟通。

1. 尽量避免写在HTML标签中写Style属性。
2. 移除空的CSS代码。
3. 合理使用display属性。
4. 不滥用Web字体。
5. 不声明过多的font-size，过多的font-size引发CSS的效率。
6. 标准化各种浏览器前缀。
7. JS避免不必要的Dom操作。
8. 尽量使用ID选择器，ID选择器是最快的。

渲染优化

浏览器只有在确定了页面编码后才能正确的渲染页面，所以在绘制页面或执行任何的JS代码前，大部分的浏览器都会缓冲一定字节的数据来从中查找编码信息。所以需要做一些如下的优化：

1. 减少Dom节点。Dom节点太多影响页面的渲染，应尽量减少Dom节点。
2. 动画优化。

后端性能优化

在我们的网站越来越庞大之后，网站后端的系统架构应该逐步向高性能、高可用、高伸缩等特性进行完善，后端架构的完善对网站的性能也起着至关重要的作用。改善性能的一些方法如下：

1. 应用、数据、文件分离。将应用程序、数据库、文件各自部署在独立的服务器上，并且根据服务器的用途配置好不同的硬件。
2. 添加代理服务器。当用户请求达到时首先访问代理服务器，代理服务器将缓存的数据返回给用户，如果没有缓存才会继续向应用服务器获取，这样降低了获取数据的成本。
3. 部署CDN（内容分发网络）。将数据内容缓存到运营商的机房，用户访问时先从最近的运营商获取数据，这样大大减少了网络访问的路径。
4. 使用集群改善应用服务器性能。业务服务器作为网站的入口，会承担大量的请求，往往通过业务服务器集群来共同分担请求数。集群也就是部署多台服务器。
5. 数据库读写分离。 随着用户量的增加，数据库成为最大的瓶颈，改善数据库性能常用的手段是进行读写分离，读写分离就是将数据库分为读库和写库。
6. 将业务服务器进行业务拆分。随着业务的扩展，应用程序会变得非常臃肿，这时我们需要将应用程序进行业务拆分。每个业务负责相对独立的业务运作。业务之间可以通过消息进行通信或者共享数据库。
7. 使用分布式文件存储系统。用户量增加，产生的文件也会越来越多，单台的文件服务器已经不能满足需求，这时就需要分布式文件存储系统来进行支撑。

移动端性能优化

性能对于移动端的用户体验上更是尤其的重要，以下是针对移动端性能优化的总结内容。

启动速度优化

APP的启动会分为三中不同的状态：

• 冷启动。App没有启动过或App进程被killed, 系统中不存在该App进程。在这个过程中，屏幕会显示一个空白的窗口(颜色基于主题)，直至首屏完全启动
• 热启动。热启动意味着你的App进程只是处于后台，系统只是将其从后台带到前台，展示给用户
• 温启动。介于冷启动和热启动之间。a用户back退出了App，然后又启动。b用户退出App后，系统可能由于内存原因将App杀死

由此可见，启动优化其实就是针对冷启动进行的优化。

UI布局优化

布局的优化遵循一个原则就是，尽量减少布局层级和复杂度，细节方面也是一些代码层级的优化。iOS与安卓端细节不同，此处就不做详细阐述了（其实是我也不知道，还没有问开发哥哥…）。

页面响应速度优化

避免“操作无响应”的情况。原则是：不在主线程里面做繁重的操作。

消除页面卡顿

用户感觉到的卡顿，主要来源于界面的刷新。而界面的性能主要是依赖于设备的UI渲染能力。如果我们的UI设计过于复杂，或是实现不够好，设备又不给力，界面就会像卡住了一样，给用户卡顿的感觉。消除页面的卡顿应该做到如下方面：

1. 避免过于复杂的布局。
2. 避免过度绘制（每屏每帧上，每个像素点应该只被绘制一次，如果有多次绘制就是过度绘制了）。

电量优化（针对于安卓设备）

对于用户来说，App的电量损耗是用户体验的一个方面，特别是当今人们对移动设备的依赖度越来越高的前提下，电量也是用户特别关注的一个点。从我们手机的电池详情统计可以简单看出，手机中最耗电的模块肯定是屏幕了，接着就是网络相关。对于电量方面的优化有以下几种：

1. 优化网络请求。
2. 监听手机充电状态。监听电池状态，可以将一些操作放在充电或是电量足够的情况下进行，例如用户数据同步，数据上传，下载更新包等。
3. 及时关闭GPS，减少更新频率。GPS或网络可二选一，这样会降低电量损耗。

网络请求优化

App的网络连接对于用户来说，影响很多，直接影响用户对这个App的使用体验。其中较为重要的几点：

• 流量。流量是花钱买的，如果一个APP会浪费掉用户大量的流量，势必会严重影响用户体验
• 电量。电量现在对于用户体验来说也是重要的一环
• 用户等待。果App请求等待时间长，会给用户网络卡，应用反应慢的感觉，如果有替代品，我们的App很可能就会被用户无情舍弃

以下方面可以优化网络请求：

1. 减少网络数据获取的频次。
2. 减少获取数据包的大小。
3. 加入网络缓存与本地缓存。
4. 打包网络请求。
5. 数据压缩。
6. 延时加载tab页面。
7. 优化算法。
8. 弱网测试与优化。

数据库优化

和WEB端一样，数据库方面的优化也会提升APP的使用性能。比如：

1. 数据库重构。
2. 查询语句的优化。
3. 数据库分库。

服务器和客户端的交互优化

除了同WEB相似的服务器优化，在服务器与客户端交互方面可做如下优化：

1. 客户端尽量少请求。
2. 服务端尽量多做逻辑处理。
3. 通信协议的优化。

最后

以上就是关于WEB与移动端性能优化方面的小总结，性能优化绝大多数是需要开发哥哥们来完成的，所以，好好善待开发哥哥们吧！

作者：流年，互联网产品设计师，4年互联网产品设计经验。

本文由 @流年 原创发布于人人都是产品经理。未经许可，禁止转载。

题图来自unsplash，基于CC0协议