小繁的Blog

Event对象跨浏览器的兼容性

by 小繁 on Jun.16, 2009, under java script, 学习笔记

Event对象关联了所有事件,以提供有关事件的信息,但是对Eevent对象的访问各浏览器却存在着差异.
先来看一个Demo:

Tips:You can change the code before run.

在IE中可以正常的运行,如果您是在FF中运行其代码会出现event is not defined的错误提示.在IE中会把event附加成window对象的一个属性,在作为事件处理的一部分访问时会相应填写Event对象所含的数据.

对于基于Netscape的浏览器,是需要作为函数的一个参数传入.

function getPos(evnt){
var posx=evnt.clientX;
var posy=evnt.clientY;
var str=”

(”+posx+”,”+posy+”)

“;
document.getElementById(’info’).innerHTML=str;
document.getElementById(’face’).style.left=posx+’px’;
document.getElementById(’face’).style.top=posy+’px’;
}

不过这种方法无法在IE中被实例化,所以只需在函数中进行相应判断
evnt=evnt||window.event;
这样可以对浏览器的兼容.

Tips:You can change the code before run.

需要注意的是在body中使用内联方法需要显式onmousemove=”getPos(event)”,传入event对象以便对ff的兼容.

Leave a Comment more...

Twitter, Flickr ,Bing,Live,Hotmail

by 小繁 on Jun.02, 2009, under 那些事

twitter, flickr ,skydrive,bing,live,hotmail今天均不能访问了,而MS停用live.com域名颇及到刚刚上线的BING了实在让人匪夷所思,twitter, flickr也被河蟹.OMG,大中华局域网终于建设完成.

Leave a Comment more...

Yahoo!网站性能最佳体验的34条黄金守则

by 小繁 on May.15, 2009, under 学习笔记

Yahoo!的Exceptional Performance团队为改善Web性能带来最佳实践。他们为此进行了一系列的实验、开发了各种工具、写了大量的文章和博客并在各种会议上参与探讨。最佳实践的核心就是旨在提高网站性能。
Excetional Performance团队总结出了一系列可以提高网站速度的方法。可以分为7大类34条。包括内容、服务器、cookie、CSS、JavaScript、图片、移动应用等七部分。

其中内容部分一共十条建议:

一、内容部分

  1. 尽量减少HTTP请求
  2. 减少DNS查找
  3. 避免跳转
  4. 缓存Ajxa
  5. 推迟加载
  6. 提前加载
  7. 减少DOM元素数量
  8. 用域名划分页面内容
  9. 减小iframe的大小
  10. 避免404错误

1、尽量减少HTTP请求次数
终端用户响应的时间中,有80%用于下载各项内容。这部分时间包括下载页面中的图像、样式表、脚本、Flash等。通过减少页面中的元素可以减少HTTP请求的次数。这是提高网页速度的关键步骤。
减少页面组件的方法其实就是简化页面设计。那么有没有一种方法既能保持页面内容的丰富性又能达到加快响应时间的目的呢?这里有几条减少HTTP请求次数同时又可能保持页面内容丰富的技术。

合并文件是通过把所有的脚本放到一个文件中来减少HTTP请求的方法,如可以简单地把所有的CSS文件都放入一个样式表中。当脚本或者样式表在不同页面中使用时需要做不同的修改,这可能会相对麻烦点,但即便如此也要把这个方法作为改善页面性能的重要一步。

CSS Sprites是减少图像请求的有效方法。把所有的背景图像都放到一个图片文件中,然后通过CSS的background-imagebackground-position属性来显示图片的不同部分;

图片地图是 把多张图片整合到一张图片中。虽然文件的总体大小不会改变,但是可以减少HTTP请求次数。图片地图只有在图片的所有组成部分在页面中是紧挨在一起的时候 才能使用,如导航栏。确定图片的坐标和可能会比较繁琐且容易出错,同时使用图片地图导航也不具有可读性,因此不推荐这种方法;

内联图像是使用data:URL scheme的方法把图像数据加载页面中。这可能会增加页面的大小。把内联图像放到样式表(可缓存)中可以减少HTTP请求同时又避免增加页面文件的大小。但是内联图像现在还没有得到主流浏览器的支持。

减少页面的HTTP请求次数是你首先要做的一步。这是改进首次访问用户等待时间的最重要的方法。如同Tenni Theurer的他的博客Browser Cahe Usage - Exposed!中所说,HTTP请求在无缓存情况下占去了40%到60%的响应时间。让那些初次访问你网站的人获得更加快速的体验吧!

2、减少DNS查找次数

域名系统(DNS)提供了域名和IP的对应关系,就像电话本中人名和他们的电话号码的关系一样。当你在浏览器地址栏中输入www.aiyooo.net 时,DNS解析服务器就会返回这个域名对应的IP地址。DNS解析的过程同样也是需要时间的。一般情况下返回给定域名对应的IP地址会花费20到120毫秒的时间。而且在这个过程中浏览器什么都不会做直到DNS查找完毕。 (continue reading…)

3 Comments : more...

MSDN Library 下载

by 小繁 on Apr.28, 2009, under 那些事

MSDN Library for Visual Studio 2008 SP1 (2008 年 12 月版)

稀里糊涂的装上了2005版的MSDN,今天无意在官方找到了最近版的,做个标记!

Leave a Comment : more...

Google PageRank

by 小繁 on Apr.04, 2009, under 那些事

Google PageRank,似乎最近更新了.blog最近很少更新,降值到了2,朋友的blog降到了0位 :twisted: 变的太突然了 :-?

4 Comments more...

No Title!

by 小繁 on Mar.12, 2009, under 那些事

还是没有标题吧……

Audio clip: Adobe Flash Player (version 9 or above) is required to play this audio clip. Download the latest version here. You also need to have JavaScript enabled in your browser.

月光海洋

无意中在路上听到

Audio clip: Adobe Flash Player (version 9 or above) is required to play this audio clip. Download the latest version here. You also need to have JavaScript enabled in your browser.

占有

同学推荐,到底是怎样的心情?似乎看到了发生在那个夏天的故事.

Audio clip: Adobe Flash Player (version 9 or above) is required to play this audio clip. Download the latest version here. You also need to have JavaScript enabled in your browser.

第七封信 七封寄不出去的情书 一首未完成的歌 情书

《海角七号》一首未完成的歌

Audio clip: Adobe Flash Player (version 9 or above) is required to play this audio clip. Download the latest version here. You also need to have JavaScript enabled in your browser.

梁静茹 第三者

有段时间一直在听

4 Comments more...

js-attribute-class

by 小繁 on Feb.19, 2009, under java script, 学习笔记

刚刚做一个例子,想要用getAttribute()方法获取对象的class属性.本来习惯在FF中测试,使用getAttribute(”className”)却总是无法获得结果,后来在ie中测试可得到结果.原来在FF中可识别getAttribute(”class”)在IE下识别getAttribute(”className”).
找了个兼容办法:
if (obj.getAttribute(”className”)== “class名字”||obj.getAttribute(”class”) == “class名字”)

3 Comments more...

函数判断上下兄弟结点

by 小繁 on Feb.18, 2009, under java script, 学习笔记

因为浏览器解析之间差异,在选择兄弟结点时,多数浏览器将元素间的换行符作为了文本结点.这样的情况同样存在于查看元素的子结点时.
使用childNodes查看元素第一层子结点列表.

Tips:You can change the code before run.

IE的输出中只有4个元素,FF同样将元素间的换行符作为了文本结点.

所以使用nextSibling,previousSibling并不能准确返回一个元素.
使用closestSibling方法避免这个问题,其中direction 为1时表示下一个兄弟结点,-1表示上一个兄弟结点:

function closestSibling(node,direction){
var tempObj;
if(direction==-1 && node.previousSibling!=null){
tempObj=node.previousSibling;
while(tempObj.nodeType!=1 && tempObj.previousSibling!=null){
tempObj=tempObj.previousSibling;
}
}else if(direction==1 && node.nextSibling!=null){
tempObj=node.nextSibling;
while(tempObj.nodeType!=1 && tempObj.nextSibling!=null){
tempObj=tempObj.nextSibling;
}
}
return tempObj.nodeType==1?tempObj:false;
},

1 Comment more...

10大实用web应用界面技术<转>

by 小繁 on Jan.22, 2009, under 学习笔记

当今越来越多的应用程序迁移到web平台上。由于没有平台的限制和安装的要求,SAAS的模式看起来非常有吸引力。Web应用程序的界面设计,其核 心就是网页设计,但它的重点主要是在功能方面。要超越桌面应用程序, Web应用程序必须提供简单、直观和即时响应的用户界面,让他们的用户花更少的精力和时间去完成事情。

以前,我们并没有注意到web应用程序这个方式,但是现在是时候仔细看看一些实用的技术和设计解决方案,让Web应用更友好更漂亮。本文主要介绍的 是在现代Web应用程序中,我们对设计模式以及有效设计解决方案进行大量研究并得到结果的第一部分,您可以在下面找到10个收集到的实用界面设计技术以及 在许多成功Web应用程序中得出的最佳做法。

你可以提出进一步的看法,第二部分会尽快出版。你也可以阅读以下相关文章:

  • 5 Useful Coding Solutions For Designers and Developers
  • 10 Useful Techniques To Improve Your User Interface Designs
  • 10 Principles Of Effective Design
  • Five More Principle Of Effective Design
  • Getting Creative With Transparency In Web Design
  • 1、界面元素的需求在用户界面设计中,简单这个原则是很重要的。在任何时候,你在屏幕上显示越多的控制,您的用户将不得不花费更多的时间去搞清楚如何使用界面。当选择变少时,可用的功能变得更加明显更容易被发现。简化的界面虽然是不容易的,尤其是如果你不想限制应用程序的功能的时候。 (continue reading…)

    2 Comments more...

    时光倒转的旅行

    by 小繁 on Dec.31, 2008, under 随感

    今天无意翻到了一年前的日记本,断断续续的记录了两年多的时间里发生的故事,最后的一次是07.2.23日.
    我记得那是夜里睡不着的时候起来记的几句话. (continue reading…)

    10 Comments more...