前端获取页面帧耗时的方法
    一、前端获取页面帧耗时的方法
    1、使用performance.timing接口
    performance.timing接口允许我们获取页面各个阶段的耗时，从而得出页面总的渲染耗时。
    performance.timing接口的主要属性如下：
    navigationStart：浏览器准备好使用http请求开始获取文档时的时间，这个时间其实很难定义；
    unloadEventStart：上个文档的onunload事件开始回调时的时间，如果没有onunload或没有前一个文档则该属性值为0；
    unloadEventEnd：上个文档的onunload事件完成回调时的时间，如果没有onunload或没有前一个文档则该属性值为0；
    redirectStart：如果文档存在重定向，重定向开始的时间；
    redirectEnd：如果文档存在重定向，重定向完成的时间；
    fetchStart：开始检索网页的时间，即开始向服务器发出HTTP请求的时间；
    domainLookupStart：开始查本地DNS缓存或查询DNS的时间；
    domainLookupEnd：DNS查询完成的时间；
    connectStart：完成TCP三次握手开始的时间；
    connectEnd：完成TCP三次握手结束的时间；
    secureConnectionStart：如果页面使用https，则此属性表示SSL安全连接开始握手的时间，如果不使用https，则该属性值为0；
    requestStart：开始发出请求的时间，可以认为就是发出HTTP请求的时间；
    responseStart：接收到第一个字节的时间；
    responseEnd：接收到最后一个字节的时间；
    domLoading：开始解析文档的时间，即开始载入DOM树的时间；
    domInteractive：文档载入完成的时间；
    domContentLoaded：文档载入完成的时间，即DOM树加载完成的时间；
    domComplete：DOM操作完成的时间；
    loadEventStart：onload事件开始回调的时间；
    loadEventEnd：onload事件完成回调的时间。
    使用performance.timing接口可以获得从开始发出http请求到页面加载完成的帧耗时，只需要计算以下几个时间的差值即可：
    responseEnd - fetchStart：此值表示从发出http请求到接收到第一个字节的耗时；
    domComplete - domLoading：此值表示从载入DOM树到操作完成的耗时；
    loadEventEnd - navigationStart：此值表示从浏览器获取文档到onload回调完成的耗时。
    2、使用requestAnimationFrame接口
    requestAnimationFrame接口是浏览器提供的一个API，使用该API开发者可以在浏览器帧同步时调用回调函数来进行操作，并且可以获取上一次回调函数完成的时间，因此使用该API可以获取页面渲染帧耗时。
    使用requestAnimationFrame接口获取帧耗时的基本原理如下：
    （1）首先调用 requestAnimationFrame(callback) 接口，在回调函数callback中记录开始时间 startTime；
    （2）在回调函数callback中再次调用 requestAnimationFrame(callback) 接口，在回调函数中记录当前结束时间 endTime；
html animation属性    （3）计算 endTime - startTime，即可获取页面上一次渲染帧的耗时。
    总结：以上就是前端获取页面帧耗时的两种方法，可以根据具体情况灵活使用这两种方法来获取页面帧耗时。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。