H5前端性能实例测试教程

本篇内容主要讲解“H5前端性能实例测试教程”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“H5前端性能实例测试教程”吧!

创新互联建站是一家集网站建设,肥东企业网站建设,肥东品牌网站建设,网站定制,肥东网站建设报价,网络营销,网络优化,肥东网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

一、开篇：H5 页面加载过程浅析

如下图所示，是精选平台打开 H5 页面的几个过程截图。

H5前端性能实例测试教程

图一到图四可以简单分类，图一是 App 负责做的事情，主要是初始化 Webview 上下文；后面三张图则是一个H5页面加载的过程。其中，App 这个阶段的耗时，主要是 Native 代码的耗时，这里先不展开讨论，我们重点放在后面几个阶段。第四个图是用户直观看到的***屏页面，我们通常称为首屏。

H5前端性能实例测试教程

1）加载网络请求

这个过程主要是 Webview 拿到 H5 页面 url 之后，调用 loadUrl 方法，开始去网络上请求***个资源文件。这个阶段主要包含 DNS 解析、建立网络链接、数据传输的耗时。

2）html 解析

Webview 拿到 html 返回后，需要从上至下解析 html 中的标签和内容，识别外链资源、计算页面框架的布局，并渲染绘制出来。在这个过程中会构建出负责页面结构的 DOM Tree 和负责页面布局展示的 Render Tree，如下图所示：

H5前端性能实例测试教程

3）外链资源加载

这部分主要是从网络上加载外链的 css、图片和 js 等，再重新填充到 html 中。之后重新进行一次 layout 布局计算和页面渲染绘制，此时看到的才是有完整内容的页面。如下图所示，页面需要等图片和 css 加载出来后才能展示，js 也是外链资源，不过一般来说，只要放在 html 底部加载，就不会阻塞页面的渲染和展示。

H5前端性能实例测试教程

二、实例分析：白屏问题

前面我们已经了解了 H5 页面加载过程，接下来如果遇到白屏，我们自然会问，怎么才能知道页面当前处在哪个阶段，每个阶段耗时多长，以及整体首屏加载的耗时呢？

首先看下通过 PC Chrome 模拟 H5 页面的情况。Chrome Devtool 提供的 Performance 工具，可以录制页面从***个请求到加载完成的所有事件，通过这种方式可以很详细的看到各阶段做的事情和具体的耗时。

H5前端性能实例测试教程

其中两个最关键的首屏耗时指标：domContentLoaded（首屏页面可见）和onLoad（首屏加载完成）的耗时，除了图示的方法，还可以通过在 console 里打印全局变量window.performance.timing，拿到时间戳并计算得到。

但实际我们要的是移动设备的真机数据，这个才能真实反应页面性能和用户体验。想要获取 H5 真机耗时，一种方式是 js 代码进行上报；另一种是对于 Android 设备，可以用 remote-debug 的方式远程调试真机页面。只需要保证 webview 调试开关打开 & 与 PC USB 连接且开启 USB 调试，就可以在 PC Chrome 访问 chrome://inspect 来获取调试对象。之后参考 PC Chrome 模拟 H5 的方法即可拿到数据。

H5前端性能实例测试教程

对于传统页面而言，实际分析发现大部分耗时还是在移动网络请求这部分，所以最直接有效的方式就是对页面进行直出改造，也就是改变先加载 html、再加载 css 等数据的情况，先在后端（比如 nodejs）并行加载首屏依赖的所有 css、js 和后台接口数据，拼装好一个完成的最终要呈现的 html 再回给前端，达到秒开的效果。