internetrix/silverstripe-server-timing

将 server-timing 信息添加到响应头中

安装: 271

依赖: 0

建议者: 0

安全: 0

星标: 6

关注者: 7

分支: 1

类型:silverstripe-vendormodule

1.0 2020-08-24 02:10 UTC

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 头信息的一个示例

Example

要求

  • 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 类中使用 startend 方法向头部添加更多计时指标。请注意,度量名称应作为参数传递,并且对于 startstop 应该相同。

可以在 SilverStripe 应用程序的不同部分调用 startstop 方法。

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 变量中存储的示例

DataLayer-Example

鸣谢

此模块受 Laravel 框架以下包的启发和基于

https://github.com/beyondcode/laravel-server-timing.

它已被重构以兼容 SilverStripe 框架。

许可证

有关更多信息,请参阅许可证文件