PuterJam's Blog - Javascript

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

puterjam@gmail.com(puterjam) — 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

puterjam@gmail.com(puterjam) — Mon,08 Feb 2010 16:44:20 +0800

研究了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 前瞻

puterjam@gmail.com(puterjam) — Thu,19 Nov 2009 10:32:28 +0800

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

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

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

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

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

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

firefox 3.6 beta 发布

puterjam@gmail.com(puterjam) — Wed,04 Nov 2009 11:52:52 +0800

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 的脚本

puterjam@gmail.com(puterjam) — 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 断点

看程序停下来了，这样就可以做调试了。

QZFL Core Cheat sheet

puterjam@gmail.com(puterjam) — Wed,05 Aug 2009 00:01:55 +0800

QZFL 是团队共同努力开发的一套JS框架。也准备结束开源框架在公司内部无法维护的问题。不过同学们还是反映希望能得到一份接口文档的小抄版。晚上花了一点时间输出了一份QZFL 2.0 Core 的Cheat Sheet。

判断Javascript变量类型的函数

puterjam@gmail.com(puterjam) — Wed,29 Jul 2009 00:19:22 +0800

toString 本来是用来做字符串转换的，不过现在流行用来做变量类型的检查了。舜子这里也写了一个函数，方便检查变量的类型，可以用来代替 typeof

function getType(o) {
var _t; return ((_t = typeof(o)) == "object" ? o==null && "null" || Object.prototype.toString.call(o).slice(8,-1):_t).toLowerCase();
}

执行结果：

getType("abc"); //string
getType(true); //boolean
getType(123); //number
getType([]); //array
getType({}); //object
getType(function(){}); //function
getType(new Date); //date
getType(new RegExp); //regexp
getType(Math); //math
getType(null); //null

Gecko 提供 HTML5 parser 支持了

puterjam@gmail.com(puterjam) — Thu,09 Jul 2009 00:02:14 +0800

Html 5的风越挂越猛了。在firefox 3.6a1pre版本中，加入了新的 HTML5 Parser 的支持。可以预见到这将会正式出现在下一个版本的Firefox中。

不过HTML 5 Parser能够做什么？简单描述一下，这可是一个大胃口的Parser. 它将有很好的向后兼容性。能够在text/html页面上使用xml parser，而不需要使用xhtml（xhtml页面是否会从此消失呢?）。

有什么好处？大家都知道SVG是一个xml的数据。使用Html5 Parser我们可以不需要更改html页面的任何内容。和申请命名空间就可以在html页面上直接表现svg图像。

感兴趣的朋友，可以到这里找到一些范例，不过在此之前需要下载最新的午夜版firefox.并且在 about:config 中打开 html5.enable HTML5 parser的支持。

firefox 滚动残影的bug

puterjam@gmail.com(puterjam) — Sat,04 Jul 2009 01:45:30 +0800

不知道大家有没有遇到过，当我们设置了一个固定的浮动层后。在firefox下滚动会出现一些残影的情况？总觉得页面的表现很不流畅。而且这个情况，只出现在 firefox for win的版本（mac版的firefox不会出现）

先看一下下面的视频（由于截屏软件录不了这个效果，只好拿手机录了）。

在视频里，我们很清楚得看到，白色的浮动层被快速的滚动切割成两半。

重现的代码片段：

    style="width:300px;height:3000px;border:1px solid #333;background:#ccc url(http://www.iecool.cn/uppic/2007-3-27/206499575_2.jpg);overflow-x:hidden">

style="position:fixed;width:200px;height:100px; left:200px;top:200px;border:1px solid #000;background:#fff;padding:6px">





        href="#" onclick="document.getElementById('button1').style.display = '';return false">显示按钮
        href="#" onclick="document.getElementById('button1').style.display = 'none';return false">隐藏按钮

两个 div ，其中不浮动的div，只要设置了overflow-x 或 overflow-y 的hidden属性，然后另外一个div设置成浮动，并且其html带一个 button 标签。就会让firefox在渲染上出现问题了。

看在线的演示，请用firefox 3.0以上任何版本，快速滚动滚动条。

Google Chrome 支持脚本调试了

puterjam@gmail.com(puterjam) — Sun,28 Jun 2009 01:40:18 +0800

Google Chrome 3.0.190.4 版本中，终于把webkit的脚本调试器移植到开发者版本了。

Dev channel: http://www.google.com/chrome/eula.html?extra=devchannel

不过很可惜的是，数据库的调试功能没有了。

另外，目前调试器还不太稳定，经常出现crash的情况。特别是在做profiles性能测试的时候。

当然了，如果调试过程中遇到什么问题和bug， chrome团队也很欢迎大家提出问题。

呵呵，这下IE8不能说只有自己自带调试器了。