BootCDN 如何提升页面加载速度？免费稳定资源，节点覆盖广，支持版本管理

? 选择合适的节点，就近获取资源

? 启用 HTTP/2 协议，提升传输效率

⚡ 优先使用压缩后的资源文件

? 优化脚本加载方式，避免阻塞渲染

• 异步加载（async）：对于非关键的脚本，可以使用async属性。这样脚本会在后台加载，不会阻塞 HTML 的解析和渲染。例如：
  
  
  html

  <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js" async>script>
  
  
  
  但要注意，async脚本的执行顺序是不确定的，所以如果脚本之间有依赖关系，不建议使用这种方式。
  
  
• 延迟加载（defer）：对于需要按顺序执行的脚本，可以使用defer属性。脚本会在 HTML 解析完成后按顺序执行，不会阻塞渲染。例如：
  
  
  html

  <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.4/moment.min.js" defer>script>
  
  
  
• 预加载关键资源：对于页面首屏需要的关键资源，可以使用进行预加载。例如：
  
  
  html

  <link rel="preload" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/webfonts/fa-solid-900.woff2" as="font" type="font/woff2" crossorigin>
  
  
  
  这样浏览器会提前加载字体文件，当页面需要显示时就能立即使用，减少等待时间。
  
  

?️ 合理利用缓存策略，减少重复请求

?️ 启用子资源完整性（SRI），确保资源安全

<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" 
      integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" 
      crossorigin="anonymous" 
      rel="stylesheet">

? 测试和监控页面加载速度

• Google PageSpeed Insights：它会分析页面的性能，并给出优化建议。
• Lighthouse：这是 Chrome 浏览器内置的工具，可以对页面进行全面的性能审计。
• WebPagetest：支持在不同地点和网络环境下测试页面加载速度，并提供详细的瀑布图分析。

? 多 CDN 备份，提升可用性

<script>
  function loadScript(url, fallbackUrl) {
    const script = document.createElement('script');
    script.src = url;
    
    const timeout = setTimeout(() => {
      if (!window.jQuery) { // 假设加载的是jQuery
        console.warn('主CDN加载失败，切换至备用CDN');
        loadScript(fallbackUrl);
      }
    }, );
    
    script.onload = () => clearTimeout(timeout);
    document.head.appendChild(script);
  }

  // 主CDN
  loadScript('https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js', 
            'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js');
script>

? 总结