chrome性能指标(TTFB,TTSR,TTDC,TTFL)
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)的更多相关文章
- 《HTTP2基础教程》笔记
<HTTP2基础教程>笔记 HTTP/1问题 队头阻塞 低效TCP 慢启动 拥塞避免阶段 臃肿头部 受限的优先级 高优先级无法插队 第三方资源 h2也无法很好解决 web性能优化 DNS查 ...
- Chrome浏览器加载CSS文件TTFB waiting超时的奇葩问题
今天本来调试 requirejs 加载js异常的问题,试了下Chrome浏览器,结果意外发现这个 CSS 加载异常的BUG,非常非常奇怪. 本地测试环境是 wi7x64 安装的 XAMPP 3.2.1 ...
- HTTP 返回时间 概念 TTFB..
课外学习部分: 什么是TTFB呢? 1.TTFB (Time To First Byte),是最初的网络请求被发起到从服务器接收到第一个字节这段时间,它包含了 TCP连接时间,发送HTTP请求时间和获 ...
- 前端性能优化之利用 Chrome Dev Tools 进行页面性能分析
背景 我们经常使用 Chrome Dev Tools 来开发调试,但是很少知道怎么利用它来分析页面性能,这篇文章,我将详细说明怎样利用 Chrome Dev Tools 进行页面性能分析及性能报告数据 ...
- 页面性能分析-Chrome Dev Tools
一.分析面板介绍 进行页面性能快速分析的主要是图中圈出来的几个模块功能: Network : 页面中各种资源请求的情况,这里能看到资源的名称.状态.使用的协议(http1/http2/quic...) ...
- Chrome DevTools 面板全攻略
李华西,微医云服务团队前端开发工程师,喜欢瞎折腾,典型猫奴 Console 面板 此章节请打开 devtools/console/console.html 一起食用 一方面用来记录页面在执行过程中的信 ...
- Chrome Developer Tools:Network Panel说明
官方资料:Chrome Developer Tools: Network Panel 一.chrome Developer Tools:Network Panel 从网络面板中可以获取很多有用信息,如 ...
- Chrome开发者工具详解(2)-Network面板
Chrome开发者工具详解(2)-Network面板 注: 这一篇主要讲解面板Network,参考了Google的相关文档,主要用于公司内部技术分享. Chrome开发者工具面板 面板上包含了Elem ...
- Chrome开发者工具详解(2)
Chrome开发者工具面板 面板上包含了Elements面板.Console面板.Sources面板.Network面板.Timeline面板.Profiles面板.Application面板.Sec ...
随机推荐
- Linux常见文件管理命令
1.Linux上的文件管理类命令都有哪些,其常用的使用方法及其相关示例演示.(1)目录管理命令——ls:列出指定目录下的内容格式:ls [OPTION]... [FILE]... -a:显示所有文件包 ...
- dom技术解析xml下jaxp解析器详细代码
1.使用jaxp实现查询操作 person.xml <?xml version="1.0" encoding="UTF-8" standalone=&qu ...
- MySQL数据库 : 查询语句,连接查询及外键约束
查询指定字段 select 字段1,字段2 from 表名; 消除重复行(重复指的是结果集中的所有完全重复行) select distinct 字段1,字段2.. ...
- 柱状图多系列php动态实现(ec)
<?php require_once 'data.php'; $arr1=$a->sum('answer','ask_id=1'); $arr2=$a->sum('answer',' ...
- python爬虫:爬取猫眼TOP100榜的100部高分经典电影
1.问题描述: 爬取猫眼TOP100榜的100部高分经典电影,并将数据存储到CSV文件中 2.思路分析: (1)目标网址:http://maoyan.com/board/4 (2)代码结构: (3) ...
- openwrt(三) 固件的烧录
导航: 方法1: tftp: 方法2: 在线升级 方法3: BIOS烧录 方法1:TFTP 这应该是最万能的一种方法了.TFTP是一种依靠网口传送数据的一种通信协议,没错,只是传输数据,并不是烧录,所 ...
- C语言进阶——有符号与无符号02
在计算机的内部,我们所有的信息都是由二进制数字组成的 有符号数的表实法: 在计算机内部用补码的方式表实有符号数 正数的补码位正数的本身 负数的补码为其绝对值取反然后加一得到 例如-7 他在计算机内部的 ...
- 013---Django的分页器
知识预览 分页 Django的分页器(paginator) view from django.shortcuts import render, HttpResponsefrom app01.model ...
- spring boot 入门1-----如何使用@Value注解读取配置文件以及使用@ConfigrationProperties注解
读取.yml文件属性值的方式 1)如何将配置文件中的属性值与字段匹配起来 @Value("${配置文件中属性的名}") 在application.yml文件中 server: po ...
- CC3200模块的内存地址划分和bootloader,启动流程(二)
1. 首先启动内部ROM固化的BOOT,然后这个ROM启动需要使用内存空间0X2000 0000 --- 0X2000 4000共16K的空间.一级BOOT的作用是串口升级和驱动库. 2. 然后是二级 ...