JavaScript性能优化实战（6）：网络请求与资源加载优化

于 2025-04-28 16:03:23 发布
阅读量1.3k 收藏 28
点赞数 26
分类专栏： # Javascript 文章标签： javascript 性能优化 网络
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/npl2580/article/details/147589691
版权
#JavaScript性能优化实战#

引言

在现代Web应用开发中，网络性能已成为影响用户体验的关键因素。据统计，用户等待页面加载的耐心通常不超过3秒，超过这个时间，约40%的用户会选择离开。此外，Google的研究表明，页面加载时间每增加0.5秒，流量就会下降约20%。因此，优化网络请求和资源加载不仅关乎用户体验，更直接影响业务转化率和收益。

本文将深入探讨前端网络性能优化的关键技术和策略，从性能指标、协议优化、加载策略到架构设计，全方位提升应用的网络性能。我们将结合实际案例和代码示例，展示这些优化手段如何在实战中发挥作用，帮助开发者打造高性能的Web应用。

前端网络性能指标与优化目标

核心Web指标(Core Web Vitals)

2020年，Google提出了Core Web Vitals作为衡量用户体验的关键指标，这些指标已成为业界公认的网络性能评估标准：

1. LCP (Largest Contentful Paint)

LCP测量页面主要内容加载完成的时间，直接反映页面加载速度。

// 使用Performance API监测LCP
new PerformanceObserver((entryList) => {
   
  const entries = entryList.getEntries();
  const lastEntry = entries[entries.length - 1];
  console.log('LCP:', lastEntry.startTime);
  console.log('LCP元素:', lastEntry.element);
}).observe({
    type: 'largest-contentful-paint', buffered: true });

优化目标：良好的LCP应在2.5秒内完成

优化策略：

  • 优化服务器响应时间
  • 消除渲染阻塞资源
  • 优化图像加载
  • 实现关键CSS内联
2. FID (First Input Delay)

FID衡量用户首次与页面交互到浏览器响应的延迟时间。

// 监测FID
new PerformanceObserver((entryList) => {
   
  const entries = entryList.getEntries();
  entries.forEach((entry) => {
   
    console.log('FID:', entry.processingStart - entry.startTime);
    console.log('交互类型:', entry.name);
  });
}).observe({
    type: 'first-input', buffered: true });

优化目标：良好的FID应在100毫秒内

优化策略：

  • 拆分长任务
  • 优化JavaScript执行
  • 使用Web Workers处理复杂计算
  • 延迟加载非关键JavaScript
3. CLS (Cumulative Layout Shift)

CLS衡量页面加载过程中的视觉稳定性，即元素意外移动的程度。

// 监测CLS
let clsValue = 0;
new PerformanceObserver((entryList) => {
   
  for (const entry of entryList.getEntries()) {
   
    if (!entry.hadRecentInput) {
   
      clsValue += entry.value;
      console.log('当前CLS值:', clsValue);
    }
  }
}).observe({
    type: 'layout-shift', buffered: true });

优化目标：良好的CLS应小于0.1

优化策略：

  • 为图像和视频指定尺寸
  • 预留广告和嵌入内容的空间
  • 避免在已存在内容上方插入内容
  • 使用transform动画而非影响布局的属性

扩展性能指标

除了Core Web Vitals，以下指标同样重要：

1. TTFB (Time To First Byte)

TTFB测量从请求开始到收到响应第一个字节的时间。

// 测量TTFB
const navigationEntries = performance.getEntriesByType('navigation');
if (navigationEntries.length > 0) {
   
  console.log('TTFB:', navigationEntries[0].responseStart - navigationEntries[0].requestStart);
}

优化目标：良好的TTFB应在800毫秒内

2. FCP (First Contentful Paint)

FCP衡量浏览器渲染DOM中第一个内容的时间。

// 监测FCP
new PerformanceObserver((entryList) => {
   
  const entries = entryList.getEntries();
  entries.forEach((entry) => {
   
    console.log('FCP:', entry.startTime);
  });
}).observe({
    type: 'paint', buffered: true });

优化目标：良好的FCP应在1.8秒内

3. TTI (Time To Interactive)

TTI测量页面变为完全可交互所需的时间。

// 需使用web-vitals库测量TTI
import {
    getTTI } from 'web-vitals';

getTTI(console.log);

优化目标：良好的TTI应在3.8秒内

性能优化目标设定

根据不同类型的Web应用和用户场景，性能优化目标也应有所区别：

  1. 电商平台：

    • 首屏加载时间 < 2秒
    • 页面完全加载时间 < 3秒
    • 交互响应时间 < 100ms

  2. 内容网站：

    • LCP < 2秒
    • 完全加载时间 < 5秒
    • 图片优化率 > 80%

  3. SaaS应用：

    • 初始加载时间 < 3秒
    • 后续操作响应时间 < 200ms
    • 离线功能支持率 > 90%

  4. 移动Web应用：

    • 首屏加载时间 < 1.5秒
    • 数据传输量 < 1MB
    • 低网络环境适应性测试通过率 > 95%

性能预算制定

性能预算是确保Web应用性能达标的有效工具，通常包括以下几个方面：

  1. 时间预算：

    • 首屏加载时间不超过2秒
    • API响应时间不超过200ms
    • 交互响应时间不超过100ms

  2. 资源预算：

    • JavaScript资源总量不超过300KB（压缩后）
    • CSS资源总量不超过100KB（压缩后）
    • 首屏图像资源不超过500KB

  3. 规则预算：

    • Lighthouse性能得分不低于90分
    • Core Web Vitals全部达到"良好"标准
    • WebPageTest Speed Index不超过3000
// 使用performance-budget npm包监控性能预算
const Budget = require('performance-budget');

const myBudget = new Budget({
   
  javascript: {
   
    size: 300 * 1024, // 300KB
    requests: 8
  },
  css: {
   
    size: 100 * 1024, // 100KB
    requests: 3
  },
  image: {
   
    size: 500 * 1024, // 500KB
    requests: 15
  },
  font: {
   
    size: 100 * 1024, // 100KB
    requests: 2
  },
  total: {
   
    size: 1000 * 1024, // 1MB
    requests: 30,
    domNodes: 1500,
    domDepth: 20
  }
});

// 在CI流程中检查性能预算
myBudget.check('./performance-stats.json')
  .then(result => {
   
    if (!result.passed) {
   
      console.error('性能预算检查未通过:', result.failures);
      process.exit(1);
    }
  });

性能监控与分析

建立持续的性能监控体系对于优化网络性能至关重要：

  1. RUM (Real User Monitoring)：
// 使用自定义事件上报性能数据
function sendPerformanceMetrics() {
   
  const navigationEntry = performance.getEntriesByType('navigation')[0];
  const paintEntries = performance.getEntriesByType('paint');
  
  const metrics = {
   
    domComplete: navigationEntry.domComplete,
    loadEventEnd: navigationEntry.loadEventEnd,
    domInteractive: navigationEntry.domInteractive,
    firstPaint: paintEntries.find(entry => entry.name === 'first-paint')?.startTime,
    firstContentfulPaint: paintEntries.find(entry => entry.name === 'first-contentful-paint')?.startTime,
    // 其他自定义指标
  };
  
  navigator.sendBeacon('/api/performance-metrics', JSON.stringify(metrics));
}

window.addEventListener('unload', sendPerformanceMetrics);
  1. 合成监控 (Synthetic Monitoring)：

使用Lighthouse、WebPageTest等工具在预定义的环境中定期测试性能。

// 使用lighthouse-ci进行自动化性能测试
// lighthouse-ci.config.js
module.exports = {
   
  ci: {
   
    collect: {
   
      url: ['https://example.com/', 'https://example.com/products'],
      numberOfRuns: 3,
    },
    assert: {
   
      assertions: {
   
        'categories:performance': ['error', {
   minScore: 0.9}],
        'largest-contentful-paint': ['error', {
   maxNumericValue: 2500}],
        'cumulative-layout-shift': ['error', {
   maxNumericValue: 0.1}],
        'first-input-delay': ['error', {
   maxNumericValue: 100}],
      },
    },
    upload: {
   
      target: 'lhci',
      serverBaseUrl: 'http://lighthouse-ci.internal/',
    },
  },
};
  1. 性能异常报警：
// 设置性能指标阈值并报警
function setupPerformanceAlerts() {
   
  new PerformanceObserver((entryList) => {
   
    const lcpEntry = entryList.getEntries().pop();
    if (lcpEntry.startTime > 4000) {
    // 超过4秒，发出警报
      sendAlert({
   
        metric: 'LCP',
        value: lcpEntry.startTime,
        url: window.location.href,
        timestamp: Date.now()
      });
    }
  }).observe({
   type: 'largest-contentful-paint', buffered: true});
  
  // 同样监控其他指标...
}

setupPerformanceAlerts();

通过建立完善的网络性能指标体系和优化目标，我们可以有的放矢地进行优化工作，确保用户体验的持续提升。在下一节中，我们将探讨如何利用现代网络协议如HTTP/2和HTTP/3提升前端应用的网络性能。

HTTP/2与HTTP/3特性在前端的应用

随着互联网技术的发展，HTTP协议也在不断演进。从HTTP/1.1到HTTP/2再到HTTP/3，每一次升级都带来了显著的性能提升。作为前端开发者，了解并充分利用这些新协议的特性，对于优化网络请求至关重要。

HTTP/1.1的局限性

在深入HTTP/2和HTTP/3之前，我们先回顾HTTP/1.1的主要限制：

  1. 连接数限制：浏览器对同一域名的并行连接数有限制（通常为6-8个），导致请求队头阻塞
  2. 串行请求处理：HTTP/1.1中，请求需要按顺序处理，后面的请求必须等前面的请求完成
  3. 未压缩的头部：每个请求都会携带完整的头部信息，造成额外开销
  4. 简单的资源优先级：缺乏对请求优先级的细粒度控制

这些限制导致开发者采用许多变通方法，如域名分片、资源合并、雪碧图等，但这些方法往往会带来新的复杂性和维护成本。

HTTP/2特性及前端应用

HTTP/2于2015年发布，引入了多项革命性特性，极大提升了Web性能：

1. 多路复用 (Multiplexing)

HTTP/2允许在单个TCP连接上并行传输多个请求/响应，消除了HTTP/1.1的队头阻塞问题。

前端应用策略：

  • 取消域名分片：不再需要将资源分散到多个域名
  • 取消资源合并：可以适度拆分大型资源文件，减少缓存失效的影响范围
  • 取消雪碧图：单独请求小图标不再有性能劣势
// HTTP/1.1时代的资源合并
// bundle.js包含所有JS文件
<script src="/dist/bundle.js"></script>

// HTTP/2时代可以适度拆分
<script src="/js/core.js"></script>
<script src="/js/vendor.js"></script>
<script src="/js/app.js"></script>
2. 服务器推送 (Server Push)

服务器可以在客户端请求之前，主动推送可能需要的资源。

前端应用策略：

  • 推送关键CSS和JavaScript：减少页面渲染阻塞时间
  • 推送预计用户下一步会请求的资源：如首页推送登录页面资源
<!-- 服务器头部配置 -->
<!-- 当请求index.html时，同时推送关键CSS和JS -->
Link: </css/critical.css>; rel=preload; as=style
Link: </js/essential.js>; rel=preload; as=script

// 在Node.js服务器中实现服务器推送
const http2 = require('http2');
const fs = require('fs');

const server = http2.createSecureServer({
   
  key: fs.readFileSync('server.key'),
  cert: fs.readFileSync('server.crt')
});

server.on('stream', (stream, headers) => {
   
  const path = headers[':path'];
  
  if (path === '/') {
   
    // 推送关键资源
    stream.pushStream({
    ':path': '/css/critical.css' }, (err, pushStream) => {
   
      if (err) throw err;
      pushStream.respondWithFile('./public/css/critical.css', {
   
        'content-type': 'text/css'
      });
    });
    
    stream.respondWithFile('./public/index.html', {
   
      'content-type': 'text/html'
    });
  }
});

server.listen(8443);
3. 头部压缩 (HPACK)

HTTP/2引入HPACK算法压缩头部信息，减少数据传输量。

前端应用策略：

  • 简化Cookie：虽有压缩，但仍应精简Cookie体积
  • 利用头部压缩特性：常用头部会被高效压缩，不必过度担心头部体积
4. 二进制分帧 (Binary Framing)

HTTP/2采用二进制格式传输数据，而非HTTP/1.1的文本格式，提高了解析效率。

前端应用策略：

  • 无需特殊适配：这是底层实现，前端开发者无需特别处理
5. 请求优先级 (Request Prioritization)

HTTP/2允许客户端为请求分配优先级，服务器据此优化资源传输顺序。

前端应用策略：

  • 使用<link rel="preload">指示关键资源：浏览器会据此调整请求优先级
<!-- 使用preload标记优先资源 -->
<link rel="preload" href="/fonts/important.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/css/critical.css" as="style">
<link rel="preload" href="/js/app-core.js" as="script">

HTTP/3特性及前端应用

HTTP/3（基于QUIC协议）是HTTP协议的最新版本，它通过从TCP转向UDP，并在应用层实现可靠性，解决了更多性能问题：

1. 改进的连接建立

HTTP/3使用QUIC协议，将TLS握手与连接建立合并，大幅减少了连接建立时间。

前端应用策略：

  • 利用0-RTT恢复：在重复访问时，几乎消除连接建立延迟
// 检测是否支持HTTP/3
const isHTTP3Supported = () => {
   
  const connection = performance.getEntriesByType('navigation')[0];
  return connection && connection.nextHopProtocol === 'h3';
};

// 根据协议支持情况调整策略
if (isHTTP3Supported()) {
   
  // 可以更激进地拆分资源，利用HTTP/3的高效连接
  loadResourcesSeparately();
} else {
   
  // 回退到更保守的资源加载策略
  loadBundledResources();
}
2. 消除队头阻塞 (HOL Blocking)

HTTP/2虽然解决了应用层的队头阻塞，但TCP层的队头阻塞仍然存在。HTTP/3基于UDP的QUIC协议完全消除了这一问题。

前端应用策略：

  • 更激进的并行请求：在HTTP/3下，可以同时发起更多并行请求
  • 针对不稳定网络优化：HTTP/3在网络丢包情况下表现更佳，适合移动应用
3. 连接迁移 (Connection Migration)

HTTP/3支持在网络切换（如Wi-Fi切换到移动网络）时保持连接，而不需要重新建立。

前端应用策略：

  • 优化移动应用体验：减少网络切换导致的连接中断
  • 实现更可靠的长连接：如WebSocket替代方案
// 检测网络变化并通知用户HTTP/3连接维持状态
window.addEventListener('online', () => {
   
  if (isHTTP3Supported()) {
   
    console.log('网络已恢复，连接已维持');
    // 无需刷新页面或重新连接
  } else {
   
    console.log('网络已恢复，可能需要重新连接');
    // 提示用户刷新或自动重连
  }
});
4. 前向纠错 (Forward Error Correction)

HTTP/3可以在不重传的情况下恢复丢失的数据包，提高网络恢复能力。

前端应用策略：

  • 高价值数据传输优化：利用HTTP/3传输关键业务数据
  • 弱网环境的用户体验优化：特别适合移动设备和不稳定网络

协议支持检测与降级策略

在实际应用中，需要检测浏览器对不同HTTP协议的支持情况，并实施相应的优化策略：

// 检测HTTP协议版本
function detectHttpProtocol() {
   
  const connection = performance.getEntriesByType('navigation')[0];
  if (!connection || !connection.nextHopProtocol) {
   
    return 'unknown';
  }
  
  switch (connection.nextHopProtocol) {
   
    case 'h3':
      return 'HTTP/3';
    case 'h2':
      return 'HTTP/2';
    case 'http/1.1':
      return 'HTTP/1.1';
    default:
      return connection.nextHopProtocol;
  }
}

// 根据协议实施不同策略
function applyProtocolSpecificOptimizations() {
   
  const protocol = detectHttpProtocol();
  
  switch (protocol) {
   
    case 'HTTP/3':
      // 充分利用HTTP/3特性
      enableHighParallelRequests();
      disableDomainSharding();
      optimizeForConnectionMigration();
      break;
    case 'HTTP/2':
      // 应用HTTP/2优化策略
      disableDomainSharding();
      enableServerPush();
      optimizeRequestPriority();
      break;
    case 'HTTP/1.1':
      // 回退到HTTP/1.1优化策略
      enableDomainSharding();
      combineResources();
      useSpritesAndInlining();
      break;
    default:
      // 使用最保守的策略
      applyFallbackOptimizations();
  }
}

// 页面加载完成后应用优化
window.addEventListener('load', () => {
   
  // 等待导航性能数据可用
  setTimeout(() => {
   
    applyProtocolSpecificOptimizations();
  }, 0);
});

服务器配置最佳实践

要充分利用新协议特性，服务器端配置同样重要：

Nginx配置HTTP/2示例
server {
    listen 443 ssl http2;
    server_name example.com;

    ssl_certificate /path/to/cert.pem;
    ssl_certificate_key /path/to/key.pem;
    
    # 启用服务器推送
    location / {
        root /var/www/html;
        http2_push /css/critical.css;
        http2_push /js/essential.js;
        http2_push_preload on;
    }
    
    # 其他HTTP/2优化配置
    http2_max_concurrent_streams 128;
    http2_idle_timeout 3m;
}
Node.js HTTP/2服务器示例
const http2 = require('http2');
const fs = require('fs');
const path = require('path');

const server = http2.createSecureServer({
   
  key: fs.readFileSync('server.key'),
  cert: fs.readFileSync('server.crt')
});

server.on('stream', (stream, headers) => {
   
  const reqPath = headers[':path'];
  const fullPath = path.join(__dirname, 'public', reqPath);
  
  // 实现基本的静态文件服务
  fs.stat(fullPath, (err, stats) => {
   
    if (err) {
   
      stream.respond({
    ':status': 404 });
      stream.end('Not Found');
      return;
    }
    
    if (reqPath === '/') {
   
      // 利用服务器推送关键资源
      const criticalAssets = ['/css/style.css', '/js/main.js'];
      
      criticalAssets.forEach(asset => {
   
        const assetPath = path.join(__dirname, 'public', asset);
        const contentType = asset.endsWith('.css') ? 'text/css' : 'application/javascript';
        
        stream.pushStream({
    ':path': asset }, (err, pushStream) => {
   
          if (err) throw err;
          pushStream.respondWithFile(assetPath, {
   
            'content-type': contentType
          });
        });
      });
    }
    
    // 设置适当的内容类型
    const contentType = getContentType(reqPath);
    
    stream.respondWithFile(fullPath, {
   
      'content-type': contentType
    });
  });
});

function getContentType(path) {
   
  if (path.endsWith('.html')) return 'text/html';
  if (path.endsWith('.css')) return 'text/css';
  if (path.endsWith('.js')) return 'application/javascript';
  if (path.endsWith('.json')) return 'application/json';
  if (path.endsWith('.png')) return 'image/png';
  if (path.endsWith('.jpg')) return 'image/jpeg';
  return 'text/plain';
}

server.listen(8443, () => {
   
  console.log('HTTP/2服务器运行在 https://localhost:8443');
});

实际案例：电商平台HTTP/2迁移效果

某电商平台从HTTP/1.1迁移到HTTP/2后的性能提升数据：

性能指标 HTTP/1.1 HTTP/2 提升比例
页面加载时间 3.8秒 2.1秒 45%
首屏时间 2.5秒 1.4秒 44%
资源请求数 35个合并请求 86个独立请求 -
总传输数据量 2.8MB 2.3MB 18%
服务器连接数 8个 1个 87.5%

迁移策略：

  1. 拆分过大的资源包，适度增加HTTP请求数
  2. 移除域名分片策略，集中到主域名
  3. 配置服务器推送关键CSS和JavaScript
  4. 移除内联资源和雪碧图
  5. 针对关键渲染路径资源设置优先级

通过HTTP/2和HTTP/3的高效特性，前端应用可以摆脱传统HTTP/1.1时代的许多性能优化限制，采用更自然、更易维护的资源组织方式，同时获得更好的性能表现。在下一节中，我们将探讨如何利用资源预加载与预连接技术进一步优化资源加载性能。

资源预加载与预连接技术实践

现代浏览器提供了多种资源提示（Resource Hints）技术，允许开发者指导浏览器优先获取特定资源或提前建立连接。这些技术能显著提升用户感知的加载速度，尤其是在网络条件较差的情况下。本节将深入探讨这些技术的实践应用。

资源提示（Resource Hints）概览

浏览器提供了多种资源提示机制，每种机制都有其特定用途和适用场景：

资源提示 作用 适用场景
preload 当前页面必须的资源预加载 关键CSS、字体、当前页面JS
prefetch 下一页面可能需要的资源预获取 下一页内容、用户可能操作的功能
preconnect 提前建立连接（DNS+TCP+TLS） 将从其获取资源的第三方域
dns-prefetch 提前解析DNS 后续可能访问的域名
prerender 提前渲染整个页面 用户极可能访问的下一页面

preload：关键资源预加载

preload 指示浏览器尽快下载当前页面必需的资源，无论这些资源在页面中出现的位置如何。

基本用法
<!-- 预加载关键CSS -->
<link rel="preload" href="/css/critical.css" as="style">

<!-- 预加载字体文件 -->
<link rel="preload" href="/fonts/roboto.woff2" as="font" type="font/woff2" crossorigin>

<!-- 预加载关键JavaScript -->
<link rel="preload" href="/js/important.js" as="script">

<!-- 预加载JSON数据 -->
<link rel="preload" href="/api/initial-data.json" as="fetch" crossorigin>

<!-- 预加载主图片 -->
<link rel="preload" href="/images/hero.webp" as="image" imagesrcset="/images/hero.webp 1x, /images/hero-2x.webp 2x">

as 属性至关重要，它帮助浏览器：

  • 正确设置请求优先级
  • 应用正确的内容安全策略
  • 设置适当的请求头（如Accept头）
动态preload

有时候，我们需要基于JavaScript逻辑动态添加preload：

// 根据用户行为动态预加载资源
function preloadResourceBasedOnUserAction(resourceUrl, type) {
   
  const link = document.createElement('link');
  link.rel = 'preload';
  link.href = resourceUrl;
  link.as = type; // 'style', 'script', 'font', 'image', 'fetch' 等
  
  if (type === 'font') {
   
    link.crossOrigin = 'anonymous';
  }
  
  document.head.appendChild(link);
}

// 用户悬停在某元素上时预加载相关资源
document.querySelector('.product-card').addEventListener('mouseenter', () => {
   
  preloadResourceBasedOnUserAction('/product-details.css', 'style');
  preloadResourceBasedOnUserAction('/product-details.js', 'script');
});
使用HTTP头部声明preload

通过服务器响应头也可以指定预加载资源：

Link: </css/critical.css>; rel=preload; as=style
Link: </js/important.js>; rel=preload; as=script
实际案例：电子商务网站关键资源预加载

某电子商务网站通过以下预加载策略提升了首屏加载性能：

<!-- 基础样式 -->
<link rel="preload" href="/css/base.css" as="style">

<!-- 产品图片尺寸占位和懒加载脚本 -->
<link rel="preload" href="/js/image-lazy-load.js" as="script">

<!-- 产品卡片组件CSS -->
<link rel="preload" href="/css/product-card.css" as="style">

<!-- 首屏关键产品图片 -->
<link rel="preload" href="/images/featured-product.webp" as="image">

<!-- 自定义字体 -->
<link rel="preload" href="/fonts/brand-font.woff2" as="font" type="font/woff2" crossorigin>

<!-- 首屏产品数据 -->
<link rel="preload" href="/api/featured-products.json" as="fetch" crossorigin>

这些优化使首屏LCP从原来的2.8秒降低到1.9秒，提升了约32%的首屏加载性能。

prefetch：推测性预获取

prefetch 用于获取用户可能在不久后需要的资源，浏览器会在空闲时间低优先级地加载这些资源。

基本用法
<!-- 预获取下一页可能需要的资源 -->
<link rel="prefetch" href="/js/product-detail.js">
<link rel="prefetch" href="/css/product-detail.css">

<!-- 预获取搜索结果页 -->
<link rel="prefetch" href="/api/popular-search-results.json" as="fetch" crossorigin>
动态prefetch实现

基于用户行为动态添加prefetch：

// 监测用户滚动方向和深度，预判后续可能浏览的内容
let scrollDepthThreshold = 0.3; // 滚动到30%深度时预获取下一页
let isScrollingDown = false;
let lastScrollPosition = 0;

window.addEventListener('scroll', () => {
   
  const currentScrollPosition = window.scrollY;
  isScrollingDown = currentScrollPosition > lastScrollPosition;
  lastScrollPosition = currentScrollPosition;
  
  const totalHeight = document.body.scrollHeight - window.innerHeight;
  const scrollPercentage = currentScrollPosition / totalHeight;
  
  if (isScrollingDown && scrollPercentage > scrollDepthThreshold && !window.nextPagePrefetched) {
   
    // 预获取下一页资源
    const nextPageNumber = parseInt(document.querySelector('#current-page').textContent) + 1;
    const nextPageUrl = `/products?page=${
     nextPageNumber}`;
    
    const prefetchLink = document.createElement('link');
    prefetchLink.rel = 'prefetch';
    prefetchLink.href = nextPageUrl;
    document.head.appendChild(prefetchLink);
    
    window.nextPagePrefetched = true;
    console.log(`预获取下一页: ${
     nextPageUrl}`);
  }
});
预获取下一页数据

对于SPA应用，可以预获取下一页API数据：

// 在产品列表页预获取热门产品详情数据
document.querySelectorAll('.product-card').forEach(card => {
   
  card.addEventListener('mouseenter', () => {
   
    const productId = card.dataset.productId;
    const dataUrl = `/api/products/${
     productId}`;
    
    // 检查是否已经预获取
    if (!window.prefetchedUrls) {
   
      window.prefetchedUrls = new Set();
    }
    
    if (!window.prefetchedUrls.has(dataUrl)) {
   
      const link = document.createElement('link');
      link.rel = 'prefetch';
      link.href = dataUrl;
      link.as = 'fetch';
      link.crossOrigin = 'anonymous';
      document.head.appendChild(link);
      
      window.prefetchedUrls.add(dataUrl);
      console.log(`预获取产品数据: ${
     dataUrl}`);
    }
  });
});
路由级预获取框架集成

现代前端框架通常提供内置的路由预获取功能：

React Router示例：

import { Link, Prefetch } from 'react-router-dom';

function ProductList() {
  return (
    <div className="product-grid">
      {products.map(product => (
        <div key={product.id} className="product-card">
          <Link to={`/product/${product.id}`}>
            <Prefetch path={`/product/${product.id}`}>
              <ProductCard product={product} />
            </Prefetch>
          </Link>
        </div>
      ))}
    </div>
  );
}

Vue Router示例：

<template>
  <div class="product-grid">
    <div v-for="product in products" :key="product.id" class="product-card">
      <router-link :to="`/product/${product.id}`" @mouseenter="prefetchProduct(product.id)">
        <ProductCard :product="product" />
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    prefetchProduct(id) {
      this.$router.prefetch(`/product/${id}`);
    }
  }
}
</script>

preconnect：提前建立连接

preconnect 提示浏览器提前建立与指定域名的连接，包括DNS解析、TCP握手和TLS协商（如果适用）。

基本用法
<!-- 预连接到CDN -->
<link rel="preconnect" href="https://cdn.example.com">

<!-- 预连接到API服务器 -->
<link rel="preconnect" href="https://api.example.com">

<!-- 预连接到第三方服务（如字体、分析工具） -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
常见应用场景
  1. 字体服务优化：
<!-- Google Fonts优化加载 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
  1. CDN资源加载优化：
<!-- 预连接到多个CDN节点 -->
<link rel="preconnect" href="https://cdn-a.example.com">
<link rel="preconnect" href="https://cdn-b.example.com">

<!-- 随后加载资源时会复用已建立的连接 -->
<script src="https://cdn-a.example.com/main.js" defer></script>
<link href="https://cdn-b.example.com/styles.css" rel="stylesheet">
  1. 第三方API优化：
<!-- 预连接到支付处理服务 -->
<link rel="preconnect" href="https://api.payment-processor.com">

<!-- 预连接到评论系统 -->
<link rel="preconnect" href="https://comments.example-service.com">
注意事项
  • 每个preconnect会占用系统资源，不应过度使用（建议不超过3-4个）
  • 未在10秒内使用的preconnect连接会被关闭，浪费资源
  • 应优先考虑将资源整合到更少的域名下

dns-prefetch：DNS预解析

dns-prefetch 比 preconnect 更轻量，仅执行DNS解析而不建立连接。适用于后续可能访问但不确定的资源。

基本用法
<!-- DNS预解析 -->
<link rel="dns-prefetch" href="https://possible-resource.example.com">
组合使用预连接和DNS预解析

对于同一个域，可以同时使用两种技术来兼容不同浏览器：

<!-- 现代浏览器将使用preconnect，旧浏览器回退到dns-prefetch -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://fonts.googleapis.com">

prerender：完整页面预渲染

prerender 是最重量级的资源提示，它会预先下载并渲染整个页面，包括解析HTML、执行CSS和JavaScript。

基本用法
<!-- 预渲染下一页 -->
<link rel="prerender" href="https://example.com/very-likely-next-page">

由于资源消耗大，应谨慎使用，仅用于极可能被访问的页面。

智能预渲染实现

基于用户行为预测可能访问的页面：

// 根据用户历史行为和当前页内容预测下一页面
function predictNextPage() {
   
  // 可以基于机器学习模型或简单规则
  const currentCategory = document.querySelector('meta[name="category"]').content;
  const userHistory = getUserHistory();
  
  // 简化版本：用户在当前类别停留超过30秒，预渲染该类别最热门产品
  if (pageViewDuration > 30 && currentCategory) {
   
    const predictedNextPage = `/products/${
     currentCategory}/popular`;
    addPrerenderHint(predictedNextPage);
  }
}

function addPrerenderHint(url) {
   
  // 限制同时预渲染的页面数量
  const existingPrerender = document.querySelector('link[rel="prerender"]');
  if (existingPrerender) {
   
    existingPrerender.remove();
  }
  
  const link = document.createElement('link');
  link.rel = 'prerender';
  link.href = url;
  document.head.appendChild(link);
  
  console.log(`预渲染页面: ${
     url}`);
}

// 在页面加载后开始预测
let pageLoadTime = Date.now();
window.addEventListener('load', () => {
   
  setInterval(() => {
   
    const pageViewDuration = (Date.now() - pageLoadTime) / 1000;
    predictNextPage();
  }, 5000); // 每5秒评估一次
});

实际优化案例：电子商务网站预加载策略

某电子商务网站通过全面的资源提示策略优化了用户体验：

<head>
  <!-- 1. 关键域预连接 -->
  <link rel="preconnect" href="https://api.store.com">
  <link rel="preconnect" href="https://cdn.store.com">
  <link rel="preconnect" href="https://images.store.com">
  
  <!-- 2. 次要域DNS预解析 -->
  <link rel="dns-prefetch" href="https://analytics.store.com">
  <link rel="dns-prefetch" href="https://reviews.store.com">
  
  <!-- 3. 关键资源预加载 -->
  <link rel="preload" href="https://cdn.store.com/css/critical.css" as="style">
  <link rel="preload" href="https://cdn.store.com/js/core.js" as="script">
  <link rel="preload" href="https://images.store.com/logo.svg" as="image">
  <link rel="preload" href="https://cdn.store.com/fonts/brand.woff2" as="font" type="font/woff2" crossorigin>
  
  <!-- 4. 常用资源预加载 -->
  <link rel="prefetch" href="https://cdn.store.com/js/product-page.js">
  <link rel="prefetch"
最低0.47元/天 解锁文章
JavaScript性能优化：网络请求优化
weixin_49707375的博客
03-14 767
JavaScript性能优化是提升Web应用质量的核心要素，直接影响用户体验与业务成果。研究表明，页面加载延迟1秒可能导致转化率下降7%。高效的JavaScript执行能减少主线程阻塞，避免动画卡顿或操作延迟，尤其在移动端低性能设备上更为关键。优化内存管理与减少冗余计算可降低浏览器资源消耗，防止因内存泄漏导致的崩溃，提升应用稳定性。在竞争激烈的互联网环境中，性能优势已成为产品差异化的关键因素，直接影响用户留存与商业价值。因此，性能优化应作为开发全周期的核心实践，而非事后补救措施。
前端性能优化实战：加载速度与用户体验
shejizuopin的博客
03-29 568
前端性能优化是一个持续迭代和改进的过程。通过压缩与合并资源、使用CDN加速、懒加载与预加载、减少DOM操作、使用响应式设计以及优化JavaScript执行等技巧，可以显著提升网站的加载速度和用户体验。在实际开发中，建议结合具体项目需求和环境配置进行相应的调整和优化。
系统性能监控和优化
q2235141的博客
11-03 422
每项指标测量用户体验的不同方面：LCP 测量感知加载速度，并在页面的主要内容基本加载完成时，在页面加载时间轴中标记出相应的点；为了对页面或网站的整体性能进行分类，我们取该页面或网站的所有页面浏览量的第 75 个百分位数。因此，如果 LCP 的第 75 个百分位数为 2 秒，就会被归类为"良好"，而如果 LCP 的第 75 个百分位数为 5 秒，则会被归类为"欠佳"。sentry以每个页面（路由）加载为单位，然后搜集这个页面加载过程中的接口请求，资源下载等等数据，之后统一跟随这个页面一起上报。
JavaScript性能优化实战（1）：性能优化基础与性能分析工具
LACERBA
04-21 1006
/ 开始标记// 执行数据获取操作// 处理数据...// 结束标记// 创建测量// 获取测量结果console.log(`数据获取耗时:${// 开始标记 performance . mark('dataFetchStart');// 执行数据获取操作 fetchData() . then(data => {// 处理数据... // 结束标记 performance . mark('dataFetchEnd');
JavaScript 性能优化实战：从理论到落地的全面指南
最新发布
qq_51902790的博客
04-26 1110
JavaScript 作为前端开发的核心语言，其性能直接影响着用户体验。无论是大型 Web 应用、复杂的单页应用，还是轻量级的网页特效，性能优化都是开发者必须面对的重要课题。本文将通过大量实战案例，深入探讨 JavaScript 性能优化的各个方面，帮助开发者写出高效、流畅的代码。
JavaScript性能优化实战：从理论到实践，提升你的代码效率
码上飞扬的博客
03-18 1482
JavaScript性能优化是一个持续的过程，需要开发者不断学习和实践。通过理解性能瓶颈、应用优化策略、使用性能分析工具，我们可以显著提升Web应用的性能，为用户提供更好的体验。
前端必备技能：JavaScript性能优化实战指南
qq_30110433的博客
04-26 898
DOM（文档对象模型）是网页的骨架，JavaScript通过它修改页面内容。但每次改动DOM，浏览器都要重新计算布局（重排）或重绘，耗时严重。像输入、滚动、窗口调整等事件，可能一秒触发几十次。如果每次都执行复杂操作，页面会卡得像老式电脑。有些任务（如大数据排序）很耗时，会让页面卡住。Web Worker像一个后台助手，在单独线程运行，不影响页面交互。JavaScript性能优化让你的网页更快、用户更开心。通过减少DOM操作、防抖节流、异步加载和Web Worker，你可以轻松提升项目质量。
前端网络请求与资源加载优化实战指南
lina_mua的博客
04-07 660
网络请求和资源加载优化是一个系统工程，需要从多个维度进行考量。通过本文介绍的技术手段，开发者可以显著提升页面加载性能，改善用户体验。
#JavaScript性能优化实战#
BLOG域名:programb.blog.csdn.net
04-20 894
JavaScript 性能优化是一个持续的过程，需要从代码编写、网络请求、DOM 操作等多个方面入手。通过以上实战技巧，你可以显著提升应用的性能，为用户提供更流畅的体验。同时，结合性能分析工具，不断优化代码，确保应用的高效运行。
Java 大型网站性能优化实战从前端网络 CDN 到后端大促的全链路性能优化
03-19
本实战指南将探讨从前端网络到后端大促的全链路性能优化策略，旨在提升网站的整体效率。 前端网络性能优化主要关注减少页面加载时间。CDN(Content Delivery Network)是一个关键的工具，它通过在全球部署多个节点，...
【NestJS】获取客户端IP完美解决方法
热门推荐
LACERBA
09-06 2万+
根据以往传统后台经验，获取api请求的客户端ip应该很简单才对，直接 Request.IP 不就可以了么，然后根据这个思路找一下 nestjs里面的request对象，还真有 .ip(get) 的方法，但高兴得有点早，使用起来发现获取到的 ip 地址不是null 就是 127.0.0.1 后面还是找下现成的包，发现可以用request-ip 这个包来实现真实ip的获取 安装request-ip npm install --save request-ip npm install --save-de.
VSCode断点调试NestJS
LACERBA
06-02 1万+
配置 在vscode里，Ctrl+Shift+P，打开命令面板，输入Toggle Auto Attach 调试
【NestJS】跨域、全局异常处理、限速
LACERBA
08-17 9563
跨域 const app = await NestFactory.create(AppModule) const origins = JSON.parse(process.env.LSC_CORS_ORIGIN) //["http://localhost:8080","http://localhost:8081"] app.enableCors({ "origin": origins, // "origin": "*", "credentials": tr
浅谈js下的发布订阅模式(观察者模式)
LACERBA
05-20 8621
场景 我们在做地图引擎的时候，会经常扩展一些插件，有些插件会动态根据地图渲染时机等做一些计算处理重新渲染等，这时候地图渲染时机如何通知到插件，就可以用到这个发布订阅的模式来进行。 定义 发布订阅模式，也称为观察者模式，多个观察者可以实时监听某一个具体对象，常见的就是js里面的事件监听。 实现 先看下引擎代码简单骨架： class MapEngine { constructor(){ //... } /**渲染函数，处理渲染等相关事项 */ ..
【NestJS】内存Caching基本用法
LACERBA
08-17 8237
基本需求定义 缓存有两种基本用法，根据需求可大致分为两类： 需求一：缓存一些指定key，在使用的时候获取key里面的内容，key可以根据需求自由定义，按使用情况获取或者删除 需求二：直接缓存接口查询响应内容，如查询某列表或者基本详情信息接口缓存，如 findAll()，getUserInfo()，针对这种nestjs直接有封装 安装 npm install cache-manager npm install -D @types/cache-manager 导入模块 import
canvas 文本旋转 90°
LACERBA
05-18 5197
接到个需求，文字在canvas里面绘制90度，再贴到地图里面做纹理 最终效果 先看调试效果 罗字是正常文字，“测”、“路”是旋转后的理想文字效果 <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="300" height="200" style="border:1px solid #d3d3d3;"> Your browser does not support the HT.
【NestJS】swagger快速接入
LACERBA
06-11 4074
1.安装swagger $ npm install --save @nestjs/swagger swagger-ui-express //如果使用fastify，则必须安装fastify-swagger而不是swagger-ui-express： $ npm install --save @nestjs/swagger fastify-swagger
本地调试https配置方法（vite配置版本）
LACERBA
04-06 2444
有时候需要用到一些音视频接口等需要https才能拿到权限，为方便开发过程中调试，本次用到的插件是 mkcert的vite版本： vite-plugin-mkcert。
Dify Web 前端独立部署指南（与后端分离，独立部署）
LACERBA
03-11 2445
Dify Web前端支持多种部署方式，从简单的独立服务器部署到复杂的Docker容器化部署。选择合适的部署方式应基于您的基础设施和团队经验。关键是确保正确配置API接口路径，使前端能够与后端服务正常通信。无论选择哪种部署方式，都建议在生产环境中使用Nginx作为前端代理，并启用HTTPS以确保安全。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员查理

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值