BestHub
Sign in
Tagged articles
127 articles
Page 2 of 2
Xianyu Technology
Xianyu Technology
Dec 26, 2019 · Game Development

Design of the Candy Flutter Interactive Game Engine

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.

FlutterGUIinteractive
0 likes · 11 min read
Design of the Candy Flutter Interactive Game Engine
Xianyu Technology
Xianyu Technology
Oct 31, 2019 · Mobile Development

Performance Optimization of Alibaba Xianyu Fishpond Mini-Program

The Xianyu Fishpond mini‑program was optimized by keeping its instance alive, pre‑rendering first‑screen data, reducing costly setData calls, using $spliceData for long lists, staging tab‑switch updates, and integrating native video with cover‑view, which together cut loading time, eliminated scroll jank, and slashed tab‑switch latency, delivering markedly improved performance.

FrontendMiniProgramPerformanceOptimization
0 likes · 8 min read
Performance Optimization of Alibaba Xianyu Fishpond Mini-Program
MaoDou Frontend Team
MaoDou Frontend Team
Sep 12, 2019 · Frontend Development

How to Supercharge Front-End Performance: From DNS to Rendering

This guide walks through front‑end performance optimization, covering DNS resolution, TCP connection, HTTP request/response, server response techniques like compression and CDN, and browser rendering improvements such as reducing reflows, using lazy loading, and best practices to shrink request time and improve perceived speed.

CachingDNSTCP
0 likes · 7 min read
How to Supercharge Front-End Performance: From DNS to Rendering
Seewo Tech Circle
Seewo Tech Circle
Jul 26, 2019 · Frontend Development

WPF Rendering Explained: From OnRender to Screen

This article walks developers through the complete WPF rendering pipeline, detailing the three-layer architecture, message loop handling, Dispatcher processing, DirectX integration, and how drawing commands travel from OnRender to the screen, while providing code examples and references to deepen understanding.

DirectXDispatcherWPF
0 likes · 19 min read
WPF Rendering Explained: From OnRender to Screen
Tencent TDS Service
Tencent TDS Service
Mar 7, 2019 · Fundamentals

Master OpenGL Basics: Contexts, Buffers, Textures, and Shaders Explained

This comprehensive guide walks developers through OpenGL fundamentals—including contexts, framebuffers, attachments, textures, vertex and index buffers, shader programs, per‑fragment operations, and buffer swapping—providing clear explanations and visual diagrams to help beginners grasp modern graphics programming.

BuffersGraphicsOpenGL
0 likes · 17 min read
Master OpenGL Basics: Contexts, Buffers, Textures, and Shaders Explained
360 Tech Engineering
360 Tech Engineering
Oct 8, 2018 · Frontend Development

Why Modern Front‑End Frameworks Exist: Declarative vs Imperative and Rendering

The article explains how evolving runtime interaction requirements have shifted front‑end development from simple jQuery scripts to modern declarative frameworks like Vue, React and Angular, detailing the differences between imperative and declarative approaches, rendering mechanisms, and the role of virtual DOM.

DeclarativeFrontendImperative
0 likes · 10 min read
Why Modern Front‑End Frameworks Exist: Declarative vs Imperative and Rendering
Weimob Technology Center
Weimob Technology Center
Oct 8, 2018 · Frontend Development

Boost WeChat Mini Program Performance: Startup, First-Render, and Rendering Optimizations

This article outlines practical techniques for improving WeChat Mini Program performance, covering startup loading, first‑screen experience recommendations, and rendering optimizations, with detailed steps on code size control, subpackage loading, data management, and UI rendering best practices.

Performance OptimizationStartup LoadingWeChat Mini Program
0 likes · 7 min read
Boost WeChat Mini Program Performance: Startup, First-Render, and Rendering Optimizations
Tencent IMWeb Frontend Team
Tencent IMWeb Frontend Team
Sep 23, 2018 · Frontend Development

Unlock Browser Rendering: Deep Dive into WebKit, Chromium & Performance

This article provides an in‑depth exploration of browser rendering mechanisms, covering engine architecture, multi‑process models, DOM and event handling, RenderObject/RenderLayer construction, software vs hardware rendering, and practical JavaScript performance monitoring tools such as Benchmark.js and JsPerf.

WebKitperformancerendering
0 likes · 25 min read
Unlock Browser Rendering: Deep Dive into WebKit, Chromium & Performance
Xianyu Technology
Xianyu Technology
Aug 21, 2018 · Mobile Development

Flutter External Texture Rendering and Optimization

Flutter reduces CPU/GPU overhead in multi‑video calls by separating drawing from presentation, using a unified LayerTree and external textures that share OpenGL contexts between Flutter and native code, allowing direct Skia rendering of native pixel buffers on iOS and Android with significantly lower latency and memory use.

External TextureFlutterOpenGL
0 likes · 13 min read
Flutter External Texture Rendering and Optimization
Aotu Lab
Aotu Lab
Jul 28, 2017 · Frontend Development

Why WebGL Outperforms Canvas 2D in HTML5 Game Rendering

The article compares Flash and HTML5, explains Canvas 2D and WebGL rendering modes, and presents performance tests showing WebGL’s superior speed across browsers, while also discussing practical implications for web game development.

Canvas2DGame DevelopmentHTML5
0 likes · 12 min read
Why WebGL Outperforms Canvas 2D in HTML5 Game Rendering
Baidu Maps Tech Team
Baidu Maps Tech Team
May 5, 2017 · Frontend Development

Designing a High‑Performance WebGL Map Engine: Architecture & Rendering Core

This article explores the architecture of a WebGL‑based map engine, detailing its core rendering pipeline, essential modules such as data handling, shader management, buffers, and event‑driven rendering loops, while highlighting performance considerations and best practices for efficient, on‑demand map visualization.

FrontendWebGLrendering
0 likes · 7 min read
Designing a High‑Performance WebGL Map Engine: Architecture & Rendering Core
Aotu Lab
Aotu Lab
Apr 14, 2017 · Frontend Development

Boost Web Performance: GPU Acceleration and Chrome DevTools Explained

This article explains how GPU acceleration can keep web pages within the 16 ms frame budget, details the browser rendering pipeline, shows how to use Chrome DevTools to inspect composited layers, and outlines practical steps and pitfalls for enabling GPU‑accelerated animations.

Chrome DevToolsCompositingFrontend
0 likes · 8 min read
Boost Web Performance: GPU Acceleration and Chrome DevTools Explained
Tencent Music Tech Team
Tencent Music Tech Team
Mar 31, 2017 · Mobile Development

iOS View and Animation Rendering Architecture and Performance Optimization

iOS renders views and animations through a multi‑stage pipeline—layout, backing image creation, preparation, commit, then GPU OpenGL compositing—so excessive layers, overdraw, off‑screen rendering, or image decompression can cause frame drops, while marking views opaque, reducing transparency, and using Instruments’ Core Animation and GPU Driver tools help diagnose and optimize performance.

Mobile DevelopmentPerformance Optimizationcore animation
0 likes · 10 min read
iOS View and Animation Rendering Architecture and Performance Optimization
Tencent Cloud Developer
Tencent Cloud Developer
Feb 5, 2017 · Frontend Development

Analysis of Vue.js 2.0 Initialization and Rendering Logic

Vue.js 2.0 initializes a component via the _init method, merges options, and mounts it with $mount, which creates a render function—whether from a custom function, template, or element—producing a Virtual DOM VNode that the patch algorithm diffs against the previous VNode to efficiently update the real DOM.

Frontend DevelopmentInitializationVirtual DOM
0 likes · 8 min read
Analysis of Vue.js 2.0 Initialization and Rendering Logic
Meituan Technology Team
Meituan Technology Team
Jan 19, 2017 · Mobile Development

Understanding Hardware Acceleration in Android Applications

Hardware acceleration in Android shifts intensive floating‑point UI work from the CPU to the GPU by building DisplayLists on the CPU and rasterizing them on the GPU, allowing parallel processing, selective redraw of unchanged elements, and significantly higher frame rates for animations and complex graphics.

AndroidCPUDisplayList
0 likes · 14 min read
Understanding Hardware Acceleration in Android Applications
Qunar Tech Salon
Qunar Tech Salon
Jan 13, 2017 · Frontend Development

Building Smooth Animations: Understanding FPS, Browser Rendering Process, and Performance Optimization Techniques

This article explains what FPS and 60 fps mean, walks through the browser's rendering pipeline from HTML/CSS to the render tree and layers, and provides practical techniques such as avoiding forced synchronous layout, using transform/opacity, GPU acceleration, requestAnimationFrame, and proper event handling to achieve fluid animations.

AnimationFrontendbrowser
0 likes · 24 min read
Building Smooth Animations: Understanding FPS, Browser Rendering Process, and Performance Optimization Techniques
360 Quality & Efficiency
360 Quality & Efficiency
Sep 14, 2016 · Mobile Development

Android FPS Measurement and Optimization: Methods, Tools, and Best Practices

This article explains how to quantify Android app frame rates, understand FPS concepts, calculate frame timing, and apply three practical methods—including GPU rendering profiling, adb gfxinfo, and SurfaceFlinger latency commands—to monitor and improve smoothness across multiple devices without rooting or API restrictions.

AndroidGPUMobile Development
0 likes · 9 min read
Android FPS Measurement and Optimization: Methods, Tools, and Best Practices
360 Quality & Efficiency
360 Quality & Efficiency
Jun 3, 2016 · Mobile Development

Understanding and Reducing Overdraw in Android App Rendering for Better Performance

Even high‑end Android devices can feel sluggish due to overdraw, where the GPU renders the same pixel multiple times; this article explains Android’s rendering pipeline, how to detect excessive drawing, and practical techniques—such as simplifying layouts, using transparency, and merging views—to cut draw calls and achieve smooth 60 FPS performance.

AndroidMobile DevelopmentOptimization
0 likes · 6 min read
Understanding and Reducing Overdraw in Android App Rendering for Better Performance
21CTO
21CTO
Mar 4, 2016 · Frontend Development

How to Boost Web Page Performance: Master Reflow, Repaint, and Rendering

This article explains why web pages become sluggish, breaks down the browser's rendering pipeline, details how reflow and repaint affect performance, and provides nine practical techniques—including batching DOM operations, using requestAnimationFrame and requestIdleCallback—to dramatically improve page speed and achieve smooth 60 FPS animations.

Frontendbrowserreflow
0 likes · 14 min read
How to Boost Web Page Performance: Master Reflow, Repaint, and Rendering
Architect
Architect
Feb 29, 2016 · Frontend Development

In-Depth Guide to Web Page Performance: Rendering, Reflow, Repaint, and Optimization Techniques

This article explains why web pages can suffer from poor performance due to costly reflow and repaint operations, outlines the page rendering process, and provides nine practical techniques—including batching DOM reads/writes, using off‑screen DOM, and leveraging requestAnimationFrame or requestIdleCallback—to reduce rendering overhead and achieve smoother 60 FPS animations.

FrontendWeb Performancereflow
0 likes · 11 min read
In-Depth Guide to Web Page Performance: Rendering, Reflow, Repaint, and Optimization Techniques
Tencent TDS Service
Tencent TDS Service
Dec 17, 2015 · Mobile Development

How iOS Renders Views & Animations and Boosts Performance

This article explains iOS's view and animation rendering pipeline, identifies common performance pitfalls such as excessive layers, overdraw, off‑screen drawing, and image decompression, and provides practical optimization techniques using Core Animation and GPU Driver tools.

OptimizationUI Performancecore animation
0 likes · 12 min read
How iOS Renders Views & Animations and Boosts Performance
WeChat Client Technology Team
WeChat Client Technology Team
Nov 19, 2015 · Mobile Development

Unlocking iOS Event Handling & Rendering: RunLoop, UI Threads, and Core Animation

This article explains iOS’s event processing pipeline—from hardware events through the RunLoop’s observer, source, timer, and dispatch mechanisms—detailing why UI must run on the main thread, how CALayer and Core Animation render, and the roles of CADisplayLink, NSTimer, and async display techniques.

AsyncDisplayCADisplayLinkRunLoop
0 likes · 20 min read
Unlocking iOS Event Handling & Rendering: RunLoop, UI Threads, and Core Animation