Web页面开发工具篇

现在高性能的Web服务对WEB开发有了更高的要求。要求不仅对Web Server有高性能的表现&＃xff0c;也要求客户端页面能够最优化。
主要表现在&＃xff1a;
1。了解各种服务器方面什么的条件会对Web Server的性能产生影响。
2。要写出漂亮的符合Web Standard HTML代码&＃xff0c;
3。要编写精致简洁的CSS样式表展示每个页面模块&＃xff0c;
4。要调试Javascript控制页面表现层&＃xff0c;要使用Ajax给用户带来更好的体验。
所谓,工欲善其事必先利其器,Web开发人员能够应用好的工具会对开发收到事半功倍的效果。

工具一 Firebug&＃xff1a;
Firebug是一个Firefox下的插件。它集HTML查看和编辑、CSS察看和编辑&＃xff0c;Javascript控制台、网络监视器于一体&＃xff0c;是开发Javascript、CSS、HTML和Ajax的得力助手。Firebug从各个不同的角度剖析Web页面的内部结构&＃xff0c;是Web开发者不可多得的利器。
安装&＃xff1a;打开Firefox去http://www.getfirebug.com/下载安装Firebug插件即可。安装完成后重起Firefox&＃xff0c;使用快捷键F12即可唤出Firebug插件。
Firebug有Console&＃xff08;控制台&＃xff09;、HTML&＃xff08;Html查看器&＃xff09;、CSS&＃xff08;Css查看器&＃xff09;、Script&＃xff08;脚本调试器&＃xff09;、Dom&＃xff08;Dom查看器&＃xff09;和Net&＃xff08;网络状况监视&＃xff09;6个按钮。

控制台能够显示当前页面中的Javascript错误以及警告&＃xff0c;并提示出错的文件和行号&＃xff0c;方便调试。并且控制台在调试你的Ajax应用的时候是非常有用&＃xff0c;控制台里你能看到每一个XMLHttpRequests请求get或post出去的参数、 URL&＃xff0c;http头以及Web Server返回的内容&＃xff0c;原本看不见的程序运作现在清楚地显示在控制台上了。象别的shell一样&＃xff0c;你也能够在在控制台中运行Javascript脚本&＃xff08;如document.COOKIE&＃61;"site&＃61;hadoop.org.cn"或调用你在该页面的Javascript function等&＃xff09;查看变量内容或输入document.getElementsByTagName(&＃39;a&＃39;)[0]取得那个元素等。Console还支持log、debug、info、warn、error级别的信息输出。

Html查看器窗口分为左右窗口。
通过Html查看器的左窗口你看到的是已经节点化的HTML代码&＃xff0c;它有清晰的节点层次&＃xff0c;你能够方便地分辨出每一个节点标签之间的从属关系&＃xff0c;标签的折叠功能能够帮助你集中精力分析代码。你可以在HTML查看器中直接修改HTML源代码&＃xff0c;并在浏览器中第一时间看到修改后的效果。利用Inspect检查功能&＃xff0c;HTML查看器会将页面上改变的内容也抓下来&＃xff0c;并以黄色高亮标记&＃xff0c;让网页的暗箱操作彻底成为历史。还可以用鼠标在页面中直接选择一些区块&＃xff0c;查看相应的HTML源代码和CSS样式表&＃xff0c;真正的做到所见即所得。
Html查看器的右窗口显示的已选择节点相对应的css、layout和html Dom信息。查看器不仅列出这个节点CSS样式表的从属继承关系&＃xff0c;还列出了每一个样式在哪个样式文件中定义。通过css窗口你可以添加、修改、删除当前节点的一些CSS样式表属性&＃xff0c;并在当前页面中直接看到修改后的结果。非常适合Web Standard页面的css修改。通过layout窗口你可以看到这个节点在页面上占用的区块位置包括offset、margin、padding、size等信息.Dom能让你看到这个节点的DOM(Document Object Model)信息,双击一个DOM对象&＃xff0c;就能够编辑它的变量或值.

脚本调试器窗口能让你单步调试、设置断点、堆栈跟踪、查看变量。你还可以通过Console面板上的Profile来查看脚本性能,统计每段function运行的时间。

网络状况监视功能比较强大&＃xff0c;它能将页面中的CSS、Javascript以及网页中引用的图片载入所消耗的时间以矩状图呈现出来&＃xff0c;对网页进行调优。点击每一个节点能够查看每一个文件请求的Request Headers和Response Headers,Web Server返回的相应内容等。

工具二 YSlow&＃xff1a;
YSlow是Yahoo开发的分析你的Web页面的一个Firefox插件.分析你的页面多久能够载入完成.通过分析,你可以得出是什么原因导致页面载入缓慢.
在使用YSlow之前请先熟悉Yahoo的Exceptional Performance团队通过分析得出提高网页效率的20条准则.
1. Flush the buffer early [server]
2. Use GET for AJAX requests [server]
3. Post-load components [content]
4. Preload components [content]
5. Reduce the number of DOM elements [content]
6. Split components across domains [content]
7. Minimize the number of iframes [content]
8. No 404s [content]
9. Reduce COOKIE size [COOKIE]
10. Use COOKIE-free domains for components [COOKIE]
11. Minimize DOM access [Javascript]
12. Develop smart event handlers [Javascript]
13. Chooseover &＃64;import [css]
14. Avoid filters [css]
15. Optimize images [images]
16. Optimize CSS sprites [images]
17. Don&＃39;t scale images in HTML [images]
18. Make favicon.ico small and cacheable [images]
19. Keep components under 25K [mobile]
20. Pack components into a multipart document [mobile]

如果你安装了YSlow.点击F12打开Firebug在Firebug的窗口中你会发现多了YSlow的按钮.点击Performace,YSlow便开始分析本页面的载入效率.分析完成后你会看到13个性能分析结果.

前面蓝色的字母表示这一条准则的得分。A最高。
点击Stats菜单你会看到页面的缓存统计信息。包括empty cache、primed cache和COOKIE大小。告诉你哪些东西被缓存了多少等等。

点击Components菜单这个视图是一个页面所有组成文件的信息列表。从中我们可以得知每个文件的各种详细信息。如&＃xff1a;类型、URL、Expires数据、状态、大小、读取时间、ETag信息等等。点击相应的文件可以看到HTTP response headers.通过对这个列表的分析&＃xff0c;我们有针对性的对最耗费的资源进行优化。

P.S:上网查了一下发现这个页面对于提高网页效率的14条准则有更详细的描述