金沙国际官网_金沙国际平台登录

因为这个金沙国际官网_金沙国际平台登录网站与很多的大型澳门赌场都有合作,金沙国际官网_金沙国际平台登录尽职尽责,高效执行,保持好奇心,不断学习,追求卓越,点击进入金沙国际官网_金沙国际平台登录马上体验吧,所以现在也正式地开始了营业。

您的位置:金沙国际官网 > web前端 > 8款浏览器对HTML5支持评测,有关HTML5需要注意的

8款浏览器对HTML5支持评测,有关HTML5需要注意的

发布时间:2019-11-03 23:07编辑:web前端浏览(105)

    8款浏览器对HTML5支持评测

    2011/12/17 · HTML5 · 来源: Intel blog     · HTML5

    来源:Intel blog

    HTML的上一个版本诞生于1999年,从那以后,Web世界就发生了巨变,而现在的HTML5炒得火热朝天,势头之猛犹有再次创造Web历史变革的趋 势。HTML5仍处于完善之中,然而,现在大部分浏览器已经开始具备对HTML5的支持了,当然,各大浏览器的开发还在继续,将来应该会全面支持 HTML5的,现在我选择了8款浏览器(中外各四款),对其支持HTML5的程度进行了测试,测试内容来自html5test网站。感兴趣的人可以去测试一下!!

    当然每个浏览器的好坏不是仅凭这个就可以定义的,并且即使浏览器的功能再强大,界面再漂亮,也不一定就是你心目中最好的浏览器,因为我觉得浏览器的使用涉 及到一个习惯问题,用习惯了自然就觉得好了,根本不会去考虑它功能是否强大。另外现实生活中我们使用浏览器,虽然其功能十分强大,十分完善,但是并不是每 个人都能完全用到所有功能的。

    所以,我做这个测试是没有感情色彩的,只是测试哈!!!至于哪个浏览器好,哪个浏览器差,各位看官自己点评吧!!

    我测试的8款浏览器分别是(国外)Chrome 15.0.874,IE 9.0.8112,Firefox 8.0.1,Opera 11.52

    (国内)360浏览器 4.0.3.8,搜狗浏览器 3.1.0.3688,遨游浏览器v3.2.2.1000,QQ浏览器 6.8(10793)

    这8款浏览器不出意外应该都是现在的最新版本!!!

    首先贴上我的硬件(QQ管家测的):

    图片 1

    现在来看看8款浏览器的总分(顺序就是我上边列的顺序哈,不代表排名顺序):

    1。Chrome

    图片 2

    2。IE 9

    图片 3

    3。Firefox

    图片 4

    4。Opera (我看到别人测的是Opera12的分数为325,我是昨天从Opera官网下的啊,怎么会不是最新版的???)

    图片 5

    5。360浏览器

    图片 6

    6。搜狗浏览器

    图片 7

    7。遨游浏览器

    图片 8

    8。QQ浏览器

    图片 9

    这么看来还是Chrome小胜啊!嗯,搜狗浏览器在对HTML5的支持上也很给力的!QQ浏览器有点没跟上节奏啊!!!!

    下面让我们详细看看这8种浏览器对HTML5的支持情况:

    图片 10

    图片 11

    图片 12

    图片 13

    OK!大概就是这样了,还是Chrome对HTML5支持的好一些,虽然国外的浏览器都大部分支持了HTML5,但国内的浏览器也不甘落后啊,搜狗和遨游还是很给力的!

    HTML5还在发展完善,我相信在不久的将来,各个浏览器都会全面支持HTML5的。让我们静观其变吧!!

    赞 收藏 评论

    图片 14

    Canvas 最佳实践(性能篇)

    2016/02/23 · HTML5 · Canvas

    原文出处: 淘宝前端团队(FED)- 叶斋   

    图片 15

    Canvas 想必前端同学们都不陌生,它是 HTML5 新增的「画布」元素,允许我们使用 JavaScript 来绘制图形。目前,所有的主流浏览器都支持 Canvas。

    图片 16

    Canvas 最常见的用途是渲染动画。渲染动画的基本原理,无非是反复地擦除和重绘。为了动画的流畅,留给我渲染一帧的时间,只有短短的 16ms。在这 16ms 中,我不仅需要处理一些游戏逻辑,计算每个对象的位置、状态,还需要把它们都画出来。如果消耗的时间稍稍多了一些,用户就会感受到「卡顿」。所以,在编写动画(和游戏)的时候,我无时无刻不担忧着动画的性能,唯恐对某个 API 的调用过于频繁,导致渲染的耗时延长。

    为此,我做了一些实验,查阅了一些资料,整理了平时使用 Canvas 的若干心得体会,总结出这一片所谓的「最佳实践」。如果你和我有类似的困扰,希望本文对你有一些价值。

    本文仅讨论 Canvas 2D 相关问题。

    有关HTML5需要注意的5件事

    2011/10/22 · HTML5 · 来源: 36kr     · HTML5

    HTML5的到来将第五代网络语言带入了多媒体的世界。尽管HTML5的启动并没有多轰轰烈烈,但是在过去6个月还是有不少的软件开发者开始应用HTML5。然而,在选择HTML5时,有一些基本注意事项大家还是需要了解的。

    1. 它新并不表示它安全

    网络应用开发工程师们在学习新技术的同时需要时刻记住网络安全。HTML5所购建的网页和其他语言编写的网页一样容易泄露一些敏感数据。欧洲网络信息安全机构(European Network and Information Security Agency,ENISA)已经警告说HTML5可能并不够安全。

    2. 它可能会消灭Flash,但不是现在

    许多业内人士表示,HTML将会最终代替多媒体框架,如Adobe的Flash,但是短期看来还不是现在。HTML5估计到2014年才能逐步成熟,而且将现有应用Flash的网络开发完全转向HTML5还需要一段时间。尽管HTML5提出了许多优点,但是还可能有某些应用更适合于更灵活的框架。现在,一些主流的大公司都逐步转向使用HTML5,但是这个转变的过程也不是一蹴而就的。

    3. 它将会变得很移动化

    现在几乎所有人都热衷于开发独立的移动应用,但是HTML5很可能会是独立移动应用的终结者。由于HTML5将应用的功能直接加入其内核,这很可能引导移动技术潮流重新回到浏览器时代。HTML5允许开发者在(移动)浏览器内开发应用,所以如果你正在制定一项桌面或者移动应用的长期发展策略,你可能需要考虑这一点。

    4. 它承诺带来一个无缝的网络

    HTML5会带来一个统一的网络,无论是笔记本,台式机,还是智能手机都应该很方便的浏览基于HTML5的网站。因此在设计网站的时候,开发者需要重新考虑用户体验,网站浏览,网站结构等因素使得这个网站对任何硬件设备都通用。

    5. 它会变成企业的SaaS平台

    一些重量级的企业,如微软,Salesforce,SAP Sybase正在开发HTML5的开发工具。如果你正在构建企业应用,很可能不久的将来你就要用到HTML5。所以当构建公司的SaaS战略迁移的时候也不要忘记HTML5。

     

    赞 收藏 评论

    图片 17

    计算与渲染

    把动画的一帧渲染出来,需要经过以下步骤:

    1. 计算:处理游戏逻辑,计算每个对象的状态,不涉及 DOM 操作(当然也包含对 Canvas 上下文的操作)。
    2. 渲染:真正把对象绘制出来。
      2.1. JavaScript 调用 DOM API(包括 Canvas API)以进行渲染。
      2.2. 浏览器(通常是另一个渲染线程)把渲染后的结果呈现在屏幕上的过程。

    图片 18

    之前曾说过,留给我们渲染每一帧的时间只有 16ms。然而,其实我们所做的只是上述的步骤中的 1 和 2.1,而步骤 2.2 则是浏览器在另一个线程(至少几乎所有现代浏览器是这样的)里完成的。动画流畅的真实前提是,以上所有工作都在 16ms 中完成,所以 JavaScript 层面消耗的时间最好控制在 10ms 以内。

    虽然我们知道,通常情况下,渲染比计算的开销大很多(3~4 个量级)。除非我们用到了一些时间复杂度很高的算法(这一点在本文最后一节讨论),计算环节的优化没有必要深究。

    我们需要深入研究的,是如何优化渲染的性能。而优化渲染性能的总体思路很简单,归纳为以下几点:

    1. 在每一帧中,尽可能减少调用渲染相关 API 的次数(通常是以计算的复杂化为代价的)。
    2. 在每一帧中,尽可能调用那些渲染开销较低的 API。
    3. 在每一帧中,尽可能以「导致渲染开销较低」的方式调用渲染相关 API。

    Canvas 上下文是状态机

    Canvas API 都在其上下文对象 context 上调用。

    JavaScript

    var context = canvasElement.getContext('2d');

    1
    var context = canvasElement.getContext('2d');

    我们需要知道的第一件事就是,context 是一个状态机。你可以改变 context 的若干状态,而几乎所有的渲染操作,最终的效果与 context 本身的状态有关系。比如,调用 strokeRect 绘制的矩形边框,边框宽度取决于 context 的状态 lineWidth,而后者是之前设置的。

    JavaScript

    context.lineWidth = 5; context.strokeColor = 'rgba(1, 0.5, 0.5, 1)'; context.strokeRect(100, 100, 80, 80);

    1
    2
    3
    4
    context.lineWidth = 5;
    context.strokeColor = 'rgba(1, 0.5, 0.5, 1)';
     
    context.strokeRect(100, 100, 80, 80);

    图片 19

    说到这里,和性能貌似还扯不上什么关系。那我现在就要告诉你,对 context.lineWidth 赋值的开销远远大于对一个普通对象赋值的开销,你会作如何感想。

    当然,这很容易理解。Canvas 上下文不是一个普通的对象,当你调用了 context.lineWidth = 5 时,浏览器会需要立刻地做一些事情,这样你下次调用诸如 strokestrokeRect 等 API 时,画出来的线就正好是 5 个像素宽了(不难想象,这也是一种优化,否则,这些事情就要等到下次 stroke 之前做,更加会影响性能)。

    我尝试执行以下赋值操作 106 次,得到的结果是:对一个普通对象的属性赋值只消耗了 3ms,而对 context 的属性赋值则消耗了 40ms。值得注意的是,如果你赋的值是非法的,浏览器还需要一些额外时间来处理非法输入,正如第三/四种情形所示,消耗了 140ms 甚至更多。

    JavaScript

    somePlainObject.lineWidth = 5; // 3ms (10^6 times) context.lineWidth = 5; // 40ms context.lineWidth = 'Hello World!'; // 140ms context.lineWidth = {}; // 600ms

    1
    2
    3
    4
    somePlainObject.lineWidth = 5;  // 3ms (10^6 times)
    context.lineWidth = 5;  // 40ms
    context.lineWidth = 'Hello World!'; // 140ms
    context.lineWidth = {}; // 600ms

    context 而言,对不同属性的赋值开销也是不同的。lineWidth 只是开销较小的一类。下面整理了为 context 的一些其他的属性赋值的开销,如下所示。

    属性 开销 开销(非法赋值)
    line[Width/Join/Cap] 40+ 100+
    [fill/stroke]Style 100+ 200+
    font 1000+ 1000+
    text[Align/Baseline] 60+ 100+
    shadow[Blur/OffsetX] 40+ 100+
    shadowColor 280+ 400+

    与真正的绘制操作相比,改变 context 状态的开销已经算比较小了,毕竟我们还没有真正开始绘制操作。我们需要了解,改变 context 的属性并非是完全无代价的。我们可以通过适当地安排调用绘图 API 的顺序,降低 context 状态改变的频率。

    分层 Canvas

    分层 Canvas 在几乎任何动画区域较大,动画较复杂的情形下都是非常有必要的。分层 Canvas 能够大大降低完全不必要的渲染性能开销。分层渲染的思想被广泛用于图形相关的领域:从古老的皮影戏、套色印刷术,到现代电影/游戏工业,虚拟现实领域,等等。而分层 Canvas 只是分层渲染思想在 Canvas 动画上最最基本的应用而已。

    图片 20

    分层 Canvas 的出发点是,动画中的每种元素(层),对渲染和动画的要求是不一样的。对很多游戏而言,主要角色变化的频率和幅度是很大的(他们通常都是走来走去,打打杀杀的),而背景变化的频率或幅度则相对较小(基本不变,或者缓慢变化,或者仅在某些时机变化)。很明显,我们需要很频繁地更新和重绘人物,但是对于背景,我们也许只需要绘制一次,也许只需要每隔 200ms 才重绘一次,绝对没有必要每 16ms 就重绘一次。

    对于 Canvas 而言,能够在每层 Canvas 上保持不同的重绘频率已经是最大的好处了。然而,分层思想所解决的问题远不止如此。

    使用上,分层 Canvas 也很简单。我们需要做的,仅仅是生成多个 Canvas 实例,把它们重叠放置,每个 Canvas 使用不同的 z-index 来定义堆叠的次序。然后仅在需要绘制该层的时候(也许是「永不」)进行重绘。

    JavaScript

    var contextBackground = canvasBackground.getContext('2d'); var contextForeground = canvasForeground.getContext('2d'); function render(){ drawForeground(contextForeground); if(needUpdateBackground){ drawBackground(contextBackground); } requestAnimationFrame(render); }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    var contextBackground = canvasBackground.getContext('2d');
    var contextForeground = canvasForeground.getContext('2d');
     
    function render(){
      drawForeground(contextForeground);
      if(needUpdateBackground){
        drawBackground(contextBackground);
      }
      requestAnimationFrame(render);
    }

    记住,堆叠在上方的 Canvas 中的内容会覆盖住下方 Canvas 中的内容。

    本文由金沙国际官网发布于web前端,转载请注明出处:8款浏览器对HTML5支持评测,有关HTML5需要注意的

    关键词:

上一篇:没有了

下一篇:没有了