This article details how the KE rendering engine team tackled explosive task growth, stability pressure, and testing bottlenecks by implementing a test‑left shift strategy that mandates pre‑merge unit tests, automated CI pipelines, and an efficient regression platform, ultimately boosting quality and developer productivity.
This article explains the underlying browser mechanisms that cause page jank when creating millions of DOM elements, analyzes the event loop, rendering pipeline, macro‑ and micro‑tasks, and presents practical solutions such as setTimeout, requestAnimationFrame, MessageChannel, and requestIdleCallback to keep the UI responsive.
This article details the architectural analysis and a series of six optimization strategies—including multithreading, independent audio, file‑system improvements, text rendering, dedicated render thread, and iOS high‑performance mode—that collectively boost frame rates, reduce latency, and enhance the overall user experience of Alipay mini‑games.
This article explains how Alipay’s mini‑games platform was optimized through multithreading, independent audio and rendering threads, file‑system and text‑rendering improvements, and an iOS high‑performance mode, resulting in dramatically higher frame rates and lower latency across a range of games.
This article provides a comprehensive overview of modern GPU architecture, covering components such as SMs, GPCs, memory hierarchy, unified shader architecture, SIMT execution, warp scheduling, and compares IMR, TBR, and TBDR rendering pipelines while offering practical optimization techniques for developers.
This article compares the diff and UI update mechanisms of Flutter and Jetpack Compose, explaining Flutter's Element‑based linear reconciliation and Compose's Composer‑driven SlotTable with gap‑buffer diff, while illustrating each step with code snippets and diagrams.
This article explores the design and implementation of the Crab rendering engine, a WebGL‑based solution that combines high expressiveness, interactivity, and cross‑device compatibility to deliver game‑like animations for large‑scale activities, detailing its architecture, rendering pipeline, practical applications, and performance optimizations.
This article explains React's rendering pipeline—including initial and update renders—identifies the factors that cause component re‑rendering, and demonstrates how to use React.memo, useMemo, and useCallback to eliminate unnecessary renders and improve performance.
This article walks through implementing probability‑density‑function (PDF) based importance sampling in a Rust ray‑tracing renderer, covering trait definitions, concrete PDF types for spheres, cosine distributions, hittable objects, quad geometry, material adjustments, and integration into the rendering loop to achieve faster convergence and higher image quality.
This article provides a comprehensive technical overview of modern GPU architecture, covering memory hierarchy, compute units, shader execution, rendering pipelines, and performance‑optimisation techniques such as unified shaders, SIMT, warp scheduling, and tile‑based rendering strategies.
This article details the design and optimization of Kola2d, a custom WebGL rendering engine for Docs online spreadsheets, explaining why WebGL was chosen, how the system separates business and rendering layers, and the many performance tricks that enable smooth 50+ FPS rendering of tables with up to a million cells.
The Daily Must‑Grab mini‑program order system evolved from a DX XML‑based UI to a React‑like Rax framework and finally to a native Ao Chuang solution, delivering cross‑platform support, smaller bundles, faster launches, better async handling, and extensible plug‑in architecture while leveraging Taobao’s transaction core.
This article explains the complete browser rendering pipeline—from URL entry, DNS resolution, TCP/HTTP communication, resource loading, DOM/CSSOM construction, to page painting—and presents practical optimization strategies such as DNS prefetching, HTTP/2, CDN usage, and HTML/CSS/JS best practices to improve frontend performance.
The article details a complete redesign of Feishu’s cloud‑document‑to‑HTML‑email converter, introducing IoC/DI architecture, inline‑style utilities, and specialized renderers for headings, lists, tables, images, code blocks, and equations, resulting in high‑fidelity Outlook‑compatible emails while shrinking the core code to under three hundred lines.
This article explores how the depth of a webpage's DOM tree influences memory usage, style calculations, and rendering performance, presenting experiments that compare shallow and deeply nested structures and offering practical tips for monitoring and optimizing DOM depth.
This article examines a video rendering bug in Flutter when combining Texture widgets with PlatformView using Hybrid Composition, analyzes the underlying engine and rendering pipeline across Android, and presents three concrete solutions—including engine patches and Dart API tweaks—to restore proper texture refresh.
This article explores common performance bottlenecks of WebView and H5 pages in mobile apps and presents a comprehensive set of optimization strategies—including preloading, rendering tweaks, network enhancements, and memory management—to achieve near‑instant page loads and improve overall user experience.
This article documents the design, iterative evolution, and performance optimizations of a cross‑platform self‑rendering engine that started with QuickJS and Flutter, progressed through a C++‑based render tree, and now adopts a React Native‑style self‑draw approach using Skia, detailing architecture, code, and results.
This article explains why rendering performance is crucial for React applications and provides a comprehensive guide on monitoring tools such as Profiler and Developer Tools, followed by practical optimization methods including component update control, data handling hooks, code‑splitting, lazy loading, and concurrent mode.
This article provides a comprehensive technical overview of GPU architecture, from memory hierarchy and compute units to rendering pipelines and optimization techniques, explaining how modern graphics hardware processes shaders, manages resources, and balances performance across different rendering strategies.
Gaode solved the WebGL‑context limit in AMap by rendering all visual layers on a single canvas with a shared context, disabling autoClear, preserving depth ordering, and using per‑layer EffectComposers merged via a final composer, enabling multiple scenes and post‑processing without exceeding browser limits.
The article explains Android’s graphics pipeline by detailing how HWUI and Skia translate view operations into OpenGL ES commands, describing RenderThread stages such as synchronization, dirty‑region calculation, buffer handling, and drawing, and comparing mobile GPU architectures like TBR, TBDR, and IMR.
This article walks through the complete browser workflow—from entering a URL and resolving it via DNS caches and recursive lookup, through establishing a secure HTTPS connection with TCP handshakes and key exchange, to the server's response and the browser's rendering process.
This article walks you through the evolution of web rendering modes—from early static pages to modern CSR, SSR, SSG, ISR, and edge‑rendering techniques—explaining their design ideas, pros and cons, and how to pick the best fit for different performance, cost, and development scenarios.
This article explains why enhancing bloom (glow) effects is important for visual attention and scene aesthetics, outlines a generic WebGL implementation pipeline, discusses factors influencing bloom quality, and presents the Crystal WebGL engine's optimizations and performance comparisons between traditional and mipmap‑based approaches.
This article explains the browser's critical rendering path, detailing how HTML is parsed into a DOM, how CSS is turned into a CSSOM, how the render tree is built, and how JavaScript and CSS can block or delay rendering, providing practical examples and performance testing results.
This article examines the architecture, rendering pipeline, update mechanism, and event‑picking strategy of the LeaferJS canvas library, illustrating how its lightweight node creation, selective full‑ and partial‑rendering, and optimized hit‑testing achieve high performance compared with alternatives like Konva.
This comprehensive guide explains browser fundamentals, covering process and thread architecture, single‑ and multi‑process models, the V8 engine's data types, property ordering, memory allocation and garbage collection, compilation stages, the event loop, rendering pipeline, performance optimization techniques, and security mechanisms.
This article analyses how modern frontend view frameworks such as Solid, Svelte, Qwik, React, Vue and Angular are converging on a solidified programming paradigm while competing through fine‑grained rendering, reactive data, developer tooling, compilation strategies and the push to reduce JavaScript for better first‑page performance.
This article explains the four primary browser rendering approaches—DOM (HTML+CSS), SVG, Canvas, and WebGL/WebGPU—detailing their principles, advantages, limitations, and practical examples to help developers understand the underlying mechanics of web‑based visualizations.
This article traces a decade of front‑end rendering evolution, explaining traditional server‑side rendering, the rise of client‑side frameworks, modern hybrid approaches such as SSR, SSG, ISG, progressive and selective hydration, streaming SSR, islands architecture and React Server Components, while highlighting their trade‑offs and use‑cases.
This article explains what a GPU (Graphics Processing Unit) is, how it differs from a CPU, its architecture and performance characteristics, and why it powers everything from real‑time rendering to AI inference, using examples like the NVIDIA RTX 3090.
This article explains what a GPU is, compares its architecture to CPUs, explores its strengths in graphics rendering and AI inference, and outlines key specifications such as cores, cache, and memory, providing a clear overview for anyone curious about modern graphics processors.
This comprehensive guide walks beginners through Blender's basic settings, interface layout, modeling workflow, and rendering options, offering practical tips, shortcut keys, and visual examples to help new users quickly master the software.
This article analyzes Android layout rendering performance issues and presents optimization strategies including AsyncLayoutInflater, X2C framework, and custom view factory approaches to reduce rendering time by 20-35%.
Godot 4.0, the biggest and longest‑developed version of the open‑source game engine, introduces new Vulkan back‑ends, an OpenGL compatibility renderer, advanced global illumination, enhanced 2D tilemap tools, sophisticated shader and post‑processing features, plus extensive updates across scripting, physics, UI, XR, networking, audio and animation.
This article explains the dual‑thread architecture of WeChat Mini Programs, analyzes the rendering WebView and its file structure, and details the fast rendering pipeline that transforms virtual DOM into real DOM for rapid page display.
This article details the four‑year development of SpriteJS, a high‑performance, cross‑platform graphics system that supports WebGL and Canvas2D rendering, DOM‑like APIs, responsive design, WebWorker integration, and extensive performance optimizations for visualisation and game applications.
The article details Chromium’s rendering pipeline, tracing how network bytecode becomes on‑screen pixels through 13 stages—from parsing and style calculation to layout, painting, compositing, tiling, rasterization, activation, aggregation, and final display—while explaining process models, component formulas, and synchronous versus asynchronous raster strategies.
This article explains GaiaX, Alibaba's cross‑platform template engine, detailing its core concepts, DSL structure, three‑layer architecture, Rust‑based Stretch layout engine, rendering pipeline, and optimization techniques such as node‑tree calculation, view‑hierarchy merging, and text auto‑fit for Android and iOS.
This article presents a comprehensive guide to Unity rendering pipelines, key terminology, and practical performance‑optimization techniques—including AR, texture, memory, heat, and package‑size improvements—applied to the VI Sales Crown product, with detailed tools, methods, and measurable results.
This article provides a comprehensive overview of PyMuPDF, the Python binding for MuPDF, covering its core features, supported document formats, installation methods, and detailed code examples for opening, rendering, extracting, and manipulating PDF and other documents.
This article explains the fundamentals of texture mapping in OpenGL ES, covering texture objects, mapping theory, texture coordinates, wrapping modes, filtering techniques, texture units, and provides practical guidance for implementing these concepts in graphics applications.
This article explains how the Cube rendering engine and its FocusEngine enable small, fast, and resource‑efficient large‑screen mini‑programs on low‑end OTT devices, covering hardware constraints, core focus components, implementation details, performance optimizations, development experience, and future directions.
This article explains the architecture, module composition, thread model, and performance optimizations of the Cube mini‑program rendering engine, highlighting its lightweight size, cross‑platform support, advanced CSS capabilities, QuickJS integration, and real‑world use cases on TV and POS devices.
This article explains the concept of low-code rendering, the standard protocols that describe component maps, utils, and component trees, and compares code generation versus runtime rendering approaches while outlining current frameworks, pain points, and future architectural plans for Alibaba's low-code engine.
Over the past two years Alibaba’s DX native dynamic framework has been re‑engineered by moving virtual‑node parsing, layout and drawing to background threads, adding an asynchronous drawing system, a unified rich‑text component, and off‑screen resource management, boosting low‑end device frame rates from ~30 FPS to over 55 FPS and cutting media‑CPU usage by 65 % while paving the way for richer interactive UI features.
The article details how the Xianyu team built a feature‑complete, extensible, high‑performance Flutter rich‑text editor called Mural by defining a Slate‑inspired protocol layer, mapping it to a custom widget/render object tree, handling cursor and WidgetSpan selection, using diff‑based updates, and providing a plug‑in architecture for extensions.
This article explains how Bilibili’s Chronos cross‑platform engine enables a new support‑bullet‑screen feature that turns user comments into animated word‑cloud overlays on video, detailing the client‑side layout algorithm, integral‑image optimization, spiral point generation, and worker‑thread rendering to achieve sub‑second performance on mobile devices.
This article details Youku's end‑side solution for real‑time danmaku‑through‑human rendering, covering its background, value, client‑side advantages, technical challenges, OPR architecture, processing pipeline, engineering optimizations, test results, and future outlook for mobile intelligent rendering.
This guide outlines a practical 3D design workflow for operation designers, recommending Cinema 4D for modeling, Blender for material, lighting and rendering, and Photoshop for post‑processing, while highlighting software compatibility issues and offering step‑by‑step tips to accelerate learning.
This article shares the performance optimization techniques used by Ctrip Train Ticket's Flutter team, covering rendering bottlenecks, selective UI refresh with Provider Selector, granular setState usage, ViewModel splitting, widget caching, const usage, RepaintBoundary, isolate off‑loading, long‑list handling and image loading memory management.
This article explains the core concepts of glyph metrics, horizontal and vertical text layout, kerning, line breaking, and alignment techniques used by the Y‑tech Cangjie engine to provide rich text effects for video editing applications.
This article explains how React 18's concurrent mode changes state calculation and rendering by introducing update priorities, showing how multiple state updates are batched, how low‑priority updates can be skipped, and why the new scheduler reduces unnecessary renders while preserving final results.
This guide walks you through creating a VR promotional video with C4D and Octane, covering project background, pre‑production planning, storyboard creation, 3D modeling, texturing, rigging, animation, lighting, rendering, and post‑production steps such as editing, color grading, audio, and voice‑over.
This article presents a lightweight, framework-agnostic canvas layout engine that parses CSS-like styles, performs document-flow layout, renders via a depth-first canvas draw, supports interactive events, works across web and mini-program environments, and demonstrates its API, debugging tools, performance results, and future extensions.
This article explains how to collect real‑user performance data with the W3C Performance APIs, defines key metrics such as first paint and TTI, and provides practical loading, caching, rendering, and framework optimization techniques to improve web page speed and user experience.
Optimizing HTML5 canvas performance involves reducing draw calls, using layered and clipped rendering, performing quick bounding‑box checks, and offloading heavy drawing to OffscreenCanvas with Web Workers, enabling smooth animation even when thousands of shapes are rendered.
This article defines virtual characters, outlines their market growth and industry chain, showcases leading products and solutions, and details the technical research—including AI-driven animation, rendering pipelines, scene orchestration, and big‑data algorithms—being pursued by Alibaba's front‑end team.
This article reveals the technical design of Youku's high‑performance danmaku rendering engine, covering its background, industry landscape, GPU‑based rendering pipeline, multi‑layer architecture, performance‑boosting techniques, real‑world benchmarks, and the innovative effects it enables.
This article explores how Youku’s front‑end team evolved its technology stack—from traditional web pages to Node.js server‑side rendering, low‑code marketing tools, and advanced rendering techniques—to support large‑scale marketing activities across web, mobile, OTT, and mini‑programs.
This article explores Flutter's rendering pipeline, identifies performance bottlenecks in scrollable list scenarios, and presents a series of low‑level optimizations—including partial refresh, element and RenderObject reuse, load‑more handling, and GC suppression—that raise frame rates above native levels while reducing jank.
This article explains how Flutter achieves true cross‑platform development, details its layered architecture, UI rendering pipeline, Dart VM event‑loop model, isolate‑based multithreading, and the various runners that coordinate to deliver high‑performance UI across mobile and desktop platforms.
This case study describes how a rendering middle‑platform team tackled complex micro‑service chains, inconsistent data rules, and massive 3D data to create a full‑link location and visualization platform that enables self‑service debugging, reduces developer effort by over 30 %, and serves more than 170 monthly users.
KonvaJS is a TypeScript‑based Canvas framework offering concise APIs and React/Vue bindings, built on a hierarchical Stage‑Layer‑Group‑Shape tree that manages DOM containers, batch rendering via requestAnimationFrame, off‑screen caching, color‑key hit detection, drag handling, filters, selectors, serialization, yet lacks dirty‑rectangle optimization for large‑scale shape updates.
This article explores rendering performance optimization from a hardware viewpoint through to front‑end rendering, detailing the three stages of perception, healing, and corrosion, the critical rendering path, CRP analysis, and practical strategies such as NEON acceleration, OOPD/OOPR, and Lighthouse tooling to achieve smoother, lower‑power web experiences.
Oasis Engine 0.5 introduces a redesigned animation system with Animator, BlendShape support, a revamped PBR material interface using spherical harmonics, new 2D SpriteAtlas tools, enhanced physics APIs, expanded Spine and Lottie components, plus dozens of examples and higher test coverage, setting the stage for the upcoming 0.6 milestone.
This article explores the essence of rendering performance optimization by examining hardware trade‑offs, rendering and computation perspectives, the critical rendering path, and practical strategies—including toolchains like Lighthouse and the Navigation Timing API—to systematically improve front‑end speed and efficiency.
This article explains the basic concepts of screen pixels, resolution, DPI, and display principles, then details Flutter's UI system architecture—including the Embedder, Engine, and Framework layers—and describes how Flutter renders UI through a three‑tree structure and a synchronized drawing pipeline.
React Fiber rewrites React’s core algorithm by breaking the diff phase into small, interruptible fiber units, scheduling them during browser idle time with requestIdleCallback, using double‑buffered trees and effect lists to pause, resume, and efficiently commit DOM updates, thereby improving UI responsiveness in large applications.
This article recounts a technical interview where the author explains the complete lifecycle of a browser request—from URL parsing, DNS resolution, TCP handshake, and caching strategies to DOM construction, rendering, and performance optimizations—providing concise answers and practical tips for front‑end developers.
This article explains the design goals, layered architecture, JS binding, platform abstraction, rendering pipelines, frame‑sync mechanisms, and debugging tools of a cross‑platform WebCanvas engine on Android, providing practical insights for developers seeking low‑latency, extensible canvas solutions.
This article explains a collection of modern CSS strategies—including content‑visibility, will‑change, contain, font‑display, scroll‑behavior, GPU‑accelerated animations, stylesheet splitting, @import avoidance, and CSS custom properties—to dramatically improve page rendering speed and user experience.
This article explains how to configure, render, and extend Django templates, covering template directories, context data, built‑in tags and filters, reusable blocks, includes, and creating custom tags to efficiently build dynamic web interfaces.
This article walks through the complete production pipeline for the 2024 Spring Festival ‘Cow’ mascot, covering concept research, original illustration, low‑poly modeling, high‑detail sculpting, UV layout with RizomUV, material setup, lighting and rendering in C4D, and final Lottie‑based animation, offering practical tips and lessons learned.
This article walks through the complete lifecycle of a browser request—URL parsing, DNS lookup, TCP handshake, OSI‑layer transmission, caching strategies, HTML rendering, and performance optimizations—mirroring real interview questions faced by front‑end engineers.
This article explains why React introduced the Fiber architecture, how it breaks rendering work into small interruptible units, the role of requestAnimationFrame and requestIdleCallback, the underlying linked‑list data structures, and provides code examples that illustrate the render and commit phases for smoother UI updates.
This article explores how UIKit, CoreAnimation, CALayer, and CoreFoundation (including RunLoop) collaborate to perform static drawing and animation on iOS, illustrating the process with a button‑drawing example and detailed code snippets.
This article explains the challenges of creating a visual formula editor, compares common formula languages, details rendering techniques with LaTeX and MathJax, and proposes efficient interactive editing architectures and optimization strategies for both code‑based and visual editing workflows.
This article walks through the complete journey of a URL entered in a browser, covering URL parsing, DNS lookup, TCP handshake, OSI‑layer packet transmission, caching strategies, HTML parsing, rendering pipeline, and practical performance‑optimisation tips.
This article provides a detailed, front‑end‑focused walkthrough of the complete browser request‑response lifecycle—from URL parsing and DNS lookup through TCP connection, HTTP handling, HTML/CSS parsing, JavaScript execution, to final page rendering—highlighting key concepts, common pitfalls, and optimization tips.
This article explains how React 16's Fiber architecture replaces the recursive VDOM traversal with a cooperative, time‑sliced update model that splits work, uses linked‑list structures, assigns priorities, and allows tasks to be paused, resumed, or aborted for smoother rendering and better user experience.
This article walks through Vue 3's initialization process, explaining what createApp(App).mount('#app') does, how the runtime‑dom and runtime‑core modules create and render VNodes, and how patch, shapeFlags, and patchFlags drive efficient DOM updates.
This article explains how KAIFX, a synthetic data platform built on computer graphics and AI techniques, tackles challenges of data scarcity, realism, labeling bias, and management to boost AR and 3D face reconstruction model performance.
This article provides a detailed, step‑by‑step explanation of how a browser processes a simple HTTP request—from URL parsing, DNS lookup, and TCP connection through server handling, response reception, HTML/CSS parsing, layout, painting, reflow/repaint, and JavaScript execution—highlighting key concepts, optimizations, and common pitfalls.
The article reviews Taobao's Mini‑Program Creative Interaction project, detailing its evolution, technical architecture, engine migration, rendering design, task system, practical use cases, and future directions, illustrating how game technologies are integrated into e‑commerce mini‑programs.
The Xianyu team optimized their Flutter‑based app by creating a lag‑diagnosis tool, minimizing unnecessary widget rebuilds, deferring load‑more updates, using low‑resolution placeholders, prefetching data with skeleton screens, reusing FlutterBoost containers and early data passing, which together cut jank by half, shaved ~300 ms off page loads and raised average FPS by about three points on low‑end devices.
This article explains how Apple Silicon affects Metal applications, outlines migration steps from Intel to Apple Silicon, describes new GPU architectures and API features, and provides practical best‑practice guidelines to achieve optimal performance and correctness on the new platform.
The presentation explains AR fundamentals, distinguishes it from AI and VR, and details a shoe‑try‑on system that captures 30 fps video, uses AI key‑point detection and pose estimation to overlay 3D shoe models—created via manual, scanning, or photogrammetry methods—rendered with GPU pipelines and PBR, enhanced by green‑screen occlusion and shadow techniques, earning positive audience feedback.
This article compares forward and deferred rendering techniques, analyzes their performance trade‑offs on mobile GPUs, explores tile‑based and hardware‑TBDR approaches, and presents a Metal‑based single‑pass deferred shading solution for modern mobile graphics pipelines.
This article provides an in‑depth overview of Cocos Creator's node‑component architecture, covering node creation, hierarchy, spatial properties, touch event flow, and the detailed Visit and Render processes that transform component data into WebGL graphics for game development.
The article explains APNG’s file structure and decoding process, then demonstrates how to render animated PNGs on the web using both Canvas 2D (with drawImage, clearRect, getImageData, putImageData) and WebGL (via multiple textures and custom disposal/blending handling) for efficient, controllable animation playback.
This article explains the Flutter rendering pipeline—including layout, paint, and compositing stages—details the widget‑element‑render object hierarchy, describes the task runners involved in each frame, and analyzes the Sunglasses‑integrated frame‑rate monitoring tool that classifies frame timings for performance debugging.
The article explains Flutter’s three‑layer architecture and rendering pipeline, compares web‑container, generic‑container, and self‑draw engine cross‑platform approaches, details unified and three‑side hybrid integration patterns with navigation scenarios, evaluates hybrid frameworks, and discusses compilation modes, artifact integration, and engineering workflow for hybrid projects.
This article presents a comprehensive front‑end performance checklist covering JavaScript engine targeting, script defer and streaming, progressive boot, server‑side versus client‑side rendering strategies, hydration techniques, third‑party script management, self‑hosting assets, and proper HTTP caching headers to dramatically reduce load and interactive times.
The article explains Flutter’s three‑tree rendering architecture, shows how to diagnose jank with Performance Overlay and DevTools, and demonstrates practical optimizations—such as extracting rebuilds, using RepaintBoundary, enabling debug flags, and caching—to reduce layout and paint costs and achieve smoother, higher‑FPS UI performance.
This article walks through the complete WebGL rendering pipeline, explaining how to create a WebGL context, set up vertex and fragment shaders, load vertex data into buffers, configure viewports and attributes, and finally draw a colored triangle on the canvas using JavaScript.
This article provides a thorough, step‑by‑step explanation of the entire browser request‑response cycle—including URL parsing, DNS lookup, TCP connection, server handling, response processing, and the detailed rendering pipeline—offering clear insight for developers and interview preparation.
This article explains why Alibaba’s Xianyu team created the Candy interactive engine, outlines the challenges of embedding mini‑games in apps, and details the engine’s architecture—including framework, game system, lifecycle, rendering, GUI, event, animation, and resource subsystems—along with sample Flutter code.
Candy Engine is a lightweight, Flutter‑integrated interactive game engine that mirrors Unity’s component model, offering a four‑layer architecture, an eight‑stage lifecycle, seamless rendering of GameObjects as Widgets, direct reuse of Flutter’s UI for GUIs, gesture‑aware components, skeletal and particle animation support, and resource management leveraging Flutter’s ImageCache.
