前端性能调优⽅法同样适⽤于H5。
1、H5前端性能知识点
学习前端性能，必须对HTTP协议有所了解。
浏览器是Html解析和页⾯最终展⽰的⼯具。
浏览器的主要功能：将⽤户选择的web资源呈现出来，需要从服务器请求资源，并将其显⽰在浏览器窗⼝中，资源的格式通常是HTML，也包括PDF、image及其它格式。在浏览器组成部分中，渲染引擎是⽤户直接相关，呈现⽤户所需页⾯的部分。 浏览器内核[渲染引擎]：作⽤是将页⾯转变成可视化的图像结果。渲染引擎⼯作流：
第⼀步，解析HTML构建DOM树：从html标签的解析开始，将各种标签解析为dom树中的各个节点，标签和dom树种的节点是⼀⼀对应关系。
第⼆步，构建渲染树：将CSS和style标签中的样式信息解析为渲染树，渲染树由⼀些包含有颜⾊和⼤⼩等属性的矩形组成，将按照正确的顺序显⽰到屏幕上。
第三步，渲染树布局：确定每个节点在屏幕上的确切显⽰位置。
第四步，渲染树绘制：遍历渲染树并⽤UI后端层将每⼀个节点绘制出来。
磁性相框
H5页⾯执⾏过程：[页⾯加载耗时:firstPaint、DomContentLoaded(⾸屏页⾯可见)、OnLoad（⾸屏加
对扣载完成）]
1.解析HTML结构
2.加载外部脚本和样式表⽂件。
3.解析并执⾏脚本代码。//部分脚本会阻塞页⾯的加载。
4.DOM树构建完成。//DOMContentLoaded事件。
5.加载图⽚等外部⽂件。
6.页⾯加载完毕。//load事件
1.2 测试关注指标
HTTP相关
http请求个数。解决⽅案：CSS精灵、图⽚地图、js css合并。
2.组件是否压缩。解决⽅案：压缩⽅法、压缩对象、图⽚格式和⼤⼩是否合适、CSS放在顶部、JS放在底部、js & CSS压缩、是否
添加缓存、避免⾮200返回值、使⽤CDN。
1.⽩屏时间：⽤户⾸次看到⽹页有内容的时间，即第⼀次渲染流程完成时间。
2.⾸屏时间：⽤户看到第⼀屏，即整个⽹页顶部⼤⼩为当前窗⼝的区域，显⽰完整的时间。尽量让它满⾜⼀秒钟法则。
3.⾸资源下载时间：从开始下载到第⼀个资源均下载完成的时间，不包括页⾯绘制时间。
4.总资源下载时间：从开始下载到所有资源均下载完成的时间，不包括页⾯绘制时间。
5.⽤户可操作时间：从页⾯开始加载到⽤户操作可响应的时间。
WebView相关[内存/流量、CPU]
在android和IOS上测试H5性能，测试员还应该关注因加载H5⽽引起的app常规性能指标。
1.内存：加载页⾯前后内存变化，可间接反映H5中资源数量和⼤⼩，如dom数量，图⽚⼤⼩。
2.CPU：当页⾯中资源样式复杂，强调视觉效果时，测试员可观察CPU占⽤率来反映H5绘制质量。如果CPU长期处于⾼占⽤率，
可考虑降低⾼计算量的视觉效果等⼿段。
3.FPS(流畅度)：帧率尤其在有视频和动画效果的H5中，测试员应该重点关注，防⽌严重的卡顿流出。
2、前端性能优化⽅法
2.1 减少HTTP请求数：
1)合并图⽚：图⽚多的时候，针对相对稳定的图⽚，可以通过减少图⽚数量，合并为⼀张⼤图，从⽽减少HTTP请求数。其次，可以通过增加缓存来提⽰技能。合并⼤图可以使⽤CSS Sprites技术来做处理。
2)合并压缩CSS样式表和JS脚本:⼯具可以通过Minify、YUI Compressor等。
3)去掉不必要的请求：残留的⽆效连接，这些⽆效连接对页⾯并没有实际作⽤。可以通过firebug⼯具去查看。
4)充分利⽤缓存：主要关注客户端的缓存信息。
如果当前时间⼩于(<)expires，浏览器会从缓存中直接获取相关的数据信息或HTML⽂件；如果当前时间>expires，浏览器会向服务器发送请求来获取相关数据信息。
2.2 图⽚优化
1) 尽可能地使⽤PNG格式的图⽚，相对来说⼤⼩较⼩。
2)对于不同的图⽚格式，上线前做⼀次优化。⽐如PNG可以通过⼯具Pngcrush来优化，JPG格式的图⽚可以使⽤Jpgtran来优化，GIF格式的图⽚可以使⽤Gifsicle来优化。
3)图⽚的延迟加载，也称赖加载。
2.3 使⽤CDN：Content Delivery Network，内容分发⽹络。基本思路：尽可能避开互联⽹上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输得更快、更稳定。通过在⽹络各处防⽌节点服务器所构成的在现有的互联⽹基础之上的⼀层智能虚拟⽹络，CDN系统能够实时地根据⽹络流量和各节点的连接、负载状况以及到⽤户的距离和响应时间等综合信息，将⽤户的请求重新导向离⽤户最近的
服务节点。2.4 开启GZIP：可理解为压缩，⽐较普遍的数据压缩格式，⽤于压缩使⽤Internet传输的所有⽂本类资源，如HTML、CSS、JS等。
2.5 样式表和JS⽂件的优化：位置存放。CSS样式表⽂件放到页⾯的头部；JS⽂件放到页⾯的尾部。
2.6 使⽤⽆cookie域名：当发送⼀个请求的时候，同时还要请求⼀张静态的图⽚和发送cookie时，服务器对于这些cookie不会做任何使⽤，也就是说这些cookie没有什么⽤，没必要随请求⼀同发送。
2.7 前端代码结构优化：计算的逻辑放到后端进⾏，前端只负责展⽰，同时对后端提供数据的接⼝进⾏拆分，不要都挤到⼀个接⼝⾥。
2.8 其他优化⽅法：
2)优化DNS查。设置Apache的f配置⽂件中的HostnameLookups为off，从⽽减少DNS查询次数。
3)移除重复脚本。
4)合理使⽤Etag。
5)Favicon.icon⼀定不能忘。
6)避免⾮200的返回。
3、前端性能测试
环模
在实施测试活动时，需考虑被测对象的前端性能与并发性能。
web前端性能通过关注页⾯容量、资源数量、传输压缩、本地缓存和请求数量等⼏个⽅⾯。
1）页⾯容量：⽤户每次请求的响应数据都需要经过下载，本地浏览器渲染后展⽰。很多公司都有相应的页⾯设计规范，如“⾮⾸页静态页⾯含图⽚字节不超过60KB、全尺⼨banner不超过14KB、竖边⼴告130×300 25KB”等。因此在实际测试过程中需关注页⾯元素的⼤⼩，以确保这些元素确实根据页⾯设计标准进⾏。操作⽅法：打开IE浏览器，进⼊对应的⽹页，点击右键->属性。
2）资源数量：在服务器传输过程中，如果资源⽂件太多，同样会降低⽹络的传输速度，因此坚决杜绝⽆效资源⽂件在服务器与客户端之间传输。测试⼯程师需确认每⼀个资源是否确实需要，并杜绝在过程中出现404错误的访问问题。可以通过⼯具xenu或httpwatch检查链接是否有404.
3）本地缓存：通常会将动态的业务响应转化成静态⽂件传输⾄客户端并写⼊缓存，当⽤户再次访问时，可根据实际情况从本地Cache ⽂件读取，以此加快访问感受，减轻服务器压⼒。测试⼯程师可通过测试⼯具检测本地缓存设置对访问速度的影响。可以通过⼯具hattpwatch进⾏浏览查看。
4）请求数量：请求数量减少的优势：减少DNS请求所耗费的时间、减少服务器压⼒、减少HTTP请求头。因此测试⼯程师在实际测试时可关注程序员是否按照规范切实减少了相关请求的数量，从⽽优化系统前端性能。
4、前端性能⼯具⽹址
⼀般常⽤的⼯具有：firebug、Chrome开发者⼯具、HttpWatch、Yslow、PageSpeed.随着前端性能的发展，也有很多前端性能测试的服务，如Gtmetrix等。平台⼯具：Page Speed、PCAP Web Performance Analyzer、WebPagetest。
5、前端性能测试对⽐结果模板
1）对⽐测试数据记录
自动充电电动车此表为最基础的，可以根据实际情况⾃⾏扩展清洁推车
对⽐⽹站URL Total time(s)Total bytes sent Total bytes received Total requests现象
2）对⽐测试结果分析定时药盒
根据测试数据的对⽐结果进⾏分析
3）优化建议
根据分析结果给出⼀定的优化建议
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议