목차
回复内容:
웹 프론트엔드 H5 튜토리얼 canvas在浏览器里的渲染原理?

canvas在浏览器里的渲染原理?

Jun 07, 2016 am 08:45 AM
canvas html5 runtime

为什么canvas在浏览器里表现和原生差得太远呢?
为什么cocos2d和egret等html5游戏引擎商家在浏览器里加上runtime就可以让html5游戏性能提升那么高呢?
为什么原生浏览器和PC浏览器不提供类似的功能呢?

回复内容:

泻药

问题1:
原生调用绘图API只跟自己系统的相关API打交道
浏览器的Canvas要保持跨平台兼容性
起码要适配(编译适配)到一个或几个通用图形(字体)封装库上
并不一定能直接跟当前系统的绘制(字体)API打交道
这就一层封装消耗了
再为了把这层封装暴露成JS API
又要包一层
而 JS 运行效率大部分情况赶不上native
导致第三层消耗
所以
相对的 canvas 要慢些

问题2:
cocos2d和egret等并不是在浏览器上加runtime
而是直接使用对应系统的API进行封装以及调用优化
肯定比 canvas 要快
而 cocos2d-html5 这种
在浏览器环境内使用js封装的库来说
它最终用的还是canvas
所谓效率高
只是你写的东西
在使用canvas时
没有做到比他们更优化
(全局重绘还是局部重绘,绘制数据cache diff 等)

问题3:
浏览器只是平台性质的
不面向其下特定细分环境
如同操作系统一样承载软件运行
所以他们都只会提供基础(低级)API
不会提供用户级的高级API
因为用户级API与实际应用场景相关性太强
canvas 就是基础
touchxxx 事件等也是基础
想要用好得自己根据业务情况再次封装
如果提供了游戏引擎这种细分领域封装
那就成了游戏机系统 其实主要不是因为canvas性能低,手机设备碎片化严重,早期的手机硬件配置低内置的浏览器对html5的支持不好,导致一个应用开发出来在各个设备上表现不一致。


比如iPhone4只支持elementAudio,而iPhone6就可以用webAudio。

有时候在原生浏览器能流畅运行但是到微信中就卡,是因为微信本身占用了大量系统资源,分配给浏览器的资源不够用了。

runtime其实就是给各机型内置了一套统一的运行环境再对引擎有针对性的做一些优化来保障运行的。

语言表达有点弱,不当之处请谅解。
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

HTML의 테이블 테두리 HTML의 테이블 테두리 Sep 04, 2024 pm 04:49 PM

HTML의 테이블 테두리 안내. 여기에서는 HTML의 테이블 테두리 예제를 사용하여 테이블 테두리를 정의하는 여러 가지 방법을 논의합니다.

HTML의 중첩 테이블 HTML의 중첩 테이블 Sep 04, 2024 pm 04:49 PM

HTML의 Nested Table에 대한 안내입니다. 여기에서는 각 예와 함께 테이블 내에 테이블을 만드는 방법을 설명합니다.

HTML 여백-왼쪽 HTML 여백-왼쪽 Sep 04, 2024 pm 04:48 PM

HTML 여백-왼쪽 안내. 여기에서는 HTML margin-left에 대한 간략한 개요와 코드 구현과 함께 예제를 논의합니다.

HTML 테이블 레이아웃 HTML 테이블 레이아웃 Sep 04, 2024 pm 04:54 PM

HTML 테이블 레이아웃 안내. 여기에서는 HTML 테이블 레이아웃의 값에 대해 예제 및 출력 n 세부 사항과 함께 논의합니다.

HTML 정렬 목록 HTML 정렬 목록 Sep 04, 2024 pm 04:43 PM

HTML 순서 목록에 대한 안내입니다. 여기서는 HTML Ordered 목록 및 유형에 대한 소개와 각각의 예에 대해서도 설명합니다.

HTML에서 텍스트 이동 HTML에서 텍스트 이동 Sep 04, 2024 pm 04:45 PM

HTML에서 텍스트 이동 안내. 여기서는 Marquee 태그가 구문과 함께 작동하는 방식과 구현할 예제에 대해 소개합니다.

HTML 입력 자리 표시자 HTML 입력 자리 표시자 Sep 04, 2024 pm 04:54 PM

HTML 입력 자리 표시자 안내. 여기서는 코드 및 출력과 함께 HTML 입력 자리 표시자의 예를 논의합니다.

HTML 온클릭 버튼 HTML 온클릭 버튼 Sep 04, 2024 pm 04:49 PM

HTML onclick 버튼에 대한 안내입니다. 여기에서는 각각의 소개, 작업, 예제 및 다양한 이벤트의 onclick 이벤트에 대해 설명합니다.

See all articles