小编Vil*_*ila的帖子

我想仅通过首次访问者通过CloudFlare工作者动态添加http-header 。例如，这些标头：

Link: </path/to/file.css>; rel=preload; as=style; nopush
Link: </path/to/script.js>; rel=preload; as=script; nopush

因此，我需要通过CloudFlare Workers中的JavaScript进行以下操作：

1. 检查客户端是否存在特定的cookie。
2. 如果该cookie不存在，请添加http-headers，然后设置该特定cookie。
3. 如果cookie存在，则不执行任何操作。

您可以在此处使用代码。

这是CF博客中的一个一般示例（涉及cookie和标头）：

// A Service Worker which skips cache if the request contains
// a cookie.
addEventListener('fetch', event => {
  let request = event.request
  if (request.headers.has('Cookie')) {
    // Cookie present. Add Cache-Control: no-cache.
    let newHeaders = new Headers(request.headers)
    newHeaders.set('Cache-Control', 'no-cache')
    event.respondWith(fetch(request, {headers: newHeaders}))
  }

  // Use default behavior.
  return
})

IntersectionObserver是一个相当新的实验性API，目前尚不受所有浏览器的完全支持。

它将有很多用途，但目前最主要的用途是延迟加载图像，也就是说，如果您在网站上拥有大量图像。它是由谷歌建议，如果你审计你的网站灯塔。

现在，网络上有几条代码片段提示了其用法，但我认为没有一个经过100％审查。例如，我正在尝试使用这个。它在Chrome，Firefox和Opera上像超级按钮一样工作，但在IE和Edge上不起作用。

const images = document.querySelectorAll('img[data-src]');
const config = {
  rootMargin: '50px 0px',
  threshold: 0.01
};

let observer;

if ('IntersectionObserver' in window) {
  observer = new IntersectionObserver(onChange, config);
  images.forEach(img => observer.observe(img));
} else {
  console.log('%cIntersection Observers not supported', 'color: red');
  images.forEach(image => loadImage(image));
}

const loadImage = image => {
  image.classList.add('fade-in');
  image.src = image.dataset.src;
}

function onChange(changes, observer) {
  changes.forEach(change => {
    if (change.intersectionRatio > 0) {
      // …