# 首屏加载优化

1. 采用seo方案,服务端渲染,首屏直出
2. 模块按需加载,按需渲染
3. 骨架屏
4. 首屏图片懒加载
5. 页面链接预加载

   • 预加载页面链接,下次点击时直接从缓存中读取,提升用户体验

     const linkPrefetch = document.createElement('link');
     linkPrefetch.setAttribute('rel','prefetch');
     linkPrefetch.setAttribute('href','https://www.baidu.com');
     document.head.appendChild(linkPrefetch)
     

     1
     2
     3
     4
     

     or

        if (HTMLScriptElement.supports &&
        HTMLScriptElement.supports('speculationrules')) {
        const specScript = document.createElement('script');
        specScript.type = 'speculationrules';
        specRules = {
        prerender: [
        {
        source: 'list',
        urls: ['/next.html'],
        },
        ],
        };
        specScript.textContent = JSON.stringify(specRules);
        console.log('added speculation rules to: next.html');
        document.body.append(specScript);
        }
     

     1
     2
     3
     4
     5
     6
     7
     8
     9
     10
     11
     12
     13
     14
     15
     16