H5前端性能测试点及优化方法
1.背景
随着H5的普及和运用，它深深影响着我们各个业务的发展和用户体验，影响H5性能因素有多种：网络带宽、DNS解析时间、服务器处理能力、服务器和客户端的软硬件配置、网页内容、数据库操作、引用其他网站内容等等，总结以上，影响因素主要包含服务端性能、前端性能、还有一些不可抗力因素。现在主要针对H5前端性能具体总结一下相关测试点、优化方法以及测试工具。
2.浏览器渲染原理
浏览器是HTML解析和页面最终展示工具，测试H5理解浏览器的工作原理是必不可少的。
渲染引擎工作流:
解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树
a.DOM树构建：从html标签开始，将各个标签解析为DOM树种的各个节点
b.渲染树构建：将CSS和style标签中的样式信息解析为渲染树，渲染树由一些包含颜色和大小等属性的矩形组成，它们将被按照正确的顺序显示到屏幕上
c.渲染树布局和绘制：渲染树确定各个DOM节点在屏幕中确定位置，根据渲染树中的颜色等信息绘制出网页
整个过程是逐步完成的，解析完一部分内容就显示一部分内容，同时，可能还会下载其余内容，不会等到所有Html都解析完成后再去构建和布局渲染树。
3.测试点
3.1.http请求个数
关注原因：
统计证明一个网页最终到达终端用户有80%的时间都是在获取js，CSS，图片，mp3，flash等资源http请求的返回结果，20%的时间是在加载内容。另一方面，http请求的数量也是有限制的，浏览器对同一个域名有连接数限制，不同浏览器内核、不同版本的请求数不尽相同，一般在6个左右（如下图），所以一旦请求过多就会造成延迟。
优化方法：
资源合并，将若干个小的js、css文件、图片，合并成一个大的js、css文件、图片。js文件不超过7个、css文件不超过4个，不使用含ga.js、uiscript.asp和外链其他网站的js，间接达到减少http请求的目的。
3.2.压缩
关注原因：
如果html，js，CSS，xml等资源过大，会造成加载时间过长。
优化方法：
gzip压缩，即使用GZIP设置content-Encoding字段，在http请求中设置所接受的压缩方式，让Server端对Response资源进行压缩再传给浏览器。启动gzip后，压缩率一般都会有70%-80%的提升，但是这种压缩方式是一种增加CPU负担来减少网络传输消耗的办法，所以需要对合适的对象设置压缩。压缩对象有：html，js，CSS，xml等，不要对图片音乐pdf进行压缩，因为这些资源本身已经压缩过了，再次压缩收益并不高，而且增加CPU负担。Js，CSS通常通过去掉空格和回车来压缩，再经过GZIP压缩，能达到良好的压缩效果。
3.3.图片大小及尺寸
优化方法：
a.获取图片尺寸时应该考虑图片具体的展示场景，如当前移动设备中常用个尺寸规格为480×800、600×1024、720×1280，800×1280等，从原图来保证图片能够被呈现，而不是通过代码对图片放大或缩小。
b.根据具体场景选择适合的图片格式，尽量使用webp格式图片。显示效果较好的图片格式有webp、jpg、png24/32（区别参见：gif、jpg、png、webp图片格式比较），一般来说，webp的图片最小，但在iOS或者android4.0以下系统中可能会有兼容性问题。
c.对于jpg，png格式图片继续压缩，它们本身已经经过压缩了，但对于稀缺的带宽资源是不够的，在保证质量不变的前提下，我们还需要更加优化的压缩算法，尽量把图片压缩在30k以内。
d.使用其他方式代替图片，例如使用CSS3绘制图片，虽然体积小，减少请求，但是制作成本高，渲染效率可能变低。
3.4.资源合理组织
优化方法：
(1).预加载：提前加载，当浏览器加载完当前页面后，在空闲时间加载指定的文档，并把它们存储在缓存里。当用户访问到这些预加载的文档后，浏览器能快速的从缓存里提取给用户。
(2).分页加载
(3).按需加载：首屏加载时尽量加载，位于首屏之外的元素都在出现时加载，很大程度上节省了流量、提升了首次加载时间。
(4).CSS放在head结束标签前：在浏览器渲染过程中谈到，dom树构建完成后，CSS要放到html代码的开头的head标签结束前。如果网页是动态生成的，那么在head代码完成后可以页面输出，这样浏览器就会更快地解析出来head中的内容，开始下载CSS文件资源。而CSS放在底部会引起重新绘制，用户会感受到“闪屏”。
(5).JS放在底部：JS在下载的时候会引起两个问题：阻止网页后面内容的展示并阻止后面资源下载，下载js时候，并行下载机制失效，并且在js中可能包括document.write等改变页面布局的操作，所以渲染引擎会等待js下载完成再开始渲染。
(6).精简JS和CSS文件，JS、CSS放在外部文件、避免在HTML标签中写Style、避免CSS表达式，CSS优化、JS优化、渲染优化参见http://isux.tencent.com/h5-performance.html、http://tgideas.qq.com/webplat/info/news_version3/804/808/811/m579/201412/293834.shtml
(7).减少DOM节点
3.5.缓存
优化方法：
缓存一切可缓存的资源，如图片、CSS、JS，这可以减少http请求。
(1).Cache-Control、Expires：在缓存时间内允许浏览器不向服务器发送请求
如果两者同时存在，Expires会被Cache-Control的max-age覆盖。（尽量使用长Cache，图片、CSS、JS可设置一个月）
(2).Last-Modified/If-Modified-Since和ETag/If-None-Match：浏览器发请求给服务器判断资源是否修改，如果未修改，返回304，然后从本地缓存获取资源，如果修改过，返回200，从服务器重新获取资源。
(3).服务端缓存、第三方缓存等，减少后端返回时间
3.6.HTTP请求有效性
关注原因：
非200返回码的请求、没有使用的资源不仅没有任何意义，而且占用网络资源
优化方法：
避免非200返回值的请求、避免重定向、避免没有使用的资源
3.7.CDN，合理分域名
(1).使用CDN。CDN内容分发网络（Content Delivery Network）将源站内容发布到最接近用户的“边缘”节点，使用户可就近取得所需内容，提高用户访问的响应速度和成功率。解决因分布、带宽、服务器能力带来的访问延迟高问题。
(2).使用Keep-Alive和较少的域名来减少DNS查找：建议2-4个主机，当客户端的DNS缓存为空时，DNS查找的数量与Web页面中唯一主机名的数量相等。减少唯一主机名的数量就可以减少DNS查找的数量
3.8.cookie
Cookie会影响加载速度，静态资源域名减少cookie，或不使用
3.9.Keep-alive
关注原因：
每一个内容的每一个请求(图片、js、css、flash等)都需要和web服务器建立一个连接。由于建立新的连接会消耗许多时间，所以最好是对之前建立起来的连接进行复用。
优化方法：
在许多的配置文件或者HTTP1.1标准中，这些连接是默认被复用的，只是很多时候被无意识的断开了。保持这些连接可复用通常只是改变服务器上的配置文件，并不需要对页面自己做什么改变，就可以减少页面加载时间的40-50%
3.10.WebView相关测试点
关注因加载H5而引起的app常规性能指标
内存：加载页面前后内存变化，可间接反映H5中资源数量和大小，如dom数量，图片大小
CPU：当页面中资源样式复杂，强调视觉效果时，可观察CPU占用率来反映H5绘制质量。如果CPU长期处于高占用率，可考虑降低高计算量的视觉效果等手段
FPS：帧率尤其在有视频和动画效果的H5中，注意有严重的卡顿流出
3.11.网络测试
观察wifi、4G、3G、2G下各指标情况
3.12.时间相关测试点
白屏时间：用户首次看到网页有内容的时间，即第一次渲染流程完成时间
首屏时间：是指用户看到第一屏，即整个网页顶部大小为当前窗口的区域，显示完整的时间。参考时间：不应超过1014KB（基于联通3G网络平均338KB/s(2.71Mb/s))
首资源下载时间：从开始下载到第一个资源均下载完成的时间，不包括页面绘制时间
总资源下载时间：从开始下载到所有资源均下载完成的时间，不包括页面绘制时间
用户可操作时间：从页面开始加载到用户操作可响应的时间
流量：页面小于150K(不含图片）
完全加载时间
首字节时间
4.H5性能测试工具
Yslow：Yslow是雅虎基于网站优化规则推出的工具，帮助分析并优化网站性能，针对23条准则的每一条给出从F~A的评分以及最终的总分。附：Yslow使用方法
chrome开发工具
WebPagetest
Page Speed
PCAP Web Performance Analyzer
OneAPM Browser Insight：通过各种语言探针给页面自动插入 js 代码，在浏览器浏览的时候收集页面加载时间和网络信息，多用于内网多终端系统检测和 web 网站。付费。
自己选择谷歌开发者工具和fiddler进行测试。
https://blog.csdn.net/u013269701/article/details/77816384?locationNum=9&fps=1
https://blog.csdn.net/TMQ1225/article/details/51781394