我们爱分享——web项目性能优化（整理）

2015-10-27 03:56:36 5.6万阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

Web 应用项目开发全流程解析与实战经验分享 Web 应用项目开发是一个复杂而系统的工程，涉及到需求分析、技术选型、架构设计、开发实现、测试优化以及部署上线等多个环节。每个环节都需要开发者具备扎实的技术功底、丰富的实践经验和良好的团队协作能力。通过本文的介绍，希望能够为广大开发者提供一个全面的 Web 应用项目开发指南，帮助大家在实际项目中少走弯路，提高项目的成功率和质量。同时，Web 应用开发领域仍在不断发展和创新，开发者需要持续学习和探索，以适应不断变化的市场需求和技术挑战。阅读详情

前面讲了很多关于缓存清理和编码设置的整合，今天我们说说web性能优化
Web性能优化分为服务器端和浏览器端两个方面。

一、浏览器端，关于浏览器端优化，分很多个方面
1、压缩源码和图片
JavaScript文件源代码可以采用混淆压缩的方式，CSS文件源代码进行普通压缩，JPG图片可以根据具体质量来压缩为50%到70%，PNG可以使用一些开源压缩软件来压缩，比如24色变成8色、去掉一些PNG格式信息等。

2、选择合适的图片格式
如果图片颜色数较多就使用JPG格式，如果图片颜色数较少就使用PNG格式，如果能够通过服务器端判断浏览器支持WebP，那么就使用WebP格式和SVG格式。

3、合并静态资源
包括CSS、JavaScript和小图片，减少HTTP请求。有很大一部分用户访问会因为这一条而取得最大受益

4、开启服务器端的Gzip压缩
这对文本资源非常有效，对图片资源则没那么大的压缩比率。

5、使用CDN
或者一些公开库使用第三方提供的静态资源地址（比如jQuery、normalize.css）。一方面增加并发下载量，另一方面能够和其他网站共享缓存。

6、延长静态资源缓存时间
这样，频繁访问网站的访客就能够更快地访问。不过，这里要通过修改文件名的方式，确保在资源更新的时候，用户会拉取到最新的内容。

7、把CSS放在页面头部，把JavaScript放在页面底部
这样就不会阻塞页面渲染，让页面出现长时间的空白。

具体参考：野马程序员：web性能优化

另，其他具体详解：
1、Web 前端优化最佳实践之内容篇
2、Web 前端优化最佳实践之 Server 篇
3、Web 前端优化最佳实践之 Cookie 篇
4、Web 前端优化最佳实践之 CSS 篇
5、Web 前端优化最佳实践之 JavaScript 篇
6、Web 前端优化最佳实践之图象篇
7、Web 前端优化最佳实践之 Mobile(iPhone) 篇

如何提高网页效率的14条建议
如何提高网页的效率（下篇）——Use YSlow to know why your web Slow

二、服务器端优化
这里就不详解了，直接看专栏吧Web项目开发性能优化解决方案——服务端

以上内容为整理所得，与各位共同分享

...全文