internetrix / silverstripe-server-timing
将 server-timing 信息添加到响应头中
Requires
- silverstripe/framework: ~4.0
- silverstripe/vendor-plugin: ^1.0
Requires (Dev)
- phpunit/phpunit: ^5.7
- squizlabs/php_codesniffer: ^3.0
This package is not auto-updated.
Last update: 2024-09-17 19:46:56 UTC
README
此模块允许开发者为 SilverStripe 应用程序添加 Server-Timing 信息到响应头。
Server Timing API 允许您通过响应头将请求特定的计时数据从服务器传递到浏览器。
这是 Chrome 开发工具中 Server Timing 头信息的一个示例
要求
- SilverStripe 框架 ^4.0
安装
composer require internetrix/silverstripe-server-timing
配置
建议将 \Internetrix\Control\Middleware\ServerTimingMiddleware::class
添加到中间件执行管道的顶部。这将要求在 SilverStripe CMS 完全启动之前添加中间件。
为此,我们可以编辑位于 public/index.php
或项目根目录中的 index.php
的 SilverStripe CMS 入口点文件(如果您的项目未使用公共网络根目录)。
找到实例化 HTTPApplication
的行。在 HTTPApplication
实例上调用 addMiddleware
方法,并传入 ServerTimingMiddleware
类的实例。请记住传入 ServerTiming
的实例
$app = new HTTPApplication($kernel);
// Add the following line to configure our ServerTimingMiddleware
$app->addMiddleware(new ServerTimingMiddleware(ServerTiming::inst()));
$app->addMiddleware(new ErrorControlChainMiddleware($app));
$response = $app->handle($request);
$response->output();
默认情况下,以下指标被添加到响应头中
- Bootstrap: 从调用
ServerTimingMiddleware
开始的时间 - Application: 从 SilverStripe 应用程序接收响应所需的时间。
- Total: 从将请求发送到服务器到将响应发送回客户端之前的总持续时间。
添加更多计时指标
开发人员还可以通过在 Internetrix\Helper\ServerTiming
类中使用 start
和 end
方法向头部添加更多计时指标。请注意,度量名称应作为参数传递,并且对于 start
和 stop
应该相同。
可以在 SilverStripe 应用程序的不同部分调用 start
和 stop
方法。
ServerTiming::start('Custom Metric to Measure');
// do something in the code
ServerTiming::end('Custom Metric to Measure');
或者,我们还可以在想要从请求开始测量指标时,使用 ServerTiming
上的 addMetric
方法。然后,该指标的持续时间将使用请求的起始时间和当前时间计算。
// add a metric that measure the time between the start of the request and now
ServerTiming::addMetric('Metric to Add');
客户端分析集成
注意:在某些浏览器中,该接口可能仅在某些安全上下文中(HTTPS)可用。
可以使用 JavaScript 中的 PerformanceObserver Web API 获取 Server-Timing 头中定义的默认和自定义计时指标,以便进行第三方分析集成(例如 Google Analytics)。
将以下脚本添加到基本 Page.ss
模板文件和/或任何您希望在客户端检索服务器-timing API 信息的页面中,在 </body>
标签之前。该脚本将所有服务器-timing 指标数据推送到全局 dataLayer
JavaScript 变量,然后可以用于分析。
<script>
try {
window.dataLayer = window.dataLayer || [];
serverTimings = {};
// Create the performance observer.
const po = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
// Logs each server timing data for this response to object
if ('serverTiming' in entry) {
entry.serverTiming.forEach(function (timing) {
let name = timing.name;
serverTimings[name] = timing.duration;
});
}
}
});
// Start listening for `navigation` entries to be dispatched.
po.observe({type: 'navigation', buffered: true});
// Push all the server timing object to the datalayer as a new event
dataLayer.push({
'event' : 'ServerTimings',
'timings' : [serverTimings]
});
} catch (e) {
// Do nothing if API is not support by browser
}
</script>
这是默认 Server-Timing 指标在全局 dataLayer
变量中存储的示例
鸣谢
此模块受 Laravel 框架以下包的启发和基于
https://github.com/beyondcode/laravel-server-timing.
它已被重构以兼容 SilverStripe 框架。
许可证
有关更多信息,请参阅许可证文件。