Tag

Rendering

1 views collected around this technical thread.

Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
May 12, 2025 · Frontend Development

Understanding Browser Rendering, Event Loop, and Techniques to Avoid Page Jank When Adding Massive DOM Elements

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.

DOMEvent LoopJavaScript
0 likes · 16 min read
Understanding Browser Rendering, Event Loop, and Techniques to Avoid Page Jank When Adding Massive DOM Elements
AntTech
AntTech
May 7, 2025 · Game Development

Performance Optimization Techniques for Alipay Mini‑Games Runtime

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.

AlipayRenderingmini-game
0 likes · 15 min read
Performance Optimization Techniques for Alipay Mini‑Games Runtime
Architects' Tech Alliance
Architects' Tech Alliance
Jan 23, 2025 · Game Development

GPU Architecture and Rendering Pipeline Overview

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.

GPURenderingShader
0 likes · 27 min read
GPU Architecture and Rendering Pipeline Overview
Kuaishou Frontend Engineering
Kuaishou Frontend Engineering
Dec 17, 2024 · Game Development

How Crab’s WebGL Engine Powers Game‑Level Animations on the Web

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.

RenderingWebGLanimation engine
0 likes · 23 min read
How Crab’s WebGL Engine Powers Game‑Level Animations on the Web
Architecture Development Notes
Architecture Development Notes
Dec 1, 2024 · Fundamentals

How to Add Importance‑Sampling PDFs to a Rust Ray Tracer

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.

Importance SamplingPDFRay Tracing
0 likes · 15 min read
How to Add Importance‑Sampling PDFs to a Rust Ray Tracer
DaTaobao Tech
DaTaobao Tech
Sep 2, 2024 · Frontend Development

Evolution and Architecture of the Daily Must‑Grab Mini‑Program Order System

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.

DXMini ProgramNative
0 likes · 13 min read
Evolution and Architecture of the Daily Must‑Grab Mini‑Program Order System
JD Tech
JD Tech
Aug 15, 2024 · Frontend Development

Understanding Browser Rendering Process and Performance Optimization Techniques

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.

HTTPRenderingbrowser
0 likes · 14 min read
Understanding Browser Rendering Process and Performance Optimization Techniques
DeWu Technology
DeWu Technology
Jun 24, 2024 · Frontend Development

Feishu Cloud Document to HTML Email: Architecture Redesign and Implementation

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.

CSS-in-JSFeishuHTML email
0 likes · 31 min read
Feishu Cloud Document to HTML Email: Architecture Redesign and Implementation
Inke Technology
Inke Technology
Jun 19, 2024 · Mobile Development

Why Flutter’s PlatformView Can Freeze Video: Deep Engine Bug Analysis & Fixes

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.

Bug FixFlutterRendering
0 likes · 18 min read
Why Flutter’s PlatformView Can Freeze Video: Deep Engine Bug Analysis & Fixes
Code Mala Tang
Code Mala Tang
Jun 17, 2024 · Mobile Development

How to Achieve Instant H5 Page Load in WebView: Proven Optimization Techniques

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.

Mobile DevelopmentPreloadingRendering
0 likes · 13 min read
How to Achieve Instant H5 Page Load in WebView: Proven Optimization Techniques
JD Retail Technology
JD Retail Technology
May 20, 2024 · Frontend Development

Cross‑Platform Self‑Rendering Engine: Design, Evolution, and Optimization with Skia and C++

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.

C++Cross‑PlatformReact Native
0 likes · 26 min read
Cross‑Platform Self‑Rendering Engine: Design, Evolution, and Optimization with Skia and C++
NetEase LeiHuo UX Big Data Technology
NetEase LeiHuo UX Big Data Technology
Mar 5, 2024 · Frontend Development

Improving React Application Rendering Performance: Monitoring Tools and Optimization Techniques

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.

ReactRenderingWeb Development
0 likes · 7 min read
Improving React Application Rendering Performance: Monitoring Tools and Optimization Techniques
Amap Tech
Amap Tech
Jan 11, 2024 · Frontend Development

Optimizing Multi‑Scene Rendering on AMap by Sharing a WebGL Context

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.

AMapEffectComposerRendering
0 likes · 11 min read
Optimizing Multi‑Scene Rendering on AMap by Sharing a WebGL Context
OPPO Kernel Craftsman
OPPO Kernel Craftsman
Nov 27, 2023 · Mobile Development

Understanding Android HWUI, Skia, and OpenGL Rendering Pipeline

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.

GPUHWUIOpenGL
0 likes · 13 min read
Understanding Android HWUI, Skia, and OpenGL Rendering Pipeline
Zhengtong Technical Team
Zhengtong Technical Team
Aug 23, 2023 · Game Development

Enhancing Bloom Effect in WebGL: Implementation, Optimization, and Performance Comparison

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.

RenderingWebGLbloom
0 likes · 7 min read
Enhancing Bloom Effect in WebGL: Implementation, Optimization, and Performance Comparison
Sohu Tech Products
Sohu Tech Products
Jul 26, 2023 · Frontend Development

In‑Depth Analysis of LeaferJS Rendering Engine Architecture and Performance

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.

CanvasJavaScriptLeaferJS
0 likes · 14 min read
In‑Depth Analysis of LeaferJS Rendering Engine Architecture and Performance
ByteFE
ByteFE
Jul 26, 2023 · Frontend Development

Browser Fundamentals: Process Architecture, V8 Engine, Memory Management, Event Loop, Rendering, and Security

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.

Event LoopRenderingV8
0 likes · 43 min read
Browser Fundamentals: Process Architecture, V8 Engine, Memory Management, Event Loop, Rendering, and Security
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Jul 10, 2023 · Frontend Development

The Evolution and Competitive Trends of Next‑Generation Frontend Frameworks

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.

FrameworksReactivityRendering
0 likes · 14 min read
The Evolution and Competitive Trends of Next‑Generation Frontend Frameworks
360 Tech Engineering
360 Tech Engineering
Jul 3, 2023 · Frontend Development

Rendering Techniques for Browser Visualizations: DOM, SVG, Canvas, WebGL, and WebGPU

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.

CanvasDOMRendering
0 likes · 12 min read
Rendering Techniques for Browser Visualizations: DOM, SVG, Canvas, WebGL, and WebGPU