app加载html5,H5页面在App中加载步骤浅析

先来看下H5页面的渲染经过：

使用服务端渲染方式，即前端看不到页面接口请求的页面加载顺序如下：

访问一个页面url，浏览器开始进行dns解析，找到域名对应ip的前端服务器。进行tcp/ip连接的握手，连接建立后，服务器通过访问的路由获取html文件，并请求接口获得接口数据，将两者拼接在一起。

将页面传输到客户端浏览器端，浏览器通过页面源代码读取出需要加载的静态资源。

进入静态资源加载和页面渲染过程。静态资源主要包括js、css、图片等。css资源的加载是否完成关系页面是否可以开始渲染。

首屏时间，首屏时间直接关系到用户所感知到的页面打开速度。基于下面的案例，首屏时间基本由html的document、穿插的2个js加载时间、3个css加载时间、4个穿插的js加载时间、最后一个css加载时间相加得到，累计3497ms。远未达到页面秒开的速度。这里要说明的一点是：js的加载会打断css的加载，css加载的打断会影响渲染树的构建，因此js的穿插在这里显得比较随意。如果看到js加载穿插在css资源之前，可作为页面速度优化的一项。

看到中间有个css文件的加载时间拉的很长，这里要注意到，静态资源如果放在不同域名下，会造成dns解析时间的增加。因为如果一个页面的资源都在相同域名下，是不需要多次dns解析的。

再来解读一下html文件的为例的时间消费状态：

queued at 开始排队时间

started at 开始时间

queueing 排队(