Webtop——html5 桌面 app 开发引擎。基于 webtop,你可以使用 html5 和 css3 等新技术构建桌面 app,即开发直接运行于 windows 上的软件,使用透明渲染模式能将网页直接渲染在桌面上,轻松实现透明阴影等特效。而且,提供了大量的本地 api,使你的 app 能达到跟本地 app 一样的体验。基于它,你可以开发诸如浏览器,QQ,PS,桌面 widget 等桌面 app。这种开发软件的方式,相比传统桌面软件开发方式的开发效率,个人认为至少是其的 10 倍。
时至今日,这个问题已经不能简单回答了。html5,css3 技术的出现已经使 web 的能力得到了很大的提高,但,web 仍有局限!由于安全性的考虑,浏览器对 web 进行了种种限制,例如:
九宫格布局一直是前端比较纠结的一个问题,一是切图麻烦,二是修改 css 麻烦。本文将要介绍一种用一张小图实现九宫格布局的方法。使用此方法每次只要传图片路径跟四个边角的剪裁尺寸即可实现九宫格布局。请先看例子:melodyui.sinaapp.com
下面讲讲原理:
其实原理很简单,就是使用了 css 的 clip 属性。对中间需要平铺的区域进行了拉伸,然后再进行剪裁定位。主要的工作量都在坐标的计算上面,所以我这里不多说,可自行查看源代码。
最后希望这个方法能对大家有所帮助,谢谢大家。
今天写了一个滚动条 UI 组件。欢迎大家体验:http://alloyteam.github.com/ui/
为何称之为完美呢?只因其具有以下优点:
下面讲核心部分。
这段时间做一个关于 widget 的项目,忙了一两个月了。在临发布的时候突然出现一个问题,一个音乐 widget 的内存不断上涨,且不会回落,最终导致这个 widget 只能下架。
因为我在 ie9 没发现内存上涨的问题,所以我觉得这是 webkit 内存管理的问题。所以一直没去看他,等待客户端的同事去解决。直到有一天,客户端同事说了一个方法,说防止 src 频繁切换,建议延迟 1s 去设置 audio 标签的 src。开始我想这不是 web 的原因,所以给予断然拒绝,另外也是怕维护麻烦。但是,我还是进行了尝试。没想到效果出奇的明显,内存基本不会上涨了。
从这件事,我意识到了,凡事不能说绝对。因为它包括了太多情况,涵盖了很长的一段时间,而且使你不能有回旋的余地。
下面说说解决的方法。因为我们想要的是 src 不频繁切换,所以单单做延迟是不会有任何结果的。关键是要使一首歌保持 1s 以上才会去设置它的 src。这句话我说来简简单单,但是要真正理解是需要很深入的思考的。代码我会在最后面给出来,大家可以自己试着写写,然后对照一下。
通过客户端同事的进一步研究发现,发现对 Dom 对象的某个属性就行频繁操作就会导致上涨。这里还有个比较明显的属性就是 buffered,大家可以通过设置一个频率为 20ms 的定时器去读取这个属性,就可以进行测试了。
以此类推,是否对于 img 标签也有类似的情况呢。这个有待各位同仁进行验证。
相关代码:
1 2 3 4 5 6 7 8 9 10 11 |
var id,audioEl=new Audio(); function loadAudio(src){ if(id){ clearTimeout(id); id=null; } id=setTimeout(function(){ audioEl.src=src; id=null; |