ttfb 指 耗时_前端性能指标和优化目标

性能指标

加载

理解加载瀑布图

基于HAR存储与重建性能信息

速度指数(Speed Index)

重要测量指标Speed Index页面渲染速度

TTFB网络请求耗时

页面加载时间

首次渲染

响应

交互动作的反馈时间

帧率FPS

异步请求的完成时间

RAIL测量模型

Response响应

Animation动画

Idle空闲

Load加载

RAIL评估标准

响应：处理事件应在50ms以内完成

动画：每10ms产生一帧

空闲：尽可能增加空闲时间

加载：在5s内完成内容加载并可以交互

性能测量工具

Chrome DevTools开发调试、性能评测

Lighthouse网站整体质量评估

WebPageTest多测试地点、全面性能报告

WebPageTest分析性能

https://www.webpagetest.org/

解读WebPageTest的报告

waterfall chart请求瀑布图

first view首次访问

repeat view二次访问

本地部署WebPageTest工具

拉取镜像

docker pull webpagetest/server

docker pull webpagetest/agent

生成wpt-mac-server镜像

mkdir wpt-mac-server

cd wpt-mac-server

vim dockerfile

// dockerfile

FROM webpagetest/server

ADD locations.ini /var/www/html/settings/

vim locations.ini

// locations.ini

[locations]

1=Test_loc

[Test_loc]

1=Test

label=Test Location

group=Desktop

[Test]

browser=Chrome,Firefox

label="Test Location"

connectivity=LAN

docker build -t wpt-mac-server .

生成wpt-mac-agent镜像

mkdir wpt-mac-agent

cd wpt-mac-agent

vim dockerfile

// dockerfile

FROM webpagetest/agent

ADD script.sh /

ENTRYPOINT /script.sh

vim script.sh

// script.sh

#!/bin/bash

set -e

if [ -z "$SERVER_URL" ]; then

echo >&2 'SERVER_URL not set'

exit 1

fi

if [ -z "$LOCATION" ]; then

echo >&2 'LOCATION not set'

exit 1

fi

EXTRA_ARGS=""

if [ -n "$NAME" ]; then

EXTRA_ARGS="$EXTRA_ARGS --name $NAME"

fi

python /wptagent/wptagent.py --server $SERVER_URL --location $LOCATION $EXTRA_ARGS --xvfb --dockerized -vvvvv --shaper none

chmod u+x script.sh

docker build -t wpt-mac-agent .

运行镜像

docker run -d -p 4000:80 wpt-mac-server

docker run -d -p 4001:80 --network="host" -e "SERVER_URL=http://localhost:4000/work/" -e "LOCATION=Test" wpt-mac-agent

LightHouse分析性能

安装

npm install -g lighthouse

使用

lighthouse http://wilberjiang.com/

Chrome DevTools分析性能

Network

网络传输压缩

const compression = require('compression')

app.use(compression())

Performance

main主线程任务

调用栈

常用性能测量API

关键时间节点

网络状态

客户端服务端协商&网页显示状态

性能指标计算方法DNS解析耗时domainLookupEnd – domainLookupStart

TCP连接耗时connectEnd – connectStart

SSL安全连接耗时connectEnd – secureConnectionStart

网络请求耗时(TTFB)responseStart – requestStart

数据传输耗时responseEnd – responseStart

DOM解析耗时domInteractive – responseEnd

资源加载耗时loadEventStart – domContentLoadedEventEnd

First Byte时间responseStart – domainLookupStart

白屏时间responseEnd – fetchStart

首次可交互时间domInteractive – fetchStart

DOM Ready时间domContentLoadEventEnd – fetchStart

页面完全加载时间loadEventStart – fetchStart

http头部大小transferSize – encodedBodySize

重定向次数performance.navigation.redirectCount

重定向耗时redirectEnd – redirectStart

首次可交互时间

// 计算一些关键的性能指标

window.addEventListener('load', (event) => {

// Time to Interactive 可交互时间

let timing = performance.getEntriesByType('navigation')[0];

let diff = timing.domInteractive - timing.fetchStart;

console.log("TTI: " + diff);

})

观察长任务

const observer = new PerformanceObserver((list) => {

for (const entry of list.getEntries()) {

console.log(entry)

}

})

observer.observe({entryTypes: ['longtask']})

页面可见性的状态监听

let vEvent = 'visibilitychange';

if (document.webkitHidden != undefined) {

// webkit prefix detected

vEvent = 'webkitvisibilitychange';

}

function visibilityChanged() {

if (document.hidden || document.webkitHidden) {

console.log("Web page is hidden.")

} else {

console.log("Web page is visible.")

}

}

document.addEventListener(vEvent, visibilityChanged, false);

页面网络连接状态监听

let connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;

let type = connection.effectiveType;

function updateConnectionStatus() {

console.log("Connection type changed from " + type + " to " + connection.effectiveType);

type = connection.effectiveType;

}

connection.addEventListener('change', updateConnectionStatus);

原创文章，作者：犀牛前端部落，如若转载，请注明出处：https://www.pipipi.net/4324.html