提到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
- 大小: 4 KB
- 大小: 23.1 KB
- 大小: 33.4 KB
分享到:
相关推荐
可视化流程设计器,基于jQuery和Raphaël ,兼容性强,使用方便,扩展性强。经过一夜的努力反编译了一位大神的代码,整理了整体思路并添加注释。 具体描述可在我博客中找到。 10分确实有点贵,但是绝对超值,而且我...
拼字游戏:RaphaëlRosinski,Aleandre Rafanel和AlexandrePrévot制作的拼字游戏
RaphaëlBOICHOT 策展人:Brian Khuu 该脚本的作者是RaphaëlBOICHOT,并且在他的允许下被发布在了这里。 具有电子纸功能的游戏男孩打印机模拟器(CrapPrinter)代码在Matlab中运行非常快,而在Octave中则运行缓慢。...
raphael.boolean.js-使用Raphaël执行布尔运算 该插件为javascript矢量库Raphaël( )提供了布尔操作。 您可以使用单个元素(而不是集合)来执行 联合[A + B | A或B] 差异[A-B | A NOT B] 交集[A * B | A和B] ...
NULL 博文链接:https://justcoding.iteye.com/blog/665253
本人网上找的代码,进过修改增加了省区文字 演示地址:http://www.5imvc.com/Rep/Map
NULL 博文链接:https://justcoding.iteye.com/blog/1618691
Raphaël 是一个小型 JavaScript 库,它可以简化您在网络上使用矢量图形的工作。 例如,如果您想创建自己的特定图表或图像裁剪和旋转小部件,您可以使用此库轻松轻松地实现它。 Raphaël ['ræfeɪəl] 使用 SVG W3C...
NULL 博文链接:https://love-66521.iteye.com/blog/1974593
RaphaëlVarane新标签页扩展程序为您的Chrome浏览器带来了新外观。 安装RaphaëlVarane New Tab Theme,并欣赏RaphaëlVarane的精选高清图片。 它带有一些很酷的属性,这些属性可以改善您的“新标签页”体验,例如:...
Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you ...
麻省理工学院许可证 (MIT) 版权 (c) 特此授予任何人免费获得本软件和相关文档文件(“软件”)副本的许可,不受限制地处理本软件,包括但不限于使用、复制、修改、合并的权利、发布、分发、再许可和/或出售软件的...
它基于Raphaël库进行矢量绘图。 入门 安装Justgage就像... bower install justgage-official 或您想使用NPM ... npm install justgage --save 示例 或者您可以随时下载CSS和JS文件... <!-- Raphael must ...
Raphaël.js 是一个小型的 JavaScript 库,用来简化在页面上显示向量图的工作。你可以用它在页面上绘制各种图表、并进行图片的剪切、旋转等操作。 Raphaël.js 使用SVG W3C推荐标准和VML作为创建图形的基础。
Raphaël Hertzog and Roland Mas had the required qualities and managed to create and update this book. I thank them very much for their work and have no doubt that reading this book will be both ...
#RaphaëlLustin的个人页面
曲线图 动感 在信息时代,密码学是建立人们隐私和安全的基础。 椭圆曲线密码学就是其中一... 该项目的目的是通过绘制椭圆曲线组成的点来帮助更好地理解这项技术。 此外,添加点的过程是可视化的。 ... ...在状态栏中显示计算
xdot.js xdot.js 将格式的字符串解析为对象。 这xdot.py的第一个版本是在词法分析器/解析器代码非常密切的端口 。 生成 xdot 文件 xdot是使用 GraphViz 布局命令之一从点文件生成的。 在这种情况下,我们将只使用...
节点拉斐尔 使用漂亮的SVG库生成svg数据。 特征 使用Raphael的静态svg生成 安装 npm install node-raphael 动机 NIH-不是在这里发明的...不好意思.....var raphael = require ( 'node-raphael' ) ;...
Raphaël Turcotte, Eusebiu Sutu, Carla C. Schmidt, Nigel J. Emptage, Martin J. Booth. "Deconvolution for multimode fiber imaging: modeling of spatially variant PSF", Biomedical Optics Express 2020:11...