<![CDATA[悠游 BLOG - 技术资料]]> http://www.uusam.com/uu/blog/ zh-cn PBlog2 v2.4 悠游 BLOG http://www.uusam.com/uu/blog/images/logos.gif http://www.uusam.com/uu/blog/ 悠游 BLOG http://www.uusam.com/uu/blog/article.asp?id=356 <![CDATA[【技术资料】高性能WEB开发系列<转>]]> yysam@yeah.net(uusam) Wed,14 Jul 2010 11:54:55 +0800 http://www.uusam.com/uu/blog/default.asp?id=356

引用内容 引用内容

准备写一系列关于高性能WEB开发的日记，主要是跟前端技术相关的(html,http,js,css等)，将自己了解的一些知识做1个总结和记录并分享，希

望大家能喜欢，也喜欢自己能坚持写下去。当然因个人技术水平有限，写作能力更是非常差，所以如果有什么地方写得不好的，请大家都指点指点。

1、 HTTP服务器.

2、性能测试工具推荐

3、 图片篇.

4、 如何加载JS，JS应该放在什么位置.

5、 为什么要减少请求数，如何减少请求数.

6、 减少请求，响应的数据量.

7、JS、CSS的合并、压缩、缓存管理

8、页面呈现、重绘、回流。

9、该如何加载google-analytics(或其他第三方)的JS.

10、疯狂的HTML压缩

11、flush让页面分块,逐步呈现

12、了解CSS的查找匹配原理，让CSS更简洁、高效


原帖地址：http://www.blogjava.net/BearRui/archive/2010/04/26/web_performance.html]]> http://www.uusam.com/uu/blog/article.asp?id=351 <![CDATA[【技术资料】图片详解Google搜索工作原理（转）]]> yysam@yeah.net(uusam) Tue,06 Jul 2010 11:45:09 +0800 http://www.uusam.com/uu/blog/default.asp?id=351  PPCBlog发表了一张图片，详细解释了网页从被Google的网络蜘蛛爬取、收录、索引，最后再到用户进行一次Google搜索并产生搜索结果的过程，图中还描述了Google Adwords在搜索中产生的过程。

图片简洁明了，对了解Google搜索非常的直观，我们将其编译成中文，下面就是编译成中文Google如何完成一次用户搜索的图片（图片很大）：

]]> http://www.uusam.com/uu/blog/article.asp?id=350 <![CDATA[【技术资料】HTML5 + CSS3 动画特效 - PlasmaTree]]> yysam@yeah.net(uusam) Tue,29 Jun 2010 10:06:03 +0800 http://www.uusam.com/uu/blog/default.asp?id=350  另外一个很阿凡达的效果，link：http://www.openrise.com/lab/PlasmaTree/#。点击看大图：

]]> http://www.uusam.com/uu/blog/article.asp?id=349 <![CDATA[【技术资料】HTML5 + CSS3 动画特效 - FlowerPower]]> yysam@yeah.net(uusam) Tue,29 Jun 2010 09:58:44 +0800 http://www.uusam.com/uu/blog/default.asp?id=349 web上能做到这一点很让人吃惊，Link：http://www.openrise.com/lab/FlowerPower/# 。点击下图放大： 

]]> http://www.uusam.com/uu/blog/article.asp?id=347 <![CDATA[【技术资料】IE6下由于CSS所带来的性能问题分析]]> yysam@yeah.net(uusam) Sat,12 Jun 2010 16:43:53 +0800 http://www.uusam.com/uu/blog/default.asp?id=347 为了让浏览器兼容，哪么如下代码逻辑就会产生了。 不说业务逻辑如何，单说表达式方式的语法。

程序代码 程序代码
input {
    background: e­xpression((this.type =='button')?'#8D9CC5':(this.type =='radio'||this.type =='checkbox')?
            style:((this.readOnly &&this.readOnly ==true )||(this.disabled &&this.disabled ==true))?"#C9C9CC":"#EAF0F2");
    width: e­xpression((this.type =='checkbox')?'20px':'auto');
}


在普通IE6下工作良好，同时加入到IE7中也work很好。
但会产生一些问题，就是性能问题。
它会渲染所有的input组件，如果你的组件够多，哪么性能会差的相当多。
在我强劲的Z400工作站下面，性能差距达到了5-10倍之多。
所有千万不要以为仅仅Dom的渲染很慢，事实上CSS也会影响。]]> http://www.uusam.com/uu/blog/article.asp?id=345 <![CDATA[【技术资料】IE6/7/8中无请求情况下出现进度条的问题]]> yysam@yeah.net(uusam) Thu,06 May 2010 10:53:35 +0800 http://www.uusam.com/uu/blog/default.asp?id=345 相信很多人都遇到过这种情况，尤其是几年前Ajax和一些MVC框架没流行的时候。 由于我这边技术限制的原因，也有些老代码中出现该问题。分析了一下，大致原因如下：

分析： 从上面图中可以看出代码的sequence， 在fiddler2或者其他一些Http 拦截工具中未发现有请求没完成的情况，也没有失败的请求。所以只可能是IE内部的问题，一部分是JS代码的死锁，另一个就是render的未完成。

结论：这个情况是IE的JS引擎自己的问题，可以推理出当两个input源同时渲染一个dom对象的时候，尤其是级联渲染，最有可能造成死锁。所以写代码的时候，记住逻辑分层和顺序尤其重要。 最终问题解决办法是取消同时两部分的渲染，有主页面或者innerfream来渲染，问题解决。

]]> http://www.uusam.com/uu/blog/article.asp?id=344 <![CDATA[【ExtJS】页面表格中列拖动初始位置不正确的原因]]> yysam@yeah.net(uusam) Thu,06 May 2010 10:29:12 +0800 http://www.uusam.com/uu/blog/default.asp?id=344 相信目前还是有很多人在使用Extjs的时候使用到了Iframe，而在使用过程中也有些小问题。如标题所示，这也是我遇到的诡异问题之一，经过分析最后的分析和结论如下：

哪么当用户点击完成左边的Menuitem后，刷新完成页面。如果这个时候你直接去右边表格中拖动列，这个问题就出来了。

分析： 直接点击的时候，在拖拽时候拿到的pagex和pagey点是不正确的（请查看extjs 的drag.js）。我当初想到是可能它把左边的iframe1的宽度加进去了，哪么它拿到window对象可能有问题。那如何让它拿到正确呢？

结果： 让Iframe得到焦点。哪么当你设置iframe2.location的时候，记住也要iframe2.focus()一下。

]]> http://www.uusam.com/uu/blog/article.asp?id=334 <![CDATA[【技术资料】SQL Formater Tool]]> yysam@yeah.net(uusam) Fri,06 Nov 2009 16:11:34 +0800 http://www.uusam.com/uu/blog/default.asp?id=334 If you want a exe program, you can search "ruby to exe" in google. :)
http://sqlformat.appspot.com/

程序代码 程序代码


require 'net/http'

@proxy_addr = '3.36.140.1'
@proxy_port = 80

def query
  
  puts 'sql:'
  data=STDIN.gets
  
  return if data.strip=='e' or data.strip=='exit'
  
  response = Net::HTTP.Proxy(@proxy_addr, @proxy_port).post_form(URI.parse("http://sqlformat.appspot.com/format/"),
  {'data'=>data,'format'=>'text','keyword_case'=>'upper','reindent'=>'true','n_indents'=>2})
  
  puts ''
  puts response.body
  puts ''
  
  query
  
end
puts '-- SQL Formater Desktop Version(input \'e\' to exit) --'
query
]]> http://www.uusam.com/uu/blog/article.asp?id=321 <![CDATA[ 【技术资料】为Extjs组件动态添加和控制遮罩/蒙版的方法]]> yysam@yeah.net(uusam) Mon,10 Aug 2009 16:20:33 +0800 http://www.uusam.com/uu/blog/default.asp?id=321
1. 如果你想为panel添加蒙版的话。
首先有两种方法，第一是自己写，第二是用spotlight组件（在sample里面）。
写的话很简单，动态建立一个div元素。然后把ext的蒙版/遮罩的css样式放进去就行了。用的话更简单，这样：
Ext.fly(<你建立的div元素>).fadeOut(); 或者 fadeIn() 来控制隐藏和显示。

至于spotlight，看我这篇得瑟的东东就行了。
http://www.uusam.com/uu/blog/article.asp?id=312

2. 手工控制Dialog的蒙版隐藏和显示。
这个也是很简单，直接这样使用：
<dialogElement>.mask.fadeOut or fadeIn。当然很多特效都可以替换，这个就自己去看看ExtJS 的 FX类吧。

怎么样？还为遮罩/蒙版犯愁么？多看看人家源码总是有好处的。]]> http://www.uusam.com/uu/blog/article.asp?id=320 <![CDATA[【技术资料】REST & SOAP]]> yysam@yeah.net(uusam) Thu,06 Aug 2009 14:19:29 +0800 http://www.uusam.com/uu/blog/default.asp?id=320 A good document for explain REST & Soap, some contractec topics are in there too. 

link: http://www.xfront.com/sld001.htm

]]>