zoukankan      html  css  js  c++  java
  • 前端性能优化指标和工具

    一、性能是Web网站和应用的支柱

    优化主要体现在流量、搜索、转换率、用户体验。

    据Amazon亚马逊的发现,每100ms延迟会导致1%的销量损失。

    移动端用户更缺少耐心,大于3秒加载导致53%的跳出率。

    二、性能优化的标准和指标

    RAIL测量模型:

    Response响应,这里是指网页给用户的响应,如页面首次绘制时间、可进行交互时间。

    Animation动画,页面动画是否足够流畅

    Idle空闲,主线程是否有足够的空闲时间让用户进行交互,有足够空闲时间Response才能及时响应

    Load加载,页面加载时间

    RAIL评估标准

    响应:处理事件应在50ms以内完成,用户能够接受响应处理时间是100ms,但是程序真正能处理响应的时间是50ms,还有50ms是预留给其他任务处理。

    动画:每10ms产生一帧。按60FPS来算,一秒钟要60帧,那一帧约等于16ms,其中6ms用于绘制计算,剩余10ms产生真正帧,这样动画才能够顺畅。

    空闲:尽可能增加空闲时间。不可以让程序的处理时间过长,超过50ms的运算都是过长任务,因为按照响应时间来算超过50ms,那么空闲时间就少了,减少了给用户的响应速度。因此前端不应该进行复杂的业务逻辑运算,复杂的业务逻辑运算应该交给后端进行。

    加载:在5s内完成内容加载并可以交互。这里的加载不仅仅是加载资源,还包含解析编译,最后能够让用户进行交互的时间。异步请求1秒内完成,如果异步超过一秒需增加交互动画,比如loading。

    以上四个目标都是优化的终极目标,我们优化的目标就是不断往以上标准上靠近。

    三、利用测量工具和APIs进行性能分析

    以下三个是浏览器F12自带的测量工具

    1、Network瀑布图:

    纵向看资源加载关系,并行加载情况;

    横向看当前资源加载过程,主要是TTFB是最影响页面体验的,TTFB是请求发送到开始返回请求结果的时间,包含服务器的处理能力和网络波动情况的时间。

    2、Lighthouse,性能分析报告。会给你当前页面做性能分析并给出相应报告和优化建议。

    First Contentful Paint,首次进行绘制时间,即用户从空白到可以看到内容的第一时间。

    Speed Index,速度指数,谷歌标准是4秒以下是优秀。

    以上两个是主要关注的指标。

    3、Performance,该选项卡可以看到页面主线程的性能情况,是否有长任务导致空闲时间过少等等功能。

    WebPageTest:模拟不同多地区地点测试、全面性能报告

    window.performance对象所能提供的性能指标API计算公式:

    DNS 解析耗时: domainLookupEnd - domainLookupStart
    TCP 连接耗时: connectEnd - connectStart
    SSL 安全连接耗时: connectEnd - secureConnectionStart
    网络请求耗时 (TTFB): responseStart - requestStart
    数据传输耗时: responseEnd - responseStart
    DOM 解析耗时: domInteractive - responseEnd
    资源加载耗时: loadEventStart - domContentLoadedEventEnd
    First Byte时间: responseStart - domainLookupStart
    白屏时间: responseEnd - fetchStart
    首次可交互时间: domInteractive - fetchStart
    DOM Ready 时间: domContentLoadEventEnd - fetchStart
    页面完全加载时间: loadEventStart - fetchStart
    http 头部大小: transferSize - encodedBodySize
    重定向次数:performance.navigation.redirectCount
    重定向耗时: redirectEnd - redirectStart

  • 相关阅读:
    .net注册iis
    hdu 1081To The Max
    hdu 1312Red and Black
    hdu 1016Prime Ring Problem
    hdu 1159Common Subsequence
    hdu 1372Knight Moves
    hdu 1686Oulipo
    hdu 1241Oil Deposits
    hdu 1171Big Event in HDU
    hdu 4006The kth great number
  • 原文地址:https://www.cnblogs.com/MarsPGY/p/15779873.html
Copyright © 2011-2022 走看看