随笔- 15 文章- 0 评论- 27

置顶随笔

摘要: 好吧，还是先说一些p话，昨天说好这两天的电话面试是下午四五六点的。结果今天早上10点就给我打来电话。表示还准备早上准备一下的，毕竟有一段时间没搞页面了。面试完之后问结果怎么样的时候，那边说如果我是广州本地的就直接给offer了。这，武汉的孩子伤不起呀。可是我真的想去广州。好，p话结束。面向过程编程所有的数据和处理函数都是公有的，整个编程的思维过程就是定义数据，定义处理函数，然后将数据传给处理函数进行处理，处理函数之间也可以互相调用，数据和处理函数紧密耦合。面相对象编程的思维过程是定义一个个对象，对象有自己的属性和行为。因为属性和行为都是从属于对象的，于是有了“对象内”和“对向外”的概念，整个程阅读全文

posted @ 2012-02-04 15:24 beixiao1909 阅读(234) 评论(2) 编辑

[置顶]json的前台操作和后台操作

摘要: Json学习通常情况下,json的在项目中的应用都是在后台把数据传到前台,然后前台再获取json中的数据.例子如下:<html><body><h2>通过 JSON 字符串来创建对象</h3><p>First Name: <span id="fname"></span><br />Last Name: <span id="lname"></span><br /></p><script type="t阅读全文

posted @ 2012-01-20 10:14 beixiao1909 阅读(457) 评论(0) 编辑

2012年5月22日

要毕业了！

520，吃了散伙饭。要毕业了！

突然觉得这样的自己还是小孤独！哈哈

有时候看这样的照片觉得怎么看都看不出我是个搞代码的！或许还带点文静的淑女的样子。可是这就是我啊！我看到后面的李博和帅哥了。呵呵。

这两天都会喝醉，然后让帅哥扶着回宿舍。昨天喝多了的情况下，走那个花坛的5厘米宽的边边，没有掉下来，相信我。当然只是有一段没有掉下来。其实帅哥是个好孩子，我说如果面带微笑的说话会不会让人觉得不严肃。可是我真的只是一个在生气的时候才不会笑的人。最近有一些事。扰乱了心情。没有地方写，只能写在自己的技术博客里了。因为qq里有朋友同事和同学，人人里有同学和男朋友，微博里有男朋友。突然想男朋友以前说有些特定的地方加特定的人，我突然觉得果然是。

1.毕业了。

已经买了29号的票回广州。然后觉得时间好紧迫。好多年前想的毕业已经在眼前了。伸手都能摸到毕业的轮廓。有点伤感的说不出话，只想疯疯癫癫的什么不想，多和大学四年那些照顾我的人醉几次。散伙饭的时候醉的比较厉害。第二天醒的时候唯一能想到的是最后一杯是和班长喝的，边喝边和班长说“班长，你真贱！”结果班长也不说以后改改，还是很贱的说“我就是这样的呀！”×！贱的理直气壮，理所应当！

宿舍的东西清的差不多了。清出了两只戒指，一只尾戒，一只对戒其中的一只。答辩的前一天接到一个电话说另一只戒指已经掉了，想接着做朋友。拒绝了。我是个简单的人，希望自己的关系干净一些。不想有那么多的关系集中在我身上。清东西的时候清出那个带在身上到了很多年的TT。我一个朋友说知道带TT身上的女人是聪明的女人。我说我只是没有安全感，希望在不好的时候自我保护。我想我确实是个安全感不重的人。因为我总是会担心各种事。然后不停的努力，让自己优秀再优秀一些。因为我想象不出我不优秀是多么悲惨的一件事。而且有个同事和我说过“女人，长的漂亮不如活的漂亮。”我想做一个活的漂亮的女人！你们看，我在后脚跟还在学校的门槛上的时候已经称呼自己是女人了！天知道我之前是多么痛恨这个成熟的称呼！哈哈！

2.天蝎座

昨天我请吃饭。开始约好的两个女生都没来，还有一个女生突然身体不舒服实在不能来。心情糟透了。结果也喝多了一点。依旧是帅哥送我回宿舍。在路上，帅哥问我是什么星座，我说性感的天蝎。他说不性感！然后他说果然是爱自由的星座。我也觉得是。谈了两年的男朋友，我突然不想谈了，想停一段时间，再继续下去。因为男朋友是学长，先毕业的。他已经经历过自己一个人的时间了，所以想有人陪。可是我才刚毕业，我想先有一段自己的空间。不想那么快住一起。我和男朋友说起的时候男朋友不理解了。但是鉴于我强势的理由“想要个人空间”他妥协了。他说感觉他不答应我们就没戏了一样。我说其实我也只是在商量。不同意还可以再讨论嘛，我就开始想我是不是真的很强势了。又开始觉得上进的女生都很强势吧，而且我还很有事业心。就像他要我去他家，我会说还什么都没有，去什么。虽然很多人都会觉得女孩子要求不用这么高的。但是我不想我要求那么低。你说，是不是强势的女生就该一个人一辈子。我昨天和帅哥说我想起以前一句祝福的话，它说“祝你长命百岁，一个人！”想想这是句多么恶毒的话呀，得有多恨才能说出这样的祝福呀！哈哈！

3.感情

你说，有两个人都爱你，你是该高兴呢，还是该郁闷呢！

我以前总是想，我要更多的爱。因为我总感觉我是个容易被人遗忘的人。所以想更多的爱。可是当爱来了。我发现我哪个都不想要，想要一个人了。因为一个人最自由，没有任何的责任，可以安心的敲代码写效果。

嗯，写出来舒服多了。

我真的要毕业了！

posted @ 2012-05-22 12:52 beixiao1909 阅读(58) 评论(2) 编辑

2012年2月16日

html标签全称和功能

摘要: 按字母顺序排列DTD：指示在哪种 XHTML 1.0 DTD 中允许该标签。S=Strict, T=Transitional, F=Frameset.标签全称描述DTD定义注释。STF<!DOCTYPE>定义文档类型。STF<a>anchor定义锚。STF<abbr>abbreviation定义缩写。STF<acronym>acronym定义只取首字母的缩写。STF<address>address定义文档作者或拥有者的联系信息。STF<applet>applet不赞成使用。定义嵌入的 app阅读全文

posted @ 2012-02-16 15:41 beixiao1909 阅读(223) 评论(2) 编辑

2012年2月10日

如何做好一份前端工程师的简历（说不定什么时候用的到）

一、你是前端工程师

虽然简历都会有一些常规信息，但职业决定了这份简历核心内容和求职成败。所以，这份简历应该尽可能体现你自己是一个合格的前端工程师。专业的前端工程师是什么可以看看去年Nate Koechley的演讲《Professional Frontend Engineering》，前端工程师应该关注的内容可以从克军总结的“前端工程师应该关注什么”的思维导图中窥出一二，学习内容聚合可以看看陈成总结的《前端开发大众手册(包括工具、网址、经验等)》。

毫无疑问，前端工程师应该知道如何用简历体现其专业技能和职业精神，这是每个应聘者应该考虑的问题。

二、内容为王

个人信息
1. 姓名 _（必需）
2. 性别 _（必需）
3. 年龄 _（必需）
4. 联系电话 _（必需）
5. 学历及学位 _（必需）
6. 薪资期望
7. 个人照片
8. 邮箱
9. Blog
10. 外语能力
职业技能
1. HTML、CSS、JavaScript/ActionScript等
2. Web标准、可用性、可访问性
3. 一门非前端脚本的语言(Java、PHP、Python、C#等)
4. 任何有利于前端开发的技能和兴趣
职业和教育经历
1. 起始时间、单位名、职位（学位）和收获
2. 简而精
3. 按照时间倒序排列
代表作品
1. 能体现自己现在前端技能或者重要经历的作品
2. 简而精，且可以简要附上自己在这个作品中的收获
3. 和别人合作的作品要注明自己具体完成的内容
4. 在线链接要测试以保证可用，如果有其他人的变更应注明，较大变更就无需提交了
5. 提供附件要注明与之对应的文件名
6. 按完成时间倒序排列

依据实际情况，代表作品也完全可以直接融入到职业技能和经历中体现。当然内容不仅仅是这些，可以任意增加能体现前端工程师职业素质的信息。

三、Web是平台

毫无疑问，Web才是真正的平台，当这个平台的后端逐步被云所统治时（Amazon的很多服务和Google App Engine都初见端倪），那么云端的用户代理（比如浏览器）就是前端工程师的战场。前端工程师是可以长期从事且有前途的职业。

简历作为前端工程师迈向新征途而提交的第一份作品，应该毫不迟疑的用它来体现其专业技能和职业精神，所以Web页面是前端工程师简历的最好载体。它能体现前端工程师诸多专业素质：

知道为什么选择的DTD是下面中的一个而不是其他，这是对HTML标准的理解和思考。
1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4. <!DOCTYPE HTML>
针对内容选择合适的HTML标签，合理的id和class命名，尝试使用微格式，这是对语义化的理解和思考。
至少兼容YUI中列出的A-grade浏览器，这是对跨浏览器和CSS Hacks的理解和思考。
虽然Web性能在大访问量下才比较容易凸显，但把尝试把YAHOO性能团队的34条最佳实践应用上，一定会小中见大且受益终生的。
JavaScript的应用
1. 简历的信息结构一般很简单，但是这并不意味着无法使用JavaScript来增强它的交互。找出其JavaScript技能和简历相互结合的地方。
2. 可以尝试使用某种框架（YUI、jQuery、Prototype、Mootools等），很明显框架能提高我们的开发速度，掌握至少一种优秀的框架能增强我们的价值。
3. 可以利用JavaScript做出几个彩蛋在简历里面么？
4. 实现结构、样式和行为的分离。
5. 理解和体现DOM Scripting、预留退路（Graceful Degradation）、渐进增强（Progressive Enhancement ）、无侵入的JavaScript（Unobtrusive Javascript）等思想。空帷翻译的《理解“渐进增强(Progressive Enhancement)》是篇这方面的好文章。
可访问性，在这上面每一步的深入研究和应用都值得赞赏。
HTML5、CSS3、SVG、Canvas甚至离线技术、安全技术都可以和我们的简历结合起来。列表When can I use…提供了一些新技术在主流浏览器的支持情况。
打印样式，很明显前端简历不仅仅是其主管看，还有HR和大老板看，所以准备打印样式是很重要的，这不仅仅是技能问题，更是一种前端开发的素质。你需要知道，打印样式应该是黑字白底，且尽量少的装饰图片，因为现在的绝大部分办公打印机还是黑白的，且黑色更费墨，所以当你的简历是黑色背景时更应该注意这点。
简单设计，千万不要把你的简历搞一团糟，设计虽然不是前端工程师最重要的技能，但是良好的视觉设计更能体现前端工程师的价值，所以审美其实也是前端工程师的基础素质。如果对视觉设计感到困惑，你可以从看《推荐给大家看的设计书》开始。

四、细节决定体验

标识性的文件名，比如“秦歌的简历”、“秦歌的作品”，而不是“个人简历”、“我的作品”。
发完信后记得检查一下发件箱，确保没有忘记发附件。
简历和众多作品整体打一个包。不要一个大包里面无数个小包。且整个包应该整理过，去掉垃圾，不应该太大。
不要重复发邮件，特别是拒绝以后，还发一个同样的邮件，除非一段时间后你有较大进步。
检查链接有效性，无效链接很伤感情的，可以使用Firefox的插件LinkChecker或Pinger。

实际上，前端工程师的工作成果是直接面向千万用户的，他直接决定了最终的用户体验，所以每个细节都至关重要，就像JavaScript编程一样，只要我们掌握良好的风格要素，我们就能避免很多错误，实际上这个思想贯穿整个前端开发的始终，包括制作简历。

我很喜欢有个人blog的应聘者，因为通过其blog不仅仅可以看出他的前端技能、工作积累、职业素质和分享精神，同时他通过维护blog可以贯穿一个简单开发的始终，从内容、交互、视觉、前端一直到后端维护，而这些角色都是前端在开发过程中的上下游，需要经常协作，这种经历能使前端更高效的沟通和更务实的换位思考。同样，当我推荐前端的简历应该是以Web页面为载体时，也是基于这个想法，并适当的给出一些相关知识以备有兴趣的朋友朝这个方向走下去。虽然我的建议偏向于“HTML+CSS+JavaScript”方向的前端工程师，但实战中肯定有更多能够在简历中体现前端的技能和创意，这本身就是抛砖引玉，这仅仅是一个开始。

简历很重要，但人品、职业精神和专业的前端技能更重要，最重要的是这两者是相辅相成的。

posted @ 2012-02-10 16:35 beixiao1909 阅读(42) 评论(0) 编辑

【总结】CSS透明度大汇总

近年来，CSS不透明算得上是一种相当流行的技术，但在跨浏览器支持上，对于开发者来说，可以说是一件令人头疼的事情。目前还没有一个通用方法，以确保透明度设置可以在目前使用的所有浏览器上有效。

　　这篇汇总主要是提供一些CSS不透明的详细介绍，代码示例和解释，以实现这项有用的CSS技术在您的项目中兼容所有浏览器。

　　关于CSS 透明度，有一点需要注意的是，它虽然使用了很多年，但它一直以来都不是一个标准属性。它是一种非标准技术，应该是CSS3规范的一部分。

1. 旧的Opacity设置

　　以下代码是Firefox和Safari旧版本所需的透明度设置:

#myElement {
-khtml-opacity: .5;
-moz-opacity: 0.5;
}

复制代码

　　-khtml-opacity设置是针对旧版本的Webkit渲染引擎，这种专用属性现在已经过时了，除非你还有需要兼容Safari 1.x.的用户。

第二行使用专用属性 -moz-opacity是为了兼容Mozilla渲染引擎的早期版本，以及追溯到Netscape Navigator。Firefox 0.9以后就不要求使用-moz-opacity属性，Firefox 3.5（现在使用Gecko引擎）已经不在支持这个属性。

2. 在Firefox, Safari, Chrome和Opera下的CSS透明度

　　以下代码是除了IE外的所有当前浏览器的最简单，最最新的不透明度设置的CSS语法：

#myElement {
opacity: .7;
}

复制代码

　　上述语法将设置一个元素为70％不透明（或30%透明）。设置opacity:1将使元素不透明，而设置opacity:0将使得元素完全不可见。你只要记住“opacity”等同于“不透明”就很容易记住了，opacity值越小就越接近透明。

　　opacity属性可以精确地小数点后两位，所以值取“.01”和“.02”实际上是不同的，虽然可见度很难被发觉。一般情况下，精确到一位就可以了，取值如“.3”或“.7”。

3. IE下的CSS透明度

　　IE下照旧有别于其他浏览器，并且目前也有三个不同版本的IE在广泛使用，透明度设置是不同的，有时需要额外的CSS来控制：

#myElement {
filter: alpha(opacity=40);
}

复制代码

　　上面的CSS使用专用的filter属性来设置IE6-8透明度。对于IE6和IE7需要注意：为了使得透明设置生效，元素必须是“有布局”。一个元素可以通过使用一些CSS属性来使其被布局，有如width 和 position。关于微软专有的hasLayout属性详情，以及如何触发它，参考这里。

　　另外一个设置IE8的CSS透明度的方法语法如下（注意注释中指出的版本）：

#myElement {
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);
/* 第一行在IE6, IE7和IE8下有效 */
-ms-filter:

"progid:DXImageTransform.Microsoft.Alpha(opacity=40)";
/*第二行仅在IE8下有效 */
}

复制代码

　　第一行代码针对当前所有IE版本，第二行仅针对IE8。

　　注意两行代码的不同之处：在第二行代码中，在filter属性前跟着-ms-前缀，并且属性值有加引号，这些都是语法所必须的。

　　说实在，有了如前一个例子中用alpha(opacity=40)的语法来作用于任何版本的IE下的任何有布局的元素之后，我也不确定是否还有必要用“progid”的方法。

4. 使用JavaScript设置和改变CSS透明度

　　您可以使用下面的语法访问JavaScript中的CSS opacity 属性：

document.getElementById("myElement").style.opacity =".4";

// 针对所有现代浏览器
document.getElementById("myElement").style.filter =

　　 "alpha(opacity=40)";// 针对IE

复制代码

　　上面的代码可以使用行内循环或者其他动态函数递增修改透明度的值。当然，你必须先通过特征检测来决定使用哪一行代码。

5. 使用JQuery设置和改变CSS透明度

　　直接使用jQuery设置CSS透明度更直观更容易实现，因为在所有浏览器代码都一样，并且你不必担心在IE下元素是否“haslayout”：

$("#myElement").css({ opacity: .4 });
// 所有浏览器有效

复制代码

　　您也可以使用一下jQuery代码使一个元素动画透明：

$("#myElement").animate({
opacity: .4
}, 1000, function() {
// 动画完成，所有浏览器下有效
});

复制代码

　　不管元素的透明度在动画开始时是多少，它都会渐变到透明度为“.4”。动画的速度通过值“1000”设定，动画时间以毫秒为单位。代码中的最后一个属性是一个可选回调函数，将在动画完成后执行。

　　如果该元素的透明度在CSS中已经设定为“.4”，那在动画运行的时候，你将不会发觉有任何不同，所以动画开始和最终透明度要有所不同。

6. 通过 RGBA的透明度

　　另一个CSS3技术只支持部分新的浏览器（Firefox 3+, Opera 10.1+, Chrome 2+,Safari 3.1+），可通过RGBA的alpha通道的方式设定。语法如下：

#rgba {
background: rgba(98, 135, 167, .4);
}

复制代码

　　在上面的定义中，通过RGB（前三个数字）给背景设定颜色，然后最后一个是alpha设置，以执行给定颜色的透明度。这个alpha设置跟opacity 属性一样，可设定任何0到1的数字，精确得到两位小数点。数字值越大，就越接近完全不透明的颜色。

7. 通过 HSLA的透明度

　　类似之前的定义，CSS3还允许使用HSLA单独设置颜色和alpha值，HSLA表示Hue（色调）, Saturation（饱和度）, Lightness（亮度）, 和Alpha。以下是HSLA透明的例子：

#hsla {
background: hsla(207, 38%, 47%, .4);
}

复制代码

　　更多关于HSLA颜色的解释，参考这篇来自W3.org的文章。如同RGBA透明度，最后的数字表示透明度设置，跟RGBA起同样的作用。注意RGBA和HSLA透明度的一个重要的好处是这些透明度设置不会影响到子元素的，但通过opacity属性的方式则会。alpha设置的RGBA和HSLA只影响背景颜色的透明度，仅此而已。

　　我希望我能涉及主要的跨浏览器的CSS透明度代码。如果内容有错漏，欢迎随时评论指出，我将乐意作更正或补充。谢谢~

posted @ 2012-02-10 16:31 beixiao1909 阅读(17) 评论(0) 编辑

css缩写给网站加速，其实很多时候都会用到

Web网站可用性的关键指标是速度，更确切地说，是页面能以多快的速度出现在访问者的浏览器窗口里。影响速度的因素有很多种，包括Web服务器的速度、访问者的Internet连接情况，以及浏览器必须下载的文件大小。尽管你无法控制服务器和连接的速度，但是你可以控制构成网站Web页面的文件大小。

为了让网站能够更快，Web的建设者都会按常规地压缩和优化网站上的每一个图像文件，这常常使得为了将文件的大小减少几个百分点而牺牲了图像的质量。由于CSS样式表是纯文本文件，和图像相比相对较小，所以Web建设者很少考虑采取措施减少其CSS样式表文件的大小。但是，通过使用CSS 缩写以及其他的一些简单技巧，你可以在很大程度上减少样式表的大小。在我对自己样式表的一次非正式的特别测试中，我把文件的大小降低了大约25－50％。

使用CSS的缩写性质
CSS的缩写性质（shorthand property）是一些专用的性质名，用来代替多个相关性质的集合。例如，间隙性质（padding property）是顶部间隙（padding-top）、右侧间隙（padding-right）、底部间隙（padding-bottom）和左侧间隙（padding-left）的缩写。

使用速写性质让你能够把多个性质／属性对（property/attribute pair）压缩进CSS样式表的一行代码里。例如，想一想下面的代码：

.sample1 {
    margin-top: 15px;
    margin-right: 20px;
    margin-bottom: 12px;
    margin-left: 24px;
    padding-top: 5px;
    padding-right: 10px;
    padding-bottom: 4px;
    padding-left: 8px;
    border-top-width: thin;
    border-top-style: solid;
    border-top-color: #000000;
}

将它用一些缩写性质来替代就能够把代码减少为下面这样，两者的实际效果是完全一样的：

.sample1 {
    margin: 15px 20px 12px 24px;
    padding: 5px 10px 4px 8px;
    border-top: thin solid #000000;
}

要注意，缩写性质还有多个属性，每一个（属性）都对应一个被组合进入缩写性质的常规性质。属性由空白隔开。

当属性是类似的值的时候，例如用于边框空白性质（margin property）的线性测量的时候，接在缩写性质之后的属性的顺序很重要。属性的次序是从顶部（顶部的边框空白）开始，然后围绕格子（box）按顺时针次序继续。

如果缩写性质的所有属性都是相同的，那么你可以简单地列出单个属性，然后在前面将它复制四遍。因此，下面的两个性质是相等的：

margin: 5px 5px 5px 5px;

margin: 5px;

类似的，你可以使用接在边框空白或者间隔性质之后的两个属性来代表顶部／底部和右侧／左侧属性对。

margin: 5px 10px 5px 10px;

margin: 5px 10px;

属性的顺序在它们是不相似的值的时候是不重要的。因此，边框颜色、边框风格和边框宽度等属性可以以任何顺序接在大纲性质（outline property）之后。忽略某个属性等同于从样式规则里忽略掉对应的常规性质。

CSS缩写性质列表

下面是CSS缩写性质的列表以及它们所表示的常规性质。

Background（背景）：背景附件、背景颜色、背景图像、背景位置、背景重复
Border（边框）：边框颜色、边框风格、边框宽度
border-bottom（底部边框）：底部边框颜色、底部边框样式、底部边框宽度
border-left（左侧边框）：左侧边框颜色、左侧边框样式、左侧边框宽度
border-right（右侧边框）：右侧边框颜色、右侧边框样式、右侧边框宽度
border-top（顶部边框）：顶部边框颜色、顶部边框样式、顶部边框宽度
cue（声音提示）：前提示、后提示
font（字体）：字体、字号、字体样式、字体粗细、字体变体、线高度、字体大小调整、字体拉伸
list-style（列表样式）：列表样式图像、列表样式位置、列表样式类型
margin（空白）：顶部空白、右侧空白、底部空白、左侧空白
outline（大纲）：大纲颜色、大纲样式、大纲宽度
padding（间隙）：顶部间隙、右侧间隙、底部间隙、左侧间隙
pause（暂停）：后暂停、前暂停
减少空白

减少CSS样式表大小的另一种方法是从文档里删掉大多数无用的空白。换句话说，将每条规则打破放进一行代码里，即把原来插入到代码里用来把每个性质／属性分割到不同行的换行符和缩进符删掉。

例如，下面的代码示例在内容上相同，但是第二个要精炼得多：

h1 {
    font-size: x-large;
    font-weight: bold;
    color: #FF0000;
}

h1 {font-size: x-large; font-weight: bold; color: #FF0000}

删掉注释

将注释从你的CSS代码里删掉是减少文件大小的另一种方式。尽管注释对于代码的阅读很有用，但是它无助于浏览器生成你的Web页面。很多Web建设者都习惯给每一行代码都加上注释，或者至少给每一条规则声明都加上。这样的慷慨注释在CSS样式表里是极少需要的，因为大多数CSS性质和属性都很容易阅读和理解。如果你对类、ID，以及其他的选择器都使用有意义的名称，你就可以省掉大多数的注释，同时仍然能够保持代码的可读性和可维护性。

h1 {                    /* Heading 1 style*/
    font-size: x-large; /* x-large size */
    font-weight: bold; /* Bold */
    color: #FF0000;     /* Red */
}

使用速写性质、删除无用的空白、省略注释都能够在很大程度上减少你CSS样式表文件的大小。这反过来会对加速你Web网站速度的总体目标作出小的、但是可能会是显而易见的贡献。

posted @ 2012-02-10 16:21 beixiao1909 阅读(201) 评论(3) 编辑

40种网页常用小技巧(javascript)

1. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键
<table border oncontextmenu=return(false)><td>no</table> 可用于Table

2. <body onselectstart="return false"> 取消选取、防止复制

3. onpaste="return false" 不准粘贴

4. oncopy="return false;" oncut="return false;" 防止复制

5. <link rel="Shortcut Icon" href="favicon.ico"> IE地址栏前换成自己的图标

6. <link rel="Bookmark" href="favicon.ico"> 可以在收藏夹中显示出你的图标

7. <input style="ime-mode:disabled"> 关闭输入法

8. 永远都会带着框架
<script language="javascript"></script>

9. 防止被人frame
<SCRIPT LANGUAGE=javascript></SCRIPT>

10. 网页将不能被另存为
<noscript><iframe src=*.html></iframe></noscript>

11. <input type=button value=查看网页源代码
onclick="window.location = "view-source:"+ """>

12.删除时确认
<a href="javascript:if(confirm("确实要删除吗?"))location="boos.asp?&areyou=删除&page=1"">删除</a>

13. 取得控件的绝对位置
//javascript
<script language="javascript">
function getIE(e){
var t=e.offsetTop;
var l=e.offsetLeft;
while(e=e.offsetParent){
t+=e.offsetTop;
l+=e.offsetLeft;
}
alert("top="+t+"/nleft="+l);
}
</script>

//VBScript
<script language="VBScript"></script>

14. 光标是停在文本框文字的最后
<script language="javascript">
function cc()
{
var e = event.srcElement;
var r =e.createTextRange();
r.moveStart("character",e.value.length);
r.collapse(true);
r.select();
}
</script>
<input type=text name=text1 value="123" onfocus="cc()">

15. 判断上一页的来源
javascript:
document.referrer

16. 最小化、最大化、关闭窗口
<object id=hh1 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">
<param name="Command" value="Minimize"></object>
<object id=hh2 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">
<param name="Command" value="Maximize"></object>
<OBJECT id=hh3 classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
<PARAM NAME="Command" VALUE="Close"></OBJECT>
<input type=button value=最小化 onclick=hh1.Click()>
<input type=button value=最大化 onclick=hh2.Click()>
<input type=button value=关闭 onclick=hh3.Click()>
本例适用于IE

17.屏蔽功能键Shift,Alt,Ctrl
<script>
function look(){
if(event.shiftKey)
alert("禁止按Shift键!"); //可以换成ALT　CTRL
}
document.onkeydown=look;
</script>

18. 网页不会被缓存
<META HTTP-EQUIV="pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
或者<META HTTP-EQUIV="expires" CONTENT="0">

19.怎样让表单没有凹凸感？
<input type=text style="border:1 solid #000000">
或
<input type=text style="border-left:none; border-right:none; border-top:none; border-bottom:

1 solid #000000"></textarea>

20.<div><span>&<layer>的区别？
<div>(division)用来定义大段的页面元素，会产生转行
<span>用来定义同一行内的元素，跟<div>的唯一区别是不产生转行
<layer>是ns的标记，ie不支持，相当于<div>

21.让弹出窗口总是在最上面:
<body onblur="this.focus();">

22.不要滚动条?
让竖条没有:
<body style="overflow:scroll;overflow-y:hidden">
</body>
让横条没有:
<body style="overflow:scroll;overflow-x:hidden">
</body>
两个都去掉？更简单了
<body scroll="no">
</body>

23.怎样去掉图片链接点击后，图片周围的虚线？
<a href="#" onFocus="this.blur()"><img src="logo.jpg" border=0></a>

24.电子邮件处理提交表单
<form name="form1" method="post" action="" enctype="text/plain">
<input type=submit>
</form>

25.在打开的子窗口刷新父窗口的代码里如何写？
window.opener.location.reload()

26.如何设定打开页面的大小
<body onload="top.resizeTo(300,200);">
打开页面的位置<body onload="top.moveBy(300,200);">

27.在页面中如何加入不是满铺的背景图片,拉动页面时背景图不动
<STYLE>
body
{background-image:url(logo.gif); background-repeat:no-repeat;
background-position:center;background-attachment: fixed}
</STYLE>

28. 检查一段字符串是否全由数字组成
<script language="javascript"></script>

29. 获得一个窗口的大小
document.body.clientWidth; document.body.clientHeight

30. 怎么判断是否是字符
if (/[^/x00-/xff]/g.test(s)) alert("含有汉字");
else alert("全是字符");

31.TEXTAREA自适应文字行数的多少
<textarea rows=1 name=s1 cols=27 onpropertychange="this.style.posHeight=this.scrollHeight">
</textarea>

32. 日期减去天数等于第二个日期
<script language=javascript>
function cc(dd,dadd)
{
//可以加上错误处理
var a = new Date(dd)
a = a.valueOf()
a = a - dadd * 24 * 60 * 60 * 1000
a = new Date(a)
alert(a.getFullYear() + "年" + (a.getMonth() + 1) + "月" + a.getDate() + "日")
}
cc("12/23/2002",2)
</script>

33. 选择了哪一个Radio
<HTML><script language="vbscript">
function checkme()
for each ob in radio1
if ob.checked then window.alert ob.value
next
end function
</script><BODY>
<INPUT name="radio1" type="radio" value="style" checked>Style
<INPUT name="radio1" type="radio" value="barcode">Barcode
<INPUT type="button" value="check" onclick="checkme()">
</BODY></HTML>

34.脚本永不出错
<SCRIPT LANGUAGE="javascript">

</SCRIPT>

35.ENTER键可以让光标移到下一个输入框
<input onkeydown="if(event.keyCode==13)event.keyCode=9">

36. 检测某个网站的链接速度：
把如下代码加入<body>区域中:
<script language=javascript>
tim=1
setInterval("tim++",100)
b=1
var autourl=new Array()
autourl[1]=""
autourl[2]=""
autourl[3]=""
autourl[4]=""
autourl[5]=""
function butt(){
document.write("<form name=autof>")
for(var i=1;i<autourl.length;i++)
document.write("<input type=text name=txt"+i+" size=10 value=测试中……> =》<input type=text
name=url"+i+" size=40> =》<input type=button value=GO

onclick=window.open(this.form.url"+i+".value)><br>")
document.write("<input type=submit value=刷新></form>")
}
butt()
function auto(url){
document.forms[0]["url"+b].value=url
if(tim>200)
{document.forms[0]["txt"+b].value="链接超时"}
else
{document.forms[0]["txt"+b].value="时间"+tim/10+"秒"}
b++
}
function run(){for(var i=1;i<autourl.length;i++)document.write("<img src=http://"+autourl+"/"+Math.random()+" width=1 height=1

onerror=auto("+"")>")}
run()</script>

37. 各种样式的光标
auto ：标准光标
default ：标准箭头
hand ：手形光标
wait ：等待光标
text ：I形光标
vertical-text ：水平I形光标
no-drop ：不可拖动光标
not-allowed ：无效光标
help ：?帮助光标
all-scroll ：三角方向标
move ：移动标
crosshair ：十字标
e-resize
n-resize
nw-resize
w-resize
s-resize
se-resize
sw-resize

38.页面进入和退出的特效
进入页面<meta http-equiv="Page-Enter" content="revealTrans(duration=x, transition=y)">
推出页面<meta http-equiv="Page-Exit" content="revealTrans(duration=x, transition=y)">
这个是页面被载入和调出时的一些特效。duration表示特效的持续时间，以秒为单位。transition表示使用哪种特效，取值为1-23:
　　0 矩形缩小
　　1 矩形扩大
　　2 圆形缩小
　　3 圆形扩大
　　4 下到上刷新
　　5 上到下刷新
　　6 左到右刷新
　　7 右到左刷新
　　8 竖百叶窗
　　9 横百叶窗
　　10 错位横百叶窗
　　11 错位竖百叶窗
　　12 点扩散
　　13 左右到中间刷新
　　14 中间到左右刷新
　　15 中间到上下
　　16 上下到中间
　　17 右下到左上
　　18 右上到左下
　　19 左上到右下
　　20 左下到右上
　　21 横条
　　22 竖条
　　23 以上22种随机选择一种

39.在规定时间内跳转
<META http-equiv=V="REFRESH" content="5;URL=http://www.devdao.com">

40.网页是否被检索
<meta name="ROBOTS" content="属性值">
　　其中属性值有以下一些:
　　属性值为"all": 文件将被检索，且页上链接可被查询；
　　属性值为"none": 文件不被检索，而且不查询页上的链接；
　　属性值为"index": 文件将被检索；
　　属性值为"follow": 查询页上的链接；
　　属性值为"noindex": 文件不检索，但可被查询链接；
　　属性值为"nofollow": 文件不被检索，但可查询页上的链接。

posted @ 2012-02-10 16:11 beixiao1909 阅读(166) 评论(0) 编辑

了解jQuery技巧来提高你的代码（个人觉得那个jquery的手册很不错）

这个jQuery选择器实验室非常酷，它能在线免费使用，当然你也能下来到本地离线使用。这个测试页面包含复杂的HTML组合字段，然后你能尝试预定义使用各种jQuery选择器。如果这还不够你也可以自定义选择器。

点击上图查看清晰大图

2.测试jQuery包装集是否包含某些元素

　　如果你想测试一下某个jQuery包装集中是否包含某些元素，你首先可以尝试使用验证首个元素是否存在：

if($(selector)[0]){...}
// 或者这样
if($(selector).length){...}

来看看这个例子：

//例子.如果你的页面有以下html代码
<ul id="shopping_cart_items">
<li><input class="in_stock" name="item" type="radio" value="Item-X" />Item X</li>
<li><input class="unknown" name="item" type="radio" value="Item-Y" />Item Y</li>
<li><input class="in_stock" name="item" type="radio" value="Item-Z" />Item Z</li>
</ul>
<pre escaped="true" lang="javascript">...
//这个if条件将返回true，因为我们有两个
// input域匹配了选择器，所以<statement>代码将会执行
if($('#shopping_cart_items input.in_stock')[0]){<statement>}

3.从jquery.org读取jQuery最新版本

你可以使用这句代码读取jQuery的最新版本的代码文件。

你可以使用这个方法来调用最近版本的jQuery框架，当然，你还可以使用下面这个代码从ajax.googleapis.com调用同样的最新版本jQuery：

4.存储数据

　　使用data方法可以避免在DOM中存储数据，有些前端开发er喜欢使用HTML的属性来存储数据：

$('selector').attr('alt', 'data being stored');
//之后可以这样读取数据:
$('selector').attr('alt');

　　使用”alt”属性来作为参数名存储数据其实对于HTML来说是不符合语义的，我们可以使用jQuery的data方法来为页面中的某个元素存储数据：

$('selector').data('参数名', '要存储的数据');
//之后这样取得数据:
$('selector').data('参数');

　　这个data方法能让你自己明明数据的参数，更语义更灵活，你可以在页面上的任何元素存储数据信息。如果想了解更多关于data()和removeData()方法的介绍，可以看看jQuery官方讲解

这个方法的经典应用是给input域一个默认值，然后在聚焦的时候清空它:
HTML部分:

JavaSript部分:

$(function() {
//取出有clear类的input域
//(注: "clear once" 是两个class clear 和 once)
$('#testform input.clear').each(function(){
//使用data方法存储数据
$(this).data( "txt", $.trim($(this).val()) );
}).focus(function(){
// 获得焦点时判断域内的值是否和默认值相同，如果相同则清空
if ( $.trim($(this).val()) === $(this).data("txt") ) {
$(this).val("");
}
}).blur(function(){
// 为有class clear的域添加blur时间来恢复默认值
// 但如果class是once则忽略
if ( $.trim($(this).val()) === "" && !$(this).hasClass("once") ) {
//Restore saved data
$(this).val( $(this).data("txt") );
}
});
});

查看Demo

5.jQuery手册常备身边

　　大多数人都很难记住所有的编程细节，即使再好的程序员也会有对某个程序语言的疏忽大意，所以把相关的手册打印出来或随时放在桌面上进行查阅绝对是可以提高编程效率的。
oscarotero jquery 1.3 (壁纸版)
jQuery手册

6.在FireBug控制台记录jQuery

　　FireBug是我最喜欢用的一个浏览器扩展工具之一，这个工具可以让你快速的在可视化界面中了解当前页面的HTML+CSS+JavaScript，并在该工具下完成即时开发。作为jQuery或JavaScript开发人员，FireFox对于记录你的JavaScript代码也得到支持。

写入FireBug控制台的最简单方式如下:

console.log("hello world")

你也可以按照你希望的方式写一些参数：

console.log(2,4,6,8,"foo",bar)

你也可以编写一个小扩展来记录jQuery对象到控制台：

jQuery.fn.log = function (msg) {
console.log("%s: %o", msg, this);
return this;
};

对于这个扩展，你可以直接使用.log()方法来记录当前对象到控制台。

$('#some_div').find('li.source > input:checkbox')
.log("sources to uncheck")
.removeAttr("checked");

7.尽可能使用ID选择器

　　在使用jQuery之后，你会发现利用class属性来选择DOM元素变得相当简单。尽管如此，还是推荐大家尽量少用class选择器取而代之尽量多使用运行更快的ID选择器(IE浏览器下使用class选择器会在遍历整个DOM树之后返回相符的class包装集)。而ID选择器更快是因为 DOM本身就有”天然的”getElementById这个方法，而class并没有。所以如果使用class选择器的话，浏览器会遍历整个DOM，如果你的网页DOM结构足够复杂，这些class选择器足矣把页面拖得越来越慢。让我们看看这段简单的HTML代码:

<div id="main">
<form method="post" action="/">
<h2>Selectors in jQuery</h2>
...
...
<input class="button" id="main_button" type="submit" value="Submit" />
</form>
</div>

//使用class来调用submit按钮要比使用绝对的ID选择器慢很多
var main_button = $('#main .button');
var main_button = $('#main_button');

8.善于利用jQuery链

　　jQuery链不但允许以简洁的方式写出强大的操作，而且提高了开发效率，因为它能够把多个命令应用到包装集，而不必重新计算包装集。从而你不用再这样写了：

<li>Description: <input type="text" name="description" value="" /></li>

$('#shopping_cart_items input.text').css('border', '3px dashed yellow');
$('#shopping_cart_items input.text').css('background-color', 'red');
$('#shopping_cart_items input.text').val("text updated");

取而代之你可以使用jQuery链来完成简便的操作：

var input_text = $('#shopping_cart_items input.text');
input_text.css('border', '3px dashed yellow');
input_text.css('background-color', 'red');
input_text.val("text updated");

//same with chaining:
var input_text = $('#shopping_cart_items input.text');
input_text
.css('border', '3px dashed yellow')
.css('background-color', 'red')
.val("text updated");

9.绑定jQuery函数到$(window).load事件

　　大多数jQuery实例或教程都告诉我们绑定我们的jQuery代码到$(document).ready事件。虽然$(document).ready事件在大多数情况下都OK，但是它的解析顺序是在文档准备就绪，单文档中的图片等对象正在下载的时候开始运行的。所以在某些时候使用$(document).ready事件并不一定能达到我们预期的效果，比如一些视觉效果和动画、拖拽、预读取隐藏图片等…通过使用$(window).load事件便可以安全的在整个文档都准备就绪之后再开始运行你期望的代码。

$(window).load(function(){
// 将你希望在页面完全就绪之后运行的代码放在这里
});

10.使用jQuery链来限定选择器，让你的代码更简洁更优雅

　　由于JavaScript支持链结构而且支持断行，所以你的代码可以写成下面这样，这个例子先在元素上移除一个class然后在同一个元素上添加另一个class：

$('#shopping_cart_items input.in_stock')
.removeClass('in_stock')
.addClass('3-5_days');

如果想让它更简单实用，你可以创建一个支持链结构的jQuery函数：

$.fn.makeNotInStock = function() {
return $(this).removeClass('in_stock').addClass('3-5_days');
}

$('#shopping_cart_items input.in_stock').makeNotInStock().log();

11.使用回调函数同步效果

　　如果你想确保某个事件或动画效果要在另一个事件运行之后再调用，那你就要使用回调函数了。你可以在这些动画效果后面绑定回调函数：slideDown( speed, [回调] ) ie. $(‘#sliding’).slideDown(‘slow’, function(){… 点击这里预览这个例子.

$(document).ready(function(){
// 使用jQuery的click事件改变视觉效果，并开启滑动效果
$("div.button").click(function () {
//div.button 现在看上去是按下的效果
$(this).css({ borderStyle:"inset", cursor:"wait" });
//#sliding 现在将渐隐并在完成动作之后开启渐显效果
//slideup once it completes
$('#sliding').slideDown('slow', function(){
$('#sliding').slideUp('slow', function(){
//渐显效果完成后将会改变按钮的CSS属性
$('div.button').css({ borderStyle:"outset", cursor:"auto" });
});
});
});
});

12.学会使用自定义选择器

　　jQuery允许我们在css选择器的基础上定义自定义选择器来让我们的代码更简洁:

$.expr[':'].mycustomselector= function(element, index, meta, stack){
// element- DOM元素
// index - 堆栈中当前遍历的索引值
// meta - 关于你的选择器的数据元
// stack - 用于遍历所有元素的堆栈

// 包含当前元素则返回true
// 不包含当前元素则返回false
};

// 自定义选择器的应用:
$('.someClasses:test').doSomething();

下面让我们来看看一个小例子，我们通过使用自定义选择器来锁定含有”rel”属性的元素集：

$.expr[':'].withRel = function(element){
var $this = $(element);
//仅返回rel属性不为空的元素
return ($this.attr('rel') != '');
};

$(document).ready(function(){
//自定义选择器的使用很简单，它和其他选择器一样，返回一个元素包装集
//你可以为他使用格式方法，比如下面这样修改它的css样式
$('a:withRel').css('background-color', 'green');
});

<ul>
<li>
<a href="#">without rel</a>
</li>
<li>
<a rel="somerel" href="#">with rel</a>
</li>
<li>
<a rel="" href="#">without rel</a>
</li>
<li>
<a rel="nofollow" href="#">a link with rel</a>
</li>
</ul>

13.预加载图片

通常使用JavaScript来预加载图片是个相当不错的方法:

//定义预加载图片列表的函数(有参数)

jQuery.preloadImages = function(){
//遍历图片
for(var i = 0; i<arguments.length; i++){
jQuery("<img>").attr("src", arguments[i]);

}
}
// 你可以这样使用预加载函数
$.preloadImages("images/logo.png", "images/logo-face.png", "images/mission.png");

14.将你的代码测试完好

　　jQuery有一个名为QUnit单元测试框架。编写测试很容易，它能让您可以放心地修改您的代码，并确保它仍然按预期工作。下面是如何工作的：

//将测试分成若干模块.
module("Module B");

test("some other test", function() {
//指定多少个判断语句需要加入测试中.
expect(2);

equals( true, false, "failing test" );
equals( true, true, "passing test" );
});

posted @ 2012-02-10 15:46 beixiao1909 阅读(479) 评论(2) 编辑

2012年2月8日

9件创业教我的事(它说恐惧是可以克服的)

HitPlay的创办人Joshua Seims在他的博客上分享了一篇9 Things I Learned by Starting a Company ，我觉得跟我的经验非常像，所以今天就从他的9个点出发，跟大家聊聊我自己的心得。

1. 恐惧是可以被克服的

创业的恐惧有两种，一种是不敢面对、害怕丢脸的恐惧，一种是担心结果不如预期的恐惧。怕丢脸的恐惧让你裹足不前，不敢尝试。开始尝试了，还有害怕失望的恐惧让你心情忽高忽低，无法冷静判断。这两个好像每颗心与生俱来都会有的弱点，但创业的经验告诉我它们其实可以被克服。

要克服不敢的恐惧，很简单，它就像克服酒量一样，唯一的方法就是一直喝、不断的喝，喝到什么最恶心的呕吐你都经历过、什么最惨痛的失败你都体验过，然后有一天，你就会发现自己无敌了。要克服害怕失望的恐惧也很简单，那就是不要有期望。记得幸运的人吗？当你放弃了既定的目标，那你不但永远不会失望，还会因此在路上多捡到许多机会，多好！

2. 天长地久不如真的拥有

当你在当员工时，你就像一只狗、一个奴才。做不好，通通都是你该死。做得好，通通都是老板英明。而创业和「Ownership」，就是你的解放，让你真正拥有你在做的事情、真正决定自己的未来。没有人说这是一件容易的事情，事实上，当员工的话6 点就下班了，Server 挂掉是你家的事。当老板，抱歉，永远没有松懈的一秒钟，你连作梦都还在想公司的事。但同时，你也拥有那种握住的感觉，那种过自己的人生，而不是帮别人抬轿的踏实感。

3. 为自己负责

既然没有了老板，你就被迫要学会独立作战、独立思考，做自己的决定，并且为自己的选择负责。一开始会有点不习惯，你会发现自己到处问别人的意见，因为我们从小都没有学过如何做自己。不过一旦你开始抓到了绝窍，就会化身为真正自由的个体，这世界虽千万人，在也没办法挡住你要去哪里。

4. 没有Co-founder（共同创立者）是很孤独的

当你自己一个人挑战这个世界，即使是心脏再强、脸皮再厚的创业者，也会有无法承受创伤的一天。你需要一些伙伴，一些跟你拥有相同志向的人，才能在最失落的时候，拥有一个背后的靠山。

5. 通路胜过产品

把产品做出来，他们就会来。这是全世界最大的骗局，至少对于99.9% 的创业者是这样的。你最重要的武器，是在把产品做出来前，就先开始着手布建一个有效的通路。产品可以一直换，但通路，才是拿不走的东西。

6. 你成功的秘密，当然不是大家都知道的事情

成功的商业模式绝对不是想出来的，当然更不是分析出来的，否则在你之前，早就有1，000 个人想到了。当你去看历史上成功的商业模式，基本上全部都是蒙到、 Pivot出来的。如果是这样，那你除了要有超人的分析，还要有超强的制造意外能力。

7. 团队是超级重要的事情

前面10个员工，决定了你公司的文化，所以你必须要花很多、是很多时间在这上面。记住：能力可以学，态度则是你无法改变的。千万不要用两次面试，就决定了一切。结婚之前，多约几次会，甚至同居一阵子，搞清楚了彼此的个性，再私订终身，也还不迟。

8. 名誉才是你最重要的资产

相信我，创业13 年来，热钱来来去去、市场起起伏伏、团队分分合合我看太多了。到最后，每个人在你心中的地位，就只剩他的品德和人格。你要想清楚，这是一场一辈子的赛局，千万不要为了短期的利益，牺牲了你一辈子的名誉。如果你行得直、坐得正，那就会吸引来一群一样欣赏这个风格的伙伴，那，才是永远拿不走，最最重要的资产。

9. 如果你不觉得好玩，那还是别搞了吧

我看过太多人因为机会很好，所以创业，但打从心底，他们并不享受这个过程。可惜创业失败的机率是远高过成功的，所以这些人往往不但赔了夫人，还回过头怨恨自己当初的选择。人生只有一次，创业不但是在建立一个事业，更是在找到自我价值的实现。

Steve Jobs 说的：

每天早上，我看着镜子然后问我自己：「如果今天是我人生的最后一天，我会想要做我正要去做的事情吗？」如果答案连续好几天都是「No」，那我就知道我必须要改变些什么。

以上，与大家共勉。（文：mrjamie.cc）

posted @ 2012-02-08 09:56 beixiao1909 阅读(22) 评论(0) 编辑

2012年2月4日

提高网站访问速度

P话一哈，这和优化大同小异的意思，今天被问到，事后都不知道当时说的什么，惭愧，看的东西太少了。

1 减少HTTP请求数量 (Minimize HTTP Requests)

tag:content

80%的用户响应时间被花费在前端，而这其中的绝大多数时间是用于下载页面中的图片、样式表、脚本以及Flash这些组件。减少这些组件的数量就可以减少展示页面所需的请求数，而这是提高网页响应速度的关键。

朴素的页面设计当然是减少组件的一种途径，但有没有能兼顾丰富的页面内容和快速的响应速度的方法呢？下面就是一些不错的技巧，能在提供丰富的页面展现的同时，减少Http请求数量：

合并文件，通过把所有脚本置于一个脚本文件里或者把所有样式表放于一个样式表文件中，从而减少Http请求的数量。当不同页面需要应用不同的脚本或样式时，合并这些文件会是一个很大的挑战，不过在发布网站时进行这种合并，将是提高网站响应速度的重要一步。

CSS Sprites是减少图片请求的首选方案。把所有的背景图片合并到一张图中，使用CSS的background-image 和background-position 属性去控制展现恰当的图片区域。

Image maps把多张图片组合成为一张图片。图片的总大小是不变的，但减少Http请求数会提高页面的响应速度。Image maps只能用于图片在网页中相邻的情况，比如导航条。制定image maps中的图片坐标是个很麻烦的过程，而且容易出错。同时给导航使用image maps也并不易读，所以并不推荐使用。

内联图片使用data: URL scheme 把图片数据嵌入页面，但这会增加Html文档的大小。把内联图片合并到你被缓存的的样式表中是一个能既减少HTTP请求数又不会增加页面大小的方法。但目前并不是所有的主流浏览器都支持内联图片。

减少页面的Http请求数量是第一步，而且对于提高用户初次访问体验是最重要的一步。正如在 Tenni Theurer的blog中的Browser Cache Usage – Exposed!里描述的，每天，有40%-60%的访客并没有你的网站的缓存文件。提高这些初次访客的访问速度是提高用户体验的关键。

2 使用内容分布式网络 (Use a Content Delivery Network)

tag:server

用户连接你的网站服务器的速度影响响应的快慢。把你的网站布置在多台分布于不同地域的服务器上，会让用户觉得你的页面加载速度更快。那么我们应该从哪里开始呢？

不要一开始就把重新设计你的网站使其能够适应分布式结构作为实现网站地域分布的第一步。根据你的网站的复杂程度不同，更新网站结构的过程也许会包含诸如同步会话状态、在服务器间复制数据库等一系列复杂的步骤。这样你提高用户访问速度的目的反而会被更新网站架构的工作耽误。

记住，用户80-90%的访问时间被花费在下载页面中的图片、样式表、脚本、Flash这些组件上。这是网站展示的黄金法则。那么与其重新设计网站的结构，不如先实现这些静态组件的分布。这不仅仅可以大幅减少响应时间，而且由于内容分布式网络（content delivery networks）的存在，这将是个很简单的工作。

内容分布式网络（CDN）是一系列分布在不同地域的服务器的集合，能够更有效的给用户发送信息。它会根据一种衡量网域距离的方法，选取为某个用户发送数据的服务器。比如，到达用户最少跳或者最快相应速度的服务器会被选中。

一些大型Internet公司拥有他们自己的CDN，但使用公用的CDN服务提供商更为划算，比如 Akamai Technologies, Mirror Image Internet, 或者Limelight Networks。对于刚起步的公司和个人网站来说，CDN服务的花费也许会偏高。但当你的目标用户越来越多而且趋于国际化，用CDN来降低响应时间就很必要了。在 Yahoo!，把静态的内容从自己的网络服务器移到CDN提高了用户20%甚至更多的访问速度。转向CDN会是一个只需要相对简单的代码更新的工作，而且那将会显著的提高你的网站访问速度。

3 给头部添加一个失效期或者Cache-Control (Add an Expires or a Cache-Control Header)

tag:server

这条法则包含两方面：

对于静态组件：把头部的缓存期设为某个遥远的未来，使其能够“永不过期”。
对于动态组件：使用适当的Cache-Control头部帮助浏览器执行特定的请求。

网页设计越来越丰富，页面里包含了越来越多的脚本、样式表、图片和Flash。页面的初次访问者也许会发送多个HTTP请求，但通过给头部添加失效期，你可以使那些组件被缓存。这会避免下次浏览页面时的不必要的HTTP请求。给图片文件的头部设置失效时间更为常用，但包括脚本文件、样式表和 Flash之类的所有组件的头部都应该被设置失效时间。

浏览器（还有代理服务器）使用缓存以减少HTTP请求的数量和大小，提高网页的加载速度。服务器在HTTP相应中通过头部中的过期时间告知客户端一个组件可以被缓存多久。下面是一个far future的过期头部，告诉浏览器这个响应直到2010年4月15日才会过期：
Expires: Thu, 15 Apr 2010 20:00:00 GMT

如果你使用的是Apache服务器，使用ExpiresDefault 指令会设置一个相对于当前时间的过期时间。这里有一个通过ExpiresDefault 指令把过期时间设为请求时间之后10年的例子：
ExpiresDefault “access plus 10 years”

记住，如果你使用了far future过期头部，你必须在组件更新时更换它的名字。在Yahoo!我们通常在建设网站的过程中执行这样的步骤：组件的名字里包含了它的版本，比如：yahoo_2.0.6.js。

使用一个far future过期头部只会在用户已经访问你的网站之后起作用。它不会影响一个没有缓存的初次访问者的HTTP请求数量。所以这一切的效果取决于多少用户访问页面时有一份预缓存（一份”预缓存”中已经包含了页面的所有组件）。我们对此在Yahoo！做过测试，发现拥有预缓存的用户在 75-85%。给头部添加far future失效期，可以增加浏览器缓存的组件数量并重复用于随后的页面浏览而不需要通过用户的网络发送哪怕一个字节。

4 Gzip压缩组件(Gzip Components)

tag:server

前台工程师的决策能够显著的减少在网络上传输HTTP请求和响应花费的时间。确实，终端用户的带宽速度、Internet服务提供商和连接交换机的服务器这些因素都是开发小组所不能控制的。但还有一些其它因素会影响响应的时间，比如压缩文件，就会减少HTTP响应的大小从而减少响应的时间。

从HTTP/1.1开始，Web客户端就被设定为支持HTTP请求的头部中Accept-Encoding指定的压缩格式：
Accept-Encoding: gzip, deflate

当服务器检测到请求头部中的这一代吗，它就会使用客户端提供的方法列表中的一个来压缩响应内容。而服务器通过响应头部中的Content-Encoding来告知客户端它所使用的压缩方式：
Content-Encoding: gzip

Gzip是当前最常用也是最有效的压缩方式，GNU项目开发了这一方法并且符合RFC 1952标准。另外一种你可能见过的压缩格式是deflate，但它没有那么有效和常用。

使用gzip压缩通常会减少70%的响应大小。当前浏览器中大约90%的Internet通讯传输声明支持gzip。如果你使用Apache服务器，配置gzip的模块取决于服务器的版本：Apache 1.3 使用mod_gzip ，而Apache 2.x 使用mod_deflate。

浏览器和代理会有一些已知的问题，可能导致浏览器的预期内容和获得的实际压缩内容不匹配。幸运的是，这种情况随着旧浏览器的使用者减少而减少。Apache的模块可以通过自动添加适当的变化响应文件头来解决这些问题。

服务器会根据文件类型选择gzip压缩的内容，但一般情况下，服务器选择压缩的内容会过于局限。大部分网站会压缩它们的Html文档，而压缩脚本和样式表也是值得一做的，但很多网站并没有这样做，事实上，压缩在包括XML和JSON在内的任何文本响应都是值得的。图片和PDF文件不应该被gzip压缩，因为它们已经是被压缩了的文件，gzip它们不仅浪费CPU甚至还有增大文件大小的可能。

Gzip尽可能多的文件类型是减少页面大小从而提高用户体验的一个简单的方法。

5 把样式表放在前面(Put Stylesheets at the Top)

tag:css

在研究Yahoo！的性能时，我们发现把样式表挪到文档的头部可以让页面的加载显得更快。因为把样式表放在头部可以让页面逐步呈现。

关心网站性能的前台工程师通常希望页面能够逐步加载；即，我们希望浏览器能够把已经获得的内容尽快展现。这对于内容很多的页面以及网络连接较慢的用户尤为重要。给予用户视觉上的反馈（比如进度提示）的重要性，已经经过了很详尽的论证。而对于我们来说，Html页面本身就可以作为进度提示！当浏览器逐步加载页面时，头部、导航条、顶部的logo等等这些都可以作为对正在等待页面的用户的可视的反馈。而这会从整体上提高用户体验。

把样式表放在文档的最后，会导致包括IE在内的大部分浏览器不进行逐步呈现。浏览器为了避免当样式改变时重绘元素而中止呈现。用户会十分无聊的看到一个空白的页面。

Html规范明确规定样式表应该被包含在页面的HEAD中：“和A不同，LINK只能在文档的HEAD部位出现，但它可以出现多次。”空白的屏幕或者由于没有应用样式而引起的内容的闪现都不值得去尝试。最好的方法是遵循HTML规范，把样式表放在文档的HEAD部位。

6 把脚本放在最后(Put Scripts at the Bottom)

tag:javascript

脚本可能会堵塞并发的下载。HTTP/1.1规范建议浏览器在每个域名下只进行两个并发下载。如果你把图片放在多个域名下，可以实现多于两个的并发下载。当脚本被下载时，即使使用不同的域名。浏览器也不会进行任何其它的下载。

有些情况下把脚本放到底部并不太容易。比如，脚本使用了document.write 来添加部分页面中的内容，就不能放到页面中更后面的位置。还可能有作用域的问题。很多情况下，还有一些变通的方法。

通常的建议是使用延迟脚本。DEFER属性表明脚本不包含document.write，而且提示浏览器继续展现。不幸的是，Firefox不支持DEFER属性。IE中，脚本可以被延迟，但并不如你期望的那么久。如果一个脚本可以被延迟，那么它也可以被放在页面的底部。这会让你的页面加载的更快。

7 不使用CSS表达式 (Avoid CSS Expressions)

tag:css

CSS表达式是一种有力的（同时也很危险的）动态设置CSS属性的方法。从IE5开始支持CSS表达式。比如，使用CSS表达式可以实现背景颜色每小时变换的效果。
background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

如上所示，表达式方法采用了Javascript的表达。CSS属性则被设为Javascript表达式的结果。其它的浏览器会忽略CSS表达式，所以对于设置专属IE的属性以便在不同浏览器间能有一致的体验是有用的。、

而CSS表达式的问题是它比大多数人期望的执行次数更频繁。表达式不仅仅在页面展现和重新设置大小的时候执行，在页面滚动，甚至用户在页面上挪动鼠标时都会执行。给CSS表达式添加一个计数器可以跟踪CSS在什么时候和怎样执行。在页面上移动鼠标可以轻易的产生一万次以上的执行。

使用一次性的表达式是减少CSS表达式的执行次数的一个方法，当表达式第一次执行时，CSS表达式会被一个确定的值代替。如果在页面生命周期中，样式属性必须动态的设定，使用事件处理替代CSS表达式是一个可选的方法。如果必须使用CSS表达式，要记得它们会执行上千次并影响页面的性能。

8 使用外部的JavaScript和CSS (Make JavaScript and CSS External)

tag:javascript,css

很多性能规则都是解决怎样处理独立的组件的问题的。但是，考虑这些之前，你应该先考虑一个更基本的问题：JavaScript和CSS应该被放于外部的文件，还是内联在页面里？

在实际应用中使用外部的文件往往产生更快的页面，因为浏览器会缓存JavaScript和CSS文件。而内联在页面里的JavaScript和 CSS会在每次请求页面时下载。这会减少所需的HTTP请求数，但增大HTML文档的体积。而另一方面，如果放在外部文件里的JavaScript和 CSS被浏览器缓存，则既不用增加HTTP请求的数量，HTML文档的体积也会减少。

关键的问题是，外部的JavaScript和CSS的组件被缓存的频率和HTML文档被请求的次数相关。虽然很难去量化，但可以被用很多指标衡量。如果你的网站的用户在每个会话中浏览了很多网页而且很多页面重用了相同的JavaSctipt和样式表，缓存外部文件是有很大潜在的好处的。

很多网站都符合这样的指标。对于这些网站来说，最好的解决方案是把JavaScript和CSS发布为单独的文件。唯一的例外，对于主页，内联的文件更好一些，例如 Yahoo!’s front page 和 My Yahoo!。主页在每个会话中只有很少浏览（也许只有一次），你会发现内联的JavaScript和CSS会让终端用户的响应更快。

对于有很多页面浏览量的首页来说，有很多能平衡内联文件所提供的HTTP请求减少的效果与外部文件缓存获得的好处的技巧。一种这样的技巧就是把JavaScript和CSS内联在说夜里，但在页面完成加载时动态下载外部文件。随后的页面会调用浏览器中已经缓存的外部文件。

9 减少DNS的查询 (Reduce DNS Lookups)

tag:content

正如电话簿使人名和他们的电话号码相对应，域名系统（DNS）能够使域名和IP地址相对应。当你在浏览器中键入http://www.yahoo.com，浏览器链接的DNS解析器会返回服务器的IP地址。域名解析会耗费一些时间，DNS查找给定域名的IP地址一般会耗费20-120毫秒。在DNS查找结束前，浏览器不会从目标域名那里下载任何东西。

DNS查询会被缓存以便优化性能。会有一个专门的缓存服务器进行缓存，用户的ISP或者本地网络会维护它，但独立用户的电脑里也会有缓存。DNS信息存在于操作系统的DNS缓存里（微软Windows操作系统里的“DNS客户服务”）。大部分浏览器有它们自己的缓存，与操作系统的缓存相独立。当浏览器在自己的缓存里保存了DNS的记录，它不会向操作系统发出请求记录的要求。

IE默认缓存DNS查询30分钟，在注册表的DnsCacheTimeout的键值中设定。Firefox则缓存DNS查询一分钟，在配置network.dnsCacheExpiration 中设定。（Fasterfox 将它变为一小时。）

当客户端的DNS缓存被清空（包括浏览器和操作系统的缓存），DNS查询的数量等同于网页中单独的域名的数量。包括页面中的链接，图片，脚本文件，样式表，Flash对象等。减少不同域名的数量则会减少DNS查询的数量。

减少不同域名的数量可能减少页面并行的下载数量。减少DNS查询缩短了响应时间，但减少了并行下载数也许会增加响应时间。我的建议是将组件分布在两到四个域名之间。这能很好的折中减少DNS查询提高的速度和维持较高水平的并行下载的效果。

10 缩小JavaScript和CSS (Minify JavaScript and CSS)

tag:javascript,css

缩小是指从代码中删除不必要的字母，减少文件体积从而提高加载速度。缩减代码时需要移除所有的注释，以及不需要的空白（空格，新行和tab）。这样处理JavaScript之后，会由于下载文件的体积被减少而提高响应的性能。两个常用的缩减JavaScript代码的工具是JSMin 和YUI Compressor。YUI compressor也可以压缩CSS。

代码混淆是另一个可用于源代码的优化方案。它比压缩更为复杂，而且在混淆的过程中更容易产生Bug。纵观U.S.的前十大网站，压缩获得了21%的体积减小而代码混淆达到了25%。虽然代码混淆的压缩程度更高，但压缩JavaScript的风险更小。

不仅仅要压缩外部的脚本和样式表，内敛的<script>和<style>部分也可以而且应当被压缩。即使你gzip了你的脚本和样式，压缩它们仍然能减少5%以上的体积。随着JavaScript和CSS的应用和体积的增加，压缩你的代码获得的收益也会越来越多。

11 避免重定向 (Avoid Redirects)

tag:content

重定向结束于301或302状态码。这里有一个301响应的HTTP头的例子：
HTTP/1.1 301 Moved Permanently Location: http://example.com/newuri Content-Type: text/html

浏览器会自动把用户转向Location域中指明的Url地址。HTTP头里包含了重定向所需的所有信息。响应的主体一般是空的。301或者302 响应都不会被实际缓存，除非添加额外的头部，比如 Expires或者Cache-Control指明了它应该被缓存。meta refresh标签和JavaScript也可以将用户重定向到不同的URL，但如果你必须执行重定向，最好的方法是使用标准的3XX HTTP状态代码，以便使后退按钮工作正常。

需要谨记的是，重定向降低了用户体验。在用户和HTML文档之间插入的重定向延误了页面的呈现和组件下载，因为它们都不可能在获得HTML文档之前开始。

一种最浪费性能的重定向频繁发生而网络开发者们却往往没有意识到，那就是当地址中应当有一个左斜线（/）却没有的时候。比如，访问http://astrology.yahoo.com/astrology会导致一个301效应并重定向到http://astrology.yahoo.com/astrology/（注意这里加了一个左斜线）。在Apache中，这可以使用mod_rewrite,或者在Apache事件处理中使用DirectorySlash指令来修补。

使用重定向的另一个常见场景是连接旧网站和新网站。还包括连接网站的不同部分，或者在不同情况下（比如依据浏览器的类型，用户的类型等）重定向用户。使用重定向来连接两个网站很简单而且需要很少的额外代码。虽然在这些情况下使用重定向减少了开发者的麻烦，但却降低了用户体验。如果两部分在同一个服务器上，可以使用Alias 和rewrite来替代重定向。如果域名变更引起了重定向，可以创建一个CNAME（一种可以创建一个别名使一个域名指向另一个的DNS记录）结合 Alias或者mod_rewrite来替代重定向。

12 移除重复的脚本 (Remove Duplicate Scripts)

tag:javascript

在同一个页面中包含两个相同的脚本文件降低了性能。这并不如你想象的那么罕见。在对美国十大网站中的检查中，发现它们中的两个包含了重复的脚本。有两个主要因素增加了一个页面包含两个相同脚本的几率——团队的大小和脚本的数量。当脚本被重复包含时，由于增加了不必要的HTTP请求和 JavaScript的执行，影响了性能。

不必要的HTTP请求在IE中存在，而Firefox终没有。在IE中，如果一个外部脚本被包含了两次而且没有被缓存，在页面加载的过程中会产生两次HTTP请求。即使脚本被缓存了，当用户重载页面时，多余的HTTP请求也会发生。

产生多余的HTTP请求的同时，多次执行脚本也会浪费时间。在Firefox和IE中，无论是否被缓存，脚本都会被重复执行。

避免脚本被意外加载两次的一个方法是在你的模板系统中执行一个脚本管理模块。通常的方式是在HTML页面中使用SCRIPT标签来添加一个脚本：
<script type=”text/javascript” src=”menu_1.0.17.js”></script>

HP中，可以选择创建一个叫做insertScript的方法：
<?php insertScript(“menu.js”) ?>

这个函数不仅仅能防止脚本被重复加载多次，还可以解决脚本的其他问题，比如独立性检测以及为脚本添加版本号码以应对far future Expires头部。

13 设定ETags (Configure ETags)

tag:server

实体标签（ETags）是服务器和浏览器用于确定浏览器中缓存的组件和服务器中的是否对应的一种机制。（”entity”是组件的另一种说法：图片、脚本、样式表等等）添加ETags用于辨别组件提供了比单纯利用“最后修改时间”更为灵活的机制。ETag是一个唯一标识组件的特定版本的字符串。它的唯一格式规范是字符串必须被引号引用。来源服务器使用ETag响应头来设定一个组件的ETag：
HTTP/1.1 200 OK Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT ETag: "10c24bc-4ab-457e1c1f" Content-Length: 12195

当浏览器晚些时候需要检测一个组件时，它使用If-None-Match 头部把ETag传回来源服务器。如果ETag匹配了，会返回一个304状态码，在这个例子里它会减少12195个字节的响应：
GET /i/yahoo.gif HTTP/1.1 Host: us.yimg.com If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT If-None-Match: "10c24bc-4ab-457e1c1f" HTTP/1.1 304 Not Modified

ETag的问题是它们往往在网站的一个服务器中被设为唯一的，当浏览器从一个服务器得到了组件并在稍后试图到另一个服务器验证时，ETag会不匹配，而这在使用多个服务器来处理请求的网站中是很常见的。默认情况下，Apache和IIS在ETag中嵌入的数据戏剧性的减少了应用多台服务器的网站的 ETag验证成功几率。

Apache1.3和2.新版本的ETag格式是inode-size-timestamp。虽然一个给定的文件在多台服务器中处于同一个目录，而且有同样的大小，权限，时间戳，但它的inode在不同服务器中是不同的。

IIS5.0和6.0有同样的问题。IIS中ETag的格式是Filetimestamp:ChangeNumber。ChangeNumber用来跟踪IIS配置的改变次数。一个网站的所有IIS不可能有相同的ChangeNumber。

这导致的结果是，Apache和IIS对完全相同的组件产生的ETag在不同服务器间不能匹配。如果ETags不匹配，用户不会得到小而快的304 响应，而是一个普通的200响应和组件的所有数据。如果你把你的网站放在了一个服务器里，这不会是一个问题。但如果你的网站有多台服务器，而且你使用了 Apache和IIS默认的ETag配置，你的用户会访问页面的速度会变慢，你的服务器加载的程度更高，消耗了更大的带宽，代理服务器不能有效的缓存你的内容。即使你的组件有一个ar future Expires头部，当用户重载或者刷新页面时，依然会发送一个GET请求。

如果你不打算利用ETags提供的灵活的验证模式，你最好把ETag统统移除。Last-Modified头部的验证方式给予组件的时间戳。移除ETag同时减少响应和随后的请求中的HTTP头部大小。这篇微软的支持文档描述了怎样在IIS中移除ETags。在Apache中，你只要在Apache配置文件中添加如下一行：
FileETag none

14 让Ajax可以缓存 (Make Ajax Cacheable)

tag:content

Ajax的好处之一是它能给用户提供瞬间的响应，因为它从服务端异步请求数据。但Ajax不能保证用户在等候那些异步的JavaScript和 XML响应返回时什么都不做。在应用程序中，用户是否继续等待取决于Ajax怎样应用。比如，在一个基于Web的Email客户端用户会等候Ajax返回他们所搜索的邮件信息。记住异步并不代表“即刻”。

为了提高性能，优化Ajax响应很重要。提高Ajax性能最重要的方式是使响应缓存，正如“添加一个过期期限和缓存控制头”这一节讨论的。这些原则同样适用于Ajax。

Gzip组件
减少DNS查询
压缩JavaScript
避免重定向
设定ETag

我们看一个例子。一个Web2，0的邮件客户端可能会用Ajax自动下载用户地址簿。如果用户从上次使用邮件网站以来没有修改她的地址簿，那么如果Ajax响应使用了长期失效时间或者缓存控制头部，地址簿就可以从缓存中读取出来。浏览器必须被告知“使用之前的缓存地址簿”而不是“请求一个新的地址簿”。可以在地址簿Ajax的URL中添加一个标识用户最后一次修改地址簿的时间戳，比如，&t=1190241612。如果地址簿从最后一次下载后没有被更改，时间戳将相同而地址簿将会从浏览器的缓存中得到来替代额外的HTTP传输。如果用户更改了她的地址簿，时间戳会保证新的URL不会和缓存中的匹配，而且浏览器会请求会请求更新的地址簿记录。

即使你的Ajax响应时动态创建的，而且只适用于一个用户，它们依然会被缓存。这样做会让你的Web2.0应用程序更快。

15 更早的刷新缓冲区 (Flush the Buffer Early)

tag:server

当用户请求一个页面，服务端会花费200至500毫秒的时间组合HTML页面。在这期间，浏览器会静静等待数据到来。PHP中有flush（）函数，它允许你向浏览器发送部分就绪的HTML响应，这样浏览器可以在服务器处理余下的HTML页面时去获取组件。这样的好处主要在忙碌的后台和轻松的前台间可以看到。

在HEAD后面是放置刷新操作的好地方，因为头部的HTML代码更容易产生，而且可以让你放置任何CSS和JavaScript文件，以便浏览器在后台工作依然进行时并行开始获取组件。

例子：

... <!-- css, js -->

</head>

<?php flush(); ?>

<body>

... <!-- content -->

Yahoo! search先行研究并且进行了真人测试证明了使用这项技术的好处。

16 在Ajax请求中使用GET方法 (Use GET for AJAX Requests)

tag:server

Yahoo! Mail 团队发现进行XMLHttpRequest的时候，POST方法在浏览器中分两步执行：先发送头部，然后发送数据。所以最好使用只发送一个TCP包（除非你有很多的cookie）的GET方法。IE中URL的最大长度是2000，所以如果你发送超过2000的数据就不能使用GET方法。

一个有趣的现象是，POST方法并不像GET那样实际发送数据（而Get则名副其实）。基于HTTP规范，GET方法意味着取回数据，所以当你只是请求数据时使用GET方法更为有意义（从语义上来说），而在发送需要储存在服务器端的数据时则相反使用POST。

17 后加载组件 (Post-load Components)

tag:content

你可以仔细端详下你的页面然后自问：“什么是在页面初始化时必须的？”那么其余的内容和组件可以放在后面。

JavaScript是理想的用来分割onload事件之前和之后的选择。例如你有执行拖放、下拉和动画的JavaScript代码和菜单，它们可以稍后加载，因为用户在初始呈现之后才会在页面上拖动元素。其他的可以被后加载的地方包括隐藏的内容（当用户做某项操作才会展现的内容）和被折叠的图片。

可以帮助你的工具有： YUI Image Loader能帮助你延缓加载折叠的图片，而且YUI Get utility 能够很简单的包装运行中的JS和CSS。比如，打开Firebug的网络选项卡去查看Yahoo! Home Page。

当性能指标和其它网站开发的好的实践一致时是不错的。渐进增强的观念告诉我们当支持JavaScript时，会提高用户体验，但你必须确保在没有JavaScript时页面也能工作。所以当你确保页面工作正常时，你会通过延后加载的那些更花哨的脚本比如拖放和动画，来增强你的页面。

18 预先加载组件 (Preload Components)

tag:content

预加载看起来和后加载原则是个矛盾，但它其实是为了另外一个目的。预加载组件让你可以利用浏览器的空闲时间来加载之后需要的组件（比如图片，样式表和脚本）。这样当用户浏览下一个页面的时候，大部分组件都已经在缓存里了而页面会加载的更快。

有几种预加载的类型：

无条件预加载-当原本内容加载完成时，立刻开始获取一些额外的组件。比如到google.com看下一个sprite图片怎样被在onload事件后请求的。在google.com的首页里并没有用到sprite图片，但被用在接下来的结果页面里。
有条件的预加载-根据用户的行为来猜测用户什么时候到达下个页面然后据此预加载。在search.yahoo.com上，你可以看到额外的组件在你在输入框中输入时是怎样被加载的。
有预期的加载-当登录重新设计的网站时进行加载。你通常会在重新设计网站后听到：“新网站很酷，但它比以前的要慢”。这个问题的部分原因是用户访问旧网站时有所有的缓存，而对于新的来说，缓存是空的。你可以通过在登录重新设计的网站前预加载一些组件来缓解这方面的影响。你的旧网站可以用浏览器空闲的时间来请求新网站中用到的脚本和图片。

19 减小DOM元素的数量 (Reduce the Number of DOM Elements)

tag:content

复杂的页面意味着更多的字节需要被下载而且也意味着在JavaScript中遍历DOM更慢。比如你在页面中添加一个事件，让它在500或者5000个DOM元素中循环，它们的效率是不同的。

更多的DOM元素表明有些标签需要被改良而并不一定需要移除实际内容。你是否为了布局而使用繁琐的网一样的表格？你是否只是为了弥补一些布局的问题而使用了更多的div标签？也许还有更好和更符合语义的标签可以使用。

YUI CSS utilities可以很好的帮助进行布局:grid.css 可以帮助你进行所有的布局，front.css 和 reset.css 可以帮助你去除浏览器默认的格式。这是你开始重新审视你的标签的机会，比如只在语义符合时使用div标签，而不是用它来另起一行。

DOM元素的数量很好检测，只要在Firebug的控制台里输入：

document.getElementsByTagName(‘*’).length

那么多少DOM元素算多呢？查看下类似的使用较好的标签的页面。比如Yahoo! Home Page是一个很丰富的页面但只有700以下的DOM元素（HTML标签）。

20 分域部署部件：Split Components Across Domains

tag：内容

将部件分割能使你获得最大的并行下载效率。但你同时需要注意不使用多于2~4个域名，以避免DNS查询导致的问题。例如，你可以将HTML内容和动态的组建放于www.example.org域名下，将静态组件分别放于static1.example.org和 static2.example.org之下。

查看Tenni Theurer和Patty Chi的”Maximizing Parallel Downloads in the Carpool Lane“获取更多关于并行下载的信息。

21 减少Iframe的数量 Minimize the Number of iframes

tag：内容

Iframes 能够使HTML文档被插入进父级文档中。首先需要明确iframe的工作方式，才能有效的利用这一形式。

对于第三方内容，比如广告，能够在不影响父级设计的情况下快捷插入。
提供安全沙箱，不影响父级。
能够并行下载脚本。

即使是空的也会有消耗。
会锁住页面的onload事件。
不支持语义表达。

22 避免404错误 No 404s

tag：内容

一个获得没用的404响应的HTTP请求对于宝贵的HTTP请求资源来说是完全不必要的，而且这样还会减慢用户的体验。

有的网站提供了有帮助的404错误信息，比如”你是否在寻找……？”，这样虽然能提高用户体验，但同样浪费了服务端资源（比如数据库）。尤其不妙的是在请求一个外部的Javascript脚本文件失败时获得的一个404错误，因为这样不但会堵塞并行的下载，而且浏览器会尝试分析404响应的内容，来辨识它是否是有用的Javascript代码。

23 减少Cookie的大小 Reduce Cookie Size

tag：cookie

有多种理由让我们应用HTTP cookie，比如身份验证，或者个性化设置。Cookie中的信息在服务端和浏览器间被放在HTTP头中交换。尽量减少cookie的体积对减少用户获得响应的时间十分重要。

查看Tenni Theurer和Patty Chi的”When the Cookie Crumbles“获取更多信息。

去除不必要的cookie。
尽量减少cookie的大小。
留心将cookie设置在适当的域名下，避免影响到其他网站。
设置适当的过期时间。一个较早的过期时间或者不设置过期时间会更快的删除cookie，从而减少用户的响应时间。

24 为部件使用没有cookie的域名 Use Cookie-free Domains for Components

tag：cookie

当浏览其请求一个静态图片并一同发送cookie时，服务器并不需要这些cookie。这样只是毫无益处的创建了多余的网络流量。应当保证静态的部件在请求时没有携带cookie，所以需要把你的静态部件放在另一个子域名下。

如果你的域名是www.example.org，你可以将你的静态部件放在static.example.org中。如果你把cookie设置在顶级域名example.org上而不是www.example.org，那么所有发送至static.example.org的请求会包括那些 cookie。在这种情况下，你可以买一个全新的没有cookie的域名来放置你的静态部件。Yahoo！使用了yimg.com，YouTube试用了 ytimg.com，Amazon使用的是images-amazon.com。

将静态部件放于没有cookie的域名下的另一个好处是一些代理服务器会拒绝缓存有cookie的部件。于此相关的一点是，如果你怀疑你应该为你的首页使用example.org还是www.example.org，考虑cookie的赢下。省略www会让你不得不把cookie写到*.example.org下，所以考虑性能，最好使用www.子域名，然后把cookie写到这个子域名下。

25 减少DOM的读取 Minimize DOM Access

tag：javascript

利用Javascript读取DOM元素很慢，所以为了获得响应更快的页面，你应该：

缓存被读取的元素的引用。
脱机更新节点然后把它们加回到树结构中。
避免利用Javascript定位布局。
26 开发灵巧的事件处理程序 Develop Smart Event Handlers

tag：javascript

如果有太多的事件处理逻辑部署在DOM树的不同元素上，它们的频繁执行会拖慢页面的响应速度。而使用事件委托是一个好的解决方法。如果在一个Div 中有10个按钮，与其在每个按钮上都放一个事件处理程序，步入只在Div上放一个事件处理程序。事件会冒泡上溯，这样你就会捕获这一事件，并找出是哪个按钮发起的它。

同样，你并不需要等待onload事件来启动一些操作DOM树的程序。你只需要保证你需要操作的元素可用就可以了。你不需要等待所有的图片下载完毕，你应当使用DOMContentLoaded事件来替代onload事件，当然，目前并不是所有浏览器都支持这一事件，你可以使用YUI Event组件，其中包含了一个onAvailable函数。

查看Julien Lecomte的“High Performance Ajax Applications”获取更多信息。

27 选择<link>而不是@import Choose <link> over @import

tag：css

前面提到把CSS应当放在最顶端来提供预显。在IE中，放在页面底部的@import和<link>效果是一样的，所以最好不要用它。

28 不使用过滤器 Avoid Filters

tag：css

IE专有的AlphaImageLoader过滤器是为了解决半透明真色PNG图片在IE7之前的版本中显示的问题。这个过滤器会在图片下载时堵塞住展示。而且它会消耗内存并影响每个元素而不仅仅是每张图片，所以这个过滤器的问题很多。

所以最好在IE中完全不使用AlphaImageLoader过滤器，而使用渐淡的PNG8图片。如果你明确需要AlphaImageLoader，请使用hack _filter，从而不影响到你的IE7+的用户。

29 优化图片Optimize Images

tag：images

当设计师制作好网站的图片后，还有些事情应该是你在把这些图片上传到服务器之前做的。

你可以检查GIF图片中的调色板是否和图片中的色彩数一致。使用imagemagick来帮助你方便的检查：
identify -verbose image.gif
如果你看到一个4色的图片却有一个256色的调色板，那么还有很大的空间来做性能优化。

试试把GIF转换成PNG是否会节省空间，这是常有的事情。由于浏览器支持的限制，开发者往往怀疑是否该使用PNG，但这是过去的事情了。唯一的问题是真色的PNG图片的半透明问题，但同样，GIF不是真色的而且也不支持丰富的透明效果。所以GIF可以做的，PNG或者PNG8同样可以做到（除了动画）。一条简单的imagemagick语句就可以提供可用的PNG：

convert image.gif image.png “我们强调的是，给PNG一个机会！”

使用pngcrush或者任何的PNG优化工具，例如：

pngcrush image.png -rem alla -reduce -brute result.png

使用jpegtran处理JPEG图片。这个工具会无损操作JPEG图片，比如旋转，而且可以用来优化图片，比如去除图片中的注释和其他无用的信息（比如EXIF信息）。

jpegtran -copy none -optimize -perfect src.jpg dest.jpg

30 优化CSS精灵 Optimize CSS Sprites

tag：images

横向布局Sprite中的图片往往比纵向布局会减少文件大小。

在一个Sprite中组合相近的颜色会降低颜色的数量，从而达到适合PNG8的低于256色的标准。

“对移动设备友好”，不在Sprite里留下大的空隙。这并不十分影响文件的大小，但会减少客户端代理将图片解压为像素映射的内存消耗，100*100的图片是一万像素，而1000*1000则是一百万像素。

31 不要在HTML中缩放图片 Don’t Scale Images in HTML

tag：images

不要使用大小超过需要的图片，即使你能够在HTML中设置它的属性。如果你需要
```
<img width="100" height="100" src="mycat.jpg" alt="My Cat" />
```
那么就使用恰好100*100px的图片，而不是使用缩放后的500*500的图片。

32 使用小的可缓存的Favicon.ico Make favicon.ico Small and Cacheable

tag：images

favicon.icon是放在服务器根目录的一个图片，它是个麻烦却不得不处理，因为即使你不关心，浏览器依然会请求这张图片，所以最好不要提供一个404的错误。而且由于它是在同一服务器下的，Cookie也会随着每次请求一并发送。这张图片同样干扰下载队列，比如在IE中，当你在onload 事件中请求额外的组件时，favicon会在这些额外组件之前下载。

所以为了减少favicon.ico的不利影响，我们应当：

使用小图片，小于1k为佳。

设置你认为合适的过期时间（因为你如果更新了图片，你并不能修改它的名字）。你可以设置过期为未来的几个月。你可以借鉴下你当前的favicon.ico的最后更新时间来作为设置依据。

Imagemagick 能够帮助你创建小图片。

33 保证组件大小小于25K Keep Components under 25K

tag：mobile

这一限制是因为iPone不会缓存大于25K的组件，注意这里指的是未压缩前的大小。这就是为什么缩小大小很重要，因为单单gzip并不足够。

查看Wayne Shea和Tenni Theurer的”Performance Research, Part 5: iPhone Cacheability – Making it Stick“获取更多信息。

34 把组件打包进多部分文档中 Pack Components into a Multipart Document

tag：mobile

把组件打包进多部分文档类似一封包含有附件的邮件，它能让你通过一个HTTP请求获取多个组件（记住HTTP请求是很昂贵的）。当你使用这一技术，请先检查客户端是否支持它(iPone不支持)。

posted @ 2012-02-04 17:00 beixiao1909 阅读(353) 评论(3) 编辑

前端er常用的一些辅助小工具（感觉不错，特别是icon那个，小神奇）

开发一个优秀的网站并非易事，一个面面俱到并且美观的网站，即使对于经验丰富的Web开发者而言也是项艰巨的任务。在那之前您必须认识到当前的趋势及标准，并确定如何将这些都纳入您的设计之中。

　　幸运的是，现在有很多免费的工具可供使用，以帮助您提高效率，使得工作更有效率。以下这20个实用WEB辅助开发设计工具对于开发者而言无疑都会从中受益。

Typetester

Typetester是在线比较不同的文字和文字属性在给定的文本里显示效果的应用。其主要作用是使网页设计师的生活更轻松，快速方便的比较不同的字体视觉。

网址：http://www.typetester.org/

pForm

使用这款免费易用的工具在几秒钟内创建php表单。如果你需要更多的功能，你可以注意他的父项目MachForm或者更棒的替代品wufoo和formspring（这两个版本提供有限的免费和付费高级版）。

网址：http://www.phpform.org/

ColourLovers

为色彩爱好者而建立的国际型站点。你能搜索网站的调色板，使用在项目上或者创建新的可被评价的调色板。对灵感或者设计理念的批判很有好。

网址：http://www.colourlovers.com/

Firebug

Firebug 与Firefox集成，将大量丰富的网页开发工具引到你指边。浏览的时候，你就可以实时在任何的网页上进行编辑，调试，和检测css，html和 JavaScript。这可能是一个最为广泛使用的Web开发工具了。作为前端er，如果你没有它，那就out啦，赶紧去下一个去。
此外opera , safari等webkit浏览器也支持Firebug。

HTML Entity Character Lookup

假如你需要知道如何在你的网页上显示商标符号，那么这款工具恰恰可以帮助你。HTML实体查询搜索HTML实体匹配的搜索特性建立在字符看起来怎样的基础上的，例如，字母“ C ”将匹配©和¢实体，因为他们看起来差不多。这确实是你需要尝试了解他是怎样有用的工具。（MAC用户也可以作为仪表板部件使用）。

网址：http://leftlogic.com/projects/entity-lookup/

960 Grid System

960网格系统是为了简化Web开发流程，提供常用尺寸，基于宽度960px。这里两个变种，12和16列，可单独使用也可以协作使用。全面赏析此框架

网址：http://960.gs/

Em Calculator

Em Calculator是一个小JavaScript工具，它可以让您输入一个像素大小并显示相应的EM值。这个工具非常易于使用和便捷的快速参考。

Browser Shots

您可以在约100名不同的浏览器的4个不同的平台中查看您网站，以确定最终的跨浏览器的支持。鉴于目前存在的许多不同类型的配置，重要的是要确保您的网站看起来更好，更可能的支持更多的平台。

网址：http://browsershots.org/

Icon Finder

Iconfinder为Web设计者和开发者运用简单有效的方式提供高质量的图标。你只需要在搜索框中键入一个关键字，Iconfinder将会给你带来美丽的图标，你可以自由的使用。

网址：http://www.iconfinder.com/

WhatTheFont

假如你想之你最喜欢的blog使用的什么字体，这个工具能帮到你。仅需要上传一张字体的图片，此工具就可以尽可能的匹配正确的字体。如果你宁可相信一个真正的人，WhatTheFont论坛的资源是一个很好选择。

网址：http://new.myfonts.com/WhatTheFont/iPhone

MeasureIt

很棒的Firefox插件，绘出一把尺子获得任何内容网页上像素的宽度和高度。

ColorZilla

你可以使用ColorZilla获取浏览器上任何一点的颜色。快速校对颜色粘帖到另一个程序中，你可以放大你正在查看的网页大小，测量网页上任意两点间的距离。

Pingdom

Pingdom加载完整的HTML网页，包括所有的对象（图像，CSS，JavaScripts，rss，Flash和帧/框架）。它模仿是在页面在Web浏览器中加载的方式，然后使用很不错的视觉时间条显示每个元素的家寨时间。这可能对尝试调高网闸你的效率十分的有用。

网址:http://pingdom.com/

Test Everything

大体的测试网站所有东西。100个不同的校验器和测试，所有都舒适的在一个应用程序中。节省网站开发测试阶段的大量的时间。

网址：http://tester.jonasjohn.de/

CSS Sprite Generator

Sprites可以通过减少HTTP请求数提高网站速度，因此变得越来越受欢迎。使用他们，需要更大的远见和规划，从而增加了使用他们的难度。这个令人惊奇的工具允许上传图片压缩包，然后将它们合并为一个sprite，一旦sprite被创建，它会创建一份你需要使用sprite的CSS，免费完整下载使用。

网址：http://csssprites.com/

Web Developer Toolbar

一个非常有的Firefox插件，提供了很多web开发人员日常基础工具，快速验证XHTML或检查HTTP头信息。

Domainr

有很多工具可以告诉你某个域名是不是注册了。Domainr除了帮助查询你需要的，而且还尝试建立更值得使用的名字。Domainr帮助您探测整个域名空间，超出了无处不在的和拥挤的.com, .net 与.org的限制。借助jish.nu，burri.to和del.icio.us的灵感，当你想不到独特的域名的时候这个工具就可以派上了用场了。

Font Burner

Font Burner是免费在线工具，可以搜多超过1000种字体。一旦你找到喜欢的字体，该工具会提供一小段代码，让你在自己的网站上免费使用字体。不论用户是否安装此字体,字体都将在每部电脑上显示。如果你想知道自己到底喜欢哪款字体，请参考：史上最漂亮的100种字体

网址：http://www.fontburner.com/

Smush.It

Smush.It是一个简洁的非失真图像优化应用工具，帮助你压缩图片。

网址：http://smush.it/

posted @ 2012-02-04 16:53 beixiao1909 阅读(36) 评论(0) 编辑

仅列出标题下一页

北晓的太阳

我喜欢看鹿丸看的天空，虽然很悠闲，但是也努力着！我喜欢火影，不是因为鸣人不是因为佐助，而且每一个人为自己想要保护的人而努力修业的精神！

一、你是前端工程师

二、内容为王

三、Web是平台

四、细节决定体验

2.测试jQuery包装集是否包含某些元素

3.从jquery.org读取jQuery最新版本

4.存储数据

5.jQuery手册常备身边

6.在FireBug控制台记录jQuery

7.尽可能使用ID选择器

8.善于利用jQuery链

9.绑定jQuery函数到$(window).load事件

10.使用jQuery链来限定选择器，让你的代码更简洁更优雅

11.使用回调函数同步效果

12.学会使用自定义选择器

13.预加载图片

14.将你的代码测试完好

1 减少HTTP请求数量 (Minimize HTTP Requests)

2 使用内容分布式网络 (Use a Content Delivery Network)

3 给头部添加一个失效期或者Cache-Control (Add an Expires or a Cache-Control Header)

4 Gzip压缩组件(Gzip Components)

5 把样式表放在前面(Put Stylesheets at the Top)

6 把脚本放在最后(Put Scripts at the Bottom)

7 不使用CSS表达式 (Avoid CSS Expressions)

8 使用外部的JavaScript和CSS (Make JavaScript and CSS External)

9 减少DNS的查询 (Reduce DNS Lookups)

10 缩小JavaScript和CSS (Minify JavaScript and CSS)

11 避免重定向 (Avoid Redirects)

12 移除重复的脚本 (Remove Duplicate Scripts)

13 设定ETags (Configure ETags)

14 让Ajax可以缓存 (Make Ajax Cacheable)

15 更早的刷新缓冲区 (Flush the Buffer Early)

16 在Ajax请求中使用GET方法 (Use GET for AJAX Requests)

17 后加载组件 (Post-load Components)

18 预先加载组件 (Preload Components)

19 减小DOM元素的数量 (Reduce the Number of DOM Elements)

20 分域部署部件：Split Components Across Domains

21 减少Iframe的数量 Minimize the Number of iframes

22 避免404错误 No 404s

23 减少Cookie的大小 Reduce Cookie Size

24 为部件使用没有cookie的域名 Use Cookie-free Domains for Components

25 减少DOM的读取 Minimize DOM Access

26 开发灵巧的事件处理程序 Develop Smart Event Handlers

27 选择<link>而不是@import Choose <link> over @import

28 不使用过滤器 Avoid Filters

29 优化图片Optimize Images

30 优化CSS精灵 Optimize CSS Sprites

31 不要在HTML中缩放图片 Don’t Scale Images in HTML

32 使用小的可缓存的Favicon.ico Make favicon.ico Small and Cacheable

33 保证组件大小小于25K Keep Components under 25K

34 把组件打包进多部分文档中 Pack Components into a Multipart Document

Typetester

pForm

ColourLovers

Firebug

HTML Entity Character Lookup

960 Grid System

Em Calculator

Browser Shots

Icon Finder

WhatTheFont

MeasureIt

ColorZilla

Pingdom

Test Everything

CSS Sprite Generator

Web Developer Toolbar

Domainr

Font Burner

Smush.It

公告