Tagged: firefox RSS

  • admin 4:46 pm on August 14, 2008 Permalink
    Tags: 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]

     
    • Seaprince 5:11 pm on August 15, 2008 Permalink

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

    • admin 5:03 pm on July 16, 2009 Permalink

      Hello, there is no ads accepted on my site right now. Thanks for focusing.

  • admin 11:30 pm on June 20, 2008 Permalink | Reply
    Tags: firefox, yslow   

    用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文件中。
     
  • admin 7:03 pm on August 5, 2007 Permalink | Reply
    Tags: , firefox   

    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-background-clip  
    27. -moz-background-inline-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中特有的东西

     
  • admin 2:17 pm on November 20, 2006 Permalink | Reply
    Tags: firefox   

    mozilla核心的浏览器galeon使用手记 

    第一个感觉:速度超快!我的内存是512的,不知道是不是这个原因?不过同机测试比firefox快了很多很多!
    界面也简洁明了,符合我的性格喜好!
    不过对CSS的支持似乎有点欠缺。

    在界面的操作上也不太人性化。

     
c
compose new post
j
next post/next comment
k
previous post/previous comment
r
reply
e
edit
o
show/hide comments
t
go to top
l
go to login
h
show/hide help
shift + esc
cancel