Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add resource-hint-generator #1

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

JuniorTour
Copy link
Owner

@JuniorTour JuniorTour commented Sep 4, 2023

背景:

2行代码让JS加载耗时减少67%-强大的资源优先级提示-《前端工程体验优化》

resource-hint-generator GitHub 仓库

image

预期优化效果

  优化前(无Preconnect && DNS-Prefetch) 优化后(有Preconnect && DNS-Prefetch) 差异
加载耗时 1400 ms 451 ms -949 ms (-67%)
截图 image  image  在DevTool - Network - 资源 - 计时(Timing)面板 可以看到,因为Preconnect && DNS-Prefetch,连接开始阶段的耗时从950ms降低到了1ms,使得资源的整体加载耗时大幅减少了近1000ms。
在线DEMO https://jsbin.com/panorej/edit?html https://jsbin.com/haragis/edit?html  

resource-hint.js 示例

/*
Add resource hint link element, eg: <link rel="prefetch" href="${targetPath}">
*/
try {
  (function (prefetchFilesPath, preconnectDomains) {
    const crossOriginAttrVal = '';
    const CDN_HOST = 'https://github.com/JuniorTour';
    if (!prefetchFilesPath || !prefetchFilesPath.length) {
      return;
    }

    function addLinkTag(src, { rel, crossoriginVal }) {
      const tag = document.createElement('link');
      tag.rel = rel;
      tag.href = src;
      // enable crossorigin so that prefetch cache works for
      // Cross Origin Isolation status.
      if (crossoriginVal !== undefined) {
        tag.setAttribute('crossorigin', crossoriginVal);
      }
      const head = document.querySelector('head');
      if (head && head.appendChild) {
        head.appendChild(tag);
      }
    }

    function addPrefetchDNSTag(src) {
      addLinkTag(src, {
        rel: 'dns-prefetch',
        crossoriginVal: crossOriginAttrVal,
      });
    }

    function addPreconnectTag(src) {
      addLinkTag(src, {
        rel: 'preconnect',
        crossoriginVal: crossOriginAttrVal,
      });
    }

    function addPrefetchTag(src) {
      addLinkTag(src, { rel: 'prefetch', crossoriginVal: crossOriginAttrVal });
    }

    if (prefetchFilesPath && prefetchFilesPath.forEach) {
      prefetchFilesPath.forEach((path) => {
        if (path) {
          addPrefetchTag(CDN_HOST + path);
        }
      });
    }
    if (preconnectDomains && preconnectDomains.forEach) {
      preconnectDomains.forEach((domain) => {
        if (domain) {
          addPreconnectTag(domain);
          addPrefetchDNSTag(domain);
        }
      });
    }
  })(['/main.68eda6edda2178b7abfc.css','/main.a45a5ff47f82fd159b80.js',], ['https://preconnect-example.com',]);
} catch (err) {
  console.log(`[resource-hint.js] ERROR: err=${err}`);
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

1 participant