目次
回复内容:

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ヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

HTMLの表の境界線 HTMLの表の境界線 Sep 04, 2024 pm 04:49 PM

HTML の表の境界線に関するガイド。ここでは、HTML でのテーブルの境界線の例を示しながら、テーブル境界線を定義する複数の方法について説明します。

HTML 左マージン HTML 左マージン Sep 04, 2024 pm 04:48 PM

HTML マージン左のガイド。ここでは、HTML margin-left の概要とその例、およびそのコード実装について説明します。

HTML のネストされたテーブル HTML のネストされたテーブル Sep 04, 2024 pm 04:49 PM

これは、HTML でのネストされたテーブルのガイドです。ここでは、テーブル内にテーブルを作成する方法をそれぞれの例とともに説明します。

HTML テーブルのレイアウト HTML テーブルのレイアウト Sep 04, 2024 pm 04:54 PM

HTML テーブル レイアウトのガイド。ここでは、HTML テーブル レイアウトの値と例および出力について詳しく説明します。

HTML入力プレースホルダー HTML入力プレースホルダー Sep 04, 2024 pm 04:54 PM

HTML 入力プレースホルダーのガイド。ここでは、コードと出力とともに HTML 入力プレースホルダーの例について説明します。

HTML 順序付きリスト HTML 順序付きリスト Sep 04, 2024 pm 04:43 PM

HTML 順序付きリストのガイド。ここでは、HTML 順序付きリストと型の導入とその例についても説明します。

HTML 内のテキストの移動 HTML 内のテキストの移動 Sep 04, 2024 pm 04:45 PM

HTML でのテキストの移動に関するガイド。ここでは、概要、マーキー タグが構文でどのように機能するか、および実装例について説明します。

HTML の onclick ボタン HTML の onclick ボタン Sep 04, 2024 pm 04:49 PM

HTML オンクリック ボタンのガイド。ここでは、それらの紹介、動作、例、およびさまざまなイベントでの onclick イベントについてそれぞれ説明します。

See all articles