Chrome自定义光标卡顿问题修复及代码优化技术咨询

Hey there! Let’s break down how to fix that occasional lag in Chrome for your custom cursor, plus clean up your code for better performance and maintainability.

1. Fixing the Chrome Cursor Lag #

The lag you’re seeing in Chrome is almost certainly due to excessive reflows/repaints from firing mousemove events nonstop and directly manipulating the cursor’s style attribute with string concatenation. Here’s how to fix it:

Key Fixes: #

• Use requestAnimationFrame for smooth updates: This lets the browser handle cursor updates in sync with its repaint cycle, avoiding jank.
• Replace top/left with transform: Transforms are handled on the GPU (no reflows), which is way more performant than adjusting positional properties.
• Hint the browser with will-change: Tells Chrome to optimize rendering for the cursor element ahead of time.

Updated JavaScript:

const cursor = document.querySelector('.cursor');
let mouseX = 0;
let mouseY = 0;

// Capture mouse position without forcing immediate updates
document.addEventListener('mousemove', e => {
  mouseX = e.pageX;
  mouseY = e.pageY;
});

// Update cursor position in sync with browser repaints
function updateCursor() {
  cursor.style.transform = `translate(${mouseX - 10}px, ${mouseY - 10}px)`;
  requestAnimationFrame(updateCursor);
}

// Start the smooth update loop
requestAnimationFrame(updateCursor);

// Handle click animation with animationend (more reliable than setTimeout)
document.addEventListener('click', () => {
  cursor.classList.add('expand');
  const cleanupAnimation = () => {
    cursor.classList.remove('expand');
    cursor.removeEventListener('animationend', cleanupAnimation);
  };
  cursor.addEventListener('animationend', cleanupAnimation);
});

Updated CSS for .cursor:

.cursor {
  width: 20px;
  height: 20px;
  border: 1px solid #FAB313;
  border-radius: 50%;
  position: absolute;
  transition-duration: 200ms;
  transition-timing-function: ease-out;
  animation: cursorAnim .5s infinite alternate;
  pointer-events: none;
  will-change: transform; /* Critical for Chrome rendering optimization */
  /* Remove default top/left values since we're using transform */
}

2. Code Optimization Tips #

Let’s make your code cleaner, more maintainable, and even more performant:

• Use CSS Variables for Reusable Values: No more hunting for color codes if you want to tweak them later.

  :root {
    --cursor-primary: #FAB313;
    --cursor-expand-border: #1E2648;
    --bg-dark: rgb(27, 27, 27);
  }
  
  body {
    margin: 0;
    height: 100vh;
    /* cursor: none; */
    background: var(--bg-dark);
  }
  
  .cursor {
    border-color: var(--cursor-primary);
  }
  
  .cursor::after {
    border-color: var(--cursor-primary);
  }
  
  .expand {
    border-color: var(--cursor-expand-border);
  }
  

• Improve Accessibility: Add aria-hidden="true" to the cursor element so screen readers ignore it.

  <div class="cursor" aria-hidden="true"></div>
  

• Simplify Animation Cleanup: Using animationend instead of setTimeout ensures the cleanup happens exactly when the animation finishes, avoiding timing inconsistencies across browsers.

• Avoid Unnecessary String Concatenation: Template literals (${}) are cleaner than + for style strings, but we’ve already replaced that with transform for better performance anyway.

Why This Works #

Chrome handles high-frequency events like mousemove differently than Firefox—by batching updates with requestAnimationFrame and using GPU-accelerated transforms, we eliminate the jank caused by repeated reflows. The will-change property gives Chrome a heads-up to optimize rendering for the cursor, which helps with consistency across different devices.

内容的提问来源于stack exchange，提问作者Mathéo Zeller