易栈网-膘叔（Neatstudio.COM）

易栈网-膘叔

Firebug Lite For Chrome

【转】jQuery性能规则

1.总是使用#id去寻找element.

2.在Classes前面使用Tags

3.缓存jQuery对象

4.更好的利用链

5.使用子查询

6.限制直接对DOM操作

7. 事件委托（又名：冒泡事件）

8.消除查询浪费

9 遵从$(windows).load

10 压缩JS

11 学习jQuery库

一次糟糕的测试

海报

学着写PHP飞信

Firebug Lite For Chrome

【转】jQuery性能规则

1.总是使用#id去寻找element.

2.在Classes前面使用Tags

3.缓存jQuery对象

4.更好的利用链

5.使用子查询

6.限制直接对DOM操作

7. 事件委托（又名：冒泡事件）

8.消除查询浪费

9 遵从$(windows).load

10 压缩JS

11 学习jQuery库

一次糟糕的测试

海报

学着写PHP飞信

日志分类

热门标签

日志归档

搜索文章

最新评论

博客信息

友情链接

选择单个元素

额外提示：延迟存储jQuery对象结果。

选择单个元素

额外提示：延迟存储jQuery对象结果。

浏览模式: 标准 | 列表2010年02月的文章

Submitted by gouki on 2010, February 8, 10:31 AM

很意外，一直都认为firebug不会为chrome写插件了。毕竟chrome自带了一个F12的debug工具。
4。0开始后的chrome逐渐开始支持插件，然而，插件网站却不是每次打开都正常。也让我非常郁闷。
不过，看过chrome的插件编写的hello world，却真的发现，它的编写比firefox的插件简单的多。

上面都是闲话，真正想说的还是firebug，自从前两年firebug为IE出过lite版本后，更新幅度就小了很多，所以这次看到它为chrome做的更新，还是不禁想尝试一下的。
OK，上官方的菜，Firebug自己认为：

Firebug Lite: doing the Firebug way, anywhere.

* Compatible with all major browsers: IE6+, Firefox, Opera, Safari and Chrome
* Same look and feel as Firebug
* Inspect HTML and modify style in real-time
* Powerful console logging functions
* Rich representation of DOM elements
* Extend Firebug Lite and add features to make it even more powerful

不过作为chrome插件，它还仅仅是一个beta版，他这么介绍的：

XML/HTML代码

Firebug Lite is not a substitute for Firebug, or Chrome Developer Tools. It is a tool to be used in conjunction with these tools. Firebug Lite provides the rich visual representation we are used to see in Firebug when it comes to HTML elements, DOM elements, and Box Model shading. It provides also some cool features like inspecting HTML elemements with your mouse, and live editing CSS properties.
o get more information about what's new in Firebug Lite 1.3 beta (which is compatible with all major browsers) please visit the beta release page.

可以到这里进行下载：http://getfirebug.com/releases/lite/chrome/

Tags: firebug, chrome

Software | 评论:0 | 阅读:23132

Submitted by gouki on 2010, February 7, 10:44 PM

转载的关于jQuery性能设置的文章。。。

之前，我们需要担心减少字节数和请求次数以及加载顺序以使页面加载的更快。如今，我们越来越多的注意到一个影响性能的重要组成部分--CPU利用率。使用 jQuery和其他JavaScript框架，使节点选择和DOM操作变得越来越容易，但如果你不小心使用了一些减少浏览器本身要做的工作的一些做法可能会带来不好的结果。

在jQuery中最快的选择器是ID选择器 ($('#someid')). 这是因为它直接映射为JavaScript的getElementById()方法。

XML/HTML代码

<div id="content">
<form method="post" action="/">
<h2>Traffic Light</h2>
<ul id="traffic_light">
<li><input type="radio" class="on" name="light" value="red" /> Red</li>
<li><input type="radio" class="off" name="light" value="yellow" /> Yellow</li>
<li><input type="radio" class="off" name="light" value="green" /> Green</li>
</ul>
<input class="button" id="traffic_button" type="submit" value="Go" />
</form>
</div>

选择button的性能不好的一种方式：
var traffic_button = $('#content .button');

取而代之的是直接选择button:
var traffic_button = $('#traffic_button');

选择多个元素

在我们讨论选择多个元素的时候，我们真正需要知道的是DOM的遍历和循环才是性能低下的原因。为了尽量减少性能损失，总是使用最近的父ID去寻找。
var traffic_lights = $('#traffic_light input');

在jQuery中第二快的选择器就是Tag选择器 ($('head')). 而这是因为它直接映射到JavaScript的getElementsByTagName()方法。

XML/HTML代码

<div id="content">
<form method="post" action="/">
<h2>Traffic Light</h2>
<ul id="traffic_light">
<li><input type="radio" class="on" name="light" value="red" /> Red</li>
<li><input type="radio" class="off" name="light" value="yellow" /> Yellow</li>
<li><input type="radio" class="off" name="light" value="green" /> Green</li>
</ul>
<input class="button" id="traffic_button" type="submit" value="Go" />
</form>
</div>

总是在一个Class前面加上一个tag名字（记得从一个ID传下来）
var active_light = $('#traffic_light input.on');

注意：在jQuery里Class选择器是最慢的一个选择器;在IE中它循环整个DOM。可能的话尽量避免使用它。不要在ID前面加Tags。例如，它会因为去循环所有的<div>元素去寻找ID为content的<div>，而导致很慢。
var content = $('div#content');

按照同样的思路，从多个ID传下来是冗余的。
var traffic_light = $('#content #traffic_light');

养成保存jQuery对象到一个变量上（就像上面的例子）的习惯。例如，不要这样做：

JavaScript代码

$('#traffic_light input.on).bind('click', function(){...});
$('#traffic_light input.on).css('border', '3px dashed yellow');
$('#traffic_light input.on).css('background-color', 'orange');
$('#traffic_light input.on).fadeIn('slow');

取而代之，首现保存jQuery变量到一个本地变量后，再继续你的操作。

JavaScript代码

var $active_light = $('#traffic_light input.on');
$active_light.bind('click', function(){...});
$active_light.css('border', '3px dashed yellow');
$active_light.css('background-color', 'orange');
$active_light.fadeIn('slow');

提示：使用$前辍表示我们的本地变量是一个jQuery包集。记住，不要在你的应该程序里出现一次以上的jQuery重复的选择操作。

如果你想在你的程序的其它地方使用jQuery结果对象（result object(s)），或者你的函数要执行多次，要把它缓存在一个全局范围的对象里。通过定义一个全局容器保存jQuery结果对象，就可以在其它的函数里引用它。

JavaScript代码

// Define an object in the global scope (i.e. the window object)
window.$my =
{
// Initialize all the queries you want to use more than once
head : $('head'),
traffic_light : $('#traffic_light'),
traffic_button : $('#traffic_button')
};
function do_something()
{
// Now you can reference the stored results and manipulate them
var script = document.createElement('script');
$my.head.append(script);
// When working inside functions, continue to save jQuery results
// to your global container.
$my.cool_results = $('#some_ul li');
$my.other_results = $('#some_table td');
// Use the global functions as you would a normal jQuery result
$my.other_results.css('border-color', 'red');
$my.traffic_light.css('border-color', 'green');
}

前面的例子也可以这样写：

JavaScript代码

var $active_light = $('#traffic_light input.on');$active_light.bind('click', function(){...})
.css('border', '3px dashed yellow')
.css('background-color', 'orange')
.fadeIn('slow');

这样可以让我们写更少的代码，使JavaScript更轻量。

jQuery允许我们在一个包集上附加其它的选择器。因为我们已经在本地变量里保存了父对象这样会减少以后在选择器上的性能开销。

XML/HTML代码

<div id="content">
<form method="post" action="/">
<h2>Traffic Light</h2>
<ul id="traffic_light">
<li><input type="radio" class="on" name="light" value="red" /> Red</li>
<li><input type="radio" class="off" name="light" value="yellow" /> Yellow</li>
<li><input type="radio" class="off" name="light" value="green" /> Green</li>
</ul>
<input class="button" id="traffic_button" type="submit" value="Go" />
</form>
</div>

例如，我们可以利用子查询缓存active和inactive lights以便后面的操作。

JavaScript代码

var $traffic_light = $('#traffic_light'),
$active_light = $traffic_light.find('input.on'),
$inactive_lights = $traffic_light.find('input.off');

提示：可以用逗号隔开一次定义多个本地变量，这样可以节省一些字节。

DOM操作的基本做法是在内存中创建DOM结构，然后再更新DOM结构。这不是jQuery最好的做法，但对JavaScript来讲是高效的。直接操作DOM结构性能是低下的。例如，如果你需要动态创建一列元素，不要这样做：

JavaScript代码

var top_100_list = [...], // assume this has 100 unique strings
$mylist = $('#mylist'); // jQuery selects our <ul> element
for (var i=0, l=top_100_list.length; i<l; i++)
{
$mylist.append('<li>' + top_100_list[i] + '</li>');
}

取而代之，我们希望在插入DOM结构之前先在一个字符串里创建一套元素。

JavaScript代码

var top_100_list = [...], // assume this has 100 unique strings
$mylist = $('#mylist'), // jQuery selects our <ul> element
top_100_li = ""; // This will store our list items
for (var i=0, l=top_100_list.length; i<l; i++)
{
top_100_li += '<li>' + top_100_list[i] + '</li>';
}
$mylist.html(top_100_li);

更快的做法，在插入DOM结构之前我们应该总是在一个父节点里包含许多元素

JavaScript代码

var top_100_list = [...], // assume this has 100 unique strings
$mylist = $('#mylist'), // jQuery selects our <ul> element
top_100_ul = '<ul id="#mylist">'; // This will store our entire unordered list
for (var i=0, l=top_100_list.length; i<l; i++)
{
top_100_ul += '<li>' + top_100_list[i] + '</li>';
}
top_100_ul += '</ul>'; // Close our unordered list
$mylist.replaceWith(top_100_ul);

如是你照着上面的做了还是对性能有些迷惑的话，可以参考以下内容：

试一下jQuery提供的Clone()方法。Clone()方法创建节点数的拷贝，随后你可以在这个副本中进行操作。
使用DOM DocumentFragments. As the creator of jQuery points out, 比直接操作DOM性能上更好. 先创建你需要的结构(就像我们上面用一个字符串做的一样), 然后使用jQuery的 insert or replace methods.

除非特别说明，每一个JavaScript事件（如click, mouseover 等）在DOM结构树上都会冒泡到它的父元素上。如果我们想让很多elements(nodes)调用同一个function这是非常有用的。取而代之的是你可以只对它们的父级绑定一次，而且可以计算出是哪一个节点触发了事件，而不是绑定一个事件监听器到很多节点上这种效率低下的方式。例如，假如我们要开发一个包含很多input的大型form，当input被选择的时候我们想绑定一个class name。像这样的帮定是效率低下的：

XML/HTML代码

$('#myList li).bind('click', function(){
$(this).addClass('clicked');
// do stuff
});

反而，我们应该在父级侦听click事件。

JavaScript代码

$('#myList).bind('click', function(e){
var target = e.target, // e.target grabs the node that triggered the event.
$target = $(target); // wraps the node in a jQuery object
if (target.nodeName === 'LI') {
$target.addClass('clicked');
// do stuff
}
});

父节点担当着发报机的工作，可以在触发了事件的目标element上做一些工作。如果你发现自己把一个event listener帮定到很多个element上，那么你这种做法是不正确的。

虽然jQuery对没有找到任何匹配的elements处理的很好，但是它还是需要花费时间去查找的。如果你的站点有一个全局的JavaScript，你可能会把每个jQuery function都放在 $(document).ready(function(){ // all my glorious code })里。不要这样做。只去放一些页面上适合用到的function。这样做最有效的方式是你的模板可以完全控制任何时候或者地方执行JavaScript以内联脚本的方式初始化function。例如，在你的“article”页面模板里，你可能在body标签关闭之前包含以下代码

XML/HTML代码

<script type="text/javascript>
mylib.article.init();
</script>
</body>

如果你的页面模板包含多种有可能在页面或者不在页面上的模块，或者为了可视化效果你需要它们稍后再初如化，你应该在这些模块之后立即放置初如化函数。

XML/HTML代码

<ul id="traffic_light">
<li><input type="radio" class="on" name="light" value="red" /> Red</li>
<li><input type="radio" class="off" name="light" value="yellow" /> Yellow</li>
<li><input type="radio" class="off" name="light" value="green" /> Green</li>
</ul>
<script type="text/javascript>
mylib.traffic_light.init();
</script>

你的全局JavaScript库看起来应该是这样的：

JavaScript代码

var mylib =
{
article_page :
{
init : function()
{
// Article page specific jQuery functions.
}
},
traffic_light :
{
init : function()
{
// Traffic light specific jQuery functions.
}
}
}

有一种诱惑会使jQuery开发者hook所有事情到 $(document).ready 这个虚伪的事件里。毕竟在大多数例子里都可以看到这样使用。虽然$(document).ready 非常有用，它在页面呈现时发生，虽然其它对象还在下载中。如果你发现你的页面在下载中停顿，就有可能是$(document).ready 引起的。你可以通过把jQuery functions帮定到$(window).load事件来减少下面下载时的CPU使用率，它是在所有HTML（包括iframe内容）都下载完以后才去调用所有对象的。

$(window).load(function(){
// jQuery functions to initialize after the page has loaded.
});

多余的功能，如拖拽、帮定可视化效果和动画、预读取图片等，使用这种方法比较好。

虽然和jQuery无关，但在这里也要提一下。使JavaScript函数和变量变得可读是一个趋势，这对开发者来讲是必不可少的，但对普通用户来讲没有任何关系。不用什么借口，是时候把JS压缩纳入我们的工作流程中来了。注释你的代码，在投放到生产环境之前找一个压缩工具进行压缩。使用YUICompressor 压缩你代码中多余的浪费的字节。根据我们的经验，它可以安全的把JavaScript压缩的尽可能小，而不会多占用CPU。小提示：为了在YUICompressor里最大化压缩，应该这样这样定义变量（例如：var my_long_variable_name;）

学习jQuery最好的方法就是去查jQuery的文档了，可以当作手册来用。

本文来自博客园，作者是Skyline.xin，来源网址是：http://www.cnblogs.com/trendline/archive/2010/02/05/jquery-performance-rules.html，用他的话来说，他是翻译：http://www.artzstudio.com/2009/04/jquery-performance-rules/，可惜我的英文太差。否则我也可以翻译啥的了。。

感谢翻译者为我们带来的快乐。

Javascript | 评论:0 | 阅读:16597

Submitted by gouki on 2010, February 6, 11:05 PM

关于飞信，我上次写过学着写PHP飞信，然而今天晚上我把上文中测试的内容重现时却发现，现实有点残酷。我用curl的时候，速度居然没有fsocketopen快？我于是多次测试，然而，我却得到了一些令人沮丧的结果

【$postData,$postLength，都不提供。。。】

1、curl，利用curl来post

平均【大约 1.8~1.9秒】

$ch = curl_init();
$chOptions = array(
CURLOPT_URL => "http://nav.fetion.com.cn/nav/getsystemconfig.aspx",
CURLOPT_HTTP_VERSION => 'HTTP/1.0',
CURLOPT_USERAGENT => sprintf('IIC2.0/pc %s' , self::FETION_CLIENT_VERSION),
CURLOPT_ENCODING => 'gzip,deflate',
CURLOPT_HTTPHEADER => array('Content-Type: text/xml; charset=utf-8'),
CURLOPT_POST => 1,
CURLOPT_POSTFIELDS => $postData ,
CURLOPT_RETURNTRANSFER => 1,
CURLOPT_HEADER => 0
);
curl_setopt_array($ch, $chOptions);
$res = curl_exec($ch);

2、fsocketopen，同样POST数据

平均【大约 0.8~0.9秒】

$headers=<<<eot
POST /nav/getsystemconfig.aspx HTTP/1.0
User-Agent: IIC2.0/pc 3.1.0480
Accept-Encoding: deflate, gzip
Host: nav.fetion.com.cn:80
Content-Length: {$postLength}
{$postData}
eot;
fwrite($fp,$headers);
$received=fread($fp,1024);
fclose($fp);

3、stream，利用文件流

平均【大约 1.3~1.4秒】

$opts = array (
'http' => array (
'method' => 'POST',
'header'=> "Content-type: application/x-www-form-urlencoded" .
"Content-Length: " . $postLength . "",
'content' => $postData
),
);
$context = stream_context_create($opts);
//$received = file_get_contents('http://nav.fetion.com.cn/nav/getsystemconfig.aspx', false, $context , 0 ,1024);
$fp = fopen('http://nav.fetion.com.cn/nav/getsystemconfig.aspx','r',false,$context);
if($fp){
$received = fgets($fp, 512); //在这里我用了三种测试，fgets,fread,stream_get_contents
fclose($fp);
}

在这里我用了两种方式，一种是file_get_contents还有一种是fopen，file_get_contents的方法被我注释了。。。

在这三种中，我发现真的只有fsocketopen后然后fread是最快的。

真让我沮丧。。因为第三种方法中file_get_contens也可以指定读取的长度。但PHPRPC作者andot却认为，file_get_contents把头已经读回来了。我想，file_get_contents其实已经把数据读回来了，虽然是指定了长度，但其实只是读回来后再截取的。

唉。看来，不得不用fsocketopen了。。不知道除此之外有没有什么好办法。

PHP | 评论:0 | 阅读:17645

Submitted by gouki on 2010, February 6, 3:34 PM

昨天是老婆生日，陪着她去逛了逛商场，在她逛的时候，我就在那里偷拍商场的海报。
拍的时候还是很当心的，怕被人痛欧。没办法，这年头，都是喜欢拿着鸡毛当令箭。

有的海报我还是挺喜欢的，象E.LAND品牌的，看起来就象电影海报。还有一些，也挺漂亮，只是海报居然对着商铺的里侧，不走进去还真看不到，这样又怎么体现出海报的作用？真想不通。

或者最近一直在想着如何赢利，所以看到一些特别的东西就想着记录下来。昨天还拍了一张曹扬的“创业小店”，说是团委搞的一个创业园区，说白了就是让大学生自己养活自己而己。唉。。

上图【晚上，没办法。。有点糊了】

哪天自己能够创业？想起一哥们，已经陷在创业的泥潭。我胆量还是挺小的。
老婆说，郑渊洁有次在采访的时候说，如果在法律允许的范围内，越早有小孩是越好的，因为只有那样你才有压力和动力去创业。
现在，却是想着要稳定，却不知道怎么搞

对了，我说的海报的图在：http://g.52cd.net/archives/356，点击小图可以看大图。

Misc | 评论:0 | 阅读:14652

Submitted by gouki on 2010, February 5, 10:42 AM

飞信，对于我们搞开发的人来说，确实还是需要的。网上也有一些php飞信的类（看的也很累），不过，我看的是zendstudio.net，因为看起来好象方便。
自从上次飞信改过IP地址后，我才真正的仔细看过这方面的东西（其实也只是稍看看啦。。。哈哈）

其实，说真的，飞信这东西，PHP版的在我眼里感觉很深奥，因为要抓包，以前还从来没有这样抓过，总觉得是一件很复杂很难的事情。但自从不能给好友发短信后，我到Zendstudio.net上看过别人回复后，才发现他根本就没有提供。所以就萌发了要自己的写的念头。

于是找了smartsniff这个抓包工具，找来libfetion，关掉我所有的上网的程序。然后运行他开始抓包。
发现真的很方便。。。
于是就准备开始写了。不用fsockopen，而准备直接采用curl。。。目前刚刚写了一个getSIPC，发现速度好象是比fsockopen的速度快很多。【可能是因为，zendstudio.net他是按字节读取，然后用正则处理获得sipcproxy，而我是直接取回来用simplexml_loadstring，然后直接输出这个对象的值？也或许只是一个感觉而己，其实并没有变化？晚上回去输出执行时间看一下就知道了。HOHO】

慢慢写，因为注意过给好友发短信的功能，是利用SID的，但普通情况下，获取不到SID，必须得先把好友拉回来做一个缓存。这样就可以了。所以本版飞信应该不会公开，否则，谁也不敢使用。【随便说说，还没写完呢。。。。】

Tags: 飞信, fetion, php

PHP | 评论:1 | 阅读:22071

Records:35‹1 2 3 4 567 ›

« 2010年02月 »