h5实现网页内容跟随窗口大小移动_H5前端性能测试探索一

一、背景介绍

不管是做电脑上还是手机上，H5页面随处可见。H5页面可以帮助企业快速吸粉、增加曝光率、提高用户的活跃度与粘性。另外，H5可跨平台、开发成本低、可随时上线，且试错成本低、可轻量的触达用户提供便捷的服务等优点，越来越受到追捧。

二、什么是H5？

H5是“HTML”的第5个版本，是一种超文本标记语言。

三、APP中H5页面加载过程

上图为助力活动发起者页面加载过程：

图一是 App 负责做的事情，主要是初始化 Webview 上下文；后面三张图则是一个H5页面加载的过程。第四个图是用户直观看到的第一屏页面，我们通常称为首屏。

H5 前端性能最重要的参考标准就是：要以最轻量的方式，给用户最好的体验。从这个方向出发，H5前端性能最重要的必过项是首屏速度（不仅提升用户体验，还可以提升业务的转化率），其次流畅度、流量和 CPU 等。

使用chrome浏览器，按下F12可以看到其中两个最关键的首屏耗时指标：domContentLoaded（首屏页面可见）和onLoad（首屏加载完成）的耗时