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. php-5.6.26源代码 - opcode处理器的注入

    .初始化 opcode处理器列表 // main实现在文件“php-5.6.26\sapi\cgi\cgi_main.c” int main(int argc, char *argv[]) { if ...

  2. anaconda+jupyter notebook 安装配置

    安装Anaconda 从清华大学开源软件镜像站选择合适自己的版本 wget https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/Anaconda ...

  3. Python学习笔记:单例模式

    单例模式:一个类无论实例化多少次,返回的都是同一个实例,例如:a1=A(), a2=A(), a3=A(),a1.a2和a3其实都是同一个对象,即print(a1 is a2)和print(a2 is ...

  4. stdio中牛逼的写法

    用空间换时间的典型 /* * NOTE! This ctype does not handle EOF like the standard C * library is required to. */ ...

  5. 005--Django2.0的路由层

    URL配置就像Django所支撑的网站目录,它的本质是每条URL调用的视图函数的映射表,每一个请求执行对应的视图函数. 1.简单的路由配置  from django.contrib import ad ...

  6. POJ:2229-Sumsets(完全背包的优化)

    题目链接:http://poj.org/problem?id=2229 Sumsets Time Limit: 2000MS Memory Limit: 200000K Total Submissio ...

  7. Android 中运行时权限获取联系人信息 Demo

    代码比较简单... AndroidManifest.xml <?xml version="1.0" encoding="utf-8"?> <m ...

  8. Android面试收集录7 AsyncTask详解

    1.Android中的线程 在操作系统中,线程是操作系统调度的最小单元,同时线程又是一种受限的系统资源,即线程不可能无限制地产生, 并且 **线程的创建和销毁都会有相应的开销.**当系统中存在大量的线 ...

  9. 20145202课后题,2.56&9.16

    我做的是2.56题,要求我用多组值来测试show_bytes 9.16 主要是对局部性进行了一些分析. 实验楼里面是空的,我电脑上显示不出来,所以我就做了一些书上的习题. 第十章的所有题目都被学长做过 ...

  10. 十四、pymysql模块

    一.安装的两种方法 第一种 #安装 pip3 install pymysql 第二种 二.链接,执行sql,关闭(游标) import pymysql user= input('用户名:>> ...