Tag Archives: firefox

Beijing Olympic Medal Board

A simple extension for firefox. It makes easier to check out the Olympic game medal status.

Install It Now (Upgraded to Version 1.1)

金牌快速查看。

V1.2 更新

舍弃FF自带的Components.utils.import("resource://gre/modules/JSON.jsm");使用json.org的类来解析json数据。

V1.1 更新:
1. 支持同时显示几个国家
2. 显示国旗

增加Version 1.1的截图。

[attach=139]

version 1.0

[attach=138]

用YSlow优化网站性能

知识点:

  1. 怎么样加快网页的加载速度?
  2. 什么是YAHOO优化十三条规则
  3. 什么是firebug? 什么是YSlow?
  4. 我想优化我的网站加载速度,应该从哪里开始?

最终效果:

  1. 网页加载速度有了明显的提升。
  2. YSlow的分数明显增长。
  3. 用户浏览时,停顿感明显减少。

 

结果数据:

分项结果:
[attach=124]

统计数据:
[attach=125]

Performance Grade: A (99)    Expand All Collapse All
A    1. Make fewer HTTP requests
A    2. Use a CDN
Using these CDN hostnames from your preferences: cdn.eaxi.com
A    3. Add an Expires header
A    4. Gzip components
A    5. Put CSS at the top
A    6. Put JS at the bottom
A    7. Avoid CSS expressions
n/a    8. Make JS and CSS external
Only consider this if your property is a common user home page.
A    9. Reduce DNS lookups
A    10. Minify JS
A    11. Avoid redirects
A    12. Remove duplicate scripts
A    13. Configure ETags

下面一条条地说说,怎么实现。

  1. 尽可能减少HTTP请求,一般采取的办法是减少图片量,多图组合成一图。
  2. 使用CDN。使用专门的域名来存放图片、JS脚本、CSS样式文件、FLASH文件等静态的内容。用独立于主域名的域名来做CDN,主要的原 因是防止COOKIE的干扰,因为如果有COOKIE的情况下,浏览器在HTTP请求时会把COOKIE发送给服务器。这里使用了 cdn.eaxi.com。这里也可以使用智能解析,让网通、电信、教育网的的用户选择最快的CDN。
  3. 给静态文件加上过期标志。让浏览器或者CDN服务器缓存起来,加速图片和其他静态文件的加载。
  4. 启用gzip压缩。gzip对文本的压缩效果非常好,而且主流浏览器也都支持gzip,建议启用。
  5. 把CSS文件置顶。这个主要是为了让浏览器可以即时渲染。也就是说,加载了一部分HTML,浏览器马上就可以将其渲染到最终效果,不用等待加载完毕。
  6. 把JS放到底部,这主要是防止JS在HTML加载完成前运行,加长网页的加载时间。
  7. 不用CSS expressions。这个IE-only的垃圾,考都不考虑。
  8. 把JS, CSS放到外部,让浏览器缓存。
  9. 减少域名解析次数。这里只使用了两个域名:http://blog.eaxi.com/ (主站),http://cdn.eaxi.com/ (CDN),这样,只需要进行两次域名解析。域名解析也是个耗时的头儿,要注意。这CDN一多,域名查询也多,是冲突的。大家按自己情况合理取舍。当然,如果是大站,可以考虑多几个CDN服务器,比如css.eaxi.com, js.eaxi.com,方便管理。
  10. 压缩JS, CSS。
  11. 避免重定向,重定向是浪费时间。
  12. 删除重复的脚本。
  13. 不用ETag。ETag是用于服务器和浏览器间文档校验的一种手段,如果匹配就使用缓存版本,不匹配的话,重新下载。但是使用CDN的时候,不同镜像间的ETag是不一样的,这就导致了ETag的失灵。我们删除ETag。

这样处理后,网页速度已经得到极大的提升。

技巧

在处理过程中,有一些我发现的技巧可以参考:

CDN。很多朋友可能没有经济能力去架设CDN服务器,或者根本就没有必要。这时就可以考虑用别名的方式。比如,cdn.eaxi.com 只是blog.eaxi.com的一个别名,它们属于同一个虚拟主机。但是,blog.eaxi.com下的cookie不会干扰到 cdn.eaxi.com,这达到了CDN的一部分效果。

过期。对于Apache服务器,可以选择使用mod_expires或者mod_headers。我使用的是mod_headers。可以在.htaccess文件中加上:

 # YEAR
<FilesMatch "\.(flv|gif|ico|jpg|png|bmp)$">
Header set Cache-Control "max-age=2592000"
Header unset ETag
Header set X-Powered-By "blog.eaxi.com"
Header set Expires "Mon, 18 Jun 2018 05:30:47 GMT"
Header set Age "567"
Header set Connection "keep-alive"
Header set Server "nginx 0.7.1"
</FilesMatch>

# WEEK
<FilesMatch "\.(pdf|swf|js|css)$">
Header set Cache-Control "max-age=604800"
Header unset ETag
Header set X-Powered-By "blog.eaxi.com"
Header set Expires "Mon, 18 Jun 2018 05:30:47 GMT"
Header set Age "567"
Header set Connection "keep-alive"
Header set Server "nginx 0.7.1"
</FilesMatch>

如果你的服务器不支持mod_headers,可以选择mod_expires的方法:

ExpiresDefault "access plus 4 months"
ExpiresByType text/html "access plus 4 months"
ExpiresByType image/gif "modification plus 5 hours 3 minutes"
ExpiresByType image/jpg "modification plus 5 hours 3 minutes"
ExpiresByType image/png "modification plus 5 hours 3 minutes"
ExpiresByType image/bmp "modification plus 5 hours 3 minutes"
ExpiresByType image/js "modification plus 5 hours 3 minutes"
ExpiresByType image/css "modification plus 5 hours 3 minutes"

其中的时间可以按需要自己定制。

删除ETag。这个可以使用Header unset ETag禁用服务器ETag的发送。

 

要完全关闭这个功能,可以使用YAHOO推荐的:

FileETag none

可以直接加在.htaccess文件中。

Mozilla专有的CSS列表

CSS代码
  1. At-rules  
  2. @-moz-document  
  3. Pseudo-elements and pseudo-classes  
  4. :-moz-list-bullet  
  5. :-moz-first-node  
  6. :-moz-last-node  
  7. :-moz-only-whitespace  
  8. :-moz-bound-element  
  9. :-moz-any-link (matches :link and :visited)  
  10. :-moz-drag-over  
  11. :-moz-tree-row  
  12. :-moz-tree-cell  
  13. :-moz-tree-checkbox  
  14. :-moz-tree-column  
  15. :-moz-tree-cell-text  
  16. :-moz-tree-twisty  
  17. :-moz-tree-indentation  
  18. :-moz-tree-line  
  19. :-moz-tree-image  
  20. :-moz-tree-separator  
  21. :-moz-tree-feedback  
  22. :-moz-tree-progressmeter  
  23. Properties  
  24. -moz-appearance  
  25. -moz-binding  
  26. -moz-backgroundclip  
  27. -moz-backgroundinline-policy  
  28. -moz-background-origin  
  29. -moz-border-bottom-colors  
  30. -moz-border-left-colors  
  31. -moz-border-radius  
  32. -moz-border-radius-bottomleft  
  33. -moz-border-radius-bottomright  
  34. -moz-border-radius-topleft  
  35. -moz-border-radius-topright  
  36. -moz-border-right-colors  
  37. -moz-border-top-colors  
  38. -moz-box-align  
  39. -moz-box-direction  
  40. -moz-box-flex  
  41. -moz-box-ordinal-group  
  42. -moz-box-orient  
  43. -moz-box-pack  
  44. -moz-box-sizing  
  45. -moz-image-region  
  46. -moz-key-equivalent  
  47. -moz-opacity  
  48. -moz-outline  
  49. -moz-outline-color  
  50. -moz-outline-offset  
  51. -moz-outline-radius  
  52. -moz-outline-radius-bottomleft  
  53. -moz-outline-radius-bottomright  
  54. -moz-outline-radius-topleft  
  55. -moz-outline-radius-topright  
  56. -moz-outline-style  
  57. -moz-outline-width  
  58. -moz-user-focus  
  59. -moz-user-input  
  60. -moz-user-modify  
  61. -moz-user-select  
  62. css3-box  
  63. overflow-x  
  64. overflow-y  
  65. (CSS3 columns)  
  66. -moz-column-count  
  67. -moz-column-gap  
  68. -moz-column-width  
  69. -moz-float-edge  
  70. -moz-margin-end  
  71. -moz-margin-start  
  72. -moz-padding-start  
  73. -moz-padding-end  
  74. -moz-force-broken-image-icon  
  75.   
  76. Values  
  77. We  will probably document these on the page describing the standard property. 
  78.  
  79. TODO: write guidelines 
  80.  
  81. cursor (need to be moved to CSS:cursor) 
  82. -moz-alias 
  83. -moz-cell 
  84. -moz-context-menu 
  85. -moz-copy 
  86. -moz-grab 
  87. -moz-grabbing 
  88. -moz-spinning 
  89. -moz-zoom-in 
  90. -moz-zoom-out 
  91. display 
  92. -moz-box 
  93. -moz-inline-block 
  94. -moz-inline-box 
  95. -moz-inline-grid 
  96. -moz-inline-stack 
  97. -moz-inline-table 
  98. -moz-grid 
  99. -moz-grid-group 
  100. -moz-grid-line 
  101. -moz-groupbox 
  102. -moz-deck 
  103. -moz-popup 
  104. -moz-stack 
  105. -moz-run-in 
  106. -moz-compact 
  107. -moz-marker 
  108. overflow 
  109. -moz-scrollbars-horizontal 
  110. -moz-scrollbars-none 
  111. -moz-scrollbars-vertical 
  112. -moz-hidden-unscrollable 
  113. Note: All of these values should be considered deprecated. Use of the overflow-x and overflow-y is preferred, although it does not replace the last of these. 
  114.  
  115. border-style and outline-style 
  116. -moz-bg-inset – Makes the inset border to blend with then current background (scheduled for removal bug 84307) 
  117. -moz-bg-outset – Makes the outset border to blend with then current background (scheduled for removal bug 84307) 
  118. -moz-bg-solid – Makes the solid border to blend with then current background (scheduled for removal bug 84307) 
  119. border-color 
  120. -moz-use-text-color 
  121. all properties accepting color keywords 
  122. -moz-activehyperlinktext 
  123. -moz-hyperlinktext 
  124. -moz-visitedhyperlinktext 
  125. -moz-buttondefault 
  126. -moz-buttonhoverface 
  127. -moz-buttonhovertext 
  128. -moz-cellhighlight 
  129. -moz-cellhighlighttext 
  130. -moz-field 
  131. -moz-fieldtext 
  132. -moz-dialog 
  133. -moz-dialogtext 
  134. -moz-dragtargetzone 
  135. -moz-mac-accentdarkestshadow 
  136. -moz-mac-accentdarkshadow 
  137. -moz-mac-accentface 
  138. -moz-mac-accentlightesthighlight 
  139. -moz-mac-accentlightshadow 
  140. -moz-mac-accentregularhighlight 
  141. -moz-mac-accentregularshadow 
  142. -moz-mac-focusring 
  143. -moz-mac-menuselect 
  144. -moz-mac-menushadow 
  145. -moz-mac-menutextselect 
  146. -moz-menuhover 
  147. -moz-menuhovertext 
  148. empty-cells 
  149. -moz-show-background (default value in quirks mode) 
  150. font-family 
  151. -moz-fixed 
  152. font 
  153. -moz-button 
  154. -moz-info 
  155. -moz-desktop 
  156. -moz-dialog (also a color) 
  157. -moz-document 
  158. -moz-workspace 
  159. -moz-window 
  160. -moz-list 
  161. -moz-pull-down-menu 
  162. -moz-field (also a color) 
  163. text-align 
  164. -moz-center 
  165. -moz-left 
  166. -moz-right 
  167. text-decoration 
  168. -moz-anchor-decoration 
  169. -moz-user-select 
  170. -moz-all 
  171. -moz-none 
  172. white-space 
  173. -moz-pre-wrap 
  174. list-style-type 
  175. -moz-arabic-indic 
  176. -moz-bengali 
  177. -moz-cjk-earthly-branch 
  178. -moz-cjk-heavenly-stem 
  179. -moz-devanagari 
  180. -moz-ethiopic-halehame 
  181. -moz-ethiopic-halehame-am 
  182. -moz-ethiopic-halehame-ti-er 
  183. -moz-ethiopic-halehame-ti-et 
  184. -moz-ethiopic-numeric 
  185. -moz-gujarati 
  186. -moz-gurmukhi 
  187. -moz-hangul 
  188. -moz-hangul-consonant 
  189. -moz-japanese-formal 
  190. -moz-japanese-informal 
  191. -moz-kannada 
  192. -moz-khmer 
  193. -moz-lao 
  194. -moz-malayalam 
  195. -moz-myanmar 
  196. -moz-oriya 
  197. -moz-persian 
  198. -moz-simp-chinese-formal 
  199. -moz-simp-chinese-informal 
  200. -moz-tamil 
  201. -moz-telugu 
  202. -moz-thai 
  203. -moz-trad-chinese-formal 
  204. -moz-trad-chinese-informal 
  205. -moz-urdu 
  206. Others 
  207. color ‘functions 
  208. -moz-hsla (hue, saturation, lightness, opacity) 
  209. -moz-rgba 
  210. -moz-initial – where do we put it? 
  211. The value -moz-initial is a partial implementation of css3′s initial used to apply the CSS specification’s initial value of a property to an element.  
  212. If you know what the following things mean, please put them into an appropriate section.  
  213.   
  214. -moz-math-columnline  
  215. -moz-math-firstcolumn  
  216. -moz-math-firstrow  
  217. -moz-math-font-size  
  218. -moz-math-font-style  
  219. -moz-math-lastcolumn  
  220. -moz-math-lastrow  
  221. -moz-math-rowline   

http://developer.mozilla.org/en/docs/CSS_Reference:Mozilla_Extensions

IE中的滤镜效果 filter:alpha(opacity=*);用来控制透明度,但是在mozilla中使用-moz-opacity:*可以实现
-moz-opacity在IE中无效,
这个是w3c标准中的内容,还是mozilla中特有的东西