web前端性能优化全攻略

《web前端性能优化全攻略》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、Web前端性能优化全攻略目录Web前端优化最佳实践之内容篇Web前端优化最佳实践之Server篇Web前端优化最佳实践之Cookie篇Web前端优化最佳实践之CSS篇Web前端优化最佳实践之JavaScript篇Web前端优化最佳实践之图象篇Web前端优化最佳实践之Mobile(iPhone)篇Web前端性能优化是个大话题，是个值得运维人员持续跟踪的话题，是被很多网站无情忽视的技术。Web前端优化最佳实践之内容篇Yahoo!的ExceptionalPerformanceteam在Web前端方面作出了卓越的贡献。广为人知的优化规则也由13条到14

2、条，再到20条，乃至现在的34条--真是与时俱进啊。最新的34条也针对不同的角度做了分类。面向内容的优化规则目前有10条。1.尽量减少HTTP请求(MakeFewerHTTPRequests)作为第一条，可能也是最重要的一条。根据Yahoo!研究团队的数据分析，有很大一部分用户访问会因为这一条而取得最大受益。有几种常见的方法能切实减少HTTP请求：·1)合并文件，比如把多个CSS文件合成一个；·2)CSSSprites利用CSSbackground相关元素进行背景图绝对定位；参见：CSSSprites:ImageSlicing'sKissofD

3、eath·3)图像地图·4)内联图象使用data:URLscheme在实际的页面嵌入图像数据.2.减少DNS查找(ReduceDNSLookups)必须明确的一点，DNS查找的开销是很大的。另外，我倒是觉得这是Yahoo!所有站点的通病，Yahoo！主站点可能还不够明显，一些分站点，存在明显的类似问题。对于国内站点来说，如果过多的使用了站外的Widget，也很容易引起过多的DNS查找问题。3.避免重定向(AvoidRedirects)不是绝对的避免，尽量减少。另外，应该注意一些不必要的重定向。比如对Web站点子目录的后面添加个/(Slash)，

4、就能有效避免一次重定向。http://www.dbanotes.net/arch与http://www.dbanotes.net/arch/二者之间是有差异的。如果是Apache服务器，通过配置Alias或mod_rewrite或是DirectorySlash能够消除这个问题。4.使得Ajax可缓存(MakeAjaxCacheable)响应时间对Ajax来说至关重要，否则用户体验绝对好不到哪里去。提高响应时间的有效手段就是Cache。其它的一些优化规则对这一条也是有效的。5.延迟载入组件(Post-loadComponents)6.预载入组件(

5、PreloadComponents)上面两条严格说来，都是属于异步这个思想灵活运用的事儿。7.减少DOM元素数量(ReducetheNumberofDOMElements)8.切分组件到多个域(SplitComponentsAcrossDomains)主要的目的是提高页面组件并行下载能力。但不要跨太多域名，否则就和第二条有些冲突了。9.最小化iframe的数量(MinimizetheNumberofiframes)熟悉SEO的朋友知道iframe是SEO的大忌。针对前端优化来说iframe有其好处，也有其弊端，一分为二看问题吧。10.杜绝htt

6、p404错误(No404s)对页面链接的充分测试加上对Web服务器error日志的不断跟踪能有效减少404错误，亦能提升用户体验。值得一提的是，CSS与JavaScript引起的404错误因为定位稍稍"难"一点而往往容易被忽略。这是内容篇的10条。应该说具体引导性的内容还不够详细。逐渐会根据自己的理解补充上来。Web前端优化最佳实践之Server篇Web前端优化最佳实践第二部分面向Server。目前共计有6条实践规则。【注，这最多算技术笔记，查看最原始内容，还请访问：ExceptionalPerformance:BestPracticesfor

7、SpeedingUpYourWebSite】1.使用CDN(UseaContentDeliveryNetwork)国内CDN的普及还不够。不过我们有独特的电信、网通之间的问题，如果针对这个作优化，基本上也算能收到CDN或类似的效果吧(假装如此)。【Tin说国内CDN用的挺多，看看CDN厂商的市场就知道了，还没走入寻常百姓家】2.添加Expires或Cache-Control信息头(AddanExpiresoraCache-ControlHeader)各个浏览器都有针对的方案,Apache例子【注意：下面的说明例子还不够精细，具体的环境上还要加一

8、些调整】:ExpiresActiveOnExpiresByTypeimage/gif"modificationplus1weeks"Lighttpd启