雨夜带刀's Blog

浅谈DOM事件的优化

在 JavaScript 程序的开发中,经常会用到一些频繁触发的 DOM 事件,如 mousemove、resize,还有不是那么常用的鼠标滚轮事件:mousewheel (在 Firefox 中,滚轮事件为 DOMMouseScroll)。

浏览器为了确保这些事件能够及时响应,触发的频率会比较高,具体的触发频率各浏览器虽然有出入,但出入不大。很多时候在需要注重性能的场景下使用这些事件会想各种办法对事件的触发频率进行优化,下面说说我的一些优化方法。

mousemove 在拖拽中的优化

拖拽( Drag )是很常见的一个功能,在浏览器还没实现原生的拖拽之前,通过 mousedown、mousemove、mouseup 3种事件类型就可以模拟出拖拽效果来,当然这里不谈如何去实现一个拖拽功能。

mousemove 事件在拖拽的应用中既要确保拖拽的流畅度,又要确保拖拽时的性能,如何保持两者的平衡呢?

等宽瀑布流布局的开发实践

Pinterest 当时的成功,在国内掀起了一股瀑布流的潮流,但很多国内的网站仅仅只学会了使用瀑布流的布局方式,却没有看到 Pinterest 成功背后的模式。页面的布局方式仅仅是一个壳,瀑布流的布局方式也最多算是一个漂亮的壳。如果没有实质性的内容,光有壳就只能让用户图个新鲜。就好比帅哥美女仅仅是外表漂亮,而没有内涵和气质一样。

瀑布流展现的内容通常是扁平化、琐碎的东西,首先吸引人的应该是图片,如果瀑布流中文字过多,只会给人很杂乱的感觉,所以瀑布流更适合单纯的图片浏览。

最近公司的项目–360图片的美女秀场,就用到了瀑布流的布局方式,这种纯粹的看美女图片的页面用瀑布流还是挺合适的。

以前并未开发过瀑布流布局的网站,第一个想到的实现方式就是多列浮动,从表面上看这种方式要简单。

传统的定位布局方式

但是,目前主流的瀑布流布局都是采用定位的方式,对每个单元格计算定位值,如下图:

定位方式实现的瀑布流布局

5173首页前端性能优化实践

从制定计划,到前后端的开发,最后到测试以及上线,历时4个月,5173首页前端性能优化项目终于顺利上线,并达到了预期的性能优化目标。这次的项目并不是改版,而是原来首页的设计和功能不变,只做重构和优化。虽然项目名叫前端的性能优化,但也并不仅仅是前端单方面的工作,要想彻底的把优化做好,就需要前后端的通力配合。

历史背景

老首页应该是09年上线的,首页也是各部门争夺资源的地方,大家都想在首页有一席之地,各部门在首页都有各自的小豆腐块,如果有新项目的上线,大多是打补丁的方式,并且唯一的规范就是能保证功能正常运行,至于性能方面,那是很遥远的事。苦逼的是开发人员,每次有首页的修改都是担惊受怕的,怕改了这个那个又出问题,历史原因造成的问题越来越多。

最先看不下去的应该是前端人员,因为首页在不断的修修补补中,性能已经差到前端人员觉得很没面子的地步了。但是看不下去也仅仅是看不下去,没法采取实质性的措施来改善,因为这牵涉到各部门的利益,也如上面说的,优化不仅仅在于前端,于是前端人员也只能向上面反映问题。到了今年,终于领导也看不下去了,某领导在海外访问我司的8185173首页,对比起来前者首页很快(插播一句,818首页前端开发人员也正是我^_^),后者首页很慢,差别较大。于是在领导重视的推动下,5173首页的前端性能优化项目才经过批准,开发人员终于可以放手大胆的折腾了。

让document.write的广告无阻塞的加载

广告代码分析

很多第三方的广告系统都是使用document.write来加载广告,如下面的一个javascript的广告链接。

<script type="text/javascript" src="http://gg.5173.com/adpolestar/5173/
;ap=2EBE5681_1BA3_4663_FA3F_E73D2B83FBDC;ct=js;pu=5173;/?"></script>

这个javascript请求返回的是这样的一段代码:

document.write( "<a href='http://gg.5173.com/adpolestar/wayl/;" + 
"ad=6FF3F844_33E6_86EE_3B96_D94C1CF1AEC4;ap=2EBE5681_1BA3_4663_FA3F_E73D2B83FBDC;" + 
"pu=5173;/?http://www.7bao.com/g/xlsbz/index' target='_blank'><img src='" +
"http://html.5173cdn.com/market/yunyinga/xly132.gif' " +
"border='0' width="132px" height="58px" /></a>" );

这种看似有点二的加载方式,但是你却没办法改造它,因为它本身就是第三方的。并且代码都添加了统计的功能,上面的javascript的广告链接每请求一次都会统计一次,生成的代码也有点击统计的功能,也就是说必须以这种方式来进行加载。

document.write是在页面渲染的时候同步进行的,必须要等javascript代码下载好并且document.write执行完后才接着渲染后面的内容,如果广告比较多的话,就会导致页面阻塞,尤其是在页面的首屏插好几个图片尺寸比较大的这种广告,那么阻塞情况就相当明显和严重,会让用户觉得你这个网页很慢。

javascript广告的阻塞加载

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;

头像

雨夜带刀

前端开发工程师,技术宅,现居北京。

雨夜带刀的开源项目

easy.js
一个简洁的 JavaScript 类库,集成了模块加载器,同时也有包含了常见的的组件库,可访问项目网站
seed
符合 AMD 规范的 JavaScript 模块加载器。
ecope
从 easy.js 组件库中移值过来的基于 jQuery 的组件库,简单实用,API 风格统一。
第 1 页,共 2 页12