能提高网页的加载速度,主要原理是当用户鼠标停留在链接上时,会通过html预加载这个链接。
在用户点击链接之前,他们将鼠标悬停在该链接上。当用户停留65毫秒时,他们将有一半的机会点击该链接,因此此时开始预加载,平均超过300毫秒,以便页面预加载。
在移动设备上,用户在释放之前开始触摸他们的显示器,平均花费90毫秒来预加载页面。
也可以到https://instant.page/页面将一段js加入自己的网站,不过其服务器是在国外。点击标题下载源码放入自己的服务器上。
源码:
/*! instant.page v1.0.0 - (C) 2019 Alexandre Dieulot - https://instant.page/license */
let urlToPreload let mouseoverTimer let lastTouchTimestamp
const prefetcher = document.createElement('link') const isSupported = prefetcher.relList && prefetcher.relList.supports && prefetcher.relList.supports('prefetch') const allowQueryString = 'instantAllowQueryString' in document.body.dataset
if (isSupported) { prefetcher.rel = 'prefetch' document.head.appendChild(prefetcher)
const eventListenersOptions = { capture: true, passive: true, } document.addEventListener('touchstart', touchstartListener, eventListenersOptions) document.addEventListener('mouseover', mouseoverListener, eventListenersOptions) }
function touchstartListener(event) { /* Chrome on Android calls mouseover before touchcancel so `lastTouchTimestamp` * must be assigned on touchstart to be measured on mouseover. */ lastTouchTimestamp = performance.now()
const linkElement = event.target.closest('a')
if (!linkElement) { return }
if (!isPreloadable(linkElement)) { return }
linkElement.addEventListener('touchcancel', touchendAndTouchcancelListener, {passive: true}) linkElement.addEventListener('touchend', touchendAndTouchcancelListener, {passive: true})
urlToPreload = linkElement.href preload(linkElement.href) }
function touchendAndTouchcancelListener() { urlToPreload = undefined stopPreloading() }
function mouseoverListener(event) { if (performance.now() - lastTouchTimestamp < 1100) { return }
const linkElement = event.target.closest('a')
if (!linkElement) { return }
if (!isPreloadable(linkElement)) { return }
linkElement.addEventListener('mouseout', mouseoutListener, {passive: true})
urlToPreload = linkElement.href
mouseoverTimer = setTimeout(() => { preload(linkElement.href) mouseoverTimer = undefined }, 65) }
function mouseoutListener(event) { if (event.relatedTarget && event.target.closest('a') == event.relatedTarget.closest('a')) { return }
if (mouseoverTimer) { clearTimeout(mouseoverTimer) mouseoverTimer = undefined } else { urlToPreload = undefined stopPreloading() } }
function isPreloadable(linkElement) { if (urlToPreload == linkElement.href) { return }
const urlObject = new URL(linkElement.href)
if (urlObject.origin != location.origin) { return }
if (!allowQueryString && urlObject.search) { return }
if (urlObject.pathname + urlObject.search == location.pathname + location.search && urlObject.hash) { return }
if ('noInstant' in linkElement.dataset) { return }
return true }
function preload(url) { prefetcher.href = url }
function stopPreloading() { /* The spec says an empty string should abort the prefetching * but Firefox 64 interprets it as a relative URL to prefetch. */ prefetcher.removeAttribute('href') }
|
在页面加入:
<script src="instant.js" type="module" integrity="sha384-6w2SekMzCkuMQ9sEbq0cLviD/yR2HfA/+ekmKiBnFlsoSvb/VmQFSi/umVShadQI"></script>