Subscribe: PuterJam's Blog - Javascript
http://www.pjhome.net/feed.asp?cateID=1
Preview: PuterJam's Blog - Javascript

PuterJam's Blog - Javascript



关注互联网~ 关注前端技术~ 激情是成功的必要前提~



Copyright: Copyright 2005 PBlog3 v2.8
 



HTML5 MediaStream的运用

Fri,08 Jun 2012 16:11:11 +0800

HTML5在技术上发展越来越快,在输入方面浏览器也开始具备了更多能力。舜子一直在关注视频和音频流在html5的支持,虽然不是什么创新点,但是对html来说是一个非常重要的能力。 Chrome 18开始就把MediaStream放到实验室里,不过记得在19前的这些版本里,getUserMedia 接口一直不太稳定,很容易crash。近期发现Chrome 19.0.1055 dev在这个接口的稳定性上有较好的提升。不过在稳定性上,还需要改善。例如,摄像头使用次数过多后,媒体流会莫名中断,对于没有安装摄像头的检测做得不够完善,可能会导致浏览器crash。不过相信chrome以后的版本会fix这些问题,也希望能在chrome 19 的release版本正式用上这个功能。 这个demo里,其实舜子很早就想用html5来完成gif视频合成的尝试了。也借这个机会,搞了一把极限开发,利用Chrome 的MediaStream,把用户的摄像头作为动画合成的来源。 这里的关键技术并不复杂,在chrome下,我们可以使用navigator.webkitGetUserMedia即可,其他浏览器依次类推moz,o,ms之类。   这段代码正常情况下,你应该可以在浏览器里看到你的摄像头视频了。   另外,舜子还想提到一个非常有用的东西就是URL对象。看到webkitURL了么?createObjectURL 是可以把一些Blob(二进制大对象)转换成一个本地的url,提供给script标签,img,video,audio,甚至file来使用,这样做有什么好处呢? 试想一下,浏览器未来直接在前端处理的资源会很多,你可以合成视频和音频,但是合成后的Blob(二进制大对象)如何给html来播放,那么这时候你就需要构造一个URI来提供,这个和base64URI还不一样。其实createObjectURL会更加强大。 你还可以把一些文本,直接转换成js,构造成一个url,提供给worker使用。减少了worker使用过程中需要多一个请求的开销。 玩demo的,这边请: http://www.pjhome.net/web/gif_maker/ 注意,最好是chrome 19以上的版本,并且确保你真的有摄像头(没摄像头可能会crash浏览器,chrome的bug)。 最后还得感谢,jsgif库。这个库是从as3版本转换过来的。 https://github.com/antimatter15/jsgif [...]



HTML5 重力感应试玩~

Thu,21 Jul 2011 21:11:06 +0800

(image)

html5 中针对高端手机提供了重力感应和重力加速的接口,开发可以利用这个接口获取到移动设备重力加速感应数据。

目前已经支持的浏览器只有chrome和firefox,以及IOS的webkit(貌似android上因为版本差异很大,部分低版本的系统不支持)。

通过iphone或者mac电脑访问下面的地址可以体验哈

http://www.pjhome.net/web/Orientation.html

 

使用也比较简单:

首先,绑定感应事件

 

JavaScript代码
  1. window.addEventListener('deviceorientation'this.orientationListener, false); //方向感应器  
  2. window.addEventListener('MozOrientation'this.orientationListener, false); //方向感应器 for firefox      
  3. window.addEventListener('devicemotion'this.orientationListener, false); //重力加速感应器 for iphone, android  

 


使用上需要区分设备是否支持重力加速器,部分设备无重力加速,只能获取到方向

方向中分alphabetagamma三个,其实对应我们常说的 y, z, x 三个方向, 方向可以通过 event 来直接获取到,获取到到的数据单位是 度数, 不过firefox稍微有点偏离规范,返回的是 弧度 单位。

(image)




setTimeout(0) 即将退役

Wed,20 Jul 2011 23:50:09 +0800

(image)

相信所有做前端开发的同学都会经常使用 setTimeout(0) 来做很多事情,这个一度成为解决了很多前端疑难杂症的法宝。而且大家也知道 setTImeout(0) 的极限在16ms左右。也许很多人没想到这个是一个很严重的问题,但是在w3c性能小组的专家眼里这是一个非常纠结的设置。

那setTimeout和16ms会带来什么问题呢?

1. 我们都知道,我们在做页面动画的时候大多数都是在用setTImeout来控制每一帧的动画的, 而多个setTimeout的存在会导致很多次CPU中断调度的开销,为了减少这些开销,我们希望同一个统一的CPU中断调度管理调度单元来管理所有动画,

于是就出现了 requestAnimationFrame。 requestAnimationFrame 的出现不仅仅可以解决中断调度的问题,还可以更加优化得统一管理动画单元里dom元素的repaint方式。

2. 杯具的16ms,在早期。js的callback执行,是依赖CPU的中断来进行控制的,如果两个中断之间时间太短会导致,CPU性能消耗很高,同时影响能耗,于是微软和英特公司为了解决这个问题,就约定每个中断之间的间隔是15.6ms(64 fps)所以就是我们常见的约等于16ms的间隔。不过随着web的要求不断增加,大家对这个要求希望是放宽的态度,于是在高端浏览器,这个性能被提升了4倍左右,所以在chrome,ie10等浏览器,setTimeout的间隔缩短到了 4ms (250 fps)。 但是问题来了,这么高的消耗以传统的方式,并不能从根本上解决CPU的调度问题,而且能耗也会提升40%

于是W3C,提出需要取代 setTimeout(0) 的代替品 --- setImmediate

不过到底底层如何解决了这个CPU调度,还能保证脚本能够很快执行,这块舜子还在研究,了解的朋友也欢迎一起交流哈。

 

这是两个非常好的方法用来取代setTimeout的api,舜子也做了一些小小的实验来验证 requestAnimationFrame,setImmediate 和 setTimeout 之间的执行效率区别,在IE10下可以看到,setImmediate 接口的callback次数可以达到每秒 6000 次的的执行。而requestAnimationFrame主要目的是为了保证动画的圆滑播放,所以基本上是控制在60 fps的范围,而且根据文档介绍,只是一个时钟控制器在进行调度,而且会更加需要来进行按需渲染。

(image)

http://www.pjhome.net/web/html5/timing_test.htm

 

 




编辑器也浮云- cloud9 IDE分享

Fri,21 Jan 2011 19:36:02 +0800

近期node的消息越来越多,越来越多的前端开发开始关注到这个似乎可以改变我们命运的新技术。其实node和之前的mozilla rhino一样都是可以本地执行脚本,不过和rhino的区别在于node更加希望的是让前端开发能够通过自己熟悉的语言更块地搭建自己的后台服务。 基于node,其实对云端化是有帮助的。Cloud9 IDE就是借助node,让编辑器也云端化。Cloud9 IDE基于node,服务于node。它提供了编辑器基础的功能。同时也给node一个可视化的调试环境(前端开发要是没个可视化的调试器,估计会很抓狂)。 好了,准备开始研究node的同学一定不能错过这一个开发辅助利器哈。   如何安装: 首先确认你已经安装好了node,这里就不讲如何安装node了,步骤也很简单,编译过程也很快。下载node到这里 http://nodejs.org/ 到 github 下载源码 https://github.com/ajaxorg/cloud9 当然, linux或者window的cygwin同学可以直接使用git工具来获得   git clone git://github.com/ajaxorg/cloud9.git   执行 : 1. 到你的cloud9的本地目录执行 Linux and OSX: $ bin/cloud9.sh Windows: > bin\cloud9-win32.bat 第一次运行会需要一点时间,cloud9会在线更新一些必要的文件,第二次运行就很快了   在你的运行控制台里看到这个图案就说明启动正常了。   2. 然后 在你的浏览器里直接打开 http://127.0.0.1:3000 即可以打开编辑器,嘿嘿是不是启动比神马的eclipse要快很多呀。当然这里还是推荐chrome了。   在cloud9 IDE中你可以很方便地调试你的node代码,而且cloud9也提供了多种语法高亮效果. 不过既然云端了,cloud9也会出现一些很明显的问题,例如不能直接编辑本地文件,你在启动编辑器的时候设置一个工作路径,你之能编辑这个路径下的文件。 *通过 -w 启动前设置工作路径 $ node bin/cloud9 -w /path/to/your/awesome/workspace  [...]



利用HTML5对文件进行base64转换

Mon,27 Sep 2010 01:27:42 +0800

(image)

Base64编码的数据做为URL的应用开始越来越广泛,转换的工具也不少。但是不少工具都是要下载或者在线进行转换,或不能进行批量转换。

这里舜子利用HTML5的FileReader我们是可以对本地文件进行读取并且转换为浏览器用的base64 URL,

然后利用HTML5的Drag&Drop我们只需要把文件拖放到浏览器窗口即可开始进行转换。

 

工具地址: http://www.pjhome.net/web/html5/encodeDataUrl.htm

 

Html5的base64转换小工具在Chrome浏览器和firefox下测试通过。当然效果快的还是Chrome浏览器。舜子还针对音频和图片进行了预览支持。当然大家用到base64的应该还是图片较多。所以小工具有个bug就是无法处理过大的文件,过大的base64其实意义不大了。




IE9允许前端开发获取到页面性能数据

Tue,29 Jun 2010 22:56:26 +0800

        长期以来,为了改善站点的用户体验,我们一直都是在页面顶端加上一个 (new Date()).getTime() 来获取用户打开页面的时间,使用httpwatch来分析页面打开的解释时间。httpwatch虽然强大,但是还是无法让我们深入到用户的环境去了解用户打开页面前的一些情况,例如:DNS解释时间,请求和响应时间,以及更加深入的页面渲染时间等重要信息。这些信息对用户环境分析是至关重要的。         如今,这个情况即将改变,微软的IE9将给前端开发们提供有力的性能分析接口让我们能够深入分析页面的性能,这就是强大的msPerformance接口。这个接口其实是基于HTML5草案Web Timing的定义来开发的(有意思的是这个接口是google提供的,chrome目前还没支持,IE9先行了)。         我们来看看通过Web Timing我们可以获取到什么数据   window.msPerformance.navigation  { requestCount : 76 type : 0 startTime : 1277821481923 redirectedCount : 5 uniqueDomains : 31 }     window.msPerformance.timingMeasures  { request : 22 domContentLoaded : 342 response : 10 firstPaint : 29 domInteractive : 342 msStyleContentLoaded : 342 fetch : 459 domComplete : 342 load : 89 connect : 3 }     window.msPerformance.timing  { domLoading : 1277821481950 responseEnd : 1277821481960 navigationStart : 1277821481923 fetchStart : 1277821481923 msStyleContentLoaded : 1277821482293 firstPaint : 1277821481952 fullyLoaded : 0 requestStart : 1277821481927 loadEnd : 1277821482383 unloadStart : 1277821481923 }   通过这些数据我们可以更加深入得分析页面的性能和用户的网络环境,提供更加好的差异化服务。  到这里下载IE9预览版   发现IE9pre3的console列出的接口不全,直接用调试器把这个接口和方法全部列出来了,更加直观 [...]



我的Qzone应用插件 for chrome

Mon,08 Feb 2010 16:44:20 +0800

 (image)

研究了chrome的插件编写方式,刚好结合我们的Qzone的APP写了一个应用。 欢迎大家尝鲜 :P

写chrome插件给人的感觉还是挺爽的。很强很html5。

 

 

安装请步移:

https://chrome.google.com/extensions/detail/mfibffkabmegiiapfkpdcpmhcigkncac?hl=zh-CN

 

*如果无法下载,请配以下host:

74.125.39.99 chrome.google.com

74.125.47.139 clients2.google.com

 

对喜欢看代码的同学说的话,看到代码别见怪。源码很乱,第一次写chrome插件没很好得规划

 





IE9 前瞻

Thu,19 Nov 2009 10:32:28 +0800

虽然IE6在依然是很重要的钉子户,但是我们不能放弃关注未来ie的变化。

IE9 的几个关键字: 硬件渲染新的JS引擎,CSS,标准

(image)

大家期待已久的圆角也将支持了

 

不过这里最让大家期待的是硬件渲染(视频演示看这里)的支持。这可以让浏览器性能提高一个很高的档次。

关于新的脚本引擎可以用下图来说明,这个测试是用著名的SunSpider来测试的

(image)

更多信息可以从官方博客得到 :P




firefox 3.6 beta 发布

Wed,04 Nov 2009 11:52:52 +0800

(image) firefox 3.6 beta 发布,增加了不少上流的功能。

1. window.onhashchange 期待已久的接口,
https://developer.mozilla.org/en/DOM/window.onhashchange

2. http 行为监听,字面意思应该是允许进行一些http的监听工作,类似抓包(应该是给插件提供的接口)
You can now monitor HTTP transactions to observe requests and responses in real time.
https://developer.mozilla.org/en/Monitoring_HTTP_activity

3. 全屏视频

4. 字体支持

5. 拖拽支持文件直接拖拽

6. 图片渲染品质缩放算法 类似ie的 -ms-interpolation-mode

更多变化请看这里
https://developer.mozilla.org/en/Firefox_3.6_for_developers

不过这里没有提到真 html 5 (放弃doctype定义)的模式。

下载:
https://developer.mozilla.org/devnews/index.php/2009/10/30/firefox-3-6-beta-1-is-now-available-for-download/




使用 Eclipse 调试 Chrome 的脚本

Thu,06 Aug 2009 16:29:11 +0800

Google Chrome 发布了基于 Eclispe 的调试工具  Chrome Developer Tools , 调试需要Chrome 3.0.189.0 以上版本。 这样我们就可以使用Eclipse远程调试Chrome的代码了。   一点点准备工作:   1. 调试前我们的先安装 Chrome Developer Tools .  打开 Eclipse 新建一个 Update Site 就可以完成安装  http://chromedevtools.googlecode.com/svn/update/dev/   2. 开启 Chrome 的远程调试模式 执行chrome 带以下参数   window: chrome --remote-shell-port=9222   mac: ./Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-shell-port=9222   当然端口是可以配置的。   3.打开Eclipse添加一个调试配置   开始调试:   1.绑定进程   由于 Chrome 是多进程的浏览器,所以调试的时候,我们需要在Eclispe里绑定独立的标签进程。         2. 设置断点   不知道什么原因,绑定后,无法直接暂停脚本运行,除非遇到脚本错误。不过我们可以给也脚本设置debug,让调试器生效。      在代码中设置 debugger 断点      看程序停下来了,这样就可以做调试了。  [...]