• 欢迎访问极客公园网站,WordPress信息,WordPress教程,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入极客公园 QQ群
  • Git主题现已支持滚动公告栏功能,兼容其他浏览器,看到的就是咯,在后台最新消息那里用li标签添加即可。
  • 最新版Git主题已支持说说碎语功能,可像添加文章一样直接添加说说,新建说说页面即可,最后重新保存固定连接,演示地址
  • 百度口碑求点赞啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊http://koubei.baidu.com/s/gitcafe.net
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏极客公园吧

Web前端性能优化建议与工具

未分类 博客教主 14年前 (2010-08-15) 2662次浏览 0个评论

为了加快网站访问速度,除了可以优化后端数据库,cache,操作系统,web 服务器,重新设计架构以外,优化前端页面性能也很重要。

建议

Yahoo 的性能小组经过长期的研究总结出了几条让网站访问更快的实战经验:Best Practices for Speeding Up Your Web Site。High Performance Web Sites 和 YSlow 的作者 Steve Souders 在其教授的 Stanford CS193H 课程里谈到了这14条建议:

Make fewer HTTP requests
Use a CDN
Add an Expires header
Gzip components
Put stylesheets at the top
Put scripts at the bottom
Avoid CSS expressions
Make JS and CSS external
Reduce DNS lookups
Minify JS
Avoid redirects
Remove duplicate scripts
Configure ETags
Make AJAX cacheable


随后 Steve Souders 在其新书 Even Faster Web Sites 谈到了更多建议:

Splitting the initial payload
Loading scripts without blocking
Coupling asynchronous scripts
Positioning inline scripts
Sharding dominant domains
Flushing the document early
Using iframes sparingly
Simplifying CSS Selectors
Understanding Ajax performance……….Doug Crockford
Creating responsive web apps…………Ben Galbraith, Dion Almaer
Writing efficient JavaScript………….Nicholas Zakas
Scaling with Comet…………………Dylan Schiemann
Going beyond gzipping……………Tony Gentilcore
Optimizing images……………….Stoyan Stefanov, Nicole Sullivan

工具

Yahoo 性能小组根据 Best Practices for Speeding Up Your Web Site 给出的建议提供了免费的 Web 前端评估工具YSlow,严格的说 YSlow 不能用来优化网站,只是用来评估网站的性能然后给出建议。Google 也提供了类似的 open source 工具Page Speed。这2个工具都需要 Firefox 并且需要安装 Firebug 插件。

CSS 在线优化工具:http://www.cleancss.com/

CSS 图片组合器:http://spritegen.website-performance.org/

JavaScript 优化工具:YUI Compressor

图片在线优化工具:Smush.it

作者:vpsee


极客公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:Web前端性能优化建议与工具
喜欢 (0)

您必须 登录 才能发表评论!