雨夜带刀's Blog

浅谈DOM事件的优化

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

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

mousemove 在拖拽中的优化

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

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

easy.js发布核心库的稳定版以及组件库

easy.js 核心库升级至 1.0.0,同时发布了组件库。

easyjs.org

easy.js的网站:http://easyjs.org

github地址:https://github.com/chenmnkken/easyjs

一淘九宫格的面试题

来自一淘的 WEB 前端的面试题,题目要求如下:

使用 HTML+CSS 实现如图布局,border-width:5px,格子大小是 50px*50px,hover时边框变成红色,需要考虑 IE6+ 和语义化的结构。

题目不难,主要还是考察面试者对 CSS 灵活运用程度。

一淘九宫格的面试题

以下 DEMO 是来自 JavaScript 罗浮宫3群好几个群员的 DEMO。

查看演示

如果你也有兴趣,不妨试试。

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

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

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

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

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

传统的定位布局方式

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

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

2012年度总结

时间过的飞快,眨眼又过了一年,2012 已经成了历史。往年并没有在博客中写年终总结的习惯,今年算是开个头吧。

工作

今年的工作基本上都是一门心思放在 5173 的新旧版首页上。旧版首页的重构和优化,我作为前端开发人员,算是主唱,成果很显著。对于网页的优化,有了更深刻的理解,总结起来基本就是两点。

  • 1. 尽量减少请求数;
  • 2. 尽量减少请求资源体积;

所有的各方面的优化手段都是为了达到上面的两个目地,还有所谓的雅虎网站性能优化34条黄金法则只能作为指导,千万不能生搬硬套,一定要结合页面的实际情况去做优化。

头像

雨夜带刀

主要折腾前端
现居北京

第 8 页,共 18 页« 最新...678910...最旧 »