0 views collected around this technical thread.
Tree shaking in React.js leverages ES6 static imports and named exports to eliminate dead code, reducing bundle size and improving load performance, while best practices such as modular design, avoiding side effects and dynamic imports ensure optimal dead‑code elimination across components and libraries.
For small front‑end projects, the Vite + Svelte stack replaces heavyweight Vue with a lightweight solution that delivers near‑instant hot‑module replacement, 38 % smaller bundles, roughly 46 % faster first‑contentful‑paint and 14 % quicker startup, while requiring only a few days to become productive.
The article explains why browsers limit concurrent connections per domain for performance and security reasons, compares HTTP/1.1 and HTTP/2 handling of these limits, and outlines practical frontend optimization strategies such as domain sharding, CDN usage, resource bundling, and lazy loading.
The MTSC 2024 Shanghai conference gathered top testing experts to discuss AI‑driven testing, full‑chain 3D rendering ecosystems, UI automation for graphics software, and front‑end performance assurance, offering a comprehensive look at emerging quality‑assurance practices and future collaborations.
This article explores React 19's new React Compiler, explains how it automatically memoizes components to cut redundant renders, and walks through three practical examples that compare its behavior with traditional React.memo, useMemo, and useCallback techniques.
This article explains how Core Web Vitals—LCP, INP, and CLS—are measured from real‑user field data, influence Google search rankings, differ from Lighthouse lab scores, and how tools like Google Search Console, PageSpeed Insights, and Vercel Speed Insights help developers monitor and improve these metrics.
This article outlines the challenges of front‑end performance troubleshooting for a 2D design tool, proposes systematic approaches for identifying issues, describes monitoring metrics such as load time and frame rate, and presents real‑world case studies demonstrating effective optimization and baseline management.
This article details a comprehensive set of frontend performance optimization techniques—including startup speed, resource loading, CPU/GPU rendering, dynamic FPS, batch merging, Spine animation, and memory profiling—applied to the 2024 Douyin Laughing China Year interactive projects to improve FMP, reduce draw calls, and prevent overheating and crashes on mobile devices.
The Growth Frontend Team’s self‑developed afx transparent‑video solution splits RGB and alpha channels, caches videos via IndexedDB, and leverages OpenGL to deliver high‑fidelity, low‑cost animations in WebView with up to 60 FPS, cutting development time by 75 %.
The case study details how the Cloud Editing team tackled severe waveform loading delays, zoom lag, and inefficient IndexedDB storage by refactoring the processing pipeline, standardizing multi‑transaction storage, adding monitoring and cleanup tools, and rigorously testing releases, ultimately cutting processing times by over half and dramatically improving user experience.
This article details the design evolution and performance optimization of Vivo's Agile BI cross‑tab component—from a jQuery prototype to a React‑based solution—highlighting worker‑offloaded preprocessing, virtual scrolling, and micro‑frontend integration that enable sub‑second rendering of massive data sets and match or surpass competing BI tools.
This article explains how to use the four resource‑hint APIs—prefetch, preload, preconnect, and DNS‑prefetch—along with the crossorigin attribute and a custom npm tool (resource‑hint‑generator) to dramatically reduce page load times, improve web‑vitals, and increase cache‑hit rates, providing code examples, tables, and validation steps.
This article presents a detailed case study on how Qunar's front‑end team reduced the Time to Interactive of the hotel‑detail page by introducing pre‑fetching, cache‑key redesign, view‑model batching and longer cache lifetimes, achieving up to a 70% TTI improvement on Android devices.
This article explains how to create a Vite plugin that persists the module graph cache across dev‑server restarts, uses ETag comparison to serve 304 responses, and integrates custom middleware to dramatically improve first‑page load times in development mode.
This technical guide explores how to optimize frontend performance when rendering large datasets by implementing virtual lists using the native IntersectionObserver API, detailing configuration steps, troubleshooting common rendering issues, and comparing its asynchronous advantages against traditional scroll event listeners.
This article explains how to leverage Web Workers and OffscreenCanvas to offload heavy Excel file generation and bulk image compression from the main thread, improving UI responsiveness and reducing rendering stalls in typical backend‑admin web applications.
This article explores typical big-data use cases such as real-time bullet comments and massive server-side data lists, analyzes why rendering thousands of DOM elements can cause page lag, and presents front-end solutions—including dynamic element creation, document fragments, and virtual scrolling libraries—to improve performance.
This article explains the bundle‑less approach—including splitting bundles, no‑bundle development, and modular dependency distribution—presents performance tests that suggest an optimal chunk count of 10‑25, evaluates Vite’s advantages and drawbacks, and outlines a self‑built import‑map‑based solution with code examples.
This comprehensive frontend development digest explores the evolution of JavaScript frameworks, introduces WebAuth for secure authentication, details browser rendering principles and performance optimization, examines ES2022 features and Module Federation, and provides practical insights into web image handling and live streaming protocols.
This article explains how the Autohome front‑end team applied SSR, introduced a flexible API‑layer caching solution and a ServerTiming‑based request‑duration visualization to improve performance, maintainability, and user experience in both Node and browser environments.