JSConf 2010 （三）：Raphaël、优化前端性能

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

 

SVG图形格式优点：

1. 图像文件可读，易于修改和编辑

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

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

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

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

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

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

 

好了，看一看它的语法，看起来也很容易懂：

  

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