理解SVG transform坐标变换

2015/10/11 · HTML5 ·
SVG

原文出处:
张鑫旭   

推荐10个HTML5游戏网站

2011/07/24 · HTML5 ·
HTML5

导读:原文作者Julio
Rivera是一名来自纽约市的创意总监和网页设计师,他是Underworld
Magazines的创始人。以下是全文。

到现在为止,我玩了好几年的在线游戏。我已经看过用Flash和其他软件制作游戏,目前是在用HTML5做游戏,只看到一个完整用CSS3做的游戏。

HTML5正在慢慢成为新的Flash,以前在Flash上很酷的东东,如拖放和下载条等,现在已可以用HTML5做到了。
HTML5的一个很好的资源,Github是一个不错的HTML5社交编程网站。在本文,我推荐10个HTML5的游戏网站,很多游戏开发商正在用HTML5开发新游戏。(相关阅读:2011年最经典的15个
HTML5游戏)

0. html5games.com

图片 1

1. html5games.net

图片 2

图片 3
2. canvasdemos.com

图片 4

3. rocketpack.fi

图片 5

图片 6
4. impactjs.com

图片 7

5. canvasrider.com

图片 8

6. freeciv.net

图片 9

7. gamesforlanguage.com

图片 10

8. yoyogames.com

图片 11

9. mozillalabs.com

图片 12

原文:Julio A
Rivera  译文:敏捷翻译
关关

如需转载,但请注明原文/译文出处、译文超链接和译者等信息,否则视为侵权,谢谢合作!

赞 收藏
评论

图片 13

页面白屏与瀑布流分析方法

2015/12/03 · HTML5,
JavaScript · 1
评论 ·
瀑布流,
白屏

原文出处: 淘宝前端团队(FED)-
妙净   

图片 14

无线页面的开发在我们的日常工作中越来越重要,无线的性能也是我们需要重点关注的,而加载的性能又是无线性能中的一个重要问题。那么,今天我们一起来看下如何去评估、测试无线页面的加载性能。

为了方便分析页面的加载过程,这里将网络设置成最慢的
GPRS,并将加载过程录制下来,通常你可以通过 Chrome 自带的 timeline, 勾选
screenhot,可以得到详尽的过程,如下图:

图片 15

这里为了和请求一一清晰对照,用额外录屏工具( licecap
)录制下来。下文以淘宝双 11 男装分会场的预发页面作为测试,录制 结果
gif
如下,录制的 FPS 为 8。

帧分析如下:

第一帧:重新刷新页面,发起 HTML 请求,中间完整页面是刷新前的,请无视之。

图片 16

终于等到第 7 帧,HTML 加载并解析完成,发出页面中的请求,同时 CSS/JS
的地址都收敛在 //g.alicdn.com 同一个域名下, Chrome 下 HTTP 1.1
协议下一个域名下支持 6 个并发。

1 年前,PC 上以前还有多个域名分区(img01-04.tbcdn.cn),PC
上首屏图片多,这样可并发更多,但更多的域名引入,也加大了域名解析的成本,权衡之下淘宝之前图片域名选择了
4 个;后来集团经过轰轰烈烈的 HTTPS 改造,图片推荐收敛到 gw.alicdn.com
;手淘下现在使用 SPDY + HTTPS,相比 HTTP 1.1 ,更安全且可以多路复用。

图片 17

到第 20 帧, CSS 下载完,DOM 和
CSSOM
都准备 OK 了,页面则开始渲染了;这是在 Chrome 下面看到的情况,但在 iOS
上并非如此,它需要 JS 加载并执行完才渲染页面。

图片 18

第 21 帧,紧接着,CSS 中的背景图开始相继渲染,可见 CSS
中渲染图片也是有点耗时的。

图片 19

第 23 帧,前面并行下载的 JS 都下载完,也开始执行了,看“疯狂 top 榜”是 JS
抽取出来的。同时 aplus 请求也开始请求,这是个 getScript
的异步请求,可见异步请求真没有阻塞页面的渲染。

图片 20

第 25 帧,JS 还在继续执行,第一张图片是 JS 根据当前
dpr、强弱网络、设备宽度等算出最适合的图片开始加载这张大 banner
了,并且开始发送数据请求了。

图片 21

到 27 帧,终于数据请求回来了,并且把文字和图片渲染到页面上了。

图片 22

然后下一帧 28,开始请求商品图片了。

图片 23

到 45 帧,6 个图片都在并发请求,同上 gw.alicdn.com 同一个域下并发 6
个请求。但首屏除了大图外只有 4 张图(2 张商家 logo 被底部 bar
挡住了),这里发出了 6 个图片请求,可见这个页面的懒加载的 buffer
值可以设置得更小。

图片 24

从 28 帧到 50 帧,经历了很长的时间,第一张图片终于显示出来了。另外看到
aplus_v2 执行完后,又发起了 spm 等请求,后面 3 个请求(
aplus-proxy.html/isproxy.js/m.gif )还是串行的。

图片 25

最后到第 61 帧,终于所有的图片都加载完了,最后看下,最后下载完的是大
banner 图,因为有 46.9k ,这张图的大小可能成为此页面的 load
时间的关键;如果这张图没有这么大,最后下载完的可能是用于埋点的 m.gif。

图片 26

从上面整个请求的瀑布流分析下来,我们来回顾下页面的关键时间点:

一、HTML transform和SVG transform

SVG中自带transform属性,没错,是属性,例如:

JavaScript

<svg width=”200″ height=”150″> <rect x=”30″ y=”30″ width=”120″
height=”90″ transform=”rotate(45)”></rect> </svg>

1
2
3
<svg width="200" height="150">
    <rect x="30" y="30" width="120" height="90" transform="rotate(45)"></rect>
</svg>

普通的HTML元素没有transform属性,但是支持CSS3的transform,
好奇的小伙伴可能会疑问了,CSS3中的transform变换,跟SVG中的transform是什么关系呢?

恩,有点类似于谢霆锋和陈冠希之间的关系,有些小复杂。

图片 27

OK, 先说说相似之处吧。
一些基本的变换类型是一样的,包括:位移translate, 旋转rotate,
缩放scale, 斜切skew以及直接矩阵matrix.
但只局限于2D层面的变换。SVG似乎只支持二维变换(若有不对,欢迎指正),且类似translateXrotateX也都是不支持的。

下面就是不一样的地方了:
1. CSS3 transform一般用在普通元素上,虽然也可以应用在SVG元素上,但是IE浏览器(IE
edge未测试)却不支持SVG元素;

JavaScript

rect { /* IE说:你这是弄啥来? */ transform:rotate(45deg); }

1
2
3
4
rect {
    /* IE说:你这是弄啥来? */
    transform:rotate(45deg);
}

2. HTML元素的CSS3 transform和SVG的transform坐标系统大相径庭;

平常我们使用transform其坐标是相对于当前元素而言的,默认是元素的中心点变换,我们可以通过transform-origin属性改变变换的中心点。而SVG中的transform的坐标变换的是相对于画布的左上角计算的,跟HTML的transform差别较大,理解上也更加麻烦。而本文就是彻底理清SVG中的transform到底是怎么工作的。

3. 具体的语法细节有差异。SVG transform属性语法有些自带偏移。而CSS transform则更加纯粹些。

//zxx: 据说CSS的transform和SVG的transform属性即将合并。

页面可见时间

在第 20 帧页面可见,CSS 完成之后,当然前提是这里没有外链 JS
在页面中间因为网络请求严重阻塞页面。这里分析的仅仅是 Chrome
浏览器,不是真机,在 iOS 上,就算 JS 在底部,直接 <script src=”xx”> 也是会阻塞页面。可以通过加
async 属性,通知渲染引擎这是不影响页面渲染的 JS,可以异步加载,iOS
下添加此属性可实现和 Android 或 PC Chrome 一样的效果。

二、SVG transform translate位移

我们先来看下最简单最基本的translate位移变换,例如,我们偏移(295,115)大小的位置,HTML元素的偏移(下图左)和SVG元素的偏移(下图右)就会不一样。一个是相对自己的中心点(下图左),一个是SVG的左上角(下图右)。

图片 28

虽然两者的相对位置不一样,但是,对于单纯地位移来讲,无论你相对于那个点位置,实际偏移的位置都是一样的,因此,从表现上讲,两者最终的位置看上去还是一样的。

您可以狠狠地点击这里:HTML translate和SVG
translate比对demo

图片 29

前面我们提到过,SVG元素也能使用CSS3的transform进行变换(非IE浏览器),但是只能支持2D层面的几个属性,例如translateX(tx),translateY(ty)以及translate(tx[, ty])translateZ(tz)则并不支持。

如果我们使用SVG元素自带的transform属性进行变换,则仅支持translate(tx[ ty])这种用法(缺省使用0代替),当多个参数值的时候,可以使用逗号,或者直接空格分隔,但是不能包含单位,例如下面这种写法直接翘辫子:

CSS

transform=”translate(30px 12px)”

1
transform="translate(30px 12px)"

下面这种无单位写法才可以:

CSS

transform=”translate(30 12)” transform=”translate(30, 12)”

1
2
transform="translate(30 12)"        
transform="translate(30, 12)"

另外,和CSS3的transform一样,SVG中的translate位移也是支持多声明累加的。例如:

CSS

transform=”translate(30 12) translate(30 12)”

1
transform="translate(30 12) translate(30 12)"

等同于:

CSS

transform=”translate(60 24)”

1
transform="translate(60 24)"

需要注意的是,俩个translate中间不要混有其他的transform变换。否则,最终的位移就不是简单的相加了。

重要内容可见时间

重要内容可见,这里可以认为是商品数据,商品数据可见要等 JS
执行完并且异步请求发送出去回来后才可见。

TMS\[1\]
的异步请求大多走招商数据平台(TCE\[2\])的接口,测试其单个请求在真机的耗时约为
110ms(样本较少,未大量测试)。

发表评论

电子邮件地址不会被公开。 必填项已用*标注