校内怎么这么慢

作者:yaya | 时间:2009年10月2日 | 分类 学海无涯 | 标签 校内 YSlow | 1回复

校内,发现校内现在真的是太慢了啊。感觉以前似乎没这么慢吧。

开个页面等很长的时间,然后还要一直加载...

到底怎么回事。

不多说,直接用YSlow看看。

 

Grade F on Make fewer HTTP requests

This page has 4 external Javascript scripts. Try combining them into one.
This page has 4 external stylesheets. Try combining them into one.
This page has 44 external background images. Try combining them with CSS sprites.

Grade F on Use a Content Delivery Network (CDN)

There are 100 static components that are not on CDN.

Grade F on Compress components with gzip

There are 10 plain text components that should be sent compressed

Grade F on Reduce DNS lookups

The components are split over more than 4 domains

Grade F on Reduce the number of DOM elements

There are 2123 DOM elements on the page

 

 这几点是最严重的原因。

而校内竟然没有做css sprites,使得像  这样的gif,每次都要一个请求。而我们知道,在“你正在干嘛?”里面是有很多的。以及js/css一大堆(功能太强大了)。

CDN,简单说就是个特别的镜像,它比一般的聪明,并且具有缓存,流量导流等功能。就是让你速度更快。

我们看到,在F级别里面,除了CDN这东西是要钱的,其他的都可以改进编码及其他方式来得以提高的(当然,也要花钱,维护,运营,更新...加班费算不算,哈哈)。

就写到这里了。

 

jquery 图片居中

作者:yaya | 时间:2009年9月30日 | 分类 学海无涯 | 标签 jquery 居中 javascript | 6回复

看到网上有许多图片居中(水平+垂直)的方法。感觉都不错。

有许多采用的是display:table-cell等的。我觉得这样就完全不顾及IE6的效果。虽然说除IE6其他都表现正常,可是毕竟现在用IE6的人还是很多的。至少网吧就是一个IE6大本营。

除此之外,许多用的是vertical-align:middle,这个IE6下也容易出问题。

其他的选择的方法就感觉复杂了。
 

但是,我想可以弄个简单的方法来完成这个事情吗?

一般写法
  1. .divimg{
  2. height:200px;
  3. width:200px;
  4. border:1px #000 solid;
  5. margin-right:2px;
  6. float:left;
  7. }
  8.  
  9. <div class="divimg">
  10. <img  src="1.jpg" id="img1" alt="1" />
  11. </div>
  12.  
  13. <div class="divimg">
  14. <img  src="2.jpg" id="img2" alt="2" />
  15. </div>
  16.  
  17. <div class="divimg">
  18. <img  src="3.jpg" id="img3" alt="3" />
  19. </div>
  20.  


我希望,就按照这样的写法,而得到下图的效果:



所以我写了个jquery小插件imgC。

imgC
  1. (function($){
  2. $.extend($.fn, {
  3.         imgC: function() {
  4.         var parentHeight = this.parent().height();
  5.         var parentWidth =  this.parent().width();
  6.         if (parentHeight!==0&&parentHeight!==0){
  7.             var imgSrc = this.attr("src");
  8.             this.attr("src","blank.gif");
  9.             this.css({"background-image":"url("+imgSrc+")","background-repeat":"no-repeat","background-position":"center","width":parentWidth,"height":parentHeight});
  10.          }
  11.         }
  12. });
  13. })(jQuery);

调用时候:

调用
  1. $(document).ready(function(){
  2. $("#img1").imgC();
  3. $("#img2").imgC();
  4. $("#img3").imgC();
  5. });


DEMO地址

网络投票刷票法

作者:yaya | 时间:2009年9月24日 | 分类 学海无涯 | 标签 投票 刷票 公平 | 0回复


如今网络中大大小小的投票是数不尽。随便弄个什么比赛,你好好比就是啦。非得弄个网上投票。大公司大网站做投票,有人气,有技术保证,用户体验与公平性这两个方面才能保证。而一般的呢?如地方上的一些政府网站或者其他的小网站,一做网络投票,就是逼着大家去刷票。当然,这个“刷”也不一定就是去走技术的路。
当然,投票公司也应运而生,我去看了下价格,真的很坑人。而他们赚钱的原因很大程度是主办方的疏忽造成的。

这本来没什么,主办方的意思也就是让大家亲朋好友啊,来投票,同时他在投票页面给你弄几个广告,本来嘛,人家是要赚钱的。而对于参赛选手呢?天天关注自己的票数,要是有IP或其他限制的,一个劲让朋友来投。
上次去一个网站给小妹妹投票,看到另外一个参数选手的妈妈在留言板里面说:上班也投,下班也投,见个熟人就让帮忙投,网吧也投,家里也投。

我觉得这样完全没有意思。同时,对于互相刷票的,互相对骂的,实在是太多了。其实主办方也不管那么多,管你们刷不刷哦。
这些比赛,其实不参加也罢了。

而对于一些技术上的原因就更是太多了。这些原因我想打底是主办方没有重视比赛的原因吧。我粗略分为以下几种和简单刷票方法,非后台,目前是想一些主办方改进自己的投票系统。高手见谅。

一 随便投型

描述:此类投票网站就是弄个人像或者人名,点一下就涨一下。没有任何限制,所以是随便投。这类投票网站的初衷我想是让许多人自己给自己不停刷的吧。
刷票:这类投票网站对于任何一个会用浏览器的人来说,都是可以不停刷的。所以这里提供一个简单有效的刷票方法。
            需要:若干电脑 加 若干石头或者其他有一定质量较小物体
            方法:找到提交地址。把石头放在F5按键处。依法炮制其他电脑。哈哈。虽然很雷,但是绝对有效。

二 IP限制型

描述:此类网站有IP限制。一个IP在一定时间就只能投一个数目的票数。这类网站的初衷是想让你找亲戚朋友使劲给你刷。所以这类网站对于拉帮结对很N的人来说是小case。所以在帮派选组中用此法最好不过。
刷票:既然IP限制,那么就多找些IP小弟就是了。上网一搜IP代理,多如牛毛。或者拨号的用户,重播IP也可以。这样也就不是个事了。用程序来做的话,就更快了,先弄了1000来个IP放着,或者就直接抓取,然后设置PROXY,然后...所以单独IP限制也不行。

三 验证码型

描述:在投票前,需要你输入验证码。每投一次,就得输个验证码。这样看来,应该没有问题了吧。最多你一个一个输验证码吧。
刷票:按理这个不会刷的。但是许多投票系统的验证码太简单。比如我就遇到过每个数字就分析像素点颜色就可以得到数子的验证码图片。好吧,做个复杂的验证码(当然,不能让人也看不懂)。但是,一些投票系统,至少也遇到两三个了,在输入正确的投票后要不是弹出alert,要不是试图关闭页面,要不是要转调页面等,无一例外的是在投票成功后没有对session做处理。这使得我们可以利用这点来做程序刷票。

四 复杂型

描述:投票前要注册,要填身份证,电话号码,邮箱等,然后得去邮箱激活。投票要登录,而登录是需要输入用户名和密码,才能投票,对用户做限制。
刷票:看起来这个似乎已经很到位了。可是,一些系统,在最后一个环节存在漏洞。服务器需要的仅仅是正确登录后的cookies!这自然就不用多说了,直接伪造cookies,然后它就当真的。无语吧。

其实还有许多情况。以后再慢慢补充吧。其实只要做好验证码这一最重要环节,避免机器人来投就好了。这样才能让投票环节公正公平。

转-像素(px)到底是个什么单位

作者:yaya | 时间:2009年9月24日 | 分类 学海无涯 | 标签 像素 | 0回复

px,对于许多网页设计者来说,是最常用的CSS长度单位。然而,1px到底多长,恐怕没有多少人回答得上来。 

CSS长度本身有绝对长度和相对长度的区分。 

cm、pt之类的都是绝对长度,它们是物理长度——1cm是1/100米,而1米则大约是光在1秒钟内跑过距离的3亿分之一。(至于光速和1秒的精确值到底是多少,请查阅维基百科光速条目和条目。)1pt则是1/72英寸,而1英寸换算到公制是2.54cm。 

而em、ex,以及百分比,则是相对长度。比如em相对于当前字体大小,百分比则根据属性定义不同有不同涵义,例如margin的值如果是百分比,表示是相对于父元素的width。 


然而,px是什么? 

一般而言,pixel(像素)是图像的基本采样单位。详细解释见维基像素条目。所以它不是一个确定的物理量,也不是一个具体的点或者小方块(尽管可以用点和小方块来呈现),而是一个抽象概念。 

不同的设备,其图像基本单位是不同的,比如显示器的点距,可以认为是显示器的物理像素。现在的液晶显示器的点距一般在0.25mm到0.29mm之间。而打印机的墨点,也可以认为是打印机的物理像素,300DPI就是0.085mm,600DPI就是0.042mm。 

注意,我们通常所说的显示器分辨率,其实是指桌面设定的分辨率,而不是显示器的物理分辨率。只不过现在液晶显示器成为主流,由于液晶的显示原理与CRT不同,只有在桌面分辨率与物理分辨率一致的情况下,显示效果最佳,所以现在我们的桌面分辨率几乎总是与显示器的物理分辨率一致了。 

按照CSS规范的定义,CSS中的px是一个相对长度,它相对的,是viewing device的分辨率。这个viewing device,通常就是电脑显示器。典型的电脑显示器的分辨率是96DPI,也就是1像素为1/96英寸(实际上,假设我们的显示器分辨率都与物理分辨率一致,而液晶点距其实是0.25mm到0.29mm之间,所以不太可能是正好1/96英寸,而只是接近)。 

一般来说,px就是对应设备的物理像素,然而如果输出设备的解析度与电脑显示器大不相同,输出效果就会有问题。例如打印机输出到纸张上,其解析度比电脑屏幕要高许多,如果不缩放,直接使用设备的物理像素,那电脑上的照片由600DPI的打印机打出来就比用显示器看小了约6倍。 

所以CSS规定,在这种情况下,浏览器应该对像素值进行缩放调节,以保持阅读体验的大体一致。也就是要保持一定像素的长度在不同设备输出上看上去的大小总是差不多。 

怎样确保这一点呢?直接按照设备物理像素的大小进行换算当然是一个方式,但是CSS考虑得更多,它建议,转换应按照“参考像素”(reference pixel)来进行。 

眼睛看到的大小,取决于可视角度。而可视角度取决于物体的实际大小以及物体与眼睛的距离。10米远处一个1米见方的东西,与1米远处的10厘米见方的东西,看上去的大小差不多是一样的,所谓一叶障目不见泰山,讲的就是这个常识。 

因此CSS规范使用视角来定义“参考像素”,1参考像素即为从一臂之遥看解析度为96DPI的设备输出(即1英寸96点)时,1点(即1/96英寸)的视角。 

请注意这个差别——CSS规范定义的参考像素并不是1/96英寸,而是1/96英寸在一臂之遥的看起来的视角。通常认为常人臂长为28英寸,所以其视角可以计算出来是0.0213度。(即(1/96)in / (28in * 2 * PI / 360deg) ) 

我们在使用不同设备输出时,眼睛与设备输出的典型距离是不同的。比如电脑显示器,通常是一臂之距,而看书和纸张时(对应于打印机的设备输出),则通常会更近一些。看电视时则会更远,比如一般建议是电视机屏幕对角线的2.5到3倍长——如果你是个42'彩电,那就差不多是3米远。看电影的话……我就不知道多远了,您自己量吧。 

因此,1参考像素: 
对于电脑显示器是0.26mm(即1/96英寸); 
对于激光打印机是0.20mm(假设阅读距离通常为55cm,即21英寸); 

而换算时,对于300DPI的打印机(即每个点是1/300英寸),1px通常会四舍五入到3dots,也就是0.25mm左右;而对于600DPI的打印机,则可能四舍五入到5dots,也就是0.21mm。 

 
上图中,左边的屏幕(可以认为是电脑屏幕)的典型视觉距离是71厘米即28英寸,其1px对应了0.28mm;而右边的屏幕(可以认为是你的42寸高清电视)的典型视觉距离是3.5米即120英寸,其1px对应1.3mm。42寸的1080p电视,分辨率是1920*1080,则其物理像素只有0.5mm左右,可见确实是高清哦。 

综上,px是一个相对单位,而且在特定设备上总是一个近似值(原则是尽量接近参考像素)。 

然而,如果你把绝对单位理解为对输出效果的绝对掌控,事情却大相径庭。就网页输出的最主要对象——电脑屏幕来说,px可被视为一个基准单位——与桌面分辨率一致,如果是液晶屏,则几乎总是与液晶屏物理分辨率一致——也就是说网页设计者设定的1px,就是“最终看到这个网页的用户的显示器上的1个点距”!反倒是那些绝对单位,其实一点也不绝对。 

因为绝对单位比如cm或者pt,显示在屏幕上时最后还是要换算为像素,而且这种换算不是按照像素的实际物理长度来换算的(浏览器不用知道,也不可能知道当前这台显示器的1px物理长度到底是多少),而是按照桌面设定的DPI计算的。也就是说,网页设计者指定某个字体是12pt(即1/6英寸或4.2mm),实际上你量量屏幕,几乎不可能是正好12pt,而只是接近12pt的16px(按照96DPI换算)而已。如果你的屏幕点距是0.29mm,则实际上是4.64mm或13.15pt。假如你把桌面改为大字体(120DPI),则最终12pt相当于20px,按照0.29mm点距,最终效果是16.44pt。 

过去,建议网页设计者不要使用px,一个原因就是基于用户可以根据自己的需要调节桌面DPI,从而控制绝对长度的实际长度(绕口令啊)。 

然而这其实是可疑的。既然绝对长度的实际长度可以根据需要调节,没有理由px这样一个相对长度不能根据需要调节。就好像照片在实际打印时你当然可以根据需要缩放一样,以px设定的字体和图像在实际显示时完全可以进行缩放——这时网页设计者指定的1px就不再对应于用户桌面的1px,而是可能对应1.2px或1.5px或其他值。 

过去浏览器的调节字体大小的选项只对绝对长度有效(相当于调节浏览器内部的DPI),对px无效,这只能说是过去浏览器的设计问题,并不是px的固有问题。现在浏览器都已经支持针对以px设定的字体的缩放了。像Firefox,用户还可以选择是单单缩放字体,还是连图片一块儿缩放。所以全部使用px的“像素级精确设计”完全是可行的,也是我认为合理的设计方式。毕竟,CSS中的px本来就是要确保一致的阅读体验。至于是流式布局还是固定布局,是否能适应不同的分辨率,那是另一个话题,与是否使用px作为单位并没有直接关联。

转自http://hax.javaeye.com/大牛

javascript语言精粹 笔记二

作者:yaya | 时间:2009年9月17日 | 分类 学海无涯 | 标签 javascript 学习 | 0回复

要是有所得罪请原谅。本是出自一番好意,
只是想显点粗浅技艺,那才是我们的初衷。
                                      ------莎士比亚《仲夏夜之梦》

Crockford一定很喜欢莎士比亚吧。在每一章开头,总会引用一段莎士比亚作品里面的句段。而对于前面这段,用在这里是最好不过,因为这也是我的初衷。

以下列举的一些东西可能比较零散,是对笔记一的一些补充。

一 Crockford建议不要使用/*...*/来注释,而用//。这个看起来似乎有点奇怪。我们在C++,Java里面几乎大多都是使用前者的。而Eclipse里面也提供了选中代码后按快捷键直接添加成为/*...*/注释内容的方法。
我们知道,JavaScript的语法是借鉴于Java的。那理应鼓励使用/*...*/的啊。
Crockford在书中举了一个例子来说明: 

不安全的代码
  1. /*
  2.    var rm_a = /a*/.match(s);
  3. */

我们可以看到,它可能在正则表达式字面上出现。所以会造成不安全。JavaScript的正则表达式是借鉴于Perl,同样Perl也不建议使用/*...*/

二 JavaScript里面只有单一的数字类型,在内部被表示成64位浮点数(double)。同时,没有区分出整数类型,即1===1.0。值NaN(not a number)是一个数值,它表示不能产生正常结果的运算结果。 
以下的判断是否为数字要比isNaN好

isNumber
  1. function isNumber(value){
  2.      return typeof value === 'number' && isFinite(value)
  3. }

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. ...
  8. 12