应用服务器:Tomcat VS Resin

一、定义

• Resin是CAUCHO公司（http://www.caucho.com/）的产品，是一个非常流行的支持 servlets 和jsp的引擎，速度非常快。Resin本身包含了一个支持HTTP/1.1的WEB服务器。虽然它可以显示动态内容，但是它显示静态内容的能力也非常 强，速度直逼APACHE SERVER。许多站点都是使用该WEB服务器构建的。Resin也可以和许多其他的WEB服务器一起工作，比如Apache server和IIS等。

  Resin支持Servlets 2.3标准和JSP 1.2标准。熟悉ASP和PHP的用户可以发现用Resin来进行JSP编程是件很容易的事情。

  Resin支持负载平衡（Load balancing），可以增加WEB站点的可靠性。方法是增加服务器的数量。比如一台SERVER的错误率是1%的话，那么支持负载平衡的两个Resin服务器就可以使错误率降到0.01%。

• Tomcat 服务器是一个免费的开放源代码的Web 应用服务器。Tomcat是Apache 软件基金会（Apache Software Foundation）的Jakarta 项目中的一个核心项目，由Apache、Sun 和其他一些公司及个人共同开发而成。由于有了Sun 的参与和支持，最新的Servlet 和JSP 规范总是能在Tomcat 中得到体现，Tomcat 5 支持最新的Servlet 2.4 和JSP 2.0 规范。因为Tomcat 技术先进、性能稳定，而且免费，因而深受Java 爱好者的喜爱并得到了部分软件开发商的认可，成为目前比较流行的Web 应用服务器。

  Tomcat 很受广大程序员的喜欢，因为它运行时占用的系统资源小，扩展性好，支持负载平衡与邮件服务等开发应用系统常用的功能；而且它还在不断的改进和完善中，任何一个感兴趣的程序员都可以更改它或在其中加入新的功能。

  Tomcat 是一个小型的轻量级应用服务器，在中小型系统和并发访问用户不是很多的场合下被普遍使用，是开发和调试JSP 程序的首选。对于一个初学者来说，可以这样认为，当在一台机器上配置好Apache 服务器，可利用它响应对HTML 页面的访问请求。实际上Tomcat 部分是Apache 服务器的扩展，但它是独立运行的，所以当你运行tomcat 时，它实际上作为一个与Apache 独立的进程单独运行的。

  这里的诀窍是，当配置正确时，Apache 为HTML页面服务，而Tomcat 实际上运行JSP 页面和Servlet。另外，Tomcat和IIS、Apache等Web服务器一样，具有处理HTML页面的功能，另外它还是一个Servlet和JSP容器，独立的Servlet容器是Tomcat的默认模式。不过，Tomcat处理静态HTML的能力不如Apache服务器。

Internet基本协议内容及相关应用

Internet基本协议：如TCP/IP、HTTP、SMTP、FTP等，简单的说就是网络通信协议。

Internet网络互连采用的基本协议是TCP/IP。

TCP/IP（传输控制协议/网间协议）是一种网络通信协议，它规范了网络上的所有通信设备，尤其是一个主机与另一个主机之间的数据往来格式以及传送方式。TCP/IP是INTERNET的基础协议，也是一种电脑数据打包和寻址的标准方法。在数据传送中，可以形象地理解为有两个信封，TCP和IP就像是信封，要传递的信息被划分成若干段，每一段塞入一个TCP信封，并在该信封面上记录有分段号的信息，再将TCP信封塞入IP大信封，发送上网。在接受端，一个TCP软件包收集信封，抽出数据，按发送前的顺序还原，并加以校验，若发现差错，TCP将会要求重发。因此，TCP/IP在INTERNET中几乎可以无差错地传送数据。在任何一个物理网络中,各站点都有一个机器可识别的地址,该地址叫做物理地址.物理地址有两个

特点:

（1）物理地址的长度,格式等是物理网络技术的一部分,物理网络不同,物理地址也不同.

（2）同一类型不同网络上的站点可能拥有相同的物理地址.

以上两点决定了,不能用物理网络进行网间网通讯.

在网络术语中，协议中，协议是为了在两台计算机之间交换数据而预先规定的标准。TCP/IP并不是一个而是许多协议，这就是为什么你经常听到它代表一个协议集的原因，而TCP和IP只是其中两个基本协议而已。TCP/IP理解正确的应该是“用于计算机通信的一个协议集，它包括TCP、IP、ARP、ICMP、UDP、RIP、FTP、SMTP等多种协议”。

OSI参考模型	TCP/IP模型	协议
应用层	应用层	简单电子邮件传输（SMTP）、文件传输协议（FTP）、网络远程访问协议（Telnet）等
表示层
对话层
传输层	传输层	传输控制协议（TCP）、用户数据包协议（UDP）等
网络层	网络层	网际协议（IP）
数据链路层	网络接口层(主机-网络访问层)
物理层

TCP/IP协议图

TCP/IP通讯协议采用了4层的层级结构，每一层都呼叫它的下一层所提供的网络来完成自己的需求。这4层分别为：

应用层：应用程序间沟通的层，如简单电子邮件传输（SMTP）、文件传输协议（FTP）、网络远程访问协议（Telnet）等。

传输层：在此层中，它提供了节点间的数据传送，应用程序之间的通信服务，主要功能是数据格式化、数据确认和丢失重传等。如传输控制协议（TCP）、用户数据包协议（UDP）等，TCP和UDP给数据包加入传输数据并把它传输到下一层中，这一层负责传送数据，并且确定数据已被送达并接收。

互连网络层：负责提供基本的数据封包传送功能，让每一块数据包都能够到达目的主机（但不检查是否被正确接收），如网际协议（IP）。

网络接口层（主机–网络层）：接收IP数据包并进行传输，从网络上接收物理帧，抽取IP数据报转交给下一层，对实际的网络媒体的管理，定义如何使用实际网络（如Ethernet、Serial Line等）来传送数据。

拓展知识：

web2.0由来：

2004年O’ Reilly MediaInc.副总裁Dale Dougherty在公司的一次筹备会上偶然提出了Web2.0一词，全球第一次Web2.0大会于2004年10月在美国旧金山召开。从此，Web2.0这一概念以不可思议的速度在全球传播开来。
Web2.0核心是以人为中心。为用户提供更方便工具，鼓励提供内容。根据用户在互联网上留下的痕迹，组织浏览线索，提供相关的服务，给用户创造新的价值。Web2.0是相对Web1.0的新一类互联网应用的统称。
Web2.0技术主要包括：博客（BLOG）、RSS、百科全书（Wiki）、网摘、社会网络（SNS）、P2P、即时信息（IM）等.

参考文章：
TCP/IP协议及应用

前端开发工程师的必须掌握的基本技能

• DOM结构——两个节点之间可能存在哪些关系以及如何在节点之间任意移动。
• DOM操作——怎样添加、移除、移动、复制、创建和查找节点。
• 事件——怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别。
• XMLHttpRequest——这是什么、怎样完整地执行一次GET请求、怎样检测错误。
• 严格模式与混杂模式——如何触发这两种模式，区分它们有何意义。
• 盒模型——外边距、内边距和边框之间的关系，IE < 8中的盒模型有什么不同。
• 块级元素与行内元素——怎么用CSS控制它们、它们怎样影响周围的元素以及你觉得应该如何定义它们的样式。
• 浮动元素——怎么使用它们、它们有什么问题以及怎么解决这些问题。
• HTML与XHTML——二者有什么区别，你觉得应该使用哪一个并说出理由。
• JSON——它是什么、为什么应该使用它、到底该怎么使用它，说出实现细节来。

附：adam lu前端开发面试题：
HTML && CSS
1.Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义? 行内元素有哪些？块级元素有哪些？CSS的盒模型？
2.CSS引入的方式有哪些? link和@import的区别?
3.CSS选择符有哪些？哪些属性可以继承？优先级？内联和important哪个优先级高？
4.经常遇到的浏览器的兼容性有哪些？怎么会出现？解决方法是什么？
5.如何居中一个浮动元素?
6.HTML5和CSS3的了解情况
7.你怎么来实现下面这个设计图

Javascript
1.怎样添加、移除、移动、复制、创建和查找节点
2.怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别
3.面向对象编程:b怎么继承a
4.看看下面alert的结果是什么
function b(x, y, a) {
arguments[2] = 10;
alert(a);
}
b(1, 2, 3);
如果函数体改成下面，结果又会是什么？
a = 10;
alert(arguments[2] );
5.请编写一个JavaScript函数 parseQueryString，它的用途是把URL参数解析为一个对象，如：var url = ”http://www.taobao.com/index.php?key0=0&key1=1& key2=2…..”
var obj = parseQueryString(url);
alert(obj.key0)  // 输出0
(来自淘宝网校园招聘笔试题)
6.ajax是什么?  ajax的交互模型? 同步和异步的区别? 如何解决跨域问题?
7.什么是闭包？下面这个ul，如何点击每一列的时候alert其index?
<ul id=”test”>
<li>这是第一条</li><li>这是第二条</li><li>这是第三条</li>
</ul>
8.最近看的一篇Javascript的文章
9.你如何去实现这个Tabview

10.常使用的库有哪些？常用的前端开发工具？开发过什么应用或组件？
11.性能-Yslow

小结：面试只是一个检测技能的手段，我个人更看重面试者分析问题和解决问题的能力以及对前端的热爱。

为什么需要框架？
1、JavaScript 框架或库是一组能轻松生成跨浏览器兼容的 JavaScript 代码的工具和函数。每一个库都在众多流行的 Web 浏览器的现代版本上进行了可靠的测试，因此，您可以放心地使用这些框架，您的基于 JavaScript 的 RIA 将会在不同浏览器和平台上以类似的方式工作。
2、这些框架极大地简化了开发进程，并带来一致，可靠，以及高度交互性的用户界面。

目前项目中常用的Javascript框架:
JQuery
YUI
Prototype
Mootools

Javascript库主要功能：
1、解决浏览器兼容性
2、快速开发Web应用
3、丰富UI效果

JQuery：

1、宗旨：WRITE LESS,DO MORE
2、轻量级的js库(压缩后只有21k)
3、兼容CSS3，还兼容各种浏览器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）
4、jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。
5、jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。

YUI:

1、一组采用DOM scripting，Dhtml和Ajax等技术开发的Web UI控件和工具。
2、Yui 工具包利用DOM脚本来简化浏览器内的开发（in-browser devolvement），使用DHTML和AJAX的特性开发所有的Web程序。
3、YUI控件库为你页面提供一组高交互性性的可视化元素。这些元素完全在客户端创建维护，不需要请求服务器进行页面刷新。

Prototype：

prototype是一个易于使用、面向对象的JavaScript框架。它封装并简化和扩展一些在Web开发过程中常用到JavaScript方法与Ajax交互处理过程。

Mootools:

1、一个简洁，模块化，面向对象的JavaScript框架；
2、它能够帮助你更快，更简单地编写可扩展和兼容性强的JavaScript代码。
3、Mootools从Prototype.js中汲取了许多有益的设计理念，语法也和其极其类似。但它提供的功能要比Prototype.js多，整体设计也比Prototype.js要相对完善，功能更强大，比如增加了动画特效、拖放操作等等。

参考文章：

常用js框架比较

为什么需要框架？
1、JavaScript 框架或库是一组能轻松生成跨浏览器兼容的 JavaScript 代码的工具和函数。每一个库都在众多流行的 Web 浏览器的现代版本上进行了可靠的测试，因此，您可以放心地使用这些框架，您的基于 JavaScript 的 RIA 将会在不同浏览器和平台上以类似的方式工作。
2、这些框架极大地简化了开发进程，并带来一致，可靠，以及高度交互性的用户界面。

目前项目中常用的Javascript框架:
JQuery
YUI
Prototype
Mootools

Javascript库主要功能：
1、解决浏览器兼容性
2、快速开发Web应用
3、丰富UI效果

JQuery：

1、宗旨：WRITE LESS,DO MORE
2、轻量级的js库(压缩后只有21k)
3、兼容CSS3，还兼容各种浏览器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）
4、jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。
5、jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。

YUI:

1、一组采用DOM scripting，Dhtml和Ajax等技术开发的Web UI控件和工具。
2、Yui 工具包利用DOM脚本来简化浏览器内的开发（in-browser devolvement），使用DHTML和AJAX的特性开发所有的Web程序。
3、YUI控件库为你页面提供一组高交互性性的可视化元素。这些元素完全在客户端创建维护，不需要请求服务器进行页面刷新。

Prototype：

prototype是一个易于使用、面向对象的JavaScript框架。它封装并简化和扩展一些在Web开发过程中常用到JavaScript方法与Ajax交互处理过程。

Mootools:

1、一个简洁，模块化，面向对象的JavaScript框架；
2、它能够帮助你更快，更简单地编写可扩展和兼容性强的JavaScript代码。
3、Mootools从Prototype.js中汲取了许多有益的设计理念，语法也和其极其类似。但它提供的功能要比Prototype.js多，整体设计也比Prototype.js要相对完善，功能更强大，比如增加了动画特效、拖放操作等等。

参考文章：
http://adamlu.com/?p=442

“以人为本”才是好前端

有朋友问我，为什么他去应聘纯粹做js开发，但是总不如意？
我是觉得求职遇到困难应当多思考总结，看看自身有什么不足和应当提高的地方，而不应该发牢骚。另外觉得找不到专做js的企业和团队，也可以换一个角度想一想，会不会是你自己还不知道什么样的企业和团队需要专业的前端开发工程师。
你真的理解了前端开发这个圈子和互联网这个行业吗？
你真的对自己将来的路想明白了吗？
我觉得这些你需要再思考一下……

js只是工具，为什么现在比较“流行”，因为现在web比较流行，为什么web比较流行，因为可以打开浏览器就可以完成你想完成的事情（比如：OA系统，信息获取，webgame之类）而不需要去安装客户端软件，说白了就是为了方便，计算机的出现也是为了方便人们的工作和生活，任何一项发明都会有它的意义。
用户，永远想要通过最简单的方式完成自己想要完成的事，正因为这样，科技才在不断地进步，一切都在“以人为本”。
所以我们用JS不能只考虑到其本身，而要考虑到它能产生的价值，用户用一个系统，不是要求这个系统开发的技术含量有多高，而是它是否满足自己的需求，在体验上好不好。
一门技术，只是在一定的环境下，为需求服务，当然，前提得你要熟悉这门技术，能够运用自如，才能更好地驾驭它。

MVC设计模式

前言：MVC是一种目前广泛流行的软件设计模式，随着网络应用的快速增加,MVC模式对于Web应用的开发无疑是一种非常先进的设计思想，无论你选择哪种语言，无论应用多复杂,它都能为你理解分析应用模型时提供最基本的分析方法，为你构造产品提供清晰的设计框架，为你的软件工程提供规范的依据。

一、MVC设计思想

MVC英文即Model-View-Controller，即把一个应用的输入、处理、输出流程按照Model、View、Controller的方式进行分离，这样一个应用被分成三个层——模型层、视图层、控制层。

• 视图(View)代表用户交互界面，对于Web应用来说，可以概括为HTML界面，但有可能为XHTML、XML和Applet。随着应用的复杂性和规模性，界面的处理也变得具有挑战性。一个应用可能有很多不同的视图，MVC设计模式对于视图的处理仅限于视图上数据的采集和处理，以及用户的请求，而不包括在视图上的业务流程的处理。业务流程的处理交予模型(Model)处理。比如一个订单的视图只接受来自模型的数据并显示给用户，以及将用户界面的输入数据和请求传递给控制和模型。
• 模型(Model)：就是业务流程/状态的处理以及业务规则的制定。业务流程的处理过程对其它层来说是黑箱操作，模型接受视图请求的数据，并返回最终的处理结果。业务模型的设计可以说是MVC最主要的核心。目前流行的EJB模型就是一个典型的应用例子，它从应用技术实现的角度对模型做了进一步的划分，以便充分利用现有的组件，但它不能作为应用设计模型的框架。它仅仅告诉你按这种模型设计就可以利用某些技术组件，从而减少了技术上的困难。对一个开发者来说，就可以专注于业务模型的设计。MVC设计模式告诉我们，把应用的模型按一定的规则抽取出来，抽取的层次很重要，这也是判断开发人员是否优秀的设计依据。抽象与具体不能隔得太远，也不能太近。MVC并没有提供模型的设计方法，而只告诉你应该组织管理这些模型，以便于模型的重构和提高重用性。我们可以用对象编程来做比喻，MVC定义了一个顶级类，告诉它的子类你只能做这些，但没法限制你能做这些。这点对编程的开发人员非常重要。

  业务模型还有一个很重要的模型那就是数据模型。数据模型主要指实体对象的数据保存（持续化）。比如将一张订单保存到数据库，从数据库获取订单。我们可以将这个模型单独列出，所有有关数据库的操作只限制在该模型中。

• 控制(Controller)可以理解为从用户接收请求, 将模型与视图匹配在一起，共同完成用户的请求。划分控制层的作用也很明显，它清楚地告诉你，它就是一个分发器，选择什么样的模型，选择什么样的视图，可以完成什么样的用户请求。控制层并不做任何的数据处理。例如，用户点击一个连接，控制层接受请求后, 并不处理业务信息，它只把用户的信息传递给模型，告诉模型做什么，选择符合要求的视图返回给用户。因此，一个模型可能对应多个视图，一个视图可能对应多个模型。

MVC的优点

大部分用过程语言比如ASP、PHP开发出来的Web应用，初始的开发模板就是混合层的数据编程。例如，直接向数据库发送请求并用HTML显示,开发速度往往比较快,但由于数据页面的分离不是很直接,因而很难体现出业务模型的样子或者模型的重用性。产品设计弹性力度很小，很难满足用户的变化性需求。MVC要求对应用分层，虽然要花费额外的工作，但产品的结构清晰，产品的应用通过模型可以得到更好地体现。

• 首先，最重要的是应该有多个视图对应一个模型的能力。在目前用户需求的快速变化下，可能有多种方式访问应用的要求。例如，订单模型可能有本系统的订单，也有网上订单，或者其他系统的订单，但对于订单的处理都是一样，也就是说订单的处理是一致的。按MVC设计模式，一个订单模型以及多个视图即可解决问题。这样减少了代码的复制，即减少了代码的维护量，一旦模型发生改变，也易于维护。
  

  MVC设计模型图

• 其次，由于模型返回的数据不带任何显示格式，因而这些模型也可直接应用于接口的使用。
• 再次，由于一个应用被分离为三层，因此有时改变其中的一层就能满足应用的改变。一个应用的业务流程或者业务规则的改变只需改动MVC的模型层。

  控制层的概念也很有效，由于它把不同的模型和不同的视图组合在一起完成不同的请求，因此，控制层可以说是包含了用户请求权限的概念。

• 最后，它还有利于软件工程化管理。由于不同的层各司其职，每一层不同的应用具有某些相同的特征，有利于通过工程化、工具化产生管理程序代码。

MVC的缺点

MVC的设计实现并不十分容易, 理解起来比较容易，但对开发人员的要求比较高。MVC只是一种基本的设计思想，还需要详细的设计规划。
模型和视图的严格分离可能使得调试困难一些，但比较容易发现错误。

总结：

经验表明，MVC由于将应用分为三层，意味着代码文件增多，因此，对于文件的管理需要费点心思。
综合上述，MVC是构筑软件非常好的基本模式，至少将业务处理与显示分离，强迫将应用分为模型、视图以及控制层, 使得你会认真考虑应用的额外复杂性，把这些想法融进到架构中，增加了应用的可拓展性。如果能把握到这一点，MVC模式会使得你的应用更加强壮，更加有弹性，更加个性化。

浏览器兼容性问题

常用浏览器：IE(6 7 8)，firefox，chorme，360，opera等
解决办法：Web标准化
网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。
对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。

CSS兼容性：
1、A标签常见兼容性问题（LVHA）
2、IE对CSS标准的支持缺陷:

important
inherit
子选择器
非锚点:hover
非锚点:active
:focus
position:fixed
display:inline-block

3、IE的两种模式(Quirks/Standard)
4、CSS HACK
问题：你如何区分ie6/7/8 /ff/webkit/…

Yahoo给出的34条网站加速方法

Yahoo给出的包括Yslow规则（22条）的34条 详细说明 ，通过这此规则对自己页面进行一次全面的分析优化，可以提高你网站的加载速度。

1.Minimize HTTP Requests 减少HTTP请求

图片、CSS、script、flash等等这些都会增加http请求数，减少这些元素的数量就能减少响应时间。把多个JS、CSS在可能的情况下写进一个文件，页面里直接写入图片也是不好的做法，应该写进CSS里，利用 CSS sprites 将小图拼合后利用background来定位。

2.Use a Content Delivery Network 利用CDN技术

CDN 确实是好东西，8过服务器提供商的这项服务一般是要收费的，我以前买的国内空间是有这个的但是我当时根本不知道啥用，现在没了。。。

3.Add an Expires or a Cache-Control Header 设置头文件过期或者静态缓存

浏览器会用缓存来减少http请求数来加快页面加载的时间，如果页面头部加一个很长的过期时间，浏览器就会一直缓存页面里的元素。不过这样如果页面里的东西变动的话就要改名字了，否则用户端不会主动刷新，看自己衡量了~ 这项可以通过修改.htaccess文件来实现。

4.Gzip Components Gzip压缩

Gzip格式是一种很普遍的压缩技术，几乎所有的浏览器都有解压Gzip格式的能力，而且它可以压缩的比例非常大，一般压缩率为85%。压缩没压缩，可以到 这里 做下测试。

5.Put Stylesheets at the Top 把CSS放顶部

让浏览者能尽早的看到网站的完整样式。

6.Put Scripts at the Bottom 把JS放底部

网站呈现完毕后再进行功能设置，当然这些JS要在你的加载过程中不影响内容表现。

7.Avoid CSS Expressions 避免CSS Expressions

CSS表达式很可怕，这个只被IE支持的东西执行时候的运算量非常大，你移动一下鼠标它都要进行重计算的，但有时候为了做浏览器的兼容必须要用到这个||| IE6去死去死！~

8.Make javascript and CSS External 将JS和CSS外链

前面讲到了缓存这个事情，一些较为公用的JS和CSS，我们可以使用外链的形式，譬如我就是从Google外链来的jquery文件，如果我的浏览者在浏览别的使用了这个外链文件的网站时已经下载并缓存了这个文件，那么他在浏览我的网站的时候就不需要再进行下载了！~

9.Reduce DNS Lookups 减少DNS查找

貌似是要减少网站从外部调用资源，我的Google分析和picasa的外链图片都算在里面了。

10.Minify JavaScript and CSS 减小JS和CSS的体积

写JS和CSS都是有技巧的，用最少的代码实现同样的功能，减少空白，增强逻辑性，用缩写方式等等，当然也有不少工具也能够帮你实现这一点。

11. Avoid Redirects 避免重定向

再写入链接时，虽然“http://www. today-s-ooxx. com”和“http://www. today-s-ooxx. com/” 仅有一个最后的“/”只差，但是结果是不同的，服务器需要花时间把前者重定向为后者然后进行跳转，这个要自己注意，也可以在Apache里用Alias 或者mod_rewrite或者DirectorySlash解决。

12. Remove Duplicate Scripts 删除重复脚本

重复调用的代码浏览器并不会识别忽略，而是会再次运算一遍，这当然是大大的浪费。

13. Configure ETags 配置ETags

搞不清楚咋回事，总之我是在. htaccess里把它删除了。

14. Make ajax Cacheable 缓存Ajax

Ajax是实时响应的，在浏览器接收到新的数据前，旧的数据被缓存，这样能够更好的提高效率。

15. Flush the Buffer Early 尽早的释放缓冲

当用户进行页面请求时，服务器端需要花费200到500毫秒时间来拼合html，将写在head与body之间，释放缓冲，这样可以将文件头先发送出去，然后再发送文件内容，提高效率。

16. Use GET for AJAX Requests 用GET方式进行AJAX请求

Get 方法和服务器只有一次交互（发送数据），而 Post 要两次（发送头部再发送数据）。

17. Post-load Components 延迟加载组件

最先加载必须的组件进行页面初始化，然后再加载其他，YUI Image Loader 是很好的例子。

18. Preload components 预加载组件

提前加载以后可能用到的东西，和延迟加载并不冲突，它的目的是为后续请求提供更快的响应，参见Google首页上的CSS sprites应用。

19. Reduce the Number of DOM Elements 减少DOM元素数量

复杂的页面结构意味着更长的下载及响应时间，更合理更高效的使用标签来架构页面，是好的前端的必备条件。

20. Split Components Across Domains 跨域分离组件

页面组件多个来源可以增大你的平行下载量，但注意不要过多，超过2-4个域名会引起上面说到的DNS查找浪费。

21. Minimize the Number of iframes 减少iframe数量

需要更有效的利用 ifames。
iframe 优点：有利于下载缓慢的广告等第三方内容，安全沙箱，并行下载脚本
iframe 缺点：即使为空也会有较大资源消耗，会阻止页面的onload，非语义

22. No 404s 不要出现404页面

站点本身里（非搜索结果）出现404页面，无意义的404页面会影响用户体验并且会消耗服务器资源。

23. Reduce Cookie Size 减小Cookie

Cookie在服务器及浏览器之间的通过文件头进行交换，尽可能减小Cookie体积，设置合理的过期时间，能够很好的提高效率。

24. Use Cookie-free Domains for Components 对组件使用无Cookie的域名

对静态组件的Cookie读取是一种浪费，使用另一个无Cookie的域名来存放你的静态组件式一个好方法，或者也可以在Cookie中只存放带www的域名。

25. Minimize DOM Access 减少DOM的访问次数

JS访问DOM是很慢的，尽量不要用JS来设置页面布局。

26. Develop Smart Event Handlers 开发灵活的事件处理句柄

DOM树上过多的元素被加入事件句柄的话，反应效率肯定会低，YUI事件工具有一个 onAvailable 方法可以帮助你灵活的设置DOM事件句柄

27. Choose over @import 使用而非 @import

在IE中使用@import就和在页面底部用一样，我们前面说要把放顶部的。

28. Avoid Filters 避免过滤器的使用

如果需要Alpha透明，不要使用AlphaImageLoader，它效率低下而且只对IE6及以下的版本适用，用PNG8图片。如果你非要使用，加上_filter以免影响IE7+用户。

29. Optimize Images 优化图片

将你的GIF转为PNG8会是个减小体积的好办法，另外有很多方法处理你的JPG及PNG图片以达到优化效果。

30. Optimize CSS Sprites 优化CSS Sprites

在CSS Sprites中竖直并尽量紧凑的排列图片，尽量将颜色相似的图片排在一起，会减小图片本身的大小及提高页面图片显示速度。

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

图片要用多大的就用多大的，1000X1000的图片被width=”100″ height=”100″以后，本身的KB数是不会减少的。

32. Make favicon. ico Small and Cacheable 缩小favicon. ico的大小并缓存它

站点的浏览器ICO应该不是经常换吧，那就长时间的缓存它，并且最好控制在1K以下。

33. Keep Components under 25K 保证组件在25K以下

iphone不能缓存25K以上的组件，并且这还是要在被压缩前。

34. Pack Components into a Multipart Document 将组件打包进一个多部分的文档中

就好像在邮件中加入附件一样，一个HTTP请求就够了，但是这一技术需要确保你的代理支持，iPhone就不支持。

转载自：http://paranimage.com/yahoo-given-34-web-acceleration/

前端组人员 BLOG 列表

有交流才有进步，下面是 UED 前端组成员的 Blog 地址列表（排名不分先后）。

正淳

Blog 地址：http://www.htmlcssjs.com/blog/

老王爷不用多介绍，从他的桌面就能看出此人相当的拉风。Blog 中技术类的文章虽然不是很多，但如能当面问他 CSS 方面的问题，保证会有满意的答复的。

天行

Blog 地址：http://zmans.cn/

天行是 Flash 方面的好手，下次学习 Flash 找他吧…

云烈

Blog 地址：http://yy.mylovings.net/

我的师兄，喜欢山地车和电玩的男人。

圆心

Blog 地址：http://www.planabc.net/

内部代号“小胖子”的 圆心（其实他不胖）。细心的话，你会发现他的每篇 Blog 都有“相关连接”，这说明他在发布之前总会研究大量的资料 — 这是值得大家学习的。

明城

Blog 地址：http://www.gracecode.com/

咳咳，这是我，前端组最帅的男人。

玉伯

Blog 地址：http://lifesinger.org/blog/

玉伯的 Blog 上的文章每次都是必读的，内容相当的棒（可惜他旧版 Blog 的数据没了，哪位能够帮到他）。温故而知新，从细节的地方做到最好，这就是我们的 玉伯 同志。

小虎

Blog 地址：http://www.macji.com/

号称“九零后的小男生”，对于 Javascript 和 CSS 方面的知识理解很透彻。学习能力也是一流的，不信你可以扔本百科全书给他。

云谦

Blog 地址：http://www.chencheng.org/blog/

有娃（单生女性不用考虑了）、很低调的男人。事情扔给 云谦 去做，那是最放心不过的啦~

沉鱼

Blog 地址：http://www.fool2fish.cn/

前端组唯一的女生（真的是块宝呀），除写代码外还有个过人的地方，就是妹子画画真的不错。

空帷

Blog 地址：http://www.quchao.com/

“哦？开始了！Let’s go~” — 前端组的闷骚男，Firefox 重度使用达人。最受不了的是，他用的 XP 系统还套上了层 Ubuntu 的皮肤…

龙藏

Blog：http://www.xintend.com/

2008 年最后名新人，特长是 Flash 。此人 单身ing，哪位 MM 如果哟有兴趣的，可以单独和他聊聊。

--Split--

最后，如果您也想加入上面的名单中，UED 前端组欢迎您。

转载自：http://www.gracecode.com/archives/2648/

强烈推荐前端使用Win7 Xp Mode，用于调试原生ie6

用Win7快大半年了，但是每次调试页面时，需要用到原生ie6，这可犯难了，不想独立安装一个虚拟机，向周围同事问了问，龙笛推荐我用一下Win7 Xp Mode。

注意：使用前提是电脑系统是win7！

在使用Win7 Xp Mode之前需要先下载两个包：
1.WindowsXPMode_zh-cn
2.Windows6.1-KB958559-x86(virtural pc的更新安装包)

建议通过非正规渠道激活的朋友不要从官网上下载。。官网的下载必须得通过WindowsActivationUpdate验证，基本非正规渠道激活的都会验证失败，更伤心的时候是验证失败后你的Win7从此就被烙上了盗版印记。

安装过程十分简单，先装WindowsXPMode_zh-cn，一路Next。装完之后就安装第二个包，同样一路Next,安装完成后会提示重启。重启的时候就进BIOS里打开CPU的VT功能吧，如果你的CPU支持的话(不支持的话也不要紧，微软已经发布了解除CPU硬件限制补丁，GOOGLE下吧)。重新进入系统之后点程序，在所有程序中找到Windows Virtual Pc,点进去之后就可以看到Windows XP Mode,OK，点击启动，完美运行。我的机子配置是cpu E8400，内存4G，感觉使用还是蛮顺畅的!强烈推荐需要的同学使用啊。