- Published on
本文深度剖析了 CSS Sprites（CSS 雪碧图）这一经典的 Web 性能优化技术。内容系统性地阐述了其通过将多张图片合并为单一文件以减少 HTTP 请求的核心原理，并详细拆解了利用 background-image 和 background-position 的实现方法。笔记还进一步探讨了该技术的性能权衡、维护成本，及其在 HTTP/2 和 SVG 盛行的现代 Web 开发中的地位与替代方案。
Frontendoptimization
All Posts
- Frontend (50)
- JavaScript (29)
- Performance (25)
- React (21)
- CSS (17)
- Network (12)
- Security (12)
- Browser (11)
- StateManagement (7)
- ReactNative (7)
- TailwindCSS (6)
- Fiber (6)
- ReactInternals (6)
- MobileDevelopment (6)
- ReactHooks (5)
- Reconciliation (5)
- Accessibility (4)
- Layout (4)
- FrontendBuildTools (4)
- FrontendArchitecture (4)
- Vite (4)
- HTTP (3)
- Flexbox (3)
- PseudoClass (3)
- Forms (3)
- EventLoop (3)
- TCP (3)
- ConcurrentRendering (3)
- UtilityFirst (2)
- Asynchronous (2)
- Promise (2)
- ECMAScript (2)
- Object (2)
- useActionState (2)
- Animation (2)
- IP (2)
- TransportLayer (2)
- useEffect (2)
- ReactLazy (2)
- Suspense (2)
- JavaScriptModules (2)
- GarbageCollection (1)
- MemoryManagement (1)
- NodeJS (1)
- V8 (1)
- CSSSprites (1)
FrontendOptimization (1)
- display (1)
- opacity (1)
- visibility (1)
- flex-basis (1)
- flex-grow (1)
- flex-shrink (1)
- focus (1)
- focus-visible (1)
- focus-within (1)
- CSSArchitecture (1)
- StackingContext (1)
- z-index (1)
- group (1)
- has (1)
- peer (1)
- DarkMode (1)
- border (1)
- box-shadow (1)
- outline (1)
- ring (1)
- AbortController (1)
- fetch (1)
- WebAPI (1)
- Function (1)
- LexicalEnvironment (1)
- Debounce (1)
- EventHandling (1)
- Throttle (1)
- defineProperty (1)
- Metaprogramming (1)
- ObjectFreeze (1)
- PropertyDescriptor (1)
- Array (1)
- BigO (1)
- DataStructures (1)
- toStringTag (1)
- TypeChecking (1)
- Polyfill (1)
- Rendering (1)
- requestAnimationFrame (1)
- requestIdleCallback (1)
- Scheduler (1)
- HTML (1)
- QUIC (1)
- API (1)
- DELETE (1)
- GET (1)
- PATCH (1)
- POST (1)
- PUT (1)
- REST (1)
- Cryptography (1)
- HTTPS (1)
- SSL (1)
- TLS (1)
- ThreeWayHandshake (1)
- UDP (1)
- createPortal (1)
- DOM (1)
- Modal (1)
- ReactRouter (1)
- DataNormalization (1)
- Redux (1)
- Caching (1)
- DataFetching (1)
- ServerState (1)
- TanstackQuery (1)
- EventDriven (1)
- StateMachines (1)
- useReducer (1)
- Hydration (1)
- SSR (1)
- CodeSplitting (1)
- nuqs (1)
- URLState (1)
- FormData (1)
- ProgressiveEnhancement (1)
- ServerActions (1)
- Zod (1)
- Composition (1)
- Memoization (1)
- useEffectEvent (1)
- InitialMount (1)
- Keys (1)
- ListRendering (1)
- Context (1)
- use (1)
- useContext (1)
- Lanes (1)
- useDeferredValue (1)
- useTransition (1)
- useSyncExternalStore (1)
- useState (1)
- ExpoRouter (1)
- ReactNavigation (1)
- Routing (1)
- Components (1)
- Styling (1)
- AsyncStorage (1)
- DataPersistence (1)
- LayoutAnimation (1)
- ReactNativeReanimated (1)
- UI (1)
- FlatList (1)
- ScrollView (1)
- Virtualization (1)
- Expo (1)
- Haptics (1)
- PushNotifications (1)
- Keyboard (1)
- TextInput (1)
- CSSModules (1)
- PostCSS (1)
- Sass (1)
- Bundler (1)
- esbuild (1)
- Rollup (1)
- GlobImport (1)
- HMR (1)
- TreeShaking (1)
- ImageOptimization (1)
- StaticAssets (1)