行业
服务能力
经典案例
关于我们
作者: 江苏新软网络科技有限公司 浏览:459 时间:2022年04月21日
作为一名APP开发产品经理,你负责你所负责的产品的整体用户体验。产品性能优化是非常重要的一环。为了避免用户在使用产品时出现卡顿、加载慢、死机等性能问题,同时为了在安排性能优化工作时有所注意,我们有必要加深对性能优化的认识。
WEB端性能优化
网页不是一个单独的东西,它需要一个载体(浏览器),无论是PC还是手机。一个使用网页的基本流程:在浏览器中输入URL,DNS解析(将输入的域名转换成IP地址),下载html文件,下载css文件,下载js文件等。当然,这一切是基于网络的,如果没有互联网,网页将无法使用。
前端页面优化
加载优化
对于网页来说,加载过程是最耗时的过程,可能占到总时间的80%左右,是优化的重点。
减少HTTP请求。每次请求建立连接也需要时间,DNS解析也需要时间,所以尽量减少网络请求的数量。可以采用以下解决方案:结合CSS和JS。合并小图片,使用精灵图(每个小图标以.png文件的形式引用到页面,使用精灵图只需要引用一张图,对内存和带宽更友好)。使用iconfont或SVG代替小图像。
使用缓存(关于缓存,见互联网缓存机制解析)。使用缓存可以减少对服务器的请求次数,节省加载时间,所以所有的静态资源都应该缓存在服务器端。使用缓存解决方案:缓存所有可缓存的资源。使用对CSS和JS的外部引用。
压缩HTML、CSS、JS。减小资源大小可以加快网页的显示速度,所以要对HTML、CSS、JS等进行代码压缩。
避免互相阻挡。CSS代码放在页首,使用Link方法导入,避免在HTML标签中写样式,JS放在页尾。
使用首屏加载。首屏的快速显示可以大大提升用户对页面速度的感知,所以应该尽可能的针对首屏的快速显示进行优化。
按需加载。不影响首屏的资源和当前屏未使用的资源,只有在用户需要时才加载。可以采用以下方案:LazyLoadLazyLoad。滚动加载。注意:按需加载会重绘并影响渲染性能。
预加载。大型资源密集页面可以提前加载下一页。
图像优化。图片太大会影响页面的加载速度。优化方案:改用iconfont或SVG。webp比jpg好。PNG8比gif好。
减少cookies。Cookie会影响页面的加载速度。
避免重定向(通过各种方法将各种网络请求重定向到其他位置)。重定向会影响加载速度,应在服务器中正确设置以避免重定向。
代码优化
相关代码的一些优化也会提高网页的性能。以下是我从开发者小哥那里得到的答案和一些查询信息。这方面的优化还需要和开发者兄弟多沟通。
尽量避免在HTML标签中写入Style属性。
删除空的CSS代码。
合理使用显示属性。
不要滥用网络字体。
不要声明过多的font-size,过多的font-size会导致CSS的效率。
标准化各种浏览器前缀。
JS避免了不必要的Dom操作。
尽量使用ID选择器,ID选择器很快。
渲染优化
浏览器只有在确定页面编码后才能正确渲染页面,所以在绘制页面或执行任何JS代码之前,大多数浏览器都会缓冲一定字节的数据,从中查找编码信息。因此,需要做如下一些优化:
减少Dom节点。过多的Dom节点会影响页面的渲染,所以尽量减少Dom节点。
动画优化。
后端性能优化
随着我们的网站越来越大,网站后端的系统架构要逐步完善到高性能、高可用、高扩展性等特点。后端架构的改进对网站的性能也起着至关重要的作用。一些提高性能的方法如下:
应用程序、数据和文件的分离。将应用程序、数据库和文件部署在不同的服务器上,根据服务器的用途配置不同的硬件。
添加代理服务器。当用户请求到达时,首先访问代理服务器,代理服务器将缓存的数据返回给用户。如果没有缓存,会继续从应用服务器获取,降低了获取数据的成本。
部署CDN(内容交付网络)。数据内容缓存在运营商机房,用户在访问时首先从就近的运营商处获取数据,大大减少了网络访问的路径。
使用集群来提高应用服务器的性能。业务服务器作为网站的入口,会承担大量的请求,请求数量往往通过业务服务器集群共享。集群意味着部署多台服务器。
数据库读写分离。随着用户数量的增加,数据库成为更大的瓶颈。提高数据库性能的常用方法是读写分离。读写分离就是将数据库分为读库和写库。
将业务服务器拆分成业务。随着业务的扩展,应用程序会变得非常臃肿。这时候,我们需要把应用拆分成业务。各业务负责相对独立的业务运营。企业可以通过消息或共享数据库进行交流。
使用分布式文件存储系统。随着用户数量的增加,会产生越来越多的文件,单一的文件服务器已经不能满足需求。这时候就需要一个分布式文件存储系统来支持了。
移动性能优化
性能对于移动用户体验尤为重要。以下是移动性能优化的总结。
启动速度优化
APP的启动会分为三种不同的状态:
冷启动。App尚未启动或App进程已被杀死,且系统中不存在App进程。在此过程中,屏幕会显示一个空白窗口(颜色取决于主题),直到完全激活上述折叠
热启动。热启动是指你的App进程只是在后台,系统只是把它从后台带到前台显示给用户
热启动。在冷启动和热启动之间。用户退出应用程序,然后再次启动它。b用户退出应用后,系统可能会因为内存原因杀死应用
可见,启动优化其实是针对冷启动的优化。
界面布局优化
布局的优化遵循了尽量减少布局层次和复杂度的原则,同时在细节方面也对部分代码层次进行了优化。iOS和Android的细节有所不同,这里不再赘述。
页面响应速度优化
避免“操作无响应”的情况。原则是:不要在主线程中做繁重的操作。
消除页面冻结
用户感受到的延迟主要来自于界面的刷新。界面的性能主要取决于设备的UI渲染能力。如果我们的UI设计太复杂,或者实现的不够好,设备功能不强,界面就会有卡顿的感觉,给用户卡顿的感觉。要消除页面延迟,您应该执行以下操作:
避免过于复杂的布局。
避免过度绘制(每个像素每屏每帧只能绘制一次,如果有多次绘制,则为过度绘制)。
电池优化(适用于Android设备)
对于用户来说,App的功耗是用户体验的一个方面,尤其是在人们越来越依赖移动设备的前提下,功耗也是用户特别关心的一个点。从我们手机电池明细的统计可以不难看出,手机中最耗电的模块肯定是屏幕了,然后就跟网络有关了。功耗优化有多种:
优化网络请求。
监控手机的充电状态。监控电池状态,可以在充电或电量充足时进行一些操作,如用户数据同步、数据上传、下载更新包等。
及时关闭GPS,降低更新频率。GPS或网络可以二选一,降低功耗。
网络请求优化
App的网络连接对用户的影响很大,直接影响到用户使用App的体验。其中比较重要的几点:
流。流量是用钱买的。如果一个APP会浪费大量的用户流量,势必会影响用户体验。
力量。电源现在也是用户体验的重要组成部分
用户等待。如果App请求等待时间过长,会给用户带来网卡、应用响应慢的感觉。如果有替代品,我们的App很可能会被用户无情地抛弃。
以下几个方面可以优化网络请求:
降低网络数据采集频率。
减小获取数据包的大小。
添加网络缓存和本地缓存。
打包网络请求。
数据压缩。
延迟加载标签页。
优化。
弱网络测试和优化。
数据库优化
和WEB端一样,数据库的优化也会提升APP的性能。例如:
数据库重构。
查询语句优化。
数据库子库。
服务端与客户端的交互优化
除了类似WEB的服务端优化外,服务端与客户端的交互还可以做如下优化:
客户端发出的请求越少越好。
服务器做尽可能多的逻辑处理。
通信协议优化。
以上是WEB和移动端性能优化的一个小总结。大部分性能优化需要开发者来做,请善待开发者!
免责声明:本页文章和图片来源于网络,转载内容是为了传递更多信息和学习。转载稿件如涉及版权等问题,请联系管理员处理。
最新资讯