Yahoo前端优化34条规则全面.pdfVIP

yahoo前端优化34条规则

Yahoo!的ExceptionalPerformanceteam在Web前端方面作出了卓越的贡献。广为人

知的优化规则也由13条到14条，再到20条，乃至现在的34条--真是与时俱进啊。

ExcetionalPerformance团队总结出了一系列可以提高速度的方法。可以分为7大类

34条。包括内容、服务器、、CSS、JavaScript、、移动应用等七部分。

一、内容篇

尽量减少HTTP请求减少DNS查找避免跳转缓存Ajxa推迟加载提前加载减少DOM元素数

量用划分页面内容减小iframe的大小避免404错误

1、尽量减少HTTP请求次数

终端用户响应的时间中，有80%用于各项内容。这部分时间包括页面中的图

像、样式表、、Flash等。通过减少页面中的元素可以减少HTTP请求的次数。这是提

高网页速度的关键步骤。

减少页面组件的方法其实就是简化页面设计。那么有没有法既能保持页面内容的

丰富性又能达到加快响应时间的目的呢？这里有几条减少HTTP请求次数同时又可能保持

页面内容丰富的技术。

合并文件是通过把所有的放到一个文件中来减少HTTP请求的方法，如可以简单地把

所有的CSS文件都放入一个样式表中。当或者样式表在不同页面中使用时需要做不同

的修改，这可能会相对点，但即便如此也要把这个方法作为改善页面性能的重要一步。

CSSSprites是减少图像请求的有效方法。把所有的背景图像都放到一个文件中，然后

通过CSS的background-image和background-position属性来显示的不同部分；

地图是把多张整合到一张中。虽然文件的总体大小不会改变，但是可以减少

HTTP请求次数。地图只有在的所有组成部分在页面中是紧挨在一起的时候才能

使用，如导航栏。确定的坐标和可能会比较繁琐且容易出错，同时使用地图导航也

不具有可读性，因此不推荐这种方法；

Yahoofront-endoptimization34

ru

Yahoo!sExceptionalPerformanceteamhasmadeoutstandingcontributionstotheWeb

front-end.Thenumberofwell-knownoptimizationruhasalsoincreasedfrom13to14,then

to20,andnowto34-itisreallyadvancingwiththetimes.TheExceptionalPerformanceteam

hasputtogetheralistofwaystoimprovewebsitespeed.Itcanbedividedinto7categoriesand

34items.Itincludessevenpartsincludingcontent,server,s,CSS,JavaScript,images,and

mobileapplications.

1.Content

MinimizeHTTPrequestsReduceDNSlookupsAvoidjumpcachingAjxaDelayloadingEarlyloadingReduce

thenumberofDOMelementsDividepagecontentw