JSConf 2010 (三):Raphaël、优化前端性能

原创 2011年01月14日 00:48:00

提到Raphaël,就得先说说SVG,可缩放矢量图形(Scalable Vector Graphics,SVG)是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式。SVG由W3C制定,是一个开放标准。SVG严格遵从XML语法,并用文本格式的描述性语言来描述图像内容,因此是一种和图像分辨率无关的矢量图形格式。

image
SVG图形格式优点:
1. 图像文件可读,易于修改和编辑

2. 与现有技术可以互动融合。例如,SVG技术本身的动态部分(包括时序控制和动画)就是基于SMIL标准。另外,SVG文件还可嵌入JavaScript(严格的说应该是ECMAScript)脚本来控制SVG对象

3. SVG图形格式可以方便的建立文字索引,从而实现基于内容的图像搜索

4. SVG图形格式支持多种滤镜和特殊效果,在不改变图像内容的前提下可以实现位图格式中类似文字阴影的效果

5. SVG图形格式可以用来动态生成图形。例如,可用SVG动态生成具有交互功能的地图,嵌入网页中,并显示给终端用户

还有一个概念叫VML,VMLThe Vector Markup Language(矢量可标记语言)的缩写。VML用于将图形数据矢量化的标记语言。这是一种基于 XML 语法的语言,由 AutoDesk 、 Macromedia 和 Microsoft 和 HP 公司向 W3C 提出的方案。

Raphaël正是将VML和SVG结合起来的JavaScript库,看如下的网页,你能想象这些图像加起来只有20K么?

image

好了,看一看它的语法,看起来也很容易懂:

image

http://raphaeljs.com/上面有好多DEMO,体验一下吧。

 

Frontend Performance 指的是页面展示性能,在Best of Steve的slider中有此介绍:

YSlow(分析网页,并提出如何提高其性能的基础上一套规则)最有效的途径包括:

使用CSS sprites(CSS精灵,把一些散开的小图片合并成一张大图片)

CDN(Content Delivery Network,即内容分发网络,将网站的内容发布到最接近用户的网络"边缘",使用户可以就近取得所需的内容)

配置ETags(实体标签是服务器和浏览器用于确定浏览器中缓存的组件和服务器中的是否对应的一种机制,如果ETag匹配,会返回HTTP304)

使用AJAX GET请求

减少DOM中#数量

减少404页面

尽量避免使用image filter,这个东西运行时会锁死浏览器

优化收藏夹图标(favicon)

 

加速页面的有效途径包括:

延迟JS加载

去除无用CSS

使用有效的CSS选择器

优化图片

优化CSS和JS的顺序

使用代理缓存

 

二者皆有效的途径:

合并CSS、JS

添加过期header

gzip压缩响应

把CSS放在页顶,JS放在页底

避免CSS表达式

引用外部的JS和CSS,而不是直接写在页面内部

减少DNS查找

最小化JS和CSS

避免HTTP302

减少重复脚本

Ajax允许被缓存

尽量少用cookie,减少cookie的大小

尽量不要缩放图片

详见 http://www.slideshare.net/souders/jsconf-us-2010

Raphaël Reference 中文帮助文档(API)

关于 Raphael Raphael是什么? Raphael Javascript 是一个 Javascript的矢量库。 2010年6月15日,著名的JavaScrip...
  • yw1688
  • yw1688
  • 2014年02月17日 15:43
  • 1390

Raphaël Raphael.js 中文帮助文档,SVG、VML、Javascript矢量库(Raphael Reference API)

最近迷恋网页矢量图形处理方案,仔细研究了一个很优秀的 Javascript 矢量库,很是强大。 虽然这个库很强大,但是他几乎默默无闻,而且唯一的资料,就是原作者写的英文API。 最近加班加点,终于...
  • u012063756
  • u012063756
  • 2013年09月10日 23:48
  • 1742

流程图绘制方法

流程图绘制方法-流程图绘制方法备份Created with Raphaël 2.1.0http://www.google.comStarthttp://www.google.comMy operati...
  • dms9265
  • dms9265
  • 2017年05月31日 20:39
  • 89

Raphaël 简单Demo

使用Raphael可以画出不同的强大的图案,并有可以编写鼠标触发事件下列就是上图的javaScript,点击下面的黑色圆圈,可是使上面2个白色的圆圈消失。注:请到ttp://raphaeljs.com...
  • Vanessa219
  • Vanessa219
  • 2009年04月16日 17:17
  • 1400

Raphaël—JavaScript Library

Raphaël--一个小巧但功能强大的javascript画图库。Main Function ...
  • Vanessa219
  • Vanessa219
  • 2009年04月16日 17:20
  • 2048

Raphaël 编写的Bar Chart

             bar.js$(function () {    $("#data").css({        position: "absolute",        left: "-9...
  • Vanessa219
  • Vanessa219
  • 2009年04月21日 10:22
  • 1275

【js类库Raphaël】基于svg中的path动态绘制40%表示的环型图

使用js类库Raphaël基于svg中的path动态绘制40%表示的环型图
  • u012386311
  • u012386311
  • 2016年03月08日 23:53
  • 1538

Raphaël —— JavaScript 库

Raphaël 是一个小型的 JavaScript 库,用来简化你在 Web 上显示矢量图的工作。你可以用它在页面上绘制各种图表、并进行图片的剪切、旋转等操作。 Raphaël ['ræfeɪəl]...
  • lilin_emcc
  • lilin_emcc
  • 2013年01月04日 11:25
  • 560

Raphaël学习笔记一

最近在学习HTML5 canvas,然后悲剧的发现这东西只能用来绘图却不能用来交互……假设你在画布上画了一个圆,然后想写一个事件来进行DD操作。对不起,除非你的圆里有一张图片,否则你就得通过那个圆所在...
  • daisy_xiu
  • daisy_xiu
  • 2012年01月06日 16:39
  • 452

Raphaël 学习

1 fire a  event 的方法 场景:当我们要显示调用某个元素的事件时 raphael 对象保存了一个事件数组,数组元素的name属性表示事件的类型,数组元素的f方法,表示对应事件类型的所...
  • xiongzhengxiang
  • xiongzhengxiang
  • 2012年09月13日 11:41
  • 745
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JSConf 2010 (三):Raphaël、优化前端性能
举报原因:
原因补充:

(最多只允许输入30个字)