1. 犀牛前端部落首页
  2. 前端面试题

前端性能指标和优化目标

性能指标

加载

  • 理解加载瀑布图
  • 基于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

发表评论

登录后才能评论