zoukankan      html  css  js  c++  java
  • 性能优化一

    为什么要进行性能优化?

    • 用户体验会更好
    • 搜索引擎排名更靠前
    • 用户流量(Amazon发现每100ms延迟导致1%销量损失)

    移动端的挑战

    • 硬件、网速、屏幕尺寸、交互方式
    • 碎片时间使用,更加缺乏耐心,>3s加载导致53%的跳出率(bounce rate)

    指标

    开发者工具

    “清除缓存并硬件重新加载”后查看
    1. 底部“概要栏”
    image
    requests: 请求数
    transferred(transferred over network):通过网络传输资源大小
    resources(resources size):资源大小
    Finish:页面上所有 http 请求发送到响应完成的时间。 HTTP1.0/1.1 协议限定,单个域名的请求并发量是 6 个,即 Finish 是所有请求(不只是XHR请求,还包括DOC,img,js,css等资源的请求)在并发量为6的限制下完成的时间。
    DOMContentLoaded:DOM树构建完成
    Load:页面加载完毕。 DOM树构建完成后,继续加载html/css 中的图片资源等外部资源,加载完成后视为页面加载完毕。

    2. 瀑布图
    image
    image
    蓝线: DOM加载完成时间
    红线: 页面上所有声明资源加载的时间
    Queueing: 请求排队时间
    DNS Lookup DNS查找
    Initial connection TCP连接建立过程
    SSLSSL证书验证(SSL协商)https网站
    Request sent: 请求发送
    Waiting(TTFB): 请求发出到请求回来耗时(影响因素:网络、服务器)
    Connect Download: 资源下载,越大下载越久,有些不能并行下载的资源,会造成堵塞。
    image
    ** Save all as HAR with content: ** 保存性能数据(HAR是HTTP档案规范,一种web标准格式)

    3. Lighthouse
    image
    (因为网络环境的变化,每次测量也会有些许偏差,建议多次测量)
    可以查看性能、SEO各具体参数的评分,有自己的评分算法,通过颜色,可区分指标值所在段位。
    可查看:速度指数(Speed Index)/ 首屏加载时间(First Contentful Paint)等
    4. 帧数
    (查看轮播图、动画的流畅性,一般1S 达到60 frames左右比较优秀)
    快捷键 (ctrl + shift + P)后输入:show frames per second(FPS) meter (显示每秒帧数)
    image
    测试页面:http://googlesamples.github.io/web-fundamentals/tools/chrome-devtools/rendering-tools/forcedsync.html

    5. 异步请求
    请求时间建议小于1S

    测量工具

    动手优化

    工具重新测量

  • 相关阅读:
    【SAS NOTE】OUTPUT
    【SAS NOTES】_NULL_
    【SAS NOTE】sas 9.2 安装
    【SAS NOTE】FREQ
    纯数学教程 Page 203 例XLI (1)
    纯数学教程 Page 203 例XLI (3)
    纯数学教程 Page 203 例XLI (2)
    Prove Cauchy's inequality by induction
    纯数学教程 Page 325 例LXVIII (15) 调和级数发散
    纯数学教程 Page 325 例LXVIII (15) 调和级数发散
  • 原文地址:https://www.cnblogs.com/huangtq/p/15172770.html
Copyright © 2011-2022 走看看