- 综合排序
- 最热优先
- 最新优先
- 来自专栏前端小馆
浅谈 Canvas 渲染引擎
因此，大部分 Canvas 渲染引擎都会内置了一些性能优化手段。 常见的性能优化手段有离屏渲染、脏区渲染、异步渲染等等。 3. , mainAxisSpacing: 4, crossAxisSpacing: 4, children: _buildGridTileList(30)); 实现了盒模型和 Flex 4. 性能 由于 Canvas 渲染引擎都会进行大量的封装，所以开发者想针对底层做性能优化是非常难的，需要渲染引擎自身去支持一些优化。 跨平台 很多 Canvas 渲染引擎并不满足于只做 Canvas，一般还会支持一些其他的渲染模式，比如 SVG 渲染、WebGL 渲染、WebGPU 渲染等等。 但很多 Canvas 渲染引擎本身也支持 SVG 渲染，即使不支持，也可以通过 canvas2svg 这个库来进行转换。
3.6K20编辑于 2023-03-16 - 来自专栏jQuery每日经典
GCanvas 渲染引擎介绍
用一句话来概括 GCanvas，即遵循 W3C 标准，移动端的跨平台的高性能图形渲染引擎。可以从三个方面来解释。 我们将其称为渲染引擎内核。并通过交叉编译，使得可以适配 Android、iOS 这两大主流移动平台，因而具有跨平台的特性。 的图形渲染能力的支持。 使用了 GCanvas 则不需要经过 WebView 内部的复杂逻辑处理和图层树渲染，而是让 JavaScript 通过桥接方式直接调用渲染引擎内核（OpenGL ES）。 Chart 图标渲染 Chart 图标库的渲染效果 基于图表库，不同类型的图表渲染测试。
1.5K10编辑于 2022-01-20 - 来自专栏柒八九技术收纳盒
Chromium 最新渲染引擎--RenderingNG
❞ 而这篇文章的原文是负责Blink中渲染引擎研发的主管所写。无论是从专业角度和时间新鲜程度(2021年)都「墙裂推荐」。 负责「文档生命周期」 4. 脚本「事件调度」 5. 「解析」HTML、CSS和其他数据格式 渲染进程合成线程Compositor Thread: 1. 处理「事件的输入」 2. 对页面内容进行「图层化」处理 3.对图片进行解码处理 4. 绘画工作单元代码 5. 负责文档生命周期 4. 「脚本事件调度」 5. 对页面内容进行「图层化」处理 3.对图片进行解码处理 4. 绘画工作单元代码 5. 进行栅格化操作。
2.1K10编辑于 2022-08-25 - 来自专栏前端全栈分享
Event Loop 和 JS 引擎、渲染引擎的关系
本文会讲 JS 引擎的编译流水线、渲染引擎的渲染流程，然后引入为什么需要 event loop。 渲染引擎 渲染时会把 html、css 分别用 parser 解析成 dom 和 cssom，然后合并到一起，并计算布局样式成绝对的坐标，生成渲染树，之后把渲染树的内容复制到显存就可以由显卡来完成渲染。 如何结合 JS 引擎和渲染引擎 不管是 JS 引擎、还是渲染引擎，都比较傻（纯粹），JS 引擎只会不断执行 JS 代码，渲染引擎也是只会布局和渲染。但是要完成一个完整的网页应用，这两者都需要。 （后来加了 web worker，但不是主流） 我们知道，JS 引擎只知道执行 JS，渲染引擎只知道渲染，它们两个并不知道彼此，该怎么配合呢？ 答案就是 event loop。 总结 总之，浏览器里有 JS 引擎做 JS 代码的执行，利用注入的浏览器 API 完成功能，有渲染引擎做页面渲染，两者都比较纯粹，需要一个调度的方式，就是 event loop。
2.9K20发布于 2021-07-05 - 来自专栏前端二次元
Skyline 渲染引擎——更接近原生渲染的性能体验
Web 技术至今已有 30 多年历史，作为一款强大的渲染引擎，它有着良好的兼容性和丰富的特性。 为了进一步优化小程序性能，提供更为接近原生的用户体验，我们在 WebView 渲染之外新增了一个渲染引擎 Skyline，其使用更精简高效的渲染管线，并带来诸多增强特性，让 Skyline 拥有更接近原生渲染的性能体验 4. WXSS 预编译。 而 Skyline 只有 AppService 线程，且多个 Skyline 页面会运行在同一个渲染引擎实例下，因此页面占用内存能够降低很多，还能做到更细粒度的页面间资源共享（如全局样式、公共代码、缓存资源等 4. 共享元素动画支持 跨页面共享元素，能够很方便地将上一个页面的元素“共享”到下一个页面，并伴随着过渡动画，同时支持了一套可定制化接口，能实现自定义的过渡动画。5.
1.6K50编辑于 2023-11-30 - 来自专栏进击的多媒体开发
01-什么是渲染引擎
在开始写代码之前，要先明确渲染引擎到底是什么东西，才能知道要写什么东西。 在 Google 里面搜索 ? 渲染引擎关键字，出来的结果都是关于浏览器渲染引擎的。 不过，一方面能看出，搜索引擎对于渲染引擎的定位更偏向于浏览器渲染了，另一方面也是我们搜索的关键字不够清晰准确。 我本想知道渲染引擎用代码写出来之后运行起来是个什么效果，结果就来几张图片，有点 开局一张图，内容全靠编 的感觉。 后来我才知道，原来这些图就是用渲染引擎渲染出来的效果图。 如果渲染引擎渲染的一张图，你看着就和在现实中用相机拍的图片一样，根本分辨不出是现实还是模拟的，那说明这渲染引擎造诣很早，技术上已经很逼真了。 说到这里，有人会觉得这渲染引擎和游戏引擎很类似。是的，渲染引擎更像是游戏引擎的子集，一个很重要的子集，在实现的时候都会去参考游戏引擎的架构设计、功能特点，算是摸着游戏引擎过河了。
4.2K10发布于 2021-01-14 - 来自专栏前端小馆
LeaferJS，全新的 Canvas 渲染引擎
前言 前几天群里有人发了一个新 Canvas 渲染引擎的图片，看数据和宣传口号相当炸裂，号称只用 1.5s 可以渲染 100 万个矩形，还是个国产的。 3.1 可视区域渲染 先来看一下 fullRender 方法，这个是全量渲染，不会去计算最小渲染区域。当初次渲染或者设置了 usePartRender 为 false 的时候就会走全量渲染。 这里为什么 rect4 没有被重绘呢？虽然它和 circle2 相交了，但由于提前进行了一次 clip，因此 circle2 的重绘不会影响到 rect4。 使用局部渲染，可以避免每次节点的修改都会触发整个画布的重绘，降低绘制的开销。 但由于 hit 计算也有一定的 cpu 开销，对于一些修改影响范围大的场景，性能可能反而不如全量渲染。 4. 事件拾取 事件拾取也是 Canvas 渲染引擎里面的一个核心功能，一般来说 Canvas 在 DOM 树里面的表现只是一个节点，里面的形状都是自己绘制的，因此我们无法感知到用户当前触发的是哪个形状。
1.5K10编辑于 2023-10-16 OpenGL渲染引擎-设计与实践
它被广泛用于实现2D和3D图形渲染，并且是许多应用程序、游戏和网页浏览器的核心组件。一、OpenGL的主要特性1. 低层次的渲染 API：OpenGL 提供了直接与图形硬件进行交互的能力。 4. OpenGL的优点包括：成为绘图引擎的标准，绘图质量高，编程相对复杂但上手简单，适合追求完美的绘图精确度。跨平台支持，可以在多个操作系统上使用，包括Windows、Linux和Mac等。 提供了一整套用于游戏开发的API，包括Direct3D用于3D图形渲染、Direct2D用于2D图形渲染等。与Windows紧密相连，难以移植，但提供了强大且方便的IDE和GPU语言调试工具。 要做游戏，游戏引擎甚至需要的图形学知识很少，基础图形学完全足够，游戏引擎更着重的是全套工具链和细节性能优化，尤其是全套工具链，游戏开发需要很多各种功能，场景编辑 动画 骨骼 地形天空 基础特效光照粒子系统
1.1K10编辑于 2024-06-03- 来自专栏进击的多媒体开发
跨平台渲染引擎之路：拨云见日
实现一个渲染引擎需要点亮哪些技能点？哪些是必须技？哪些可以边做边点亮？ 渲染引擎的基本渲染流程是什么样的？ 目前有哪些出色的渲染引擎？怎么筛选参考引擎？参考哪些？ 典型的例子就是 Unity 中只考虑重要程度最大的 4 个光源。 这个方案是ATI（著名显卡生产商，06年被AMD收购）发明的，已经应用于Ogre 2.1（开源的面向对象的3D引擎）。UE4（大名鼎鼎的虚幻引擎）正在针对VR研发前向着色，不知道是不是也是这个。 名词解释 Light Culling：剔除光照 渲染/游戏引擎调查 渲染引擎属于游戏引擎中的一部分，本章节主要简要整理一下找到的一些渲染引擎和游戏引擎，具体内在区别后续进一步深入了解的时候再整理补上。 ，后续的分析系列文章也会先以这些引擎来作为目标： 渲染引擎 bgfx 可实现2D以及文字绘制，3D渲染，光照等效果 可自动切换Metal等渲染驱动 OGRE 3D 老牌渲染引擎，除了渲染之外还包含动画系统和粒子系统
1.7K31发布于 2019-07-30 - 来自专栏开源心路
3D渲染引擎介绍
背景 专业处理视觉呈现的渲染库。 引擎列表 UE4游戏引擎-商业引擎（源码开源）-游戏引擎-C++及脚本 UE4, 开发语言C++和蓝图。UE4是3A游戏开发者引擎的首选，它以逼真的渲染效果著称。 UE4目前通过Cesium for Unreal组件，实现了游戏引擎和GIS引擎的跨界融合；总结一下UE4的特点: 画面效果好，3A游戏的首选。 总结一下Unity的特点: 能制作精美的3D游戏画面，和定制渲染管线，画面效果不如UE4。 能制作各种类型的3D游戏上线，每种类型的游戏都被商业项目验证过。 缺点 可视化和渲染效果不如游戏引擎，不过国内有一些厂家也定制了渲染管线，提升了渲染效果。
1.7K10编辑于 2023-06-30 - 来自专栏全栈程序员必看
流程引擎概念_虚幻引擎4
目录 一、流程定义 二、查询流程定义 三、ID与版本 四、挂起流程定义 五、流程实例 六、执行 七、活动实例 八、任务与任务定义 ---- 本部分说明了流程引擎的概念 一、流程定义 流程定义定义了流程的结构 Camunda BPM使用BPMN2.0作为主要的建模语言，可以将BPMN 2.0XML格式部署到流程引擎中。 流程引擎负责创建流程实例并管理状态。 六、执行 流程引擎在流程实例内部创建两个并发执行。 部署流程后，流程引擎会为流程中的每个活动创建任务定义，这将在运行时创建任务。
1.1K10编辑于 2022-11-01 - 来自专栏前端笔记本
鸿蒙 OpenHarmony 移植表格渲染引擎总结
- OpenHarmonySheet 渲染引擎是我们最终目标，虽然难度偏大，但我们团队成员决定分开三步来实现该目标，首先至少先学会使用基础组件和容器组件，然后再学会使用画布组件，最后综合这些经验实现一个渲染引擎 ，我们一开始考虑的是实现一个游戏引擎，但考虑到比赛剩余时间并不足够，并且游戏引擎的实用性和创意性不利于展现，所以经过我们团队综合考量，我们最终决定实现一个文档表格渲染引擎。 思考 可能有人疑问为什么会选择移植一个文档渲染引擎，这里想起外网知乎有过类似的讨论，中国要用多久才能研发出类似 Excel，且功能涵盖 Excel 95% 功能的替代软件？ "屏幕截图.png")] 为了提升渲染性能，提供更优质的编辑体验从 DOM 更换成 Canvas 渲染，方便开发者构建重前端大型在线文档项目，在国内外实现类似引擎的公司仅仅只有几家，如：腾讯文档，金山文档和谷歌文档等 ，降低性能损耗，优化渲染耗时，整个核心引擎代码控制在 1500 行左右，另补充演示代码 500 行，方便大家理解阅读和进行二次开发。
3.5K20编辑于 2022-03-24 - 来自专栏棒棒小飞人
使用velocity模板渲染引擎代码分析
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>上传压缩项目包</title> </head> <body> 提示：压缩包内请勿包含中文！
<form name="zipForm" id="zipForm"> <input type="text" id="file-name" name1K00发布于 2021-10-07来自专栏FlutterFlutter 渲染引擎详解 - iOS Metal 篇
Flutter 渲染引擎在 iOS 上支持三种渲染方式，分别是纯软件（CPU），Metal 和 GL。 这篇文章的主要内容是讲解在 iOS 上，Flutter 渲染引擎： 需要的 Metal GPU 上下文环境是如何完成初始化； 目标输出 Surface 的设置过程； 渲染流水线执行光栅化的调用过程。 上图显示了 Flutter 渲染引擎在 iOS 上主要涉及的对象，绿色背景是 iOS SDK 原生对象，黄色背景是平台相关的适配对象，白色背景是平台无关的通用对象。 break; } FML_CHECK(false); return nullptr; } PlatformViewIOS 一个主要的职责就是创建 IOSContext 对象，由它来为渲染引擎提供 光栅化输出 关于 Flutter 渲染流水线比较完整的说明请参考我之前的文章Flutter 渲染流水线浅析，在这里我们只关注光栅化的部分。
2.6K31发布于 2020-10-23来自专栏FlutterFlutter 渲染引擎详解 - iOS GL 篇
Flutter 渲染引擎在 iOS 上支持三种渲染方式，分别是纯软件（CPU），Metal 和 GL。 这篇文章的主要内容是讲解在 iOS 上，Flutter 渲染引擎： 需要的 GL GPU 上下文环境是如何完成初始化； 目标输出 Surface 的设置过程； 渲染流水线执行光栅化的调用过程。 上图显示了 Flutter 渲染引擎在 iOS 上主要涉及的对象，绿色背景是 iOS SDK 原生对象，黄色背景是平台相关的适配对象，白色背景是平台无关的通用对象。 break; } FML_CHECK(false); return nullptr; } PlatformViewIOS 一个主要的职责就是创建 IOSContext 对象，由它来为渲染引擎提供 光栅化输出 关于 Flutter 渲染流水线比较完整的说明请参考我之前的文章Flutter 渲染流水线浅析，在这里我们只关注光栅化的部分。
1.8K10发布于 2020-10-23来自专栏web前端渲染腾讯文档Doc Canvas渲染引擎流程改造
为了解决部分历史渲染问题，实现移动端canvas渲染的新功能，以及支持后续功能扩展，对腾讯文档Doc Canvas渲染引擎的流程进行了改造，本文对改造进行介绍和小结。1. 改造背景1.1. 实现新功能（移动端canvas引擎统一渲染）为了支持在移动端预览和PC端完全一致的文档内容（更完整排版、格式支持），需要在移动端通过canvas渲染引擎统一进行渲染；然而直接移植复用canvas渲染，原有渲染引擎在移动端存在性能问题 ：图片所以，为了解决上述问题，需要对原有canvas渲染引擎进行改造优化。 ，是造成移动端下canvas渲染引擎性能问题的罪魁祸首之一。 所以对canvas层级进行合并：图片文档主内容和overlay（高亮、底色、选区）全部合并到同一个canvas来进行渲染，不同内容层级可以统一管理，改造后，最终还原多个层级浮动文本框效果如下：图片4.
6.1K130编辑于 2022-11-22<% } %> </script> <!来自专栏kyle的专栏使用art-template模板引擎渲染数据
一：什么是art-template art-template 是一个简约、超快的模板引擎。 它采用作用域预声明的技术来优化模板渲染速度，从而获得接近 JavaScript 极限的运行性能，并且同时支持 NodeJS 和浏览器。 而用了模板引擎以后，我们只需要html文件中修改html内容。还有使用了模板引擎以后DOM操作的效率也会更高一点。 、Koa、Webpack 支持模板继承与子模板 浏览器版本仅 6KB 大小 三：art-template与其他模板引擎运行速度对比 ? <%= curr.price %></h4>
2.2K30发布于 2020-08-24 - 来自专栏Python小屋
Python+matplotlib调用LaTex引擎渲染公式
问题描述： 在图形中标题、坐标轴标签、图例、注解等不同位置渲染公式。 技术原理： 在渲染文本时，可以在字符串中使用一对$符号表示要使用Latex渲染，例如'abc$...
1.6K10发布于 2020-04-02 - 来自专栏Android知识点总结
【ZRender 渲染引擎 - 壹】 | 基础图形元素绘制
当我偶然知道 echarts 底层是由 ZRender 引擎渲染时，内心是非常激动的。无论是简单的统计图，还是复杂的雷达图、地图、关系图，本质上都是通过 ZRender 引擎渲染绘制的。 ZRender 和基础图形元素介绍 Flutter 中对于绘制封装了 Canvas、 Paint、Path 、Matrix4 等类型，并且有自身的 Animation 动画机制。 相比而言，Html 的绘制显得更加原始一些，面向过程的味道更浓，这也是封装一个绘制引擎的必要性。 通过 zrender.init 来关联 dom 节点进行初始化，获取渲染对象。如何创建绘制对象，添加到渲染对象中即可。 ({ shape: { cx: 50, cy: 50, r: 50, }, style: stokeStyle }) ---- 4.
3K21编辑于 2022-10-31 - 来自专栏前端开发随笔
NodeJs使用ejs模板引擎实现后端渲染
安装ejs npm install ejs 项目引入 const ejs = require('ejs') 目录文件 app.js const http = require('http');
2.1K20发布于 2020-09-02
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号