用html5进行硬件加速

想象一下，您要运行一个新网站。用户访问该网站可以了解最新最酷的工具和技术，从而通过动画、视频、音频和社交媒体的整合来创建自己神奇的多媒体网站。您的网站在 PC、移动设备、平板电脑甚至巨型屏幕电视机上都必须能提供快速的、高质量的用户体验，而不能出现怪异或者破碎的图形。

真正的不同之处在于，您的用户可以在您的网站上创建他们自己的多媒体项目。他们与社交网络上的朋友分享其“杰作”，从而把更多的人带到您的网站。任何人都可以从任何设备访问该项目，并对其作出贡献。您可以通过广告，或者在用户订阅带有更多项目分配空间的高级工具包时赚钱。

这个网站体验和这组特性不仅是可能的，而且它们是一个更大的 Web 和现在出现的计算体验的一部分。Web 开发人员使用“云”来创建这些虚拟的媒体游乐场，并充分利用极大的存储容量与低成本优势，把这些乐趣以流式传输下发给用户。如果用户有一个速度足够快的浏览器，可以从云上传输流媒体内容，他们将获得更好的多媒体体验。他们可以在任何地方访问它，包括台式机和笔记本电脑等尺寸较大的电脑，以及智能手机和平板电脑等便携设备。开发人员只需使用可缩放矢量图形 (SVG) 和 video/audio 等在多种浏览器与设备中都支持的 HTML5 标记来实现它。

云中的媒体

HTML5 为Web 上的多媒体带来了一组全新的可能性。使用简单的标记，云环境中的媒体就可以被直接访问并流式传输到浏览器，无需任何插件或特殊的播放器。

把媒体托管在云上的想法并不是什么新事务。它就是一个大型服务器场，互联网处理在上面发生——大量网站坐在服务器上等待请求。改变游戏规则的是，支持 HTML5 的浏览器与本机操作系统 (OS) 紧密配合，充分利用底层硬件的优势，为您的用户在访问云时获得速度更快的视频流体验。您只需使用 HTML5 <video> 和<audio> 并加上一些提示和技巧就能利用这种优势。用户查看和编辑他们的项目时，它留在云上，而不必把网站工具或项目文件植入客户端的计算机上（浏览器本身除外）。在云中所进行的升级和变更不需要在单独的客户端上进行，至少不会像已下载系统那样频繁。

可缩放的矢量图形：从巨幕到移动设备的性能

如果您的用户使用的计算机没有 GPU，您怎么办？HTML5 可缩放的矢量图形 (SVG) 是一种技术，当您拥有硬件加速功能时，该技术可以利用硬件加速的优势，当您没有硬件加速功能时，该技术也可以保持一个可接受的性能水平。顾名思义，一个 SVG 的矢量图形将把图形大小改变为在屏幕上最适合的大小。例如，您可以缩放同一个SVG 图形，使它适合于两英寸的智能手机屏幕，或是 17 英寸的 PC 屏幕，不会遇到怪异或扭曲的图像。使用 JavaScript 和级联样式表 3（Cascading Style Sheets 3，CSS3）选择器，设计人员可以创建样式表，然后选择（利用CSS3 选择器）不同的样式参数，按比例缩放以适合任何大小的屏幕或针对空间考虑大小调整。

例如，某图像可能在桌面浏览器上只占用水平方向的一半屏幕，但相同的比例却使得在移动设备上的页面显得很拥挤。CSS3 选择器会选择一种样式，使 SVG 文件缩小为只占用四分之一的移动设备屏幕。当然，查看者不会知道变化是代码运行的结果，她只是看到在不同设备上很有吸引力的网页。

很多艺术家将使用他们目前的工具（如 Adobe Illustrator）来创建 SVG 图形并使用 Bezier pen 动态创建画布图形。但是，您也可以预期将有大量新工具出现，让您可以通过代码在画布上渲染图形（CSS3、HTML5 和JavaScript）。鉴于在互联网上使用不同设备的不同“阶段”，灵活性是必不可少的。

结束语

Web 开发人员只需使用 HTML5 标记就可以利用硬件加速的优势以及可以通过多种设备访问数据的强大云环境。针对您的网站，使用像 SVG 这样的技术来优化包括台式机和笔记本电脑等尺寸较大的电脑，以及智能手机和平板电脑等更多便携设备上的体验。在这里了解关于硬件加速的更多信息。

用html5进行硬件加速相关推荐

Chrome/Chromium HTML5 video 视频播放硬件加速
Chromium站点上有个大致的框图.描写叙述了Chromium的video在各个平台 - 包含Android - 上是怎样使用硬件资源来做视频编解码加速的: 而依据Android Kitkat上的C ...
html5不支持硬件加速,CSS开启硬件加速来提高网站性能-HTML5综合
CSS开启硬件加速来提高网站性能-HTML5综合本文由文梅画史于 2016-1-28 5:09 发布在 HTML5综合在桌面端和移动端用CSS开启硬件加速 CSS animations, tr ...
GPU硬件加速的那些优秀的资源总结－续
renderlayerbacking如下: 注:renderlayerbacking负责管理renderlayer所需要的所有的后端存储,因为后端存储可能需要多个存储空间,在webkit中,存储空间使 ...
移动端性能陷进和硬件加速
减少或避免repaint,reflow 也可以理解为减少dom元素的操作页面重绘:颜色,字体发生一些变化就会触发浏览器 repaint,位置发生变化例如修改了top,就会触发浏览器reflow,re ...
关于硬件加速哪些优秀的资源总结
问题1:transform动画为什么没有经过大量的重绘? 解答:为什么 transform 没有触发 repaint 呢?(1)简而言之,transform 动画由GPU控制,支持硬件加速,并不需要软 ...
微软详解Windows 8图形硬件加速秒杀Win7
在最新的一篇博客中,微软介绍了Windows 8的硬件图形加速,除了支持更多的显卡,Windows 8实现了对所有应用程序的硬件图形加速. 为了提供更好的Windows和应用程序用户体验,微软在Win ...
【读书笔记】【WebKit技术内幕（三）】GPU硬件加速渲染、canvas与WebGL、 JavaScript与JavaScript 引擎、JavaScriptCore与V8
文章目录前言 Something great 第8章硬件加速机制硬件加速基础 -- *** Chromium的硬件加速机制 -- *** 其他硬件加速模块第9章 JavaScript引擎 Ja ...
WebRTC框架中的硬件加速
WebRTC框架中的硬件加速典型缓冲流量应用程序和单元测试设置重要方法调用 WebRTC软件包局限性 WebRTC是一个免费的开源项目,可为浏览器和移动应用程序提供实时通信功能. WebRTC ...
加速数据中心变革，Xilinx推出软件定义、硬件加速型 Alveo SmartNIC
近日,为满足现代数据中心发展需求,赛灵思公司宣布推出一系列全新数据中心产品及解决方案,包括全新 Alveo SmartNIC 系列.smart world (智能世界) AI 视频分析应用.一款能够实 ...

用html5进行硬件加速

用html5进行硬件加速相关推荐

最新文章

热门文章