那些事儿,最佳实践

Canvas 最佳实践(性能篇)

2016/02/23 · HTML5 · Canvas

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

图片 1

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

图片 2

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

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

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

HTML head 头标签

2016/02/24 · HTML5 · 1 评论 · 头标签

原文出处: paddingme   

HTML head 头部分的标签、元素有很多,涉及到浏览器对网页的渲染,SEO 等等,而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,这就造成了很多差异性。移动互联网时代,head 头部结构,移动端的 meta 元素,显得更为重要。了解每个标签的意义,写出满足自己需求的 head 头标签,是本文的目的。本篇以一丝的文章为基础,进行扩展总结介绍常用的 head 中各个标签、元素的意义以及使用场景。

JSON Schema 那些事儿:基本概念

2016/01/27 · HTML5 · JSON

原文出处: 淘宝前端团队(FED)- 邦彦   

图片 3

计算与渲染

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

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

图片 4

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

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

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

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

DOCTYPE

DOCTYPE(Document Type),该声明位于文档中最前面的位置,处于 html 标签之前,此标签告知浏览器文档使用哪种 HTML 或者 XHTML 规范。

DTD(Document Type Definition) 声明以 <!DOCTYPE> 开始,不区分大小写,前面没有任何内容,如果有其他内容(空格除外)会使浏览器在 IE 下开启怪异模式(quirks mode)渲染网页。公共 DTD,名称格式为注册//组织//类型 标签//语言,注册指组织是否由国际标准化组织(ISO)注册,+表示是,-表示不是。组织即组织名称,如:W3C。类型一般是 DTD。标签是指定公开文本描述,即对所引用的公开文本的唯一描述性名称,后面可附带版本号。最后语言是 DTD 语言的 ISO 639 语言标识符,如:EN 表示英文,ZH 表示中文。XHTML 1.0 可声明三种 DTD 类型。分别表示严格版本,过渡版本,以及基于框架的 HTML 文档。

  • HTML 4.01 strict
XHTML

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f4a3d4b690825595726-1">
1
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f4a3d4b690825595726-1" class="crayon-line">
 &lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot; &quot;http://www.w3.org/TR/html4/strict.dtd&quot;&gt;
</div>
</div></td>
</tr>
</tbody>
</table>
  • HTML 4.01 Transitional
XHTML

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"&gt;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f4a3d4b699456112895-1">
1
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f4a3d4b699456112895-1" class="crayon-line">
 &lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot; &quot;http://www.w3.org/TR/html4/loose.dtd&quot;&gt;
</div>
</div></td>
</tr>
</tbody>
</table>
  • HTML 4.01 Frameset
JavaScript

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd"&gt;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f4a3d4b69d342863431-1">
1
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f4a3d4b69d342863431-1" class="crayon-line">
&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Frameset//EN&quot; &quot;http://www.w3.org/TR/html4/frameset.dtd&quot;&gt;
</div>
</div></td>
</tr>
</tbody>
</table>
  • 最新 HTML5 推出更加简洁的书写,它向前向后兼容,推荐使用。
JavaScript

&lt;!doctype html&gt;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f4a3d4b6a1157483452-1">
1
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f4a3d4b6a1157483452-1" class="crayon-line">
&lt;!doctype html&gt;
</div>
</div></td>
</tr>
</tbody>
</table>

在 HTML中 doctype 有两个主要目的。

  • 对文档进行有效性验证。

    它告诉用户代理和校验器这个文档是按照什么 DTD 写的。这个动作是被动的,每次页面加载时,浏览器并不会下载 DTD 并检查合法性,只有当手动校验页面时才启用。

  • 决定浏览器的呈现模式

    对于实际操作,通知浏览器读取文档时用哪种解析算法。如果没有写,则浏览器则根据自身的规则对代码进行解析,可能会严重影响 html 排版布局。浏览器有三种方式解析 HTML 文档。 * 非怪异(标准)模式 * 怪异模式 * 部分怪异(近乎标准)模式 关于IE浏览器的文档模式,浏览器模式,严格模式,怪异模式,DOCTYPE 标签,可详细阅读模式?标准!的内容。

引子

在早期的淘宝 TMS 页面搭建系统中,为了解决页面模板和数据的分离问题,机智的先知们扩充了一系列灵活的 PHP 标签函数,得以将数据的定义从模板视图中解耦出来。以其中一个最为常用的函数为例:

JavaScript

_tms_custom('{"name":"TextLinks","title":"文字链接","group":"文字链接","row":"10","defaultRow":"5","fields":"text:文字:string,href:链接地址(URL):href"}');

1
_tms_custom('{"name":"TextLinks","title":"文字链接","group":"文字链接","row":"10","defaultRow":"5","fields":"text:文字:string,href:链接地址(URL):href"}');

当调用 _tms_custom(...) 函数并传入指定格式的 JSON 参数,交由翻译引擎处理后,会构建出这样的编辑表单:

图片 5

而通过编辑表单录入的数据,最终会在页面中以 PHP 数组的形式填充和占位:

JavaScript

array(5) { [0]=> array(2) { ["text"]=> string(6) "淘宝网" ["href"]=> string(22) "" }, ... }

1
2
3
4
5
6
7
8
9
10
array(5) {
[0]=>
array(2) {
["text"]=>
string(6) "淘宝网"
["href"]=>
string(22) "http://www.taobao.com/"
},
...
}

从标签函数到数据对象的运转流程,可以用一张图简单予以概括:

图片 6

这种模板和数据分离的方式,在早些年那是相当先进的。它用简单的语法,描述了模板所需的数据格式,还可以根据标签定义,直接构造出模拟数据,方便在开发阶段使用 “标签 + 模拟数据” 的方式调试页面。

描述数据格式构造模拟数据 的角度,这和我们要谈的 JSON Schema 不谋而合。我们用 JSON 格式来重写数据对象,应该是酱紫的:

JavaScript

[ { "text": "淘宝网", "href": "" }, ... ]

1
2
3
4
5
6
7
[
{
    "text": "淘宝网",
    "href": "http://www.taobao.com/"
},
...
]

如果用 JSON Schema 语法描述这份数据,可以完全替代标签函数的方案。这也正是淘宝 TMS 页面搭建系统在数据这块的演化过程:即从使用标签函数定义数据的方式,转变为使用 JSON Schema 描述数据。

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);

图片 7

说到这里,和性能貌似还扯不上什么关系。那我现在就要告诉你,对 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 状态改变的频率。

charset

声明文档使用的字符编码,

XHTML

<meta charset="utf-8">

1
<meta charset="utf-8">

html5 之前网页中会这样写:

XHTML

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

1
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

这两个是等效的,具体可移步阅读:<meta charset='utf-8'> vs <meta http-equiv='Content-Type'>,所以建议使用较短的,易于记忆。

什么是 Schema?

当我们在描述 文字链接 的时候,需要约定数据的组织方式,比如,需要知道有哪些字段,这些字段的取值如何表示等,这就是 JSON Schema 的来源。

我们以 文字链接 为例,它对应的 JSON Schema 大概如此:

JavaScript

{ "type": "object", "properties": { "text": { "type": "string", "title": "文字" }, "href": { "type": "string", "title": "链接地址(URL)" } } }

1
2
3
4
5
6
7
8
9
10
11
12
13
{
"type": "object",
"properties": {
"text": {
"type": "string",
"title": "文字"
},
"href": {
"type": "string",
"title": "链接地址(URL)"
}
}
}

JSON Schema 定义了如何基于 JSON 格式描述 JSON 数据结构的规范,进而提供数据校验、文档生成和接口数据交互控制等一系列能力。它的特性和用途,可以大致归纳为以下几点:

分层 Canvas

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

图片 8

分层 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 中的内容。

lang属性

简体中文

XHTML

<html lang="zh-cmn-Hans">

1
<html lang="zh-cmn-Hans">

繁体中文

XHTML

<html lang="zh-cmn-Hant">

1
<html lang="zh-cmn-Hant">

为什么 lang="zh-cmn-Hans" 而不是我们通常写的 lang="zh-CN" 呢,请移步阅读: 页头部的声明应该是用 lang=”zh” 还是 lang=”zh-cn”。

1. 用于描述数据结构

在描述 JSON 数据时,如果数据本身的复杂度很高,高到三维四维,普通的标签函数已经无法表示这种层级结构了,而 JSON Schema 利用 objectarray 字段类型的反复嵌套,可以规避掉这个缺陷。

当然,除了键值等基本信息,规范层面还提供了丰富的关键词支持,如果想通过自定义扩展字段,解决特定场景的业务需求,也是非常方便的。

绘制图像

目前,Canvas 中使用到最多的 API,非 drawImage 莫属了。(当然也有例外,你如果要用 Canvas 写图表,自然是半句也不会用到了)。

drawImage 方法的格式如下所示:

JavaScript

context.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

1
context.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

图片 9

优先使用 IE 最新版本和 Chrome

XHTML

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

1
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

2. 用于构建人机可读的文档

计算机领域有个概念叫做自描述。所谓自描述,可以理解为:文档本身包含了自身与其他文档交互相关的描述信息,不需要其他的配置文件或者额外信息来描述。

而 JSON Schema 就是自描述的,它本身就是一份很完善的说明文档,字段的含义说明、该如何取值、格式的要求等都清晰明了。

本文由澳门新葡亰平台官网发布于web前端,转载请注明出处:那些事儿,最佳实践

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。