https://github.com/tbeseda/server-timings-elem

HTML custom element for displaying Server-Timing headers
https://github.com/tbeseda/server-timings-elem

Last synced: 5 days ago
JSON representation

HTML custom element for displaying Server-Timing headers

• Host: GitHub
• URL: https://github.com/tbeseda/server-timings-elem
• Owner: tbeseda
• Created: 2023-11-17T03:36:10.000Z (12 months ago)
• Default Branch: main
• Last Pushed: 2023-11-19T00:57:30.000Z (12 months ago)
• Last Synced: 2024-09-15T22:00:04.108Z (2 months ago)
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/server-timings-elem
• Size: 837 KB
• Stars: 5
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


server-timings-elem ⌚️




  HTML custom element for displaying Server-Timing headers


  Display timers from the document request with <server-timings></server-timings>.


  server-timings-elem on npmjs.com »


  


  Contents:

  Install

  •

  Usage

  •

  Links



![Screenshot of server-timings-elem](./screenshot.png)

## Install

Get the `server-timings.js` file to your webpage.

Grab it from GitHub or via npm:

```sh

npm install server-timings-elem

```

## Usage

### HTML

Include the `` element in your HTML document. The element will render as an unstyled `
`.


```html

```

#### Attributes

- `log` - Log the timings to the console as a table.

- `exclude` - Comma-separated list of names to exclude from the list.

  - Supports wildcard `*` at the end of a name.

- `sep` - Separator string to use between the name and duration.

- `threshold` - Minimum duration in ms to display.

- `top` - Number of greatest duration timings to display.

### JS API

`` will emit a `server-timings` event on itself after gathering, filtering, and sorting timings. The event's `detail` property will be a dictionary of the timings by name.

Also, the list of `PerformanceServerTiming` objects can be retrieved from the `timings` property.

```js

(function() {

  const $st = document.querySelector('server-timings#unique')

  $st.addEventListener('server-timings', ({ detail }) => {

    console.log('server-timings', detail)

    console.log($st.timings)

  })

})()

```

The event can be disabled with the `quiet` attribute.

### CSS

Sample CSS for styling the element:

```css

server-timings {

  display: block;

}

server-timings ul {

  margin: 0;

  padding: 0;

  list-style: none;

  display: flex;

  flex-direction: row;

  justify-content: center;

  gap: 1.5rem;

}

```

## Links

[`header-timers`](https://npmjs.com/package/header-timers) - Node.js module for creating Server-Timing headers

[`Server-Timing` reference](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Server-Timing) MDN documentation on Server-Timing headers