雨夜带刀's Blog

jQuery常用选择器性能测试

<p>一直想知道jQuery的选择器到底哪个性能更好,却一直苦于没有顺手的测试工具。直到前不久同事老马开发了一款测试JavaScript性能的给力小插件<a href="http://www.kacakong.com/archives/300" target="_blank">FireJSPT</a>,这个插件是基于Firebug的,可以灵活的对页面中的JS代码片断进行测试,使用的时候只要将FireJSPT的类库文件导入即可:</p>
<pre class="brush: c-sharp">
&lt;script type="text/javascript" src="firejspt.js"&gt;&lt;/script&gt;
</pre>
<p>使用FireJSPT,本博对jQuery的常用的选择器在Firefox下做了一个测试,测试环境如下:</p>
<ul>
<li>操作系统:Windows 7旗舰版本</li>
<li>浏览器:Firefox 3.6.13</li>
<li>插件:Firebug 1.60(未安装其他插件)</li>
<li>jQuery版本:1.44</li>
</ul>
<h3>层级选择器(ul li)和find的对比</h3>
<p>HTML结构如下:</p>
<pre class="brush: c-sharp">
&lt;ul class="list"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href="#"&gt;jQuery常用选择器性能测试&lt;/a&gt;&lt;/li&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href="#"&gt;jQuery常用选择器性能测试&lt;/a&gt;&lt;/li&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href="#"&gt;jQuery常用选择器性能测试&lt;/a&gt;&lt;/li&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href="#"&gt;jQuery常用选择器性能测试&lt;/a&gt;&lt;/li&gt;
&nbsp;&nbsp;&nbsp;&nbsp;<!–省略455个li标签–>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href="#"&gt;jQuery常用选择器性能测试&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</pre>

jQuery TAB插件

最近的项目用到TAB效果的地方较多,于是自己稍微封装了下,写成了jQuery插件,方便以后使用,顺便重温下jQuery插件的实现机制。

在写插件之前对常见的TAB效果做了下总结,大体上也就那几种效果。插件力求简单易用,只要能实现常见的功能即可。

参数说明:

  • event
  • 触发TAB的事件类型,鼠标悬停:mouseover,鼠标点击:click,默认为mouseover。
  • timeout
  • 事件延迟,单位为毫秒,默认为0。
  • auto
  • 自动切换,单位为毫秒,默认为0。
  • callback
  • 回调函数,触发TAB时执行,函数的参数返回的是this。

新模板!

转眼间博客已沉寂2个多月了,原因诸多,但恐怕大多是自找借口。当然最大的原因还是因为在折腾新模板,新模板没完之前就不想更新,这对于本博来说是应该最好的借口了。

原来的模板从博客上线到今天,也没用多久,可能外表看起来清爽,但是感觉不是很实用,在发表文章的时候感觉有诸多的不便,很是不爽。索性就思量着换个全新的模板。

很喜欢新模板的布局与版式,简洁,本博一贯的风格,更多的考虑了可阅读性以及用户体验。本想整个低调的灰色,奈何我对绿色太有爱了,感觉自己有点偏执了。

最后,发个原来模板的截图,就当是在这里留给纪念吧。
<div class="art_inner_img"><img src="http://stylechen.com/wp-content/uploads/2010/11/old_templates.jpg" alt="纪念老模板" /></div>

文字溢出的处理

经常会在项目中碰到文字溢出的情况,解决起来也比较麻烦,而最大的麻烦还是在浏览器的兼容问题上。至少到目前为止,我还没找到用CSS就能完美解决文字溢出的办法。前几天就再次碰到这个问题,之后一查,发现和迅雷的一个页面重构的面试题惊奇的相似,仔细一想,也没啥巧合不巧合的,只能说这种情况太常见了。

要求是这样的:一个新闻列表,新闻标题后紧跟着日期,新闻标题的宽度超过一定的宽度就要自动截断,但是日期必须显示完整。

花了点时间研究了下,最终的效果对于浏览器的兼容不是很理想,但我觉得也是很不错了。

YUI Compressor–另一款压缩JS/CSS的小工具

&lt;p&gt;
前不久给同志们介绍了压缩JavaScirpt和CSS文件的&lt;a href=&quot;http://stylechen.com/minify.html&quot; title=&quot;压缩JS/CSS的利器–minify&quot;&gt;minify&lt;/a&gt;,这个是用PHP5开发的基于服务端的压缩,并且需要Apache+PHP环境的支持。虽然压缩效果还是比较理想,但是有环境限制,今天我再给同志们介绍一款可以在本机压缩JavaScirpt和CSS文件的程序:YUI Compressor。&lt;/p&gt;
&lt;p&gt;YUI Compressor是Yahoo!开发的一个专门用于压缩JavaScript和CSS文件的小工具,操作系统中需要jdk环境的支持。所有要使用这个小工具,得先安装jdk,然后配置JAVA_HOME的环境变量。&lt;/p&gt;
&lt;p&gt;jdk的下载地址:&lt;a href=&quot;http://www.oracle.com/technetwork/java/javase/downloads/jdk6-jsp-136632.html&quot; title=&quot;jdk的下载地址&quot; target=&quot;_blank&quot;&gt;http://www.oracle.com/technetwork/java/javase/downloads/jdk6-jsp-136632.html&lt;/a&gt;&lt;/p&gt;

头像

雨夜带刀

主要折腾前端
现居北京

第 15 页,共 18 页« 最新...10...1314151617...最旧 »