Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ryanve/speculative
prerender, preconnect, preload, prefetch, dns-prefetch
https://github.com/ryanve/speculative
dns-prefetch javascript preconnect prefetch preload prerender
Last synced: about 1 month ago
JSON representation
prerender, preconnect, preload, prefetch, dns-prefetch
- Host: GitHub
- URL: https://github.com/ryanve/speculative
- Owner: ryanve
- License: mit
- Created: 2016-09-07T04:41:07.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2016-09-09T06:38:58.000Z (about 8 years ago)
- Last Synced: 2024-05-02T00:08:47.707Z (7 months ago)
- Topics: dns-prefetch, javascript, preconnect, prefetch, preload, prerender
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/speculative
- Size: 5.86 KB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# speculative
```sh
npm install speculative --save
```
```js
var speculative = require('speculative')
speculative({
href: 'http://google.com',
rel: 'prerender'
})
```
## API
### `speculative(attributes)`
#### `attributes`
- `href`: URI
- `rel`: relation
- `pr`: probability number between `0` and `1`
- `as`: [content type](https://www.w3.org/TR/preload/#link-element-interface-extensions)
- `crossorigin`: [CORS setting](https://html.spec.whatwg.org/multipage/infrastructure.html#cors-settings-attributes)
- `media`: media query
#### `rel`
rel value
Nature
Browser action
prerender
speculative
DNS lookup, TCP/TLS handshake, fetch data, execute scripts
preload
mandatory
DNS lookup, TCP/TLS handshake, fetch data
prefetch
speculative
DNS lookup, TCP/TLS handshake, fetch data
preconnect
speculative
DNS lookup, TCP/TLS handshake
dns-prefetch
speculative
DNS lookup
## Examples
### Speculating navigation
```js
speculative({
href: '/page/2',
rel: 'prerender next',
as: 'html',
pr: .5
})
speculative({
href: '/page/3',
rel: 'prefetch',
as: 'html',
pr: .2
})
```
### Prefetching playlist tracks
```js
speculative({
href: './track-2.mp3',
rel: 'prefetch',
as: 'media',
pr: .8
})
speculative({
href: './track-3.mp3',
rel: 'prefetch',
as: 'media',
pr: .3
})
```
### Prefetching an image
```js
speculative({
href: './hi-res.jpg',
rel: 'prefetch',
media: '(min-width: 60rem)',
as: 'image'
})
```
### Prefetching JavaScript
```js
speculative({
href: 'https://code.jquery.com/jquery-3.1.0.slim.min.js',
rel: 'prefetch',
crossorigin: 'anonymous',
as: 'script',
pr: 1
})
```
### Prefetching CSS
```js
speculative({
href: '/animations.css',
rel: 'prefetch',
media: 'screen',
as: 'style'
})
```
### **Prefetch with care**. Test for metered data usage
```js
var cxn = require('cxn')
var speculative = cxn.metered() ? function() {} : require('speculative')
```
## License
MIT