如何提升前端性能优化
前端编程代码精简、易维护性、兼容多浏览器是关键议题。从实际工程应用视角来看,最常见的前端性能优化问题。前端性能提升的法则,基本囊括了当前前端大部分的性能优化准则,众多更为极客和细致的优化策略均源自这些原则。
前端性能提升有哪些法则
1. 减少HTTP请求次数
2. 尽量合并图片、CSS、JS。例如,若一个页面有5个CSS文件,将其合并为一个,则仅需发起一次HTTP请求,节省网络请求时间,加速页面加载。
3. 使用CDN
4. 避免空的src和href
5. 为文件头指定过期时间
6. 使用gzip压缩内容
7. 把CSS放到顶部
8. 把JS放到底部
9. 避免使用CSS表达式
10. 将CSS和JS放到外部文件中
11. 权衡DNS查找次数
12. 精简CSS和JS
13. 避免跳转
14. 删除重复的JS和CSS
15. 配置ETags
16. 可缓存的AJAX
17. 使用GET来完成AJAX请求
18. 减少DOM元素数量
19. 避免404
20. 减少Cookie的大小
21. 使用无cookie的域
22. 不要使用滤镜
IE专有属性AlphaImageLoader用于纠正7.0以下版本中PNG图片的半透明显示问题。此滤镜的缺陷在于浏览器加载图片时,会中断内容的展示并使浏览器停滞。它在每个元素(不仅仅是图片)上都会进行一次运算,增加了内存消耗,因此问题涉及多个方面。
完全避免使用AlphaImageLoader的最佳策略是使用PNG8格式替代,这种格式在IE中运行良好。如果确实需要使用AlphaImageLoader,请使用下划线_filter属性,使其对IE7以上版本的用户无效。
-
避免在HTML中调整图片大小
例如,你需要的图片尺寸是5050
那么就无需使用一张500500的大尺寸图片,以免影响加载速度。
-
缩小favicon.ico并缓存
如何优化网站性能
一、前端优化
网站性能优化是一个涵盖广泛的话题,包括服务器配置和网站前后端程序等多个方面。以下是我根据实际经验分享的网站性能优化方法。之所以提及web2.0,是因为本文更侧重于中小型网站的性能优化,我所使用的系统也是典型的web2.0 LAMP架构。
首先,谈谈前端优化。用户访问网页的等待时间,有80%发生在浏览器前端,尤其是页面和页面中各种元素(图片、CSS、JavaScript、Flash)的下载。因此,在许多情况下,相对于在复杂程序改进上投入大量时间,前端优化往往能起到事半功倍的效果。雅虎最近将内部使用的性能测试工具yslow向第三方公开,并发布了著名的网站性能优化十三条规则,建议您下载并安装yslow,将其作为评估网站优化效果的工具。以下我挑选其中特别有价值的方法进行说明:
对于首次访问您网站,尚未在浏览器缓存中存储您网站内容的用户,我们可以采取以下措施:
1)减少一个页面访问所产生的资源包(如package-info.php?package=APC)、TurckMMCache()、phpaccelebrator(),还有收费的ZendPerformanceSuite
2)将静态内容和动态内容分开处理
Apache是一个功能完善但相对庞大的web服务器,其资源占用与同时运行的进程数成正比,对服务器内存消耗较大,处理并行任务的效率一般。在一些情况下,我们可以使用较轻量级的web服务器来托管静态图片、样式表和JavaScript文件,这样可以显著提高静态文件的处理速度,还可以减少内存占用。我使用的web服务器是来自俄罗斯的nginx,其他选择方案还包括lighttpd和thttpd等。
3)基于反向代理的前端访问负载均衡
当一台前端服务器无法应对用户访问时,通过前端机实现web访问的负载均衡是最快速可行的方案。通过Apache的mod_proxy可以实现基于反向代理的负载均衡,这里推荐使用nginx作为代理服务器,其处理速度比Apache更快。
4)应用缓存技术提高数据库性能,文件缓存和分布式缓存
数据库访问处理并发访问的能力是许多网站应用的关键瓶颈。在考虑使用主从结构和多farm方式构建服务器集群之前,首先应确保充分利用数据库查询的缓存。一些数据库类型(如MySQL的InnoDB)自身内置对缓存的支持,此外,还可以利用程序方法将常用的查询通过文件或内存缓存起来。例如,通过PHP中的ob_start和文件读写函数可以方便地实现文件形式的缓存,而如果您拥有多台服务器,可以通过memcache技术通过分布式共享内存对数据库查询进行缓存,不仅效率高且扩展性好,memcache技术在livejournal和Craigslist.org等知名网站应用中都得到了验证。
5)检测服务器运行状态,找到影响性能的瓶颈所在
系统优化没有一劳永逸的方法,需要通过检测服务器运行状态来及时发现影响性能的瓶颈以及可能存在的潜在问题,因为网站性能取决于木桶中的短板。可以编写一些脚本来检测web服务的运行,也有一些开源软件提供了很好的功能。
6)良好的扩展架构是稳定和性能的基础
一些技巧和窍门可以帮助您度过眼前的难关,但要想使网站具备应对大规模访问的能力,则需要从系统架构上进行彻底的规划。幸运的是,许多前人无私地分享了他们架构网站的经验,使我们少走许多弯路。我最近读到的两篇有启发的文章:
-从LiveJournal后台发展看大规模网站性能优化方法
-Myspace的六次重构
最后,不得不提到程序编码和数据库结构对性能的影响。一系列糟糕的循环语句、一个不合理的查询语句、一张设计不佳的数据表或索引表,都足以使应用程序运行速度降低数倍。培养全局思考的能力,养成良好的编程习惯,并对数据库运行机制有所了解,是提高编程质量的基础。