页面构建事半功倍:页面构建常用的一些小工具

我们以前曾稍微深入的探讨,请移步至CSS减肥工具 — CSS Usage

网页评级工具–Yslow

Yslow是基于firebug的一个网页评级工具,它根据Yahoo用户体验部门订制的34条可能对网页前段表现产生影响的规则,这些规则中有23条可以通过这个工具来测试.即使我们不使用这个工具,了解这些规则也是很不错的.

1. 减少Http请求
2. 使用CDN
3. 避免使用空 SRC 或者 href
4. Add an Expires or a Cache-Control Header
5. 压缩组件
6. 将样式文件放在页面的上面
7. 将脚本文件放在页面的下面
8. 禁止使用样式表达式
9. 使用外链的css和js文件
10. 减少DNS查找
11. 减小CSS和JS文件
12. 避免使用重定向
13. 删除重复内容
14. Configure ETags
15. 是Ajax可以缓存
16. 使用Get方法来处理 Ajax请求Use GET for AJAX Requests
17. 减少DOM节点的数量
18. 不要有 404页面
19. 减少 Cookie 文件的大小
20. Use Cookie-Free Domains for Components
21. 避免使用滤镜
22. 不要在HTML中重定义文件的大小
23. 确保favicon.ico 小而且可以被缓存

网页截图存储工具 –Pearl crescent page saver basic

Page Saver可以将网页转化为图片，包括网页上的Flash也能同时被转化。网页可以按照你的要求保存为PNG或者JPEG格式。可以将整个网页或者在屏幕上看到的部分转化为图片。为了方便截取网页，插件提供了大量的设置选项，包括默认的文件名、文件后缀名、图片的质量。可以通过工具栏按钮截取图片，也可以通过浏览器的菜单选项截取图片，还可以通过命令行截取图片。

当前可见区域保存为图片：

将整个页面保存为图片

HTML页面与设计稿像素级比对工具–Pixel perfect

可以将设计师的设计图通过此插件作为蒙版加载到浏览器上，通过调节图片的透明度以及位置，可以进行设计稿与页面的细节比对，来优化提高页面样式的精确度。
先将设计稿添加到需要对比的页面中来：

让图片显示：

可以通过调整透明度和具体坐标位置来重合图片和网页，然后对样式进行修正。

让图片显示：

本地调试页面样式利器–Fiddler

当我们的静态页面经过前端工程师、程序员同事的工作后，盼望着旁望着，终于上线了，这时咱们这边也又要忙碌了，因为一些在静态页面没有考虑到的情况和相关前端和程序同事的加工后

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!