如何提高网页的效率(下篇)——Use YSlow to know why your web Slow

网站最重要的东西是什么?
——内容?SEO(搜索引擎优化)?UE(用户体验)?都不对!是速度!
内容再丰富的网站,如果慢到无法访问也是毫无意义的; SEO做的再好的网站,如果搜索蜘蛛抓不到也是白搭(页面效率和搜索蜘蛛之间的关系,需要进一步的确认,此为和上篇保持统一); UE设计的再人性化的网站,如果用户连看都看不到也是空谈。

 

所以网页的效率绝对是最值得关注的方面。虽然我们在 《如何提高网页的效率(上篇)——提高网页效率的14条准则》提到了如何提高网页效率的14条准则,但是如何知道我们现在的网页的效率到底如何?到底处于怎样一个级别?又有哪些方面做的不够好,需要改进呢?也许,你会说,问一下用户不就知道了吗?但是相比感性比例占据太大的用户感受而言,理性的工具和数据更具有说服力。本篇就将向你介绍一款评测网页效率的工具——YSlow(why slow,这个名字起的太好了)。

yslow,yslow Logo
yslow

 

YSlow是由Yahoo开发者团队发布的一款基于Firebug的插件。而Firebug 又是一款基于FireFox的插件。所以说YSlow是一款基于FireFox插件的插件。虽然有点绕,但是最终说明的问题是:

  • 很遗憾,微软的IE系列浏览器不能使用YSlow。
  • YSlow只能使用在FireFox浏览器上。
  • 如果要想使用YSlow,那么你必须先安装FireFox。
  • 如果要想使用YSlow,那么你就要安装FireFox上的Firebug插件。

 

这看上去好像有点令人沮丧,但是事实上它并不像想象中的那么麻烦,只要按照下面的步骤你将能很快的使用YSlow:

  1. http://www.mozilla.net.cn/firefox/在新窗口打开此链接 下载最新版的FireFox,并安装它。当然如果你已经安装了FireFox可以跳过此步。
  2. https://addons.mozilla.org/en-US/firefox/addon/1843/在新窗口打开此链接 下载最新版的Firebug,并安装它。当然如果你已经安装了Firebug可以跳过此步。
  3. https://addons.mozilla.org/en-US/firefox/addon/5369/在新窗口打开此链接 下载最新版的YSlow,并安装它。当然如果你已经安装了YSlow可以跳过此步。

 

 

firefox,firebug,yslow
图2:在菜单中先打开Firebug插件

这时候打开FireFox,你将在【工具】菜单中看到【firebug】(如图2)。打开firebug,然后在firebug中点击YSlow菜单,便看进入YSlow的主界面(如图3)。

点击小图查看完整大图
图3:在菜单中先打开Firebug插件(点击小图查看完整大图)

 

点击【Performace】菜单

YSlow便开始分析此页的效率,并从13个最影响网页效率的方面给出评估(如图4)。

firefox,firebug,yslow
图4:YSlow给出的本页面效率评估

 

可以看出来,YSlow评估的依据就是我们在 《如何提高网页的效率(上篇)——提高网页效率的14条准则》中提到的前面13条。前面蓝色的字母表示这一条准则的得分。A最高。点击右面的三角形可以得到更多的信息和建议,有些信息里面还有“放大镜” 图标,点击也将展示更为详细的信息和建议。(如图5所示)

firefox,firebug,yslow
图5:YSlow可以给出每条准则的详细评估信息和建议

 

点击【Stats】菜单

这个视图会告诉你页面的总体统计信息。包括页面大小、css样式表大小、脚本文件大小、总体图片大小、flash文件大小和css中用到的图片文件大小。还会告诉你,哪些东西被缓存了,缓存了多少等等。

firefox,firebug,yslow
图6:【Stats】视图信息

 

点击【Components】菜单

这个视图是一个页面所有部件的信息列表。从中我们可以得知每个部件的各种详细信息。如:类型、URL、Expires数据、状态、大小、读取时间、ETag信息等等。通过对这个列表的分析,我们就可以知道到底是什么东西最耗费我们的资源,从而有针对性的进行优化。

firefox,firebug,yslow
图7:【Components】视图信息,点击“放大镜”图标我们可以知道更详细的信息(点击小图查看完整大图)

 

点击【Tools】菜单

【Tools】菜单包含4个子菜单,就是4个实用工具。【JSLine】工具会生成JSLine报表,报表是对本网页中JS脚本的分析报告,包含错误和建议。【ALL JS】工具,将生成本页面所有脚本代码便于阅读和打印的报表页面。【ALL CSS】工具,将生成本页面 所有CSS样式表代码便于阅读和打印的报表页面。【Printable View】将【Performance】和【Stats】视图中的信息生成一份更适合阅读和打印的报表页面。

firefox,firebug,yslow
图8:【Tools】菜单,包含了4个子菜单

 

点击【Help】菜单

【Help】主要是些常用的帮助途径的入口。从这里你可以很方面的访问YSlow的官方网络和博客。如果你还对YSlow的使用有什么疑惑的话,那么在这里你将获得满意的解答。

firefox,firebug,yslow
图8:【Help】菜单是些常用的帮助入口

 

后记

“工欲善其事,必先厉其器!”好的工具的确能很大的提高我们的工作效率。但是“阿斗”就算手里拿着“方天画戟”,估计也没有几个人怕他。好的工具是一方面,但是更重要的还是提高我们自身的知识水平。就如同这款YSlow,如果没有 《如何提高网页的效率(上篇)——提高网页效率的14条准则》中的理论知识,工具提供的信息我们看到的可能只是表面,就算看懂了数据,我们也很难知道对应的手段和措施。壮汉拿厉斧,这样伐木才能又快又轻松。

关于本文的讨论

博客园【web标准设计小组】关于本文的讨论

YSlow!如何提高网页的效率(上篇)——提高网页效率的14条准则

网站最基本的东西是什么?

网站最基本的东西是什么?
——内容?SEO(搜索引擎优化)?UE(用户体验)?都不对!是速度!
内容再丰富的网站,如果慢到无法访问也是毫无意义的; SEO做的再好的网站,如果搜索蜘蛛抓不到也是白搭; UE设计的再人性化的网站,如果用户连看都看不到也是空谈。
所以网页的效率绝对是最值得关注的方面。如何才能提高一个网页的效率呢?Steve Souders(Steve Souders的资料http://www.oreillynet.com/pub/au/2951)提出的提高网页效率的14条准则,而这些准则也将是我们下篇中介绍到的YSlow工具的理论基础:

  • Make Fewer HTTP Requests
  • Use a Content Delivery Network
  • Add an Expires Header
  • Gzip Components
  • Put CSS at the Top
  • Move Scripts to the Bottom
  • Avoid CSS Expressions
  • Make JavaScript and CSS External
  • Reduce DNS Lookups
  • Minify JavaScript
  • Avoid Redirects
  • Remove Duplicate Scripts
  • Configure ETags
  • Make Ajax Cacheable

这里我们将逐一的讲解这些准则,对其中开发者密切相关的准则我将详细讲解。小弟个人技术实在有限,错误和无知在所难免,还请高人指点。

 

第一条:Make Fewer HTTP Requests 尽可能的减少HTTP的Request请求数。

80%的用户响应时间都是浪费在前端。而这些时间主要又是因为下载图片、样式表、JavaScript脚本、flash等文件造成的。减少这些资源文件的Request请求数将是提高网页显示效率的重点。
这里好像有个矛盾,就是如果我减少了很多的图片,样式,脚本或者flash,那么网页岂不是光秃秃的,那多难看呢?其实这是一个误解。我们只是说尽量的减少,并没有说完全不能使用。减少这些文件的Request请求数,当然也有一些技巧和建议的:

1:用一个大图片代替多个小图片。

这的确有点颠覆传统的思维了。以前我们一直以为多个小图片的下载速度之和会小于一个大图片的下载速度。但是现在利用httpwatch工具的对多个页面进行分析后的结果表明事实并不是这样。
第一张图是一个大小为40528bytes的337*191px的大图片的分析结果。
第二张图是一个大小为13883bytes的280*90px的小图片的分析结果。

点击查看大图
一个大小为40528bytes的337*191px的大图片的分析结果(点击图片可以查看完整大图片)

 

点击查看大图
一个大小为13883bytes的280*90px的小图片的分析结果(点击图片可以查看完整大图片)

第一张大图片花费时间为:
Blocked:13.034s
Send:0.001s
Wait:0.163s
Receive:4.596s
TTFB:0.164s
NetWork:4.760s
功耗时:17.795s
真正用于传输大文件花费的时间为Reveive时间,即4.596s,多数的时间是用来检索缓存和确定链接是否有效的Blocked时间,供花费13.034s,占总时间的73.2%。

第二张小图片花费时间为:
Blocked:16.274s
Send:小于0.001s
Wait:0.117s
Receive:0.397s
TTFB:0.118s
NetWork:0.516s
功耗时:16.790s
真正用于传输文件的花费时间是Reveive时间,即0.397s,这的确要比刚才大文件的4.596s小很多。但是他的Blocked时间为16.274s,占总时间的97%。

如果这些数据还不够说服你的话,让我们看看下面这张图。这里列出了某个网页中所有图片中的花费时间示意图。当然,里面的图片有大有小,规格不一。

httpwatch,杨正祎,Yes!B/S!
大约80%以上的时间是用来检索缓存和确定链接是否有效的Blocked时间。

其中藏青色的为传输文件花费的Reveive时间,而前面白色的为检索缓存和确认链接是否有效的Blocked时间。铁一样的事实告诉我们:

  • 大文件和小文件下载所需时间的确是不同的,差异的绝对值不大。而且下载所需时间占总耗费时间比例很小。
  • 大约80%以上的时间是用来检索缓存和确定链接是否有效的Blocked时间。无论文件大小,这个时间的花费大致是相同的。而且所占总耗费时间的比例是极大的。
  • 一个100k的大图片总耗费时间绝对大于4个25k的小图片的总耗费时间。而且主要差别就是4个小图片的Blocked时间绝对大于1个大图片的Blocked时间。

所以如果可能还是使用大图片来替代过多的琐碎的小图片吧。这也是为什么翻转门的效率要高于图片替换实现的滑动门的原因。
但是,请注意:也不能用太大的单张图片,因为那样会影响到用户体验。例如个几兆的背景图片的使用绝对不是一个好主意。

2:合并你的css文件。
合并,合并示意图
图:合并与融合

我以前犯了一个错误,你在看我《样式表的组织与规划》的系列文章中会知道。当时,我为了方便组织和规划样式表,将用于不同用途的样式表文件分离开来,形成不同的css文件。然后在页面中根据需要引用多个css文件。根据“尽可能的减少HTTP的Request请求数”准则我们知道,那样的确是不合理的,因为那样会产生更多的HTTP的Request请求数。从而降低网页的效率。所以,从提高网页效率的角度上而言,我们还是应该将所有的css写在同一个css文件中。但是问题又来了。那么怎么来很好的组织和规划样式表呢?这的确是个矛盾。我现在的做法是采用两套版本。编辑版和发布版。编辑版仍然使用多个css文件以便于规划和组织。而等到发布的时候,再将多个css文件合并到一个文件中去,从而达到减少HTTPRequest请求数的目的。

3:合并你的javascript文件。

原因和处理同上,不再赘言。

 

第二条:Use a Content Delivery Network 使用CDN

这个看上去好像很深奥的样子,但是只要结合中国的网络特色,这个便不难理解了。“北方服务器”、“南方服务器”、“电信服务器”、“网通服务器”……这些词听起来是那么熟悉和压抑。如果,一个北京的电信用户试图从广东的网通服务器上打开一个类似《壁纸合集》帖子的网页时,你就能很深刻的理解。
鉴于这个不是我们开发人员力所能及的准则,所以这里也就不多言了。

CDN,南北服务器,电信网通,宽带互联
图:这个图也算有点中国特色了

 

第三条:Add an Expires Header 添加周期头

这个也并非开发人员来控制,而是网站服务器管理员的职责。所以,如果作为开发人员的你不了解和明白也没有关系。还是把这个准则告诉公司的网站服务器管理员。

第四条:Gzip Components 启用Gzip压缩

这个大家应该比较熟悉。Gzip的思想就是把文件先在服务器端进行压缩,然后再传输。这对于体积较大的纯文字型的文件有特效。鉴于这也并非开发人员,而是网站服务器管理员的工作范畴,这里就不详细讲解了。如果你对此感兴趣,可以资讯贵公司的网站服务器管理人员。

第五条:Put CSS at the Top 把CSS样式放在页面的上方。

无论是HTML还是XHTML还是CSS都是解释型的语言,而非编译型的。所以CSS到上方的话,那么浏览器解析结构的时候,就已经可以对页面进行渲染。这样就不会出现,页面结构光秃秃的先出来,然后CSS渲染,页面又突然华丽起来,这样太具有“戏剧性”的页面浏览体验了。

第六条:Move Scripts to the Bottom 将脚本放在底部

原因同第五条一样。只是脚本一般是用来于用户交互的。所以如果页面还没有出来,用户连页面都不知道什么样子,那谈交互简直就是扯谈。所以,脚本和CSS正好相反,脚本应该放在页面的底部。

第七条:Avoid CSS Expressions 避免使用CSS中的Expressions

 

if语句,expression,判断语句示意图
图:CSS中的Expressions其实也是一种if判断

首先有必要先说明一下CSS Expressions是什么一个东西。其实它就像其它语言中的if……else……语句。这样在CSS中就可以进行简单的逻辑判断了。举个简单的例子——

<style>
input
{background-color:expression((this.readOnly && this.readOnly==true)?”#0000ff”:”#ff0000″)}
</style>
<INPUT TYPE=”text” NAME=””>
<INPUT TYPE=”text” NAME=”” readonly=”true”>

这样css就可以根结一些情况分别使用不同的样式了。如果你对这个感兴趣可以到我的博客上阅读相关的文章—— 《CSS中的expression系列文章》。但是CSS中Expressions 的代价却是极高的。当你的页面需要根据判断来渲染效果的元素很多的时候,那么你的浏览器将长期处于假死状态,从而给用户带来极差的用户体验。

 

第八条:Make JavaScript and CSS External 将javascript和css独立成外部文件

这一条好像和第一条有点矛盾。的确,如果从HTTP的request请求数来讲的话,这样做的确是降低了效率。但是之所以这么做,是因为另外一个重要的考虑因素——缓存。因为外部的引用文件会被浏览器缓存,所以如果javascript和css体积较大的时候,我们将它们独立成外部文件。这样当用户只要浏览一次以后,这些体积较大的js和css文件就能被缓存起来,从而极高地提高用户再次访问时的效率。

第九条:Reduce DNS Lookups  减少DNS查询

DNS域名解析系统。大家都知道我们之所以能记住那么多的网址,是因为我们记住的都是单词,而非http://202.153.125.45这样的东西,而帮我们把那些单词和202.153.125.45这样的ip地址联系起来的就是DNS。那这一条对我们到底有什么真正意义上的指导意义呢?其实有两条:
1:如果不是必须,请不要把网站放到两台服务器上。
2:网页中的图片、css文件、js文件、flash文件等等,不要太多的分散在不同的网络空间中。这就是为什么那种只发一个网站中的壁纸图片的帖子,要比壁纸图片来源于不同网站的帖子显示要快得多的原因。

第十条:Minify JavaScript and CSS  减少JavaScript和CSS文件的体积

这点很好理解。在你的最终发布版本中把没有必要的空行、空格和注释全部去掉。显然手工去处理效率太低,好在网上到处都是用于压缩这些东西的工具。压缩JavaScript代码体积的工具随处可见,我便不再列举了,这里我只提供一个用于压缩css代码体积的在线工具网站——http://www.cssdrive.com/index.php/main/csscompressor
它提供了多种压缩方式,可以适应多种要求。

第十一条:Avoid Redirects 避免跳转

我只从网页开发人员的角度来解读此条。那么我们可以解读到什么东西呢?2点——
1:“此域名已过期,5秒钟以后,页面将跳转到http://www.xxxxxx.com/index.html页面”,这句话看起来的确很熟悉。但是,我就奇怪了,为什么不直接链接到那个页面呢?
2:一些链接地址请更明确的写出来。例如:将http://justinyoung.cnblogs.com/ 写成http://justinyoung.cnblogs.com (注意最后面一个“/”符号)。的确,这两个网址都能访问到我的博客,但是,事实上,它们是有区别的。http://justinyoung.cnblogs.com 的结果是个301响应,它会被重新指向http://justinyoung.cnblogs.com/ 。但是显然,中间多浪费了一些时间。

第十二条 Remove Duplicate Scripts 移除重复的脚本

对重复说不
图:对重复说“不!”

这个准则的道理很浅显,但是真正在工作中,很多人却因为“项目时间紧”、“太累了”、“初期没有规划好”……这样的理由搪塞过去了。你,的确可以找很多的理由不去处理这些多余重复的脚本代码,如果你的网站不需要更高的效率和后期维护的话。
也正是这点,我提醒大家一些,一些javascript框架、javascript包一定要慎用。至少要问一下:用了这个js kit 到底给我们多少方便,提高了多少工作效率。然后,再与它因为多余的、重复的代码带来的负面效果比较一下。

第十三条:Configure ETags 配置你的实体标签

首先来讲讲什么是Etag吧。Etag(Entity tags )实体标签。这个tag和你在网上经常看到的标签云那种tag有点区别。这个Etag不是给用户用的,而是给浏览器缓存用的。Etag是服务器告诉浏览器缓存,缓存中的内容是否已经发生变化的一种机制。通过Etag,浏览器就可以知道现在的缓存中的内容是不是最新的,需不需要重新从服务器上重新下载。这和“Last-Modified”的概念有点类似。很遗憾作为网页开发人员对此无能为力。他依然是网站服务器人员的工作范畴。如果,你对此有兴趣,可以咨询贵公司的网站服务器管理员。

第十四条:Make Ajax Cacheable 上面的准则也适用Ajax

Ajax
图:Ajax的使用要恰当

现在的Ajax好像有点被神话了,好像网页只要Ajax了,那么就不存在效率问题了。其实这是一种误解。拙劣的使用Ajax不会让你的网页效率更高,反而会降低你的网页效率。Ajax的确是个好东西,但是请不要过分的神话它。使用Ajax的时候也要考虑上面的那些准则。

后记:

当然,上面的这些也只是供你参考的理论上的准则。具体的情况还是要具体的去对待。理论和准则只是用来指导现实工作的,却是万万不可死记硬套。

相关链接:

如何提高网页的效率(下篇)暂时还没有排版好,所以没有放出。请您继续关注本博客,我将在1周之内排版好并放出。
如何提高网页的效率 14条建议(IT168版)
如何提高网页的效率(下篇)——Use YSlow to know why your web Slow
《CSS中的expression系列文章》
CSS在线压缩工具

web开发利器Aptana studio 1.2(下载,破解,汉化)(2008年11月3日更新)

前段时间在鱼的群里,经常碰到很多人问关于wordpress主题制作上的问题…问题主要集中在页面排版,css样式编写,php的简单调试/调用…在解决问题/交流的过程中,就发现,很多人对wordpress主题的制作兴趣浓厚,当然,很多人并非本身就是进行程序编写的…所以很大程度上对于代码编写/调试就有些摸不着头绪…现在推荐一个东西给大家用,是一个ide(集成开发环境),意思就是他可以可视化管理你的wordpress或者其他项目(明白的人,就不需要多说了),这个ide也是目前我正在使用的,结合上firefox+firebugs扩展,调试web程序,真的很不赖…

转载请注明出处:http://www.css88.com/

===================2008年11月3日更新======================

安装了aptana后在查看网页源文件时候,默认用aptana打开了请点击查看这里:http://www.css88.com/article.asp?id=545

 

==============================2008年3月28日13:20:12=======================

aptana的汉化方法:

点击查看:http://www.css88.com/article.asp?id=232

 


 

Aptana Studio支持中文的方法

在Windows 菜单 → Preferences → General → Content Types,选择 Text ,在下方指定默认编码为UTF-8,并在File associations下面添加文件类型,如 *.js

如果文档的编码不是UTF-8 就指定成相应的编码。不过还是建议使用 UTF-8 编码。

破解:http://blog.csdn.net/rjzou2006/archive/2008/01/15/2044670.aspx

 


 

aptana studio 1.2破解(2008年10月29日更新)

请查看:http://www.css88.com/article.asp?id=542

 


aptana studio pro 1.1破解
点击下载此文件

Aptana studio pro 破解方法:使用附件中的2个class文件替换掉plugins\com.aptana.ide.core_1.1.0.007007.jar(后面的版本号可能会有所不一样,不用管它,只要找到com.aptana.ide.core_开头就行了),这个文件可以用WINRAR打开.在RAR的 com.aptana.ide.core_1.1.0.007007.jar\com\aptana\ide\core\licensing路径下

 


 

 其他

使用入门:http://www.css88.com/article.asp?id=200

Aptana:网站地址:http://www.aptana.com

视频教程:http://www.aptana.tv/

 

Aptana

aptana是基于eclipse架构扩展出来的…有免费版本(community)和付费版本(pro),呵呵…我没有发现有破解的…我用的免费版本… aptana支持:

phpradrailsadob airapple iphone

下面是pro和community版本的基本区别,我个人认为community基本上就够用了。

aptana-com-pro.jpg

不过,虽然aptana师出eclipse,但是没有eclipse默认自带的cvs,aptana目前只支持svn的插件…此外aptana默认是不安装ruby和php的编辑器的,需要在打开ide之后手动安装:

第一步:选择Aptana Studio的版本
product page页面上选择你要的版本下载,就选择community吧,下载的时候有zip(直接解压缩就可以用的,也有installer)。

第二步:安装PHP Development Plugin
在aptana的start page(就是安装好后,打开ide后出现的页面)页面上有安装指示,如下图:

如果你没有发现这些,那么就通过菜单里头的”help”->”software updates”->”find and install”

install php

接着就可以进入升级插件界面了:

installphp2.jpg

installphp3.jpg

个人最爱的就是编辑器的code assist,呵呵,懒人的作风…

下面是aptana的php文件编辑器和code assist…

aptana的css,html,js文件编辑器和code assist :

codeassistcss.jpg

codeassisthtml.jpg

codeassistjs.jpg

aptana也可以作为eclipse的插件,个人目前由于有j2ee项目,所以不得不使用eclipse加aptana plugin的方式来用,所以很是慢啊,但是单独运行aptana是很快的…需要jdk支持…去搜一个jdk1.6来装一下…再运行aptana…

js倒计时实例

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>无标题文档</title>
</head>

<body>
<span id=”timeDate”>载入倒计时…</span><br />

<script type=”text/javascript”>
var now = new Date();
var tim=”03/04/2008 11:28:00″;
function createtime(){
    var grt= new Date(tim);
    now.setTime(now.getTime()+1000);
    if (grt < now) {
        document.getElementById(“timeDate”).innerHTML = “本期投票结束!”;    
        return;
    }
    else {
        days = (grt – now) / 1000 / 60 / 60 / 24;
        dnum = Math.floor(days);//日
        hours = (grt – now) / 1000 / 60 / 60 – (24 * dnum);
        hnum = Math.floor(hours);//小时
        if (String(hnum).length == 1) {
            hnum = “0” + hnum;
        }
        minutes = (grt – now) / 1000 / 60 – (24 * 60 * dnum) – (60 * hnum);
        mnum = Math.floor(minutes);//分钟
        if (String(mnum).length == 1) {
            mnum = “0” + mnum;
        }
        seconds = (grt – now) / 1000 – (24 * 60 * 60 * dnum) – (60 * 60 * hnum) – (60 * mnum);
        snum = Math.round(seconds);//秒
        if (String(snum).length == 1) {
            snum = “0” + snum;
        }
        document.getElementById(“timeDate”).innerHTML = dnum + “天”+ hnum + “小时” + mnum + “分钟” + snum+ “秒”;
    }
}
setInterval(“createtime()”,1000);                
</script>
</body>
</html>

VS2008简体中文正式版迅雷高速下载 Visual Studio 2008 Team Suite

更新:VS2008 sp1简体中文正式版补丁

微软称,VS2008 引入了250多个新特性,对各个版本都进行了大幅改进,包括免费的Visual Studio Express和团队开发版本Visual Studio Team System。从编程高手到企业级开发团队,都可以得到一个稳固、安全、可靠的开发方案,从而为Windows Vista、Windows Server 2008、Office 2007、互联网等最新应用开发程序。

    经过一整天的下载,Visual Studio Team System 2008终于下载完成了。安装它的过程,似乎有些坎坷,在Vista下,安装竟然持续了一个多小时。不过比起VS2005 SP1的安装,这个还算是轻松的。VS2008的安装过程与它的上一个版本没什么区别,唯一的改进就是安装过程中的人物图片好像比原来的难看些了(汗……)www.x-force.cn

 

安装的是英文版,所以截图也是英文版的。本站提供的是简体中文版的下载

    安装选项我是选择的自定义,www.x-force.cn只勾掉了Microsoft SQL Server 2005 Express Edition的选择,其他的全部安装,感觉VS2008的安装速度笔VS2005快多了。

 

    经过漫长的等待,OK安装成功。接下来就是启动VS2008,出现了初始化的界面,感觉不错。
    记得vs2008已经集成了对javascript的调试功能,同时编辑Web窗体时的模式也有原来的Design和Source变成了三个,增加了Split即设计和源代码模式,和Dreamweaver有的比啊,对Ajax的支持也是太好了。就顺便建了个Web Applciation,体验了一下Split的效果,和Debug JavaScript的方便。

 

    在Vista中使用VS2005开发Web Application 或是 Web Site的调试必须要VS2005以 Run as Administrator权限运行才能进行调试,而在VS2008中就不再有这样的问题了,可以直接调试。
    真是太棒了。

 


应用程序部署图,Microsoft终于把图形化设计引入了C++,值得一试www.x-force.cn

  VS2008破解方法非常简单,在开始>设置>控制面版>添加或删除程序>卸载vs.net2008>出现卸载界面>点击Next>输入上面CD-key ->出现成功画面即可完美将试用版升级成为正式版。

VS2008正式版序列号CDKEY:PYHYP-WXB3B-B2CCM-V9DX9-VDY8T

 

引用内容 引用内容
文件详情: Visual Studio Team System 2008 Team Suite
软件版本: 2008简体中文正式版(试用版)
文件格式: RAR 压缩文档
文件大小: 4.24 GB
发布日期: 2008.2.9
解压密码: www.x-force.cn
官方网站: http://msdn.microsoft.com/vstudio
文件发布: 异次元の世界

免责声明:
  此页面提供的文件均通过正版NOD32杀毒软件(病毒库日期:2008.2.9)扫描无毒,请放心使用,但也烦请您在下载后再查毒一次确保文件安全,如本文件对您的计算机造成危害,本站不负责任。
  本站所刊载内容均为网络上收集整理,并且以计算机技术研究交流为目的,仅供大家参考,不存在任何商业用途。我们不建议您将其当作技术建议或操作引导而根据其直接行事。若您需要技术服务,您应当正式委托专业公司以保障您的合法权益。这些信息有可能不是最新的、官方的信息,也可能是为了研究某一技术问题而援引自他处,可以不经通知而更改。如果本网站内容不慎侵犯了您的版权,请与我们联系,我们将及时处理,撤下相关内容!

下载地址为90天试用版(官方正式简体中文),只要按上面的说明更换CDKey即可完美升级为正式版。7个分卷压缩包均需下载才能正常安装,包含MSDN。前面6个压缩包均为700M,最后一个压缩包为142M

VS2008下载页面:  分卷压缩包1       分卷压缩包2    压缩包3    压缩包4    压缩包5    压缩包6    压缩包7

 

Javascrīpt开发工具大集合

http://bbs.51js.com/forum-24-1.html 无忧脚本http://www.w3schools.com/js/default.asp W3英文学校

http://www.8esky.com/handbook/Javascrīpt/contents.htm Javascrīpt 参考

(1)调试javascrīpt的好方法:
修改IE的设置:
IE的“选项-高级”,有两个选项默认是钩选的:
Disable scrīpt Debugging(Internet Explorer)
Disable scrīpt Debugging(Other)
中文可能是“禁用脚本调试”,去掉这两项的钩选。

在VS2005“工具-选项-调试-实时”,选中脚本调试。

在需要调试的地方加上debugger;例如:
<scrīpt language=javascrīpt>
..
debugger;
..
</scrīpt>
打开或刷新一下页面就进入断点了。

(2)Javascrīpt IDE开发工具:
1)软件Eclipse+Javascrīpt插件:
见本页-Java系列:-(7)Eclipse插件:-Javascrīpt插件。

2)软件1st Javascrīpt Editor Pro 3.8(有比较全面的智能提示,可以设计HTML代码)
http://www.yaldex.com/JSFactory_Pro.htm
1st javascrīpt editor 3.8破解
下载地址:http://download.csdn.net/source/163908
http://blog.csdn.net/hertcloud/archive/2007/04/03/1551053.aspx
使用破解后 程序启动后是不能智能提示的 需要在 设置里面打开(每次启动都需要手动打开..:)破解的不完善.)

3)软件AceHTML Pro v6.6 特别版(有一点智能提示但不是所需要的)
name:www.chinaz.com
sn:WRSG-XCQC-4XXZ-NCGS

4)软件Antechinus Javascrīpt Editor 9.0(有一点智能提示但不是所需要的)

5)软件Javascrīpt Plus! 4.1(无智能提示)

6)软件ScrypTik 1.14(无智能提示)

(3)Javascrīpt源码格式化
SourceFormatX-格式化js代码,可以格式被任何软件混淆的js代码,原样保留但中文注释会变成乱码,提供的功能多,界面专业,可以不修改源文件。
http://cn.textrush.com/integrate.htm
SourceFormatX 2.56 的注册破解版
http://hi.baidu.com/hn123/blog/item/41b10df44a75556edcc4742f.html
http://vxer.cn/downloads/SourceFormatX.rar

http://vxer.cn/downloads/SourceFormatX.rar SourceFormatX破解
仅一个功能“格式化目录”不能用(需要正版KEY解码)。使用的时候最好不要开调试器,filemon等工具,因为这个软件有主要的危险代码:
1,用winexec无限开窗口,直到你死机
2,删除你注册表,删了你肯定要重装了!
http://www.textrush.com/download/sfx256sp3.zip SourceFormatX SP3下载

使用 Key Maker 165 制作 内存补丁 针对 2.56 非SP
SP3 版本没有找到下载地址,CRACK提供的版本中部分菜单有英文,且功能莫明其妙,不知道是否有问题.
建议”等待进程闲置时修改”
带上做好的 MemPatch 程序.
http://bbs.pediy.com/attachment.php?attachmentid=3544&d=1164863022
SourceFormatX SP3 内存补丁 带上做好的 MemPatch 程序
http://bbs.pediy.com/attachment.php?attachmentid=3546&d=1164872805

Javascrīpt Code Improver-格式化js代码,可以格式被任何软件混淆的js代码,但只有第一个注释被保留且不是中文乱码,提供的修改参数少,界面简单,可以不修改源文件。
http://www.jcay.com/javascrīpt-code-improver.html
Javascrīpt Code Improver 中文语言包
http://blog.csdn.net/KimSoft/archive/2006/05/23/750407.aspx

polystyle-格式化js代码,不能格式被Javascrīpt Obfuscator软件混淆的js代码,很多js文件都不能完全格式化,原样保留但中文注释会变成乱码,提供的功能多,但界面混乱,提供右键格式化功能,不提供保存格式化后的文件的功能要自己copy粘贴,不修改源文件。
http://www.polystyle.com/integrations/
http://www.polystyle.com/walkthrough/

Trita 1.6a-格式化js代码
http://as.onlinedown.net/down/trita-source-formatter-windows-setup.exe
code:1748314567063
注册码:1734759207571

Javascrīpt源代码格式化工具
http://cn.textrush.com/formatter-javascrīpt.htm

MyEclipse中的默认的Javascrīpt编辑器提供了格式化格能,只要按一下(CTRL+SHIFT+F)就OK

在线格式化js代码
http://files.cnblogs.com/matrix/beautyjs.htm
http://www.div-css.com/f/tool/js-format-compress.html javascrīpt格式化及压缩工具
http://www.div-css.com/f/tool/js-format-color.html javascrīpt格式化及代码着色工具

(4)Javascrīpt源码混淆压缩
Jasob2.1-混淆器,混淆后不马上修改源文件,提示你保存,而且有两个窗口显示混淆前后的文件,不支持拖入文件,可打开嵌入到页面文件如.aspx文件里的js代码而且灰显其他代码只显示js代码。
http://www.jasob.com/Downloads.html
http://www.jasob.com/Features.html

Javascrīpt Obfuscator-混淆器,混淆后即将源文件修改了,但通过他生成的备份文件可以原样恢复,支持拖入文件,只能打开.js文件,不能打开嵌入到其他文件里的js代码。
http://www.javascrīpt-source.com/
http://www.javascrīpt-source.com/tutorial.html
http://www.javascrīpt-source.com/help.html
JsObfuscator2.01 Crack Version
http://www.sosuo8.com/article/show.asp?id=1383

JsMinGUI-javascrīpt脚本压缩工具,界面简单,没有修改参数的地方,只有一个压缩按钮,其自身没提供恢复被混淆的文件的功能,被混淆后的内容已经去掉了注释内容,支持拖入文件,只能混淆.js文件,不能混淆嵌入到其他文件里的js代码。
http://www.sosuo8.com/article/show.asp?id=1382

Javascrīpt Chaos Edition(JCE)-JCE Pro Obfuscator,要用命令才能混淆,而且好像只是将字符换成编码,代码的格式都没变,没怎么混淆。
http://www.syntropy.se/?ct=downloads
ESC 1.14-压缩工具,没找到安装文件。
功能比较全的一个压缩程序,压缩分为0-4个级别,其中level4可以对变量进行替换。不过不能对使用回车结尾的语句自动添加分号。
这款工具可自定义压缩级别和是否进行混淆,当然缺点也不是没有,压缩效果一般,而且要求每个JS语句必须以分号结尾,有大括号也不行。
http://www.saltstorm.net/depo/esc/?pod=js

X2JSCompactor-我没用过
http://www.jb51.net/downtools/X2JSCompactor.rar

Rob Seiler的packer-我没用过
这款压缩混淆工具效果也不错,有三种版本,.Net,Perl,和WSH版本,Windows平台下WSH脚本比较适合,命令行操作。
http://dean.edwards.name/download/

在线混淆js代码
http://www.bizstruct.cn/JavascrīptOnlineObfuscator/
http://editor.lionsky.net/JSConfusionWebDemo/
MemTronic’s FREEWARE HTML/Javascrīpt Cruncher-Compressor v1.0k
压缩效果好得不一般,混淆出来的代码完全不可读,压缩率可达50%,IE 5+ / NS 7.0 / Mozilla / Opera 7.0 中均可使用
http://hometown.aol.de/_ht_a/memtronic/MemTronic_CruncherCompressor.html

(5)Javascrīpt模块代码:
1-2-3 Javascrīpt Library!
http://www.wyka-warzecha.com/website/products/javascrīpts/123library/index.htm

JS弹出小窗口实例

JS弹出小窗口实例
演示地址:

http://www.css88.com/demo/smallwindow/exp.html

具体代码:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>弹出小窗口示例</title>
</head>

<body>
<a href=”javascript:void(0);” onclick=”show();return false;”>点击弹出小窗口 </a>
<script type=”text/javascript”>
var isshow=0;//0小窗口没有显示,1小窗口已显
function creatediv()
{            
    var msgw,msgh,bordercolor;
    msgw=400;//提示窗口的宽度
    msgh=505;//提示窗口的高度
    var sWidth,sHeight;
    if( top.location == self.location )
        doc = document;
    var docElement = doc.documentElement;
    sWidth=docElement.clientWidth;
    sHeight = docElement.clientHeight;
    if( docElement.scrollHeight > sHeight )
        sHeight = docElement.scrollHeight;
    var bgObj=document.createElement(“div”);
    bgObj.setAttribute(‘id’,’bgDiv’);
    bgObj.style.position=”absolute”;
    bgObj.style.top=”0″;
    bgObj.style.left=”0″;
    bgObj.style.background=”#777″;
    bgObj.style.filter=”progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75″;
    bgObj.style.opacity=”0.6″;
    bgObj.style.width=sWidth + “px”;
    bgObj.style.height=sHeight + “px”;
    bgObj.style.zIndex = “10000”;
    document.body.appendChild(bgObj);
        
    var msgObj=document.createElement(“div”);
    msgObj.setAttribute(“id”,”msgDiv”);
    msgObj.setAttribute(“align”,”center”);
    msgObj.style.position = “absolute”;
    msgObj.style.left = “50%”;
    msgObj.style.background=”#fff”;
    msgObj.style.marginLeft = “-200px” ;
    msgObj.style.top = (document.documentElement.clientHeight/2+document.documentElement.scrollTop-252)+”px”;
    msgObj.style.width = msgw + “px”;
    msgObj.style.height =msgh + “px”;
    msgObj.style.zIndex = “10001”;
    msgObj.innerHTML = “这是弹出的小窗口!<br /><a href=\”javascript:void(0);\” onclick=’delWinD();return false;’>点我关闭窗口</a>”;
    document.body.appendChild(msgObj);
}
function delWinD()
{
   document.getElementById(“bgDiv”).style.display=”none”;
   document.getElementById(“msgDiv”).style.display=”none”;
   isshow=0;
}
function show()
{  
    isshow=1;
    if(!document.getElementById(“msgDiv”))//小窗口不存在
        creatediv();
    else
    {
        document.getElementById(“bgDiv”).style.display=””;
        document.getElementById(“msgDiv”).style.display=””;
        document.getElementById(“msgDiv”).style.top=(document.documentElement.clientHeight/2+document.documentElement.scrollTop-252)+”px”;
    }  
}
</script>
</body>

CSS和JavaScript标签style属性对照表

CSS和JavaScript标签对照表

盒子标签和属性对照
CSS语法 (不区分大小写) JavaScript语法 (区分大小写)
border border
border-bottom borderBottom
border-bottom-color borderBottomColor
border-bottom-style borderBottomStyle
border-bottom-width borderBottomWidth
border-color borderColor
border-left borderLeft
border-left-color borderLeftColor
border-left-style borderLeftStyle
border-left-width borderLeftWidth
border-right borderRight
border-right-color borderRightColor
border-right-style borderRightStyle
border-right-width borderRightWidth
border-style borderStyle
border-top borderTop
border-top-color borderTopColor
border-top-style borderTopStyle
border-top-width borderTopWidth
border-width borderWidth
clear clear
float floatStyle
margin margin
margin-bottom marginBottom
margin-left marginLeft
margin-right marginRight
margin-top marginTop
padding padding
padding-bottom paddingBottom
padding-left paddingLeft
padding-right paddingRight
padding-top paddingTop
 
颜色和背景标签和属性对照
CSS语法 (不区分大小写) JavaScript语法 (区分大小写)
background background
background-attachment backgroundAttachment
background-color backgroundColor
background-image backgroundImage
background-position backgroundPosition
background-repeat backgroundRepeat
color color
 
样式标签和属性对照
CSS语法 (不区分大小写) JavaScript语法 (区分大小写)
display display
list-style-type listStyleType
list-style-image listStyleImage
list-style-position listStylePosition
list-style listStyle
white-space whiteSpace
 
文字样式标签和属性对照
CSS语法 (不区分大小写) JavaScript语法 (区分大小写)
font font
font-family fontFamily
font-size fontSize
font-style fontStyle
font-variant fontVariant
font-weight fontWeight
 
文本标签和属性对照
CSS语法 (不区分大小写) JavaScript语法 (区分大小写)
letter-spacing letterSpacing
line-break lineBreak
line-height lineHeight
text-align textAlign
text-decoration textDecoration
text-indent textIndent
text-justify textJustify
text-transform textTransform
vertical-align verticalAlign

前端开发工具箱——抓色工具(ColorPic)

前端开发工具箱——抓色工具(ColorPic)
 

名称:ColorPic
大小:400k
下载地址:点击下载此文件
备注:绿色,解压即可使用。

特点:
有方案的概念,可以建立多组方案。
强大的色盘功能,多种方式可以选择。
吸色时,局部放大(放大比率可以自己调整),方便抓取细微部分的颜色。
使用Ctrl+G快捷键取色。

截图:

Javascript的IE和Firefox兼容性汇编

Javascript的IE和Firefox兼容性汇编

以下以 IE 代替 Internet Explorer,以 MF 代替 Mozzila Firefox
    
    1. document.form.item 问题
    (1)现有问题:
    现有代码中存在许多 document.formName.item(“itemName”) 这样的语句,不能在 MF 下运行
    (2)解决方法:
    改用 document.formName.elements[“elementName”]
    (3)其它
    参见 2
    
    2. 集合类对象问题
    (1)现有问题:
    现有代码中许多集合类对象取用时使用 (),IE 能接受,MF 不能。
    (2)解决方法:
    改用 [] 作为下标运算。如:document.forms(“formName”) 改为 document.forms[“formName”]。
    又如:document.getElementsByName(“inputName”)(1) 改为 document.getElementsByName(“inputName”)[1]
    (3)其它
    
    3. window.event
    (1)现有问题:
    使用 window.event 无法在 MF 上运行
    (2)解决方法:
    MF 的 event 只能在事件发生的现场使用,此问题暂无法解决。可以这样变通:
    原代码(可在IE中运行):
    <input type=”button” name=”someButton” value=”提交” onclick=”javascript:gotoSubmit()”/>
    …
    <script language=”javascript”>
    function gotoSubmit() {
    …
    alert(window.event); // use window.event
    …
    }
    </script>
    
    新代码(可在IE和MF中运行):
    <input type=”button” name=”someButton” value=”提交” onclick=”javascript:gotoSubmit(event)”/>
    …
    <script language=”javascript”>
    function gotoSubmit(evt) {
    evt = evt ? evt : (window.event ? window.event : null);
    …
    alert(evt); // use evt
    …
    }
    </script>
    此外,如果新代码中第一行不改,与老代码一样的话(即 gotoSubmit 调用没有给参数),则仍然只能在IE中运行,但不会出错。所以,这种方案 tpl 部分仍与老代码兼容。
    
    4. HTML 对象的 id 作为对象名的问题
    (1)现有问题
    在 IE 中,HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用。在 MF 中不能。
    (2)解决方法
    用 getElementById(“idName”) 代替 idName 作为对象变量使用。
    
    5. 用idName字符串取得对象的问题
    (1)现有问题
    在IE中,利用 eval(idName) 可以取得 id 为 idName 的 HTML 对象,在MF 中不能。
    (2)解决方法
    用 getElementById(idName) 代替 eval(idName)。
    
    6. 变量名与某 HTML 对象 id 相同的问题
    (1)现有问题
    在 MF 中,因为对象 id 不作为 HTML 对象的名称,所以可以使用与 HTML 对象 id 相同的变量名,IE 中不能。
    (2)解决方法
    在声明变量时,一律加上 var ,以避免歧义,这样在 IE 中亦可正常运行。
    此外,最好不要取与 HTML 对象 id 相同的变量名,以减少错误。
    (3)其它
    参见 问题4
    
    7. event.x 与 event.y 问题
    (1)现有问题
    在IE 中,event 对象有 x, y 属性,MF中没有。
    (2)解决方法
    在MF中,与event.x 等效的是 event.pageX。但event.pageX IE中没有。
    故采用 event.clientX 代替 event.x。在IE 中也有这个变量。
    event.clientX 与 event.pageX 有微妙的差别(当整个页面有滚动条的时候),不过大多数时候是等效的。
    
    如果要完全一样,可以稍麻烦些:
    mX = event.x ? event.x : event.pageX;
    然后用 mX 代替 event.x
    (3)其它
    event.layerX 在 IE 与 MF 中都有,具体意义有无差别尚未试验。
    
    
    8. 关于frame
    (1)现有问题
    在 IE中 可以用window.testFrame取得该frame,mf中不行
    (2)解决方法
    在frame的使用方面mf和ie的最主要的区别是:
    如果在frame标签中书写了以下属性:
    <frame src=”xx.htm” id=”frameId” name=”frameName” />
    那么ie可以通过id或者name访问这个frame对应的window对象
    而mf只可以通过name来访问这个frame对应的window对象
    例如如果上述frame标签写在最上层的window里面的htm里面,那么可以这样访问
    ie: window.top.frameId或者window.top.frameName来访问这个window对象
    mf: 只能这样window.top.frameName来访问这个window对象
    
    另外,在mf和ie中都可以使用window.top.document.getElementById(“frameId”)来访问frame标签
    并且可以通过window.top.document.getElementById(“testFrame”).src = ‘xx.htm’来切换frame的内容
    也都可以通过window.top.frameName.location = ‘xx.htm’来切换frame的内容
    关于frame和window的描述可以参见bbs的‘window与frame’文章
    以及/test/js/test_frame/目录下面的测试
    —-adun 2004.12.09修改
    
    9. 在mf中,自己定义的属性必须getAttribute()取得
    10.在mf中没有 parentElement parement.children 而用
    parentNode parentNode.childNodes
    childNodes的下标的含义在IE和MF中不同,MF使用DOM规范,childNodes中会插入空白文本节点。
    一般可以通过node.getElementsByTagName()来回避这个问题。
    当html中节点缺失时,IE和MF对parentNode的解释不同,例如
    <form>
    <table>
    <input/>
    </table>
    </form>
    MF中input.parentNode的值为form, 而IE中input.parentNode的值为空节点
    
    MF中节点没有removeNode方法,必须使用如下方法 node.parentNode.removeChild(node)
    
    11.const 问题
    (1)现有问题:
    在 IE 中不能使用 const 关键字。如 const constVar = 32; 在IE中这是语法错误。
    (2)解决方法:
    不使用 const ,以 var 代替。
    
    12. body 对象
    MF的body在body标签没有被浏览器完全读入之前就存在,而IE则必须在body完全被读入之后才存在
    
    13. url encoding
    在js中如果书写url就直接写&不要写&amp;例如var url = ‘xx.jsp?objectName=xx&amp;objectEvent=xxx’;
    frm.action = url那么很有可能url不会被正常显示以至于参数没有正确的传到服务器
    一般会服务器报错参数没有找到
    当然如果是在tpl中例外,因为tpl中符合xml规范,要求&书写为&amp;
    一般MF无法识别js中的&amp;
    
    14. nodeName 和 tagName 问题
    (1)现有问题:
    在MF中,所有节点均有 nodeName 值,但 textNode 没有 tagName 值。在 IE 中,nodeName 的使用好象
    有问题(具体情况没有测试,但我的IE已经死了好几次)。
    (2)解决方法:
    使用 tagName,但应检测其是否为空。
    
    15. 元素属性
    IE下 input.type属性为只读,但是MF下可以修改
    
    
    16. document.getElementsByName() 和 document.all[name] 的问题
    (1)现有问题:
    在 IE 中,getElementsByName()、document.all[name] 均不能用来取得 div 元素(是否还有其它不能取的元素还不知道)。