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. ES6编程规范

    andre es6 js

  2. ethereum(以太坊)(二)--合约中属性和行为的访问权限

    pragma solidity ^0.4.0; contract Test{ /* 属性的访问权限 priveta public internal defualt internal interlnal ...

  3. 在程序开发中,++i 与 i++的区别

    在不参与运算的情况下,i++和++i都是在变量的基础加1 ◆在参与运算的情况下 Var i=123; Var j=i++;  先将i的值123赋值给j,之后再自增 j的值为123  i 的值为124 ...

  4. 【Python 2 到 3 系列】 此整型非彼整型

    v2.2 (2.x)以后,python支持不会溢出的 long 型. v3.0后,确切的讲, int 型(依赖运行环境C编译器中long型的精度)消失了,long型替代 int 型,成为新的.不依赖运 ...

  5. python__系统 : 异步实现以及GIL

    创建进程的方式中有个 callback ,也就是回调. 看代码: from multiprocessing import Pool import time import os def test(): ...

  6. 【PHP】Maximum execution time of 30 seconds exceeded解决办法

    Maximum execution time of 30 seconds exceeded,今天把这个错误的解决方案总结一下: 简单总结一下解决办法: 报错一:内存超限,具体报错语句忘了,简单说一下解 ...

  7. poj 1759 二分搜索

    题意:N个等差数列,初项X_i,末项Y_i,公差Z_i,求出现奇数次的数? 思路: 因为只有一个数出现的次数为奇数个 假设 第二个数字的个数为 奇数个,其余全部都是偶数个 ,累计出现的次数 a1偶数 ...

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

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

  9. 15.5,centos下redis安全相关

      博文背景: 由于发现众多同学,在使用云服务器时,安装的redis3.0+版本都关闭了protected-mode,因而都遭遇了挖矿病毒的攻击,使得服务器99%的占用率!! 因此我们在使用redis ...

  10. 6 URL 实习文章链接跳转

    需要解决的三个问题? . 1.不够多的URL (1)正则表达式 (2)\d 数字 /detail/123 /detail/(\d){3} #限定3个数字 /detail/(\d+) #限定多个数字 ( ...