Sunng's Canvas based Heatmap API

Published at: 03:02 pm - Thursday February 11 2010

Glad to announce my works this morning: A simple heatmap API based on HTML5 canvas. The programming interface is rather simple now. To create such a heatmap, you just new a heatmap object by: <canvas width=”300″ height=”215″ id=”canv”></canvas> heatmap = new HeatMap(“canv”); Then read your dataset and push data into the heatmap: heatmap.push(x, y, value); [...]

Posted in: 广告, 手艺 by Sunng 21 Comments , , , ,

Open Source Charting Toolkits in JavaScript

Published at: 09:10 pm - Thursday October 22 2009

项目的下一阶段，需要做一些数据展现方面的工作，处于对Adobe产品的抵触情绪，我个人还是倾向于用JavaScript来完成。今天找了几个画Chart的库，比较一下功能和编程接口的使用，为接下来的开发做一些准备。 dojox.charting (BSD License) 没什么悬念，第一个想到的就是曾经用过的dojo。之前实习时候用dojo画chart也算是积累了一些心得。dojox.charting的最主要优点是编程接口完善、全面，可以配置的项目很多，接口易于编程，易于动态地生成、操作Chart。而另一方面最主要的问题就是文档比较匮乏，不了解的人可能问了，doc.dojotoolkit.org好强大，怎么会文档匮乏呢。其实是dojo和mootools类似，都很喜欢用option object来传递可选参数，但是这些option object在文档中没有任何涉及，很多关键的属性都在其中但是却没有办法查到，算是美中一大不足。 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <script src=”dojo-release-1.3.2/dojo/dojo.js” djConfig=”isDebug: true”></script> <title>Dojo</title> <script type=”text/javascript”> dojo.require(“dojox.charting.Chart2D”); </script> </head> <body> <h1>Dojox.charting</h1> <div id=”charting” style=”width:400px; height:250px;”> </div> <script type=”text/javascript”> （function charting(){ dojo.empty(“charting”); var data = [2,4,5,7,7,4,4,7]; var chart = new dojox.charting.Chart2D(“charting”); chart.addPlot(“default”, {type: “Lines”, markers: true, shadows: [...]

Posted in: 手艺 by Sunng No Comments , , , , , ,

Notes of Even Faster Web Sites

Published at: 03:08 pm - Sunday August 02 2009

异步、模拟多线程式的JavaScript，防止界面锁死。例如Google Gears，Firefox3.5 WebWorker异步API。 拆分JavaScript文件，即需即载入即运行，避免首次载入的高代价。类似dojo的分包机制。 普通的script会阻塞页面的载入直至脚本下载执行完成，采用其它方法可以改变这种情况：XHR Evel, XHR Inject, Script DOM, Script Defer, Script in Iframe, Document.write Script Tag。 由于外部script和内联代码异步载入造成的冲突，解决方法1. 在外部编码种硬编码回调，2. 在Window.onload中调用 3. 用timer监控载入情况 4.scripttag.onreadystatechange 把异步载入外部脚本的方法编写为可复用的module 处理内联脚本，解决方法：1.将内联脚本移至页面尾部 2.异步执行JavaScript回调(setTimeout(0)) 3.使用script defer属性 内联脚本执行会被 语言级别上提高JavaScript执行效率的一些手段，Zakas Comet的前景和现阶段实现，以及WebSocket 优化HTML文件 优化图片的utilities和几种格式的特点 sharding文件到不同的服务器上增加并行下载 正确地使用flush提高部分页面的加载速度 影响因素1.是否开启了Output_Buffer，2.是否使用了chunked encoding， 3.是否启用了gzip并在apache228上运行 4. 是否被代理和AV软件影响了 5.是否因为相同的域名的文件下载被block了 6.是否是webkit阈值以下不能渲染 慎用iframe，DOM操作代价过高，在html中设置src的iframe会阻塞onload，iframe与style script标签的位置 高性能的CSS选择器，避免全局rule，避免div#sele，避免div.sele，避免使用长选择器，避免使用decendant选择器，避免使用tag-child选择器，查看所有child选择器，使用继承

Posted in: 手艺 by Sunng 8 Comments ,