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

相关文章推荐

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

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

Raphaël学习笔记一

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

使用Raphaël.js实现心形函数

好久没写博客了,自从换了公司就一直在忙。发现岁数大了,生活和工作的压力都很大。最近做了个项目,需要绘制简单的流程图展示。上网查询了一些实现方式,最终选择了使用Raphaël.js来实现。用了一天时间,...

数据可视化----Flotr2和Raphaël 绘制气泡图

Flotr2

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

关于 Raphael Raphael是什么? Raphael Javascript 是一个 Javascript的矢量库。 2010年6月15日,著名的JavaS...

jsconf2010

  • 2011年05月04日 21:28
  • 483KB
  • 下载

5月10日云栖精选夜读:阿里专家直击前端盛会JSConf2017_Day2:见证Moment.js精彩分享

摘要: 第二天的会议个人认为最精彩的是来自于微软的一位女分享者,她是moment库的作者之一。此分享的精彩之处在于作者以moment为例讲解了开发一个类库的4个关键要素,一方面推广了moment,同时...

JSConf 2010 (一):介绍、Google Chrome Frame 和 GitHub

一年一度的JSConf大会又召开,这是2010的官网 http://jsconf.us/2010: 真是够简陋的。 其中的Sliders请看这里:http://devthought.com/20...

JSConf 2010 (二):JS的模式编程、微格式 和 MooTools

模式编程(programming to the patterns) JS的通用库最基本的目的是给你解决浏览器兼容性差异,Prototype和JQuery是做得最好的两个库。 JQuery对Dom的...

阿里专家直击前端盛会JSConf2017_Day2:见证Moment.js精彩分

原文链接 阿里专家直击前端盛会JSConf2017 Day2:见证Moment.js精彩分享 黎山 2017-05-09 19:57:51 浏览146 评论1 发表于: 开源自动化...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JSConf 2010 (三):Raphaël、优化前端性能
举报原因:
原因补充:

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