1、GPU概念
GPU(Graphic Process Unit)：图形处理器，又称显示核心，视觉处理器。是一种专门运算图像的微处理器。显卡的处理器称为图形处理器。它是显示的“心脏”。
2、为什么要进行帧率测试（FPS）
帧率测试：也叫流畅度测试，主要是测试图像，视频的性能。在无线测试领域中，尤其是游戏类的App，对图像处理速度更为关注。帧率过大，对于部分低配置的测试机来说，会产生大量的热量，导致测试机过烫；如果帧率过低，会导致很不流畅，体验比较差。
在移动设备中，FPS（Frame Per Second）达到每秒60帧以上，人眼主观感受到的差别就不大。FPS太高了反而会产生大量的热量导致移动设备发烫。所以以FPS为60为标准，即每一帧刷新的时间<=16ms,这样才能保证滑动的流畅度。
3、帧率测试操作步骤
1）进入手机的“设置”-->进入“开发人员选项”-->选上“GPU显示配置文件”
2) 重启被测App，对App进行操作
3) 运行命令: adb shell dumpsys gfxinfo apk_name>file_name.txt
4）打开file_name.txt，找到profile data in ms这部分数据
5）把这部分数据导出到excel中形成图
备注：
1）gfxinfo是在android4.1以上才有此命令
4、帧率测试结果分析
1）Draw + Process + Execute是一帧的绘制+渲染的时间。如果时间超过16ms，则用户会明显感知卡顿
2）"Draw"：创建显示列表的时间（display list,记录所有View对象）
3) “Process”：用于显示列表的时间（界面渲染时间。html5主要是调用CSS进行渲染；native主要是调用 AndroidManifest.xml/Activity里的代码来进行渲染）
4）"Execute"：将一帧图交给合成器的时间，这部分时间通常比较少
备注：
1）可以使用Systrace工具对卡顿问题进行定位和分析
5、HTML5页面渲染原理
一个html网页载入的大概过程：
a、用户输入网址，浏览器向服务器发送请求，服务器返回html文件
b、浏览器开始载入html的代码，发现head标签有一个link标签引用外部的CSS文件，此时会发出CSS文件，服务器会返回CSS请求
c、浏览器继续载入<body>里面的代码，并且CSS代码拿到手开始渲染界面
d、浏览器在代码中发现<img>标签引用了一张图片地址，此时向服务器发起请求，浏览器不会等到图片下载完而是继续渲染后面的代码
e、服务器返回图片文件，由于图片占据了一定的面积，影响了后面的排版，因此浏览器又要重新渲染这部分代码浏览器发现了一行js代码<script>并立即他，js会影响到相应的标签渲染
js阻塞特性：其中js是阻塞式的加载，浏览器在加载js时不会做其他的事情。即<script>每次出现都会让页面等待脚本的解析和执行，js执行完成后才会加载后才会渲染页面。
6、提高HTML渲染速度方法
1）把js写在页面的底部
2）js使用高效的选择器
3) 将选择器保存为局部变量
4) 先操作再显示。（如滑屏时，等完滑屏结束后再显示手指所停留的那一页界面）
4362
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
