StephenChan's Tech Space » Web http://blog.endlesscode.com Stay Hungry. Stay Foolish. Tue, 25 Oct 2011 01:15:07 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 zz HTML代码编写规范和建议 http://blog.endlesscode.com/2010/06/25/zz-coding-convention-of-html/ http://blog.endlesscode.com/2010/06/25/zz-coding-convention-of-html/#comments Fri, 25 Jun 2010 03:54:06 +0000 Stephen http://blog.endlesscode.com/?p=967 Continue reading →]]> 转载来源：http://www.cnblogs.com/nicolaszhao/archive/2010/04/15/1712796.html

使用HTML5的DOCTYPE声明

<!DOCTYPE html> ，目前IE6，IE7还不认识，所以会以标准模式渲染页面。但是在其他浏览器下，在图文混排时图片下方会出现间隔空隙。 解决办法：

    img {
        vertical-align: bottom;
    }

页面显示字符集

使用HTML5的简写方式： <meta charset="utf-8" />

遵循xhtml 1.0规则

这里只是为了编写HTML代码时，统一规范而已，在HTML5中已经不需要这样严格了，但是我们还是要规范下比较好。

  • 所有标签必须结束；
  • 所有标签必须小写；
  • 标签属性都必须用引号引起来（单引号或双引号）；
  • 标签属性必须有值： 
        <select>
        <option selected="selected"></option>
    </select>
    <input type="checkbox" checked="checked" />
  • 所有特殊符号必须转义。

合理使用标签

  • 标签合理嵌套：a、span、strong、em、p、h1~h6等元素不能包含：div、ul、ol、dl、p；
  • 严禁多div症、多span症、多table症，正确使用标签表示DOM结构，在文档没有css的条件下，任然具有结构和可读性：
    • h1~h6：文章标题、内容区块标题
    • p：文本段落
    • strong/em：强调文本
    • dl：包括标题和内容简介的区块
    • ul：无序列表
    • ol：有序列表
    • img：图像，必须加上alt属性来表示图像代替文本，背景和按钮不要使用该标签，请使用css处理。
    • table：数据网格，规则的分栏布局，必须显性定宽和定高
    • 表单结构
      • 使用fieldset做字段分类；
      • 使用legend表示分类标题；
      • 使用label表示字段文本，添加必要的for属性。
  • 严禁使用已在xhtml 1.0中移除的用于表示样式的标签：s、i、b、font

规范命名

  • id： 连接符命名法“hello-world”
  • class: 连接符命名法“hello-world”
  • name： 骆驼式命名法“helloWorld”
表单元素的id以如下前缀命名
label lbl
text txt
password txt
textarea txt
file txt
radio rad
checkbox chk
submit btn
reset btn
button btn
hidden hid
结构布局的元素id命名
主容器 main
页头 header
页脚 footer
内容区域 content
主导航 main-nav
二级导航 sub-nav
LOGO logo

结构内部子元素id命名：父元素id的头字母 + 第几个子元素编号（从1开始） + （可选）当前元素在父容器中的显示位置（上/右/下/左）“t/r/b/l” + （可选）当前元素在父容器中为第几个子元素（从1开始），比如，内容区域id=”content”的子元素：c-1，c-2，c-3，c-4-t，c-4-r-1，c-4-b-2，c-4-l-3…

class命名：按功能命名，用连接符分割单词，单词要有语义，可以自解释，不要使用缩写，除非一看就能理解。

name命名：表单元素name名称为去掉该元素id的前缀，然后用id后面的单词，去掉分割符，使用骆骆式命名链接各单词，比如id=”txt-id-card”，那么name=”idCard”。

]]> http://blog.endlesscode.com/2010/06/25/zz-coding-convention-of-html/feed/ 0 zz 说说CSS Hack 和向后兼容 http://blog.endlesscode.com/2010/06/01/css-hack-and-compatible/ http://blog.endlesscode.com/2010/06/01/css-hack-and-compatible/#comments Wed, 02 Jun 2010 04:24:25 +0000 Stephen http://blog.endlesscode.com/?p=713 Continue reading →]]>

人一旦习惯了某些东西就很难去改，以及各种各样的原因，新的浏览器越来越多，而老的总淘汰不了。增长总是快于消亡导致了浏览器兼容是成了谈不完的话题。说到浏览器兼容，CSS HACK自然而然地被我们想起。今天，我们通常都有一个团队或者将有一个团队的人在一个公司里面做相同的事，需要我们有统一的规范来进行Coding，以方便维护。而解决兼容的方法就是（必须是，因为这才最容易有问题的）其中一个最重要的、要解决的规范之一。

在解决兼容方法上，想定出一个统一的规范，个人认为应该以下面3点为基本原则：

  1. 权衡成本：在浏览器被淘汰后，如何快速清理掉无用代码
  2. 可维护：在资源成本和完美间平衡的向后兼容
  3. 可读：省力、易记

这里把成本放在了第一位，并不是说我们不愿意追求完美，而只是，太刻意追求完美有时候可能会阻碍我们前进；在成本后，应该是可维护和可读，这点对于团队的合作来说至关重要，而最终结果也是为了减少成本。

先把这三个原则存起来，来看看我们平时解决兼容的写法（后面会附详细的Hack方法列表）：

一、CSS 选择器 Hack

    

  1. /* Opera */ 
    2. 

  2. @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) 
    3. 

  3. {head~body .sofish{display:block;}} 
    4.

这种写法的优缺点是：

  • 优点：全面，各种HACK都有；清理无用代码里易认
  • 缺点：选择器名称不易记；代码量多（要重复写选择器）

二、CSS 属性 Hack

    

  1. .sofish{ 
    2. 

  2.         padding:10px; 
    3. 

  3.         padding:9px\9; /* all ie */ 
    4. 

  4.         padding:8px\0; /* ie8-9 */ 
    5. 

  5.         *padding:5px; /* ie6-7 */ 
    6. 

  6.         +padding:7px; /* ie7 */ 
    7. 

  7.         _padding:6px; /* ie6 */ 
    8. 

  8. } 
    9.

这种写法的优缺点是：

  • 优点：易记；代码少
  • 缺点：不全面

三、IE 注释

    

  1. <!--[if IE]>IE only<![endif]-->  
    2. 

  2. <!--[if !IE]>NOT IE<![endif]-->  
    3.

这种写法的优缺点是：

  • 优点：安全；向后兼容好；易维护
  • 缺点：用不好会增加HTTP请求；用得好代码又多

四、浏览器探测：JS/后端程序判断

    

  1. // 以jQuery为例，检测是否是IE6，是则加上class="ie6"  
    2. 

  2. if ($.browser.msie && $.browser.version = 6 ){  
    3. 

  3.      $('div').addClass('ie6');  
    4. 

  4. }  
    5.

这种写法的优缺点是：

  • 优点：全面；易维护；可读性高
  • 缺点：占资源；代码量大（要重写选择器）

上面4种是我们最常用的方法。现在，让我们抽出心里存着的那3个原则，看看如何选择。要时间思考一下么？这里简单地说一下我的选择：

  1. 尽量使用单独HACK

    这样维护起来成本比较低，改动不会影响其他的浏览器，而一旦有浏览器淘汰，只要搜索关键字，就可以批量去掉这些代码。比如，ie6的单独hack：_padding:6px;；

  2. 向后兼容的目标：1年

    你想现在的网站兼容IE10么，谁不想，但这可预见性太低了，也可以说，成本太高了。暂时没必要。不过，IE9可能要发布了，所以，选择像padding:8px\0;这样的IE8+的hack，在删掉其他代码不影响向后兼容上，会更好；并且，如果IE10出来，一旦支持这个hack，而又没有这个bug，可能删掉只影响2个浏览器，也会更方便；

  3. 尽可能省资源

    你要是不考虑页面加载速度，不考虑服务器承受能力的话，那在向后兼容和淘汰的处理上可以做得很完美（从代码上），但这从某种程度上，不如不做。

五、个人推荐写法

其实可以纠结的还真多，这里结合A-Grade浏览器的种类和HACK的种类，写两种个人认为比较合理的HACK和向后兼容相兼顾的写法，仅供大家参考的。

经济实惠型写法：注重单独的HACK。 IE的HACK比较多，选择省力易记的属性HACK；其他浏览器HACK少，选择块状的选择器HACK(推荐)

    

  1. .sofish{  
    2. 

  2.         padding:10px; 
    3. 

  3.         padding:9px\9; /* all ie */ 
    4. 

  4.         padding:8px\0; /* ie8-9 目前应用于IE8的单独hack，情况比较少 */ 
    5. 

  5.         *padding:5px; /* ie6-7 */ 
    6. 

  6.         +padding:7px; /* ie7 */ 
    7. 

  7.         _padding:6px; /* ie6 */ 
    8. 

  8. }  
    9. 

  9. /* webkit and opera */ 
    10. 

  10. @media all and (min-width: 0px){ .sofish{padding:11px;} }  
    11. 

  11. /* webkit */ 
    12. 

  12. @media screen and (-webkit-min-device-pixel-ratio:0){ .sofish{padding:11px;} } 
    13. 

  13. /* opera */  
    14. 

  14. @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { .sofish{padding:11px;} } 
    15. 

  15. /* firefox * / 
    16. 

  16. @-moz-document url-prefix(){ .sofish{padding:11px;}} /* all firefox */  
    17. 

  17. html>/**/body .sofish, x:-moz-any-link, x:default { padding:11px; } /* newest firefox */  
    18.

准完美主义写法：配合IE注释，一律采用选择器HACK（选择性推荐）

    

  1. HTML: 添加body class  
    2. 

  2. <!--[if IE6]--><body class="ie6"><![endif]-->  
    3. 

  3. <!--[if IE7]--><body class="ie7"><![endif]-->  
    4. 

  4. <!--[if IE8]--><body class="ie8"><![endif]-->  
    5. 

  5. <!--[if IE9]--><body class="ie9"><![endif]-->  
    6. 

  6. <!--[if !IE]--><body class="non-ie"><![endif]--> 
    7. 



    

  1. .sofish{padding:10px;}  
    2. 

  2. .non-ie .sofish{padding:12px;} 
    3. 

  3. .ie9 .sofish{padding:9px;} 
    4. 

  4. .ie8 .sofish{padding:8px;} 
    5. 

  5. .ie7 .sofish{padding:7px;} 
    6. 

  6. .ie6 .sofish{padding:6px;} 
    7. 

  7.  
    8. 

  8. /* webkit and opera */ 
    9. 

  9. @media all and (min-width: 0px){ .sofish{padding:11px;} }  
    10. 

  10.  
    11. 

  11. /* webkit */ 
    12. 

  12. @media screen and (-webkit-min-device-pixel-ratio:0){ .sofish{padding:11px;} } 
    13. 

  13.  
    14. 

  14. /* opera */  
    15. 

  15. @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { .sofish{padding:11px;} } 
    16. 

  16.  
    17. 

  17. /* firefox * / 
    18. 

  18. @-moz-document url-prefix(){ .sofish{padding:11px;}} /* all firefox */  
    19. 

  19. html>/**/body .sofish, x:-moz-any-link, x:default { padding:11px; } /* newest firefox */  
    20.

然后，从第二种方式我们也可以发现。把IE注释用在body class上，而不是添加单独的<link />或者@import会是更好的选择。虽然分文件也是一种不错的选择，但了为页面加载速度，HTTP请求一个都不能浪费。

至于利用JS或者后端程序来判断，除非你有足够的资源，除非你解决不了（90%不会发生），不然，并不推荐用。附上一个表（via），可以参考参考：

六：全面的IE6+ / Firefox / Webkit / Opera CSS HACK列表：

    

  1. /***** Selector Hacks ******/ 
    2. 

  2. /* IE6 and below */ 
    3. 

  3. * html #uno  { color: red } 
    4. 

  4.  
    5. 

  5. /* IE7 */ 
    6. 

  6. *:first-child+html #dos { color: red }  
    7. 

  7.  
    8. 

  8. /* IE7, FF, Saf, Opera  */ 
    9. 

  9. html>body #tres { color: red } 
    10. 

  10.  
    11. 

  11. /* IE8, FF, Saf, Opera (Everything but IE 6,7) */ 
    12. 

  12. html>/**/body #cuatro { color: red } 
    13. 

  13.  
    14. 

  14. /* Opera 9.27 and below, safari 2 */ 
    15. 

  15. html:first-child #cinco { color: red } 
    16. 

  16.  
    17. 

  17. /* Safari 2-3 */ 
    18. 

  18. html[xmlns*=""] body:last-child #seis { color: red } 
    19. 

  19.  
    20. 

  20. /* safari 3+, chrome 1+, opera9+, ff 3.5+ */ 
    21. 

  21. body:nth-of-type(1) #siete { color: red } 
    22. 

  22.  
    23. 

  23. /* safari 3+, chrome 1+, opera9+, ff 3.5+ */ 
    24. 

  24. body:first-of-type #ocho {  color: red } 
    25. 

  25.  
    26. 

  26. /* saf3+, chrome1+ */ 
    27. 

  27. @media screen and (-webkit-min-device-pixel-ratio:0) { 
    28. 

  28.         #diez  { color: red  } 
    29. 

  29. } 
    30. 

  30.  
    31. 

  31. /* iPhone / mobile webkit */ 
    32. 

  32. @media screen and (max-device-width: 480px) { 
    33. 

  33.         #veintiseis { color: red  } 
    34. 

  34. } 
    35. 

  35.  
    36. 

  36. /* Safari 2 - 3.1 */ 
    37. 

  37. html[xmlns*=""]:root #trece  { color: red  } 
    38. 

  38.  
    39. 

  39. /* Safari 2 - 3.1, Opera 9.25 */ 
    40. 

  40. *|html[xmlns*=""] #catorce { color: red  } 
    41. 

  41.  
    42. 

  42. /* Everything but IE6-8 */ 
    43. 

  43. :root *> #quince { color: red  } 
    44. 

  44.  
    45. 

  45. /* IE7 */ 
    46. 

  46. *+html #dieciocho {  color: red } 
    47. 

  47.  
    48. 

  48. /* Firefox only. 1+ */ 
    49. 

  49. #veinticuatro,  x:-moz-any-link  { color: red } 
    50. 

  50.  
    51. 

  51. /* Firefox 3.0+ */ 
    52. 

  52. #veinticinco,  x:-moz-any-link, x:default  { color: red  } 
    53. 

  53.  
    54. 

  54.  
    55. 

  55. /***** Attribute Hacks ******/ 
    56. 

  56. /* IE6 */ 
    57. 

  57. #once { _color: blue } 
    58. 

  58.  
    59. 

  59. /* IE6, IE7 */ 
    60. 

  60. #doce { *color: blue; /* or #color: blue */ } 
    61. 

  61.  
    62. 

  62. /* Everything but IE6 */ 
    63. 

  63. #diecisiete { color/**/: blue } 
    64. 

  64.  
    65. 

  65. /* IE6, IE7, IE8 */ 
    66. 

  66. #diecinueve { color: blue\9; } 
    67. 

  67.  
    68. 

  68. /* IE7, IE8 */ 
    69. 

  69. #veinte { color/*\**/: blue\9; } 
    70. 

  70.  
    71. 

  71. /* IE6, IE7 -- acts as an !important */ 
    72. 

  72. #veintesiete { color: blue !ie; } /* string after ! can be anything */ 
    73.

其他的就不多说了。不过，还是要提醒一下: 注释也是很重要的。虽然是HACK了，但现实中情况有时候比想象中的复杂得多，给代码一个注释，好过千言万语。

最后，还是那句，希望看到你更好的方法！

转载来源：http://www.happinesz.cn/archives/1331/

]]> http://blog.endlesscode.com/2010/06/01/css-hack-and-compatible/feed/ 2 select、poll和epoll http://blog.endlesscode.com/2010/03/27/select-poll-epoll-intro/ http://blog.endlesscode.com/2010/03/27/select-poll-epoll-intro/#comments Sat, 27 Mar 2010 13:28:20 +0000 Stephen http://blog.endlesscode.com/?p=601 对select、poll、epoll了解得不多，下面是从《构建高性能Web站点》摘录下来的介绍，等以后真正接触到select、poll和epoll方面的开发再详细写一下使用上的区别。

select

select最早于1983年出现在4.2BSD中，它通过一个select()系统调用来监视多个文件描述符的数组，当select()返回后，该数组中就绪的文件描述符便会被内核修改标志位，使得进程可以获得这些文件描述符从而进行后续的读写操作。

select目前几乎在所有的平台上支持，其良好跨平台支持也是它的一个优点，事实上从现在看来，这也是它所剩不多的优点之一。

select的一个缺点在于单个进程能够监视的文件描述符的数量存在最大限制，在Linux上一般为1024，不过可以通过修改宏定义甚至重新编译内核的方式提升这一限制。

另外，select()所维护的存储大量文件描述符的数据结构，随着文件描述符数量的增大，其复制的开销也线性增长。同时，由于网络响应时间的延迟使得大量TCP连接处于非活跃状态，但调用select()会对所有socket进行一次线性扫描，所以这也浪费了一定的开销。

poll

poll在1986年诞生于System V Release 3，它和select在本质上没有多大差别，但是poll没有最大文件描述符数量的限制。

poll和select同样存在一个缺点就是，包含大量文件描述符的数组被整体复制于用户态和内核的地址空间之间，而不论这些文件描述符是否就绪，它的开销随着文件描述符数量的增加而线性增大。

另外，select()和poll()将就绪的文件描述符告诉进程后，如果进程没有对其进行IO操作，那么下次调用select()和poll()的时候将再次报告这些文件描述符，所以它们一般不会丢失就绪的消息，这种方式称为水平触发（Level Triggered）。

epoll

直到Linux2.6才出现了由内核直接支持的实现方法，那就是epoll，它几乎具备了之前所说的一切优点，被公认为Linux2.6下性能最好的多路I/O就绪通知方法。

epoll可以同时支持水平触发和边缘触发（Edge Triggered，只告诉进程哪些文件描述符刚刚变为就绪状态，它只说一遍，如果我们没有采取行动，那么它将不会再次告知，这种方式称为边缘触发），理论上边缘触发的性能要更高一些，但是代码实现相当复杂。

epoll同样只告知那些就绪的文件描述符，而且当我们调用epoll_wait()获得就绪文件描述符时，返回的不是实际的描述符，而是一个代表就绪描述符数量的值，你只需要去epoll指定的一个数组中依次取得相应数量的文件描述符即可，这里也使用了内存映射（mmap）技术，这样便彻底省掉了这些文件描述符在系统调用时复制的开销。

另一个本质的改进在于epoll采用基于事件的就绪通知方式。在select/poll中，进程只有在调用一定的方法后，内核才对所有监视的文件描述符进行扫描，而epoll事先通过epoll_ctl()来注册一个文件描述符，一旦基于某个文件描述符就绪时，内核会采用类似callback的回调机制，迅速激活这个文件描述符，当进程调用epoll_wait()时便得到通知。

]]> http://blog.endlesscode.com/2010/03/27/select-poll-epoll-intro/feed/ 0 转义和编码 http://blog.endlesscode.com/2010/03/26/escape-and-unicode/ http://blog.endlesscode.com/2010/03/26/escape-and-unicode/#comments Fri, 26 Mar 2010 17:40:04 +0000 Stephen http://blog.endlesscode.com/?p=530 Continue reading →]]> 一、HTML转义

转义字符串（Escape Sequence）也称字符实体(Character Entity)。在HTML中，定义转义字符串的原因有两个：第一个原因是像“<”和“>”这类符号已经用来表示HTML标签，因此就不能直接当作文本中的符号来使用。为了在HTML文档中使用这些符号，就需要定义它的转义字符串。当解释程序遇到这类字符串时就把它解释为真实的字符。在输入转 义字符串时，要严格遵守字母大小写的规则。第二个原因是，有些字符在ASCII字符集中没有定义，因此需要使用转义字符串来表示。

转义字符串（Escape Sequence），即字符实体（Character Entity）分成三部分：第一部分是一个&符号，英文叫ampersand；第二部分是实体（Entity）名字或者是#加上实体（Entity）编号；第三部分是一个分号。

比如，要显示小于号（<），就可以写 &lt; 或者 &#60; 。

用实体（Entity）名字的好处是比较好理解，一看lt，大概就猜出是less than的意思，但是其劣势在于并不是所有的浏览器都支持最新的Entity名字。而实体(Entity)编号，各种浏览器都能处理。

提示：实体名称（Entity）是区分大小写的。

备注：同一个符号，可以用“实体名称”和“实体编号”两种方式引用，“实体名称”的优势在于便于记忆，但不能保证所有的浏览器都能顺利识别它，而“实体编号”则没有这种担忧，但它实在不方便记忆。

最常用的字符实体 Character Entities

显示 说明 实体名称 实体编号
半方大的空白 &ensp; &#8194;
全方大的空白 &emsp; &#8195;
不断行的空白格 &nbsp; &#160;
< 小于 &lt; &#60;
> 大于 &gt; &#62;
& &符号 &amp; &#38;
“ 双引号 &quot; &#34;
© 版权 &copy; &#169;
® 已注册商标 &reg; &#174;
™ 商标（美国） ™ &#8482;
× 乘号 &times; &#215;
÷ 除号 &divide; &#247;

二、JavaScript编码

在JavaScrip中的字符串计算长度是以多少个文字，而不是多少个字节，即一个中文也只占一个长度。

//将字符串以unicode的编码输出
     test = "你好abc";
     str = "";
     for( i=0; i<test.length; i++ )
     {
      temp = test.charCodeAt(i).toString(16);
      str    += "\\u"+ new Array(5-String(temp).length).join("0") +temp;
     }
     document.write (str);
//求真正的字节长度
String.prototype.byteLength = function() {
     var totalLen = 0;
     var charCode;
     for(var i=0;i<this.length;i++) {
         charCode = this.charCodeAt(i);
         if(charCode < 0x007f) {
             totalLen += 1;
         } else if ((0x0080 <= charCode) && (charCode <= 0x07ff)) {
             totalLen += 2;
         } else if((0x0800 <= charCode) && (charCode <= 0xffff)) {
             totalLen += 3;
         }
     }
     return totalLen;
}

关于encodeURI()和encodeURIComponent()：

encodeURI()和encodeURIComponent()方法用于编码传递给浏览器的URI（统一资源标识符）。有效的URI不能包含某些字符，如空格。这两个方法用于编码URI，这样用专门的UTF-8编码替换所有的非有效字符，就可以使浏览器仍能够接受并理解它们。

encodeURI()方法用于处理完整的URI（例如，http://www.wrox.com/illegal value.htm），而encodeURIComponent()用于处理URI的一个片断（如前面的URI中的illegal value.htm）。这两个方法的主要区别是encodeURI()方法不对URI中的特殊字符进行编码，如冒号、前斜杠、问号和英镑符号，而encodeURIComponent()则对它发现的所有非标准字符进行编码。例如：
image056
image057
可以看到，除空格外，第一个URI无任何改变，空格被替换为%20。第二个URI中的所有非字母数字字符都被替换成它们对应的编码，基本上使这个URI变得无用。这就是encodeURI()可以处理完整URI，而encodeURIComponent()只能处理附加在已有URI末尾的字符串的原因。

总的来说，传递参数时需要使用encodeURIComponent，这样组合的url才不会被#等特殊字符截断。进行url跳转时应该整体使用encodeURI，Location.href=encodeURI(“http://blog.endlesscode.com?tag=转义和编码”)。

关于escape、encodeURI、encodeURIComponent转义的字符区别：

函数 不变换字符
escape (69个) *+-./@_0-9a-zA-Z
encodeURI (82个) !#$&’()*+,-./:;=?@_~ 0-9a-zA-Z
encodeURIComponent (71个) !’()*-._~0-9a-zA-Z

常见的字符编码：

字符 十六进制
+ %2B
空格 %20
/ %2F
? %3F
% %25
# %23
& %26
= %3D

引用：

]]> http://blog.endlesscode.com/2010/03/26/escape-and-unicode/feed/ 0 SWFUpload浅析 http://blog.endlesscode.com/2010/03/26/swfupload%e6%b5%85%e6%9e%90/ http://blog.endlesscode.com/2010/03/26/swfupload%e6%b5%85%e6%9e%90/#comments Fri, 26 Mar 2010 16:32:22 +0000 Stephen http://blog.endlesscode.com/?p=554 Continue reading →]]> 一、简介和示例

SWFUpload is a small JavaScript/Flash library to get the best of both worlds. It features the great upload capabilities of Flash and the accessibility and ease of HTML/CSS。

官方站点：http://www.swfupload.org/

简单来说，swfupload这个上传库是可以显示上传进度以及上传速度等上传信息。一般实现这种上传体验有2种方式，一种是异步上传，在服务器端边接收数据边往session写入接收的字节数和进度数据，然后客户端轮询这个记录在session的进度数据并回显到页面。第二种方式就是采用flash来上传，也就是swfupload所采用的方式，在发送过程中将发送的相关状态数据回传到js的函数中处理。

下面是一个单个文件上传的使用示例，简单的创建一个SWFUpload对象，并传入相关的事件处理和参数就可以了：

        var swfu;
        window.onload = function () {
            swfu = new SWFUpload({
                // Backend settings
                upload_url: "/upload",
                file_post_name: "image",
                // Flash file settings
                file_size_limit : "10 MB",
                file_types : "*.*",         // or you could use something like: "*.doc;*.wpd;*.pdf",
                file_types_description : "All Files",
                file_upload_limit : "0",
                file_queue_limit : "5",
                // Event handler settings
                swfupload_loaded_handler : swfUploadLoaded,

                file_dialog_start_handler: fileDialogStart,
                file_queued_handler : fileQueued,
                file_queue_error_handler : fileQueueError,
                file_dialog_complete_handler : fileDialogComplete,

                //upload_start_handler : uploadStart,   // I could do some client/JavaScript validation here, but I don't need to.
                upload_progress_handler : uploadProgress,
                upload_error_handler : uploadError,
                upload_success_handler : uploadSuccess,
                upload_complete_handler : uploadComplete,
                // Button Settings
                button_image_url : "/static/images/XPButtonUploadText_61x22.png",
                button_placeholder_id : "spanButtonPlaceholder", //flash元素要替代的html元素
                button_width: 61,
                button_height: 22,

                // Flash Settings
                flash_url : "/static/swf/swfupload.swf",
                custom_settings : {
                    progress_target : "fsUploadProgress",
                    upload_successful : false
                },
}

二、参数说明

原理是很明显易懂的，关键是flash和javascript的通讯部分，在文件上传的各个状态都会有javascript和flash函数的相互回调。目前主要研究了上传单个文件的上传逻辑，swfupload支持多个文件上传的，不过核心的逻辑应该是没有太多的变化。swfupload用一个队列来管理多个文件上传的，因为在传入的参数中会有一些队列和文件上传数量相关的参数。

在其核心的JavaScript文件swfupload.js定义的状态码以及从flash传递到js的文件对象：

//文件对象
file = {
	"id":SWFUpload_0_0,
	"index":0,
	"filestatus":-1,
	"name":vim-cheat-sheet-diagram.png,
	"size":317949,
	"type":"",
	"creationdate":Fri Jan 16 1970 00:08:13 GMT+0800 (CST),
	"modficationdate":Fri Jan 16 1970 00:08:13 GMT+0800 (CST),
	"post": {}
}

//文件队列错误码
SWFUpload.QUEUE_ERROR = {
	QUEUE_LIMIT_EXCEEDED	  		: -100,
	FILE_EXCEEDS_SIZE_LIMIT  		: -110,
	ZERO_BYTE_FILE			  		: -120,
	INVALID_FILETYPE		  		: -130
};

//上传错误码
SWFUpload.UPLOAD_ERROR = {
	HTTP_ERROR				  		: -200,
	MISSING_UPLOAD_URL	      		: -210,
	IO_ERROR				  		: -220,
	SECURITY_ERROR			  		: -230,
	UPLOAD_LIMIT_EXCEEDED	  		: -240,
	UPLOAD_FAILED			  		: -250,
	SPECIFIED_FILE_ID_NOT_FOUND		: -260,
	FILE_VALIDATION_FAILED	  		: -270,
	FILE_CANCELLED			  		: -280,
	UPLOAD_STOPPED					: -290
};

//文件状态
SWFUpload.FILE_STATUS = {
	QUEUED		 : -1,
	IN_PROGRESS	 : -2,
	ERROR		 : -3,
	COMPLETE	 : -4,
	CANCELLED	 : -5
};

//按钮的动作
SWFUpload.BUTTON_ACTION = {
	SELECT_FILE  : -100,
	SELECT_FILES : -110,
	START_UPLOAD : -120
};

1. 事件处理函数

事件函数 触发时间 参数
swfupload_loaded_handler 在flash初始化完成之后 没有参数
file_dialog_start_handler 当用户点击上传按钮，在打开文件浏览窗口之前 没有参数
file_queued_handler 用户成功地选择了文件，在file_dialog_complete_handler事件之前触发。如果选择了多个文件，则触发多次 file文件对象
file_queue_error_handler 文件上传数量、类型、大小不符合时 file文件对象、错误码、从flash中返回的错误信息
file_dialog_complete_handler 在用户成功了选择了文件后，在所有file_queued_handler之后触发 选择文件的数量、加入了文件队列的文件数量、在当前文件队列总共的文件数量
upload_start_handler 用户点击了提交按钮，开始把文件上传到服务器 file文件对象
upload_progress_handler 刚打开与服务器的连接与文件上传过程中 file文件对象、已经上传的字节数、总共要上传的字节数
upload_error_handler 上传失败时 file文件对象、错误码、从flash中返回的错误信息
upload_success_handler 文件上传成功或者等待服务器数据返回超时 file文件对象、服务器返回的数据、服务器是否有返回数据
upload_complete_handler 上传完成时，在upload_success_handler之后触发 file文件对象
debug_handler 调用SWFUpload对象的debug()函数时 swfupload对象和其初始化的参数

2. 其他重要参数

参数名 意义 说明
upload_url 要上传到的服务器地址
file_post_name 上传到服务器中文件内容对应的key
flash_url flash元素的url
custom_settings 自定义的参数，可以在事件处理函数中获取得到 dict类型
button_placeholder_id flash的上传按钮显示在html的位置，此名称的元素会被替换成object元素 span即可

三、上传逻辑

下面是用graphviz画出来的流程图，图比较大，不过看得舒服:)
1. 如上面的示例代码所示，在javascript代码中首先要创建一个SWFUpload的javascript对象，这个对象创建的初始化逻辑如下（箭头表示逻辑和流程的走向）：
js_swfupload
2. 当javascript将object元素添加到html页面的元素中时，即初始化flash中的元素：
flash_swfupload
3.用户点击上传的按钮，准备选择文件时，这个已经绑定了按钮的点击事件，而这个按钮不是input而是一个flash的元素：
open_filebrowser
4.用户选择完文件后：
select_file
5. 用户点击提交按钮，文件开始上传到服务器：
submit_upload
6. 文件上传过程中的一些事件处理逻辑：
upload_events

]]> http://blog.endlesscode.com/2010/03/26/swfupload%e6%b5%85%e6%9e%90/feed/ 5 浏览器缓存 http://blog.endlesscode.com/2010/02/22/cache-in-browser/ http://blog.endlesscode.com/2010/02/22/cache-in-browser/#comments Mon, 22 Feb 2010 13:25:22 +0000 Stephen http://blog.endlesscode.com/?p=277 Continue reading →]]> 一、缓存协商

在使用缓存的时候，我们不但需要在Web服务器上使用缓存，同时也尽可能地让Web站点的内容缓存在用户的浏览器中，特别是一些长期不会出现更改的静态文件，这样将在一定程度减少了服务器的计算机开销，而且也避免了有些内容由于不必要的传输而带来的带宽浪费。

通过IE的选项打开IE的缓存目录，可以看到：

browsercache

其中有Internet地址，截止期限( Expires )，上次修改时间( Last-Modified )等等文件信息。

对于Firefox浏览器，它存储缓存文件的方式有所不同。并不像IE那样将每个文件独立存储，而是采用二进制文件的方式来存储和管理缓存文件。

firefoxcache

可以看到，Firefox浏览器在使用磁盘来存储缓存文件的同时，还使用了内存，它将命中率较高的缓存内容同时也装入内存中，这样浏览器在查找缓存的时候，将先在高速内存中查找，如果内存中没有需要的缓存，便前往磁盘缓存目录中继续查找，这种从内存到磁盘的多级缓存机制有时会带来更快的缓存加载速度。

由于浏览器的缓存内容是存放在浏览器本地的，而内容由Web服务器生成，因此两者需要一种沟通机制来进行缓存协商。协商的过程很容易理解。首先，当浏览器向Web服务器请求一些内容时，Web服务器需要告诉浏览器哪些内容可以被缓存，一旦浏览器知道某个内容可以缓存后，下次当浏览器需要请求这个内容时，它便不会直接向服务器请求完整内容，而是询问服务器是否可以使用本地的缓存，服务器在收到浏览器的询问后需要作出果断的回应，到底是允许浏览器使用本地缓存还是将最新的内容传回浏览器。

这里有两种协商的方法：Last-Modified 和 ETag

1. Last-Modified :

“”"
The Last-Modified entity-header field indicates the date and time at which the origin server believes the variant
was last modified.
“”"

事实上动态内容一般不存在传统意义上的最后修改时间，静态文件可以通过stat()系统调用获得它在物理文件系统的最后修改时间，一般Web服务器会为静态文件的HTTP响应头自动生成最后修改时间。在HTTP协议中规定Last-Modified使用的是GMT时间。其流程大致为：

webcache

If-Modified-Since

“”"
The If-Modified-Since request-header field is used with a method to make it conditional: if the requested
variant has not been modified since the time specified in this field, an entity will not be returned from the server;
instead, a 304 (not modified) response will be returned without any message-body.
“”"

而If-Modified-Since的值正是Web服务器返回的Last-Modified，当Web服务器看到有If-Modified-Since，则根据Web服务器的配置来决定是否返回请求的内容还是返回304状态。

2. ETag

ETag的协商方式与上述的方式非常类似，但它采用的不是最后修改时间，而是一串编码来标记内容，这串内容称为ETag。一个原则是，如果一个内容的ETag没有变化，那么这个内容也一定没有更新。在HTTP/1.1并没有规定ETag的具体格式和计算方法，也就是说，Web服务器可以自由定义ETag的格式和计算方法，比如一种简单的方法是对文件内容计算md5值作为ETag。其流程与Last-Modified相似：

etag当浏览器在下次请求的时候，在HTTP请求头中附加”If-None-Match”的时候（值为ETag的内容），服务器就需要重新计算这个内容的ETag值，并与HTTP请求中的ETag进行比较。如果相同就返回304状态码，不同的话就将最新的内容返回给浏览器。

二、浏览器缓存截止

HTTP中有一个标记，Expires（IE缓存目录见到的截止期限）：
“”"
The Expires entity-header field gives the date/time after which the response is considered stale. A stale cache
entry may not normally be returned by a cache (either a proxy cache or a user agent cache) unless it is first validated
with the origin server (or with an intermediate cache that has a fresh copy of the entity).
The presence of an Expires field does not imply that the original resource will change or cease to exist at, before,
or after that time.
“”"
它告诉浏览器该内容在何时过期，暗示浏览器在该内容过期之前不需要再询问服务器，而直接使用本地缓存即可。这样的好处显而易见，一旦浏览器丝毫不用请求服务器，那将完全节省了带宽和服务器处理等开销，可谓皆大欢喜。

对于浏览器请求页面有三种方式：

  • Ctrl+F5 ： 这种方式叫强制刷新，它使得网页以及其中的所有组件都直接向Web服务器发送请求，并且不使用缓存协商，这样的目的是获取所有页面内容的最新版本。
  • F5 ： 这种方式便是一般的刷新，我们经常使用，它等同于单击浏览器的刷新按钮。它允许浏览器在请求中附加必要的缓存协商，但不允许浏览器直接使用本地缓存，也就是说，它能够让 Last-Modified 发挥效果，但是会无视 Expires。
  • 单击浏览器地址栏的“转到”按钮、回车、通过超链接打开网页 ： 这种方式允许浏览器以最少的请求来获取网页的数据，浏览器会对所有没有过期的内容直接使用本地缓存，所以，Expires 标记只对这种方式有效。

还存在一个问题，通过 Expires 指定的过期时间，是来自于Web服务器的系统时间，如果用户本地的时间和服务器时间不一致的话，那一定会影响到本地缓存的有效期检查，没有人能够保证到用户本地时间与Web服务器严格一致。幸运的是，HTTP/1.1中还有一个标记用于弥补 Expires 的不足，那就是 Cache-Control ，它的格式如下：

Cache-Control: max-age=<second>

max-age指定了缓存过期的相对时间，单位是秒，并且这个时间是相对于浏览器本地时间而言。目前主流的浏览器都将 HTTP/1.1 作为首选，所以当HTTP响应头中同时含有 Expires 和 Cache-Control 时，浏览器会优先考虑 Cache-Control。对于没有 Cache-Control 的情况，浏览器则会服从 Expires 的指示。

来源：

  • 《构建高性能Web站点》
  • RFC2616
]]> http://blog.endlesscode.com/2010/02/22/cache-in-browser/feed/ 3 初识CDN http://blog.endlesscode.com/2009/12/13/about-cdn/ http://blog.endlesscode.com/2009/12/13/about-cdn/#comments Sun, 13 Dec 2009 12:27:07 +0000 Stephen http://blog.endlesscode.com/?p=33 Continue reading →]]> =====先声明一下，以下内容都是从互联网中总结而得来的=====

CDN的全称是Content Delivery Network，即内容分发网络。其上的是通过在现有的Internet中增加一层新的网络架构，将网站的内容发布到最接近用户的网络“边缘”，使用户可以就取得所需内容，解决Internet网络拥挤的状况，提高用户访问网站的响应速度。网站的内容提供商（比如网易、新浪、搜狐等等）使用CDN，就可以在宏观层解决一部分大流量、海量用户并发等令人头疼的问题。从技术上全面解决由于网络带宽小、用户访问量大、网点分布不均 等原因所造成的用户访问网站响应速度慢的问题。通过用户就近性和服务器负载的判断，CDN确保内容以一种极为高效的方式为用户的请求提供服务。

CDN的基本运作原理是：CDN服务提供商在全国各地的很多CDN节点部署了大量的边缘服务器，当内容提供商（比如网易、新浪、搜狐等等）使用CDN服务的时候要把加速的域名CNAME到CDN服务提供商的CDN网络中，然后将内容提供商的内容缓存或镜像到这些边缘服务器上，当终端用户访问这些加速网站时，通过先进的智能DNS将用户访问解析到离终端用户最近的最可靠的边缘服务器上，实现就近访问，从而加速访问速度，提升用户的访问体验。

下面对比用户访问站点的传统方式和加入了CDN之后的方式：

a)传统方式

clip_image002

  1. 用户向浏览器提供要访问的域名;
  2. 浏览器向DNS服务器获取站点的IP;
  3. 浏览器根据IP向域名指定的网站服务器发出数据请求;
  4. 浏览器根据域名主机返回的数据显示网页的内容。

b)加入CDN

clip_image003

  1. 用户向浏览器提供要访问网站的域名，域名解析的请求被发往网站的DNS域名解析服务器；
  2. 由于网站的DNS域名解析服务器对此域名的解析设置了CNAME，请求被指向CDN网络中的智能DNS负载均衡系统；
  3. 智能DNS负载均衡系统对域名进行智能解析，将响应速度最快的节点IP返回给用户；
  4. 浏览器在得到速度最快节点的IP地址以后，向CDN节点的服务器发出访问请求；
  5. 由于是第一次访问，CDN节点将回到源站取用户请求的数据并发给用户，然后将数据缓存到节点上；
  6. 当有其他用户再次访问同样内容时，CDN将直接将数据返回给客户，完成请求/服务过程。

总的来说，内容服务基于缓存服务器，也称作代理缓存(Surrogate)，它位于网络的边缘，距用户仅有”一跳”(Single Hop)之遥。同时，代理缓存是内容提供商源服务器（通常位于CDN服务提供商的数据中心）的一个透明镜像。这样的架构使得CDN服务提供商能够代表他们 客户，即内容供应商，向最终用户提供尽可能好的体验，而这些用户是不能容忍请求响应时间有任何延迟的。据统计，采用CDN技术，能处理整个网站页面的 70%～95％的内容访问量，减轻服务器的压力，提升了网站的性能和可扩展性。

至于智能DNS，解析如下：

假设某网站 ,如www.a.com, 上海有服务器一台,给的IP是1.1.1.1 ,北京有一台,给的是2.2.2.2 处于不同IDC,要求实现上海的用户访问在上海的服务器， 而北京的用户访问到北京的服务器.
角色1 Client 上海电信用户5.5.5.10
角色2 Client的DNS服务器 5.5.5.1 根据Client的网络接入的方式不同，DNS服务器的IP地址是不一样的
角色3 a.com的soa dns,ip 3.3.3.3 由com. 授权,
角色4 www.a.com的2台服务器, 上海的IP1.1.1.1 北京的2.2.2.2
角色5 上海的DNS服务器 1.1.1.10
角色6 北京的DNS服务器 2.2.2.10
在确定好所有的角色后,我们来看看这个工作过程以及解决方案
假定上海电信dns 是递归查询, 通过一个图来说明智能解析过程. (请把该图放大再看比较清楚)

clip_image005

因为递归查询,那么情况比较复杂,因为 最终访问到a.com dns 服务器的是上海电信dns服务器， 是Client DNS. 这样只能判定Client DNS比较距离 上海或者北京比较近，而无法断定Client是距离那里比较近。

不过，由于网络接入的方式不一样，例如 网通的ADSL方式，其IP、DNS地址均由动态获取，这样此时 Client DNS服务器与Client应该是属于相同运营商IP，这样就能够通过判定Client DNS地址来大约断定Client所属运营商所处地区,从而给予Client一个正确的IP地址解析。

]]> http://blog.endlesscode.com/2009/12/13/about-cdn/feed/ 0 初识Squid http://blog.endlesscode.com/2009/12/13/about-squid/ http://blog.endlesscode.com/2009/12/13/about-squid/#comments Sun, 13 Dec 2009 12:10:30 +0000 Stephen http://blog.endlesscode.com/?p=43 Continue reading →]]> =====先声明一下，以下内容都是从互联网中总结而得来的=====

先解析反向代理服务器的概念，反向代理服务器又称为 WEB 加速服务器，它位于 WEB 服务器的前端，充当Web服务器的内容缓存器。如图

11111

反向代理服务器是针对 WEB 服务器设置的，后台 WEB 服务器对互联网用户是透明的，用户只能看到反向代理服务器的地址，不清楚后台 WEB 服务器是如何组织架构的。当互联网用户请求 WEB 服务时，DNS 将请求的域名解析为反向代理服务器的 IP 地址，这样 URL 请求将被发送到反向代理服务器，由反向代理服务器负责处理用户的请求与应答、与后台 WEB 服务器交互。利用反向代理服务器减轻了后台 WEB 服务器的负载，提高了访问速度，同时避免了因用户直接与 WEB 服务器通信带来的安全隐患。

Squid是一个高性能的代理缓存服务器软件，其作为反向代理服务器位于本地 WEB 服务器和 Internet 之间 , 组织架构如图

SquidProxy

客户端请求访问 WEB 服务时，DNS 将访问的域名解析为 Squid 反向代理服务器的 IP 地址，这样客户端的 URL 请求将被发送到反向代理服务器。如果 Squid 反向代理服务器中缓存了该请求的资源，则将该请求的资源直接返回给客户端，否则反向代理服务器将向后台的 WEB 服务器请求资源，然后将请求的应答返回给客户端，同时也将该应答缓存在本地，供下一个请求者使用。

Squid 反向代理一般只缓存可缓冲的数据（比如 html 网页和图片等），而一些 CGI 脚本程序或者 ASP、JSP 之类的动态程序默认不缓存。它根据从 WEB 服务器返回的 HTTP 头标记来缓冲静态页面。有四个最重要 HTTP 头标记：

  • Last-Modified: 告诉反向代理页面什么时间被修改
  • Expires: 告诉反向代理页面什么时间应该从缓冲区中删除
  • Cache-Control: 告诉反向代理页面是否应该被缓冲
  • Pragma: 用来包含实现特定的指令，最常用的是 Pragma:no-cache

例如：在默认情况下，ASP页面返回” Cache-control: private.” ，所以ASP页面时不会在反向代理服务器缓存的。

通过DNS的 轮询技术，将客户端的请求分发给其中一台 Squid 反向代理服务器处理，如果这台 Squid 缓存了用户的请求资源，则将请求的资源直接返回给用户，否则这台 Squid 将没有缓存的请求根据配置的规则发送给邻居 Squid 和后台的 WEB 服务器处理，这样既减轻后台 WEB 服务器的负载，又提高整个网站的性能和安全性。

SquidArch

Squid如何高级优化？一般说来，网站用 Squid 加速，目的有二种

  1. Squid 本身具有缓存功能，可以将Webserver输出的内容缓存起来，在缓存没有过期之前来的访问，都直接用缓存里面的内容，这样可以有效减少 Webserver 机器上面的请求数量。这是 Squid 的主要功用。
  2. 网络慢的用户会长时间占用 Webserver 的 TCP 连接，Webserver 对每个连接占用的资源比较大，如果长时间不能释放出来服务其他请求，性能会有比较大的影响。前面放一个 Squid, Webserver 就可以迅速处理完逻辑以后，把数据快速发送给 Squid, 然后去处理别的逻辑，而 Squid 每个 TCP 连接占用的资源很少，不用担心占用太多资源。这个用途也叫做连接管理，有一些网络设备也可以做这个事情，价格都很贵。

为什么配置的Squid命中这么低呢，这大概有两种原因。大多数的网站都是有一些页面不能够被缓存的，例如登录页面。这些页面请求也从 Squid 走，成为分母的一部分，直接就降低了命中率，我们首先可以做的事情是，把这些不能够缓存的页面请求，拆分到单独一个Squid 上面，或者访问量不大的话，干脆把Apache暴露出来。这样能够缓存的那个Squid 命中率马上上升一截。

有人可能会说，把不能缓存的页面分拆开去，就光为了让能缓存的那个数字好看，这不是掩耳盗铃么？其实这么做是有意义的，首先就是去掉了不能缓存页面 的干扰，使得我们进一步优化Squid 的依据更加准确。其次是不可缓存请求和可缓存请求之间的重要性通常是有差距的，分拆了以后，它们之间不容易互相抢占资源，不会因为下载图片的连接太多把 Squid 占满，影响更重要的登录请求。第三就是可缓存内容通常是图片等页面元素,浏览器在load它们的时候，对每个站点的并发连接会有控制，如果分开成不同的IP，可以多一些请求同时执行。提高少许显示速度。

其实观察 sohu, sina 之类的页面，你会发现它们的页面也是分拆的，可以看到页面里面的图片都是指向 images.sohu.com 之类的地址，虽然它们可能和其他页面一样后台都指向同一个Apache。这样做完，缓存命中率大概能上升到 70%-80% 了，运气好的时候完全可以上 90%。

另一种导致Squid命中低的原因和这个比较类似，同样都是可缓存的内容，有的可能是软件下载站上面的大文件，有的是新闻站点上面的小图片，如果同一个Squid对这样差别巨大的文件加速的话，会严重干扰Squid的缓存策略，两者不能兼顾，要不就是大文件占据了 cache ，把小文件都挤出了cache, 要不就是小文件特别多，大文件无法进入 cache, 导致大文件经常 miss 。这个比不能缓存的页面还要恶心，因此即使在服务器资源有限的情况下，也要优先拆分这两类型访问。一般来说，文件大小分界线定在 1M 左右就可以了，如果是有软件下载这样特别大的文件，可以在4M–10M 左右再拆分一次。

只要悉心按照访问模式来拆分业务，大部分起缓存作用的 squid 都可以达到很高的命中率，至少都可以到达 9X%。

]]> http://blog.endlesscode.com/2009/12/13/about-squid/feed/ 0