How does whistle perform performance monitoring and analysis, and what are the optimization recommendations?

Answer

Whistle provides rich performance monitoring and analysis features that help developers optimize network request performance and improve user experience.

Performance Monitoring Metrics

1. Request Time Analysis

Whistle records detailed timing information for each request:

• DNS Resolution Time: Time to resolve domain name to IP address
• TCP Connection Time: Time to establish TCP connection
• SSL/TLS Handshake Time: Time to establish HTTPS connection
• Request Send Time: Time to send request data
• Waiting Time (TTFB): Wait time before server response
• Content Download Time: Time to receive response data
• Total Request Time: Total time from start to end

2. Request Size Statistics

• Request Size: Size of sent request data
• Response Size: Size of received response data
• Compressed Size: Size after gzip or other compression
• Compression Ratio: Ratio before and after compression

3. Status Code Statistics

• 2xx Success: Successful requests
• 3xx Redirect: Redirect requests
• 4xx Client Error: Client errors
• 5xx Server Error: Server errors

Performance Analysis Features

1. Request Waterfall

Whistle provides visual request waterfall to:

• View parallel and serial request relationships
• Identify performance bottlenecks
• Analyze resource loading order
• Discover blocking requests

2. Performance Report

Generate detailed performance reports including:

• Total number of requests
• Total data size
• Average request time
• List of slowest requests
• List of largest resources
• Performance score

3. Comparative Analysis

Compare performance data across different time periods:

• Historical performance comparison
• Different environment performance comparison
• Before and after optimization comparison

Performance Optimization Recommendations

1. Reduce Number of Requests

Problem: Too many requests cause long loading times

Solutions:

• Merge multiple small files
• Use sprite images
• Use inline resources
• Use HTTP/2 multiplexing

Whistle Configuration Example:

shell
# Merge multiple CSS files
style1.css resBody://{combined-styles.css}
style2.css resBody://{combined-styles.css}

2. Enable Compression

Problem: Resource files are too large

Solutions:

• Enable gzip compression
• Use Brotli compression
• Optimize image formats

Whistle Configuration Example:

shell
www.example.com resHeaders://{compression-headers.json}

compression-headers.json:

json
{
  "Content-Encoding": "gzip"
}

3. Optimize Caching Strategy

Problem: Repeated requests for same resources

Solutions:

• Set appropriate cache headers
• Use ETag
• Use Last-Modified
• Implement local storage

Whistle Configuration Example:

shell
www.example.com/static/* resHeaders://{cache-headers.json}

cache-headers.json:

json
{
  "Cache-Control": "max-age=31536000",
  "Expires": "Wed, 21 Oct 2025 07:28:00 GMT"
}

4. Reduce DNS Queries

Problem: Multiple domains cause multiple DNS queries

Solutions:

• Reduce number of domains
• Use DNS prefetch
• Use CDN

Whistle Configuration Example:

shell
# DNS prefetch
www.example.com reqHeaders://{dns-prefetch.json}

5. Optimize Image Loading

Problem: Image files are too large or loading order is unreasonable

Solutions:

• Use WebP format
• Implement lazy loading
• Use responsive images
• Optimize image quality

Whistle Configuration Example:

shell
*.jpg resBody://{optimized-image.jpg}
*.png resBody://{optimized-image.png}

Performance Monitoring Practices

1. Establish Performance Baseline

• Record initial performance data
• Set performance goals
• Regularly conduct performance tests

2. Continuous Monitoring

• Set performance alerts
• Regularly generate performance reports
• Track performance trends

3. Problem Identification

Use whistle to identify performance issues:

1. View Slow Requests

   • Sort by request time
   • Analyze causes of slow requests
   • Optimize slow requests

2. Analyze Large Files

   • Sort by response size
   • Optimize large files
   • Consider chunked loading

3. Check Error Requests

   • View 4xx and 5xx errors
   • Fix error requests
   • Optimize error handling

Advanced Performance Analysis

1. Using resScript for Analysis

javascript
module.exports = function(req, res) {
  const startTime = Date.now();
  
  const originalEnd = res.end;
  res.end = function(chunk, encoding) {
    const endTime = Date.now();
    const duration = endTime - startTime;
    
    console.log(`Request ${req.url} took ${duration}ms`);
    console.log(`Response size: ${chunk ? chunk.length : 0} bytes`);
    
    originalEnd.call(res, chunk, encoding);
  };
};

2. Performance Data Export

Whistle supports exporting performance data:

• Export as CSV format
• Export as JSON format
• Export as HAR format

3. Integrate Performance Monitoring Tools

• Integrate Google Lighthouse
• Integrate WebPageTest
• Integrate custom monitoring systems

Best Practices

1. Regular Performance Testing

   • Establish performance testing process
   • Use automated testing tools
   • Record test results

2. Performance Goal Setting

   • Set reasonable performance goals
   • Optimize in stages
   • Continuous improvement

3. Team Collaboration

   • Share performance data
   • Establish performance standards
   • Regular performance reviews

4. Documentation

   • Record optimization process
   • Summarize optimization experience
   • Build knowledge base