浏览器资源加载策略

发布时间: 2025-03-23 15:42

↑

# 浏览器资源加载策略

## 概述

浏览器的资源加载策略直接影响着Web应用的性能和用户体验。本文将详细介绍现代浏览器的资源加载机制和优化策略。

## 加载机制

### 1. 预加载扫描

#### 预加载器
- HTML预扫描
- 资源发现
- 优先级分配

#### 实现原理
```javascript
// 预加载扫描示例
class PreloadScanner {
  constructor() {
    this.resources = new Map();
    this.priorities = new Map();
  }

scan(html) {
    const parser = new DOMParser();
    const doc = parser.parseFromString(html, 'text/html');
    
    // 扫描<link>标签
    doc.querySelectorAll('link[rel="preload"]').forEach(link => {
      this.addResource(link.href, 'preload', link.as);
    });
    
    // 扫描<script>标签
    doc.querySelectorAll('script[src]').forEach(script => {
      this.addResource(script.src, 'script', null);
    });
    
    // 扫描<img>标签
    doc.querySelectorAll('img[src]').forEach(img => {
      this.addResource(img.src, 'image', null);
    });
  }

addResource(url, type, as) {
    this.resources.set(url, { type, as });
    this.priorities.set(url, this.calculatePriority(type, as));
  }
}
```

### 2. 优先级策略

#### 资源优先级
- 关键CSS
- 同步脚本
- 图片资源
- 异步资源

#### 优先级实现
```javascript
// 资源优先级管理
class PriorityManager {
  constructor() {
    this.priorities = {
      HIGHEST: 4,
      HIGH: 3,
      MEDIUM: 2,
      LOW: 1,
      LOWEST: 0
    };
  }

calculatePriority(resource) {
    const { type, location, async, defer } = resource;
    
    switch (type) {
      case 'css':
        return location === 'head' ? this.priorities.HIGHEST : this.priorities.HIGH;
      
      case 'script':
        if (async || defer) return this.priorities.LOW;
        return location === 'head' ? this.priorities.HIGH : this.priorities.MEDIUM;
      
      case 'image':
        return this.isInViewport(resource) ? this.priorities.MEDIUM : this.priorities.LOW;
      
      default:
        return this.priorities.LOW;
    }
  }

isInViewport(resource) {
    // 检查资源是否在视口内
    const rect = resource.element.getBoundingClientRect();
    return rect.top < window.innerHeight;
  }
}
```

## 优化策略

### 1. 资源提示

#### 预加载
```html

<link rel="preload" href="critical.css" as="style">
<link rel="preload" href="hero-image.jpg" as="image">

<link rel="preload" href="font.woff2" as="font" crossorigin>
```

#### DNS预解析
```html

<link rel="dns-prefetch" href="//api.example.com">

<link rel="preconnect" href="https://api.example.com">
```

### 2. 延迟加载

#### 图片延迟加载
```javascript
// 图片延迟加载
class LazyImageLoader {
  constructor(options = {}) {
    this.options = {
      root: null,
      rootMargin: '50px',
      threshold: 0.1,
      ...options
    };
    
    this.observer = new IntersectionObserver(
      this.handleIntersection.bind(this),
      this.options
    );
  }

observe(images) {
    images.forEach(img => {
      if (img.dataset.src) {
        this.observer.observe(img);
      }
    });
  }

handleIntersection(entries) {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        this.loadImage(entry.target);
        this.observer.unobserve(entry.target);
      }
    });
  }

loadImage(img) {
    const src = img.dataset.src;
    if (!src) return;
    
    img.src = src;
    img.removeAttribute('data-src');
  }
}
```

#### 组件延迟加载
```javascript
// React组件动态导入
const LazyComponent = React.lazy(() => import('./Component'));

function App() {
  return (
    <Suspense fallback={<Loading />}>
      <LazyComponent />
    </Suspense>
  );
}
```

### 3. 并行加载

#### 异步加载
```javascript
// 异步脚本加载
function loadScript(src) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = src;
    script.async = true;
    
    script.onload = () => resolve(script);
    script.onerror = () => reject(new Error(`Script load error: ${src}`));
    
    document.head.appendChild(script);
  });
}

// 并行加载多个脚本
Promise.all([
  loadScript('analytics.js'),
  loadScript('tracking.js'),
  loadScript('ads.js')
]).then(() => {
  console.log('All scripts loaded');
});
```

#### 资源分组
```javascript
// 资源加载管理器
class ResourceLoader {
  constructor() {
    this.groups = new Map();
  }

addGroup(name, resources, options = {}) {
    this.groups.set(name, {
      resources,
      options,
      status: 'pending'
    });
  }

async loadGroup(name) {
    const group = this.groups.get(name);
    if (!group) return;
    
    const promises = group.resources.map(resource => {
      switch (resource.type) {
        case 'script':
          return this.loadScript(resource.url);
        case 'style':
          return this.loadStyle(resource.url);
        case 'image':
          return this.loadImage(resource.url);
        default:
          return Promise.reject(new Error(`Unknown resource type: ${resource.type}`));
      }
    });
    
    try {
      await Promise.all(promises);
      group.status = 'loaded';
    } catch (error) {
      group.status = 'error';
      throw error;
    }
  }
}
```

## 性能监控

### 1. 加载性能

#### 性能指标
- TTFB (Time to First Byte)
- FCP (First Contentful Paint)
- LCP (Largest Contentful Paint)
- TTI (Time to Interactive)

#### 监控实现
```javascript
// 性能监控
class PerformanceMonitor {
  constructor() {
    this.metrics = {};
    this.initObservers();
  }

initObservers() {
    // FCP监控
    new PerformanceObserver((entryList) => {
      const entries = entryList.getEntries();
      this.metrics.fcp = entries[0].startTime;
    }).observe({ entryTypes: ['paint'] });

// LCP监控
    new PerformanceObserver((entryList) => {
      const entries = entryList.getEntries();
      this.metrics.lcp = entries[entries.length - 1].startTime;
    }).observe({ entryTypes: ['largest-contentful-paint'] });

// 资源加载监控
    new PerformanceObserver((entryList) => {
      const entries = entryList.getEntries();
      entries.forEach(entry => {
        this.logResourceTiming(entry);
      });
    }).observe({ entryTypes: ['resource'] });
  }

logResourceTiming(entry) {
    const timing = {
      name: entry.name,
      type: entry.initiatorType,
      startTime: entry.startTime,
      duration: entry.duration,
      transferSize: entry.transferSize
    };
    
    console.log('Resource Timing:', timing);
  }
}
```

### 2. 错误处理

#### 加载失败处理
```javascript
// 资源加载错误处理
class ResourceErrorHandler {
  constructor() {
    this.maxRetries = 3;
    this.retryDelay = 1000;
    this.failedResources = new Map();
  }

async handleError(resource) {
    const retryCount = this.failedResources.get(resource.url) || 0;
    
    if (retryCount < this.maxRetries) {
      this.failedResources.set(resource.url, retryCount + 1);
      
      await this.wait(this.retryDelay * Math.pow(2, retryCount));
      return this.retryLoad(resource);
    }
    
    this.reportError(resource);
    return this.loadFallback(resource);
  }

async retryLoad(resource) {
    try {
      // 重试加载资源
      const result = await this.loadResource(resource);
      this.failedResources.delete(resource.url);
      return result;
    } catch (error) {
      return this.handleError(resource);
    }
  }

reportError(resource) {
    // 上报错误信息
    console.error('Resource load failed:', {
      url: resource.url,
      type: resource.type,
      retries: this.failedResources.get(resource.url)
    });
  }
}
```

## 最佳实践

### 1. 资源优化

- 使用适当的资源提示
- 实施延迟加载策略
- 优化资源优先级
- 合理使用并行加载
- 实现有效的错误处理

### 2. 性能优化

- 监控关键性能指标
- 优化资源加载顺序
- 实施资源分组策略
- 使用高效的缓存策略
- 实现优雅降级机制

元素码农