1.TTFB (Time To First Byte)

是最初的网络请求被发起到从服务器接收到第一个字节这段时间,它包含了 TCP连接时间,发送HTTP请求时间和获得响应消息第一个字节的时间。
注意:网页重定向越多,TTFB越高,所以要减少重定向

TTFB优化的方法有:
1.减少DNS查询
2.使用CDN
3.提早Flush
4.添加周期头

2.TTSR(Time to Start Render)

TTSR-开始渲染时间,指某些非空元素开始在浏览器显示时的时间,这也是一项重要指标,即TTSR越短,用户越早浏览器中的内容,心理上的等待时间会越短。过多的CPU消耗会拖慢TTSR,所以网站中有大量图片和脚本往往会造成不良用户体验。

TTSR优化:
1.优化TTFB
2.降低客户端CPU消耗,即页面加载初期不要有大脚本运行,把JS脚本放到页面下方
3.使用效率较高的CSS选择器,避免使用CSS表达式
4.避免使用CSS滤镜

3.TTDC(Time to Document Complete)

TTDC-文档完成时间,指页面结束加载,可供用户进行操作的时间,等价于浏览器的onload事件触发点。TTDC是比较重要的性能优化对象,TTDC越低,页面加载速度越快,用户等待时间越短。

TTDC的优化方法有:
1.优化TTFB
2.优化TTSR
3.优化首屏时间,将不必要的页面加载放到onload事件之后

4.TTFL(Time to Fully Loaded)

TTFL-完全加载时间,指页面在onload之前和onload事件之后额外加载的内容所花费的时间的总和,即页面完完全全加载完毕消耗的总时间。

TTFL的优化方法:
1.优化TTFB
2.优化TTSR
3.优化TTDC
4.延迟加载
5.异步加载
6.按需加载

出处:http://www.cnblogs.com/ChandlerVer5/p/TTFB.html

chrome性能指标(TTFB,TTSR,TTDC,TTFL)的更多相关文章

  1. 《HTTP2基础教程》笔记

    <HTTP2基础教程>笔记 HTTP/1问题 队头阻塞 低效TCP 慢启动 拥塞避免阶段 臃肿头部 受限的优先级 高优先级无法插队 第三方资源 h2也无法很好解决 web性能优化 DNS查 ...

  2. Chrome浏览器加载CSS文件TTFB waiting超时的奇葩问题

    今天本来调试 requirejs 加载js异常的问题,试了下Chrome浏览器,结果意外发现这个 CSS 加载异常的BUG,非常非常奇怪. 本地测试环境是 wi7x64 安装的 XAMPP 3.2.1 ...

  3. HTTP 返回时间 概念 TTFB..

    课外学习部分: 什么是TTFB呢? 1.TTFB (Time To First Byte),是最初的网络请求被发起到从服务器接收到第一个字节这段时间,它包含了 TCP连接时间,发送HTTP请求时间和获 ...

  4. 前端性能优化之利用 Chrome Dev Tools 进行页面性能分析

    背景 我们经常使用 Chrome Dev Tools 来开发调试,但是很少知道怎么利用它来分析页面性能,这篇文章,我将详细说明怎样利用 Chrome Dev Tools 进行页面性能分析及性能报告数据 ...

  5. 页面性能分析-Chrome Dev Tools

    一.分析面板介绍 进行页面性能快速分析的主要是图中圈出来的几个模块功能: Network : 页面中各种资源请求的情况,这里能看到资源的名称.状态.使用的协议(http1/http2/quic...) ...

  6. Chrome DevTools 面板全攻略

    李华西,微医云服务团队前端开发工程师,喜欢瞎折腾,典型猫奴 Console 面板 此章节请打开 devtools/console/console.html 一起食用 一方面用来记录页面在执行过程中的信 ...

  7. Chrome Developer Tools:Network Panel说明

    官方资料:Chrome Developer Tools: Network Panel 一.chrome Developer Tools:Network Panel 从网络面板中可以获取很多有用信息,如 ...

  8. Chrome开发者工具详解(2)-Network面板

    Chrome开发者工具详解(2)-Network面板 注: 这一篇主要讲解面板Network,参考了Google的相关文档,主要用于公司内部技术分享. Chrome开发者工具面板 面板上包含了Elem ...

  9. Chrome开发者工具详解(2)

    Chrome开发者工具面板 面板上包含了Elements面板.Console面板.Sources面板.Network面板.Timeline面板.Profiles面板.Application面板.Sec ...

随机推荐

  1. 【模板时间】◆模板·II◆ 树链剖分

    [模板·II]树链剖分 学长给我讲树链剖分,然而我并没有听懂,还是自学有用……另外感谢一篇Blog +by 自为风月马前卒+ 一.算法简述 树链剖分可以将一棵普通的多叉树转为线段树计算,不但可以实现对 ...

  2. MySQL 5.7传统复制到GTID在线切换(一主一从)

    Preface       Classic replication is commonly used in previous version of MySQL.It's really tough in ...

  3. mysql架构和历史

    存储引擎 查看: show table status like 'bigcourse'; 结果: +-----------+--------+---------+------------+------ ...

  4. 【Ecshop】商品数据采集扩展

    一个自用的Ecshop商品数据采集程序 ->到此下载

  5. Laravel系列之环境搭建 — VirtualBox+Vagrant+Homestead

    一.为啥需要搭建环境 为了解决环境不统一问题,所以要搭建这么个玩意儿 二.步骤  Laravel对环境有所要求(不使用Homestead情况下),具体参考官网 使用Homestead步骤 1. Hom ...

  6. PHP下载远程文件到指定目录

    PHP用curl可以轻松实现下载远程文件到指定目录: <?php class Download { public static function get($url, $file) { retur ...

  7. 模块hashlib和logging

    Python的hashlib提供了常见的摘要算法MD5. 我们以常见的摘要算法MD5为例,计算出一个字符串的MD5值: import hashlib md5=hashlib.md5() md5.upd ...

  8. svn git 导入本地文件到远程服务器 import

    以前,想要把本地的一个文件上传到svn 或者git 服务器的时候,都要先把服务器上的文件夹down 下来,然后把要添加的文件添加进去,然后提交. 想想都麻烦. 现在我们用import 命令就可以做到, ...

  9. hadoop中namenode发生故障的处理方法

    Namenode 故障后,可以采用如下两种方法恢复数据: 方法一:将 SecondaryNameNode 中数据拷贝到 namenode 存储数据的目录: 方法 二: 使用 -importCheckp ...

  10. 起始授权机构(SOA)

    起始授权机构 编辑 本词条缺少名片图,补充相关内容使词条更完整,还能快速升级,赶紧来编辑吧! 起始授权机构,SOA(Start Of Authority):该记录表明DNS名称服务器是DNS域中的数据 ...