雅虎前端性能优化法则.docxVIP

雅虎前端性能优化法则提供网站速度的方法分为7大类35条，包括：内容、服务器、CSS、javascript、cookie、图片、移动应用一、内容部分尽量减少http请求；减少DNS查找；避免跳转；缓存Ajxa；推迟加载；提前加载；减少DOM元素数量；用域名划分页面内容；使frame数量最少；避免404错误1.尽量减少HTTP请求次数根据web优化的黄金法则：80%的最终用户响应时间花在前端程序上，而其大部分时间则花在各种页面元素，如图像、样式表、脚本和flash等的下载上传。减少页面元素将会减少http请求次数，这是提高网页速度的关键步骤。(1)合并文件通过把所有的脚本都放到一个文件中来减少http请求(2)css Sprites减少图像请求；把所有背景图片都放到一个图片文件中，然后通过CSS的background-image和baackground-position属性来显示图片的不同部分；2.减少DNS查找次数域名系统（DNS）提供了域名和IP的对应关系，就像电话本中人名和他们的电话号码的关系一样。当在浏览器地址栏中输入时，DNS解析服务器就会返回这个域名对应的IP地址。DNS解析的过程同样是需要时间的。一般情况下返回给定域名对应的IP地址会花费20~120ms的时间。而且在这个过程中浏览器什么都不会做知道DNS查找完毕。（1）缓存DNS查找，以改善页面性能（2）减少主机名的数量当浏览器和操作系统的DNS缓存都为空，DNS查找的次数和页面中主机名的数量相同。减少主机名的数量，还可以减少页面中并行下载的数量3.避免跳转1.Minimize HTTP Requests 减少HTTP请求图片、css、script、flash等等这些都会增加http请求数，减少这些元素的数量就能减少响应时间。把多个JS、CSS在可能的情况下写进一个文件，页面里直接写入图片也是不好的做法，应该写进CSS里，利用 CSS sprites 将小图拼合后利用background来定位。2.Use a Content Delivery Network 利用CDN技术CDN 确实是好东西，8过服务器提供商的这项服务一般是要收费的，我以前买的国内空间是有这个的但是我当时根本不知道啥用，现在没了。。。3.Add an Expires or a Cache-Control Header 设置头文件过期或者静态缓存浏览器会用缓存来减少http请求数来加快页面加载的时间，如果页面头部加一个很长的过期时间，浏览器就会一直缓存页面里的元素。不过这样如果 页面里的东西变动的话就要改名字了，否则用户端不会主动刷新，看自己衡量了~ 这项可以通过修改.htaccess文件来实现。4.Gzip Components Gzip压缩Gzip格式是一种很普遍的压缩技术，几乎所有的浏览器都有解压Gzip格式的能力，而且它可以压缩的比例非常大，一般压缩率为85%。压缩没压缩，可以到 这里 做下测试。5.Put Stylesheets at the Top 把CSS放顶部让浏览者能尽早的看到网站的完整样式。6.Put Scripts at the Bottom 把JS放底部网站呈现完毕后再进行功能设置，当然这些JS要在你的加载过程中不影响内容表现。7.Avoid CSS Expressions 避免CSS ExpressionsCSS表达式很可怕，这个只被IE支持的东西执行时候的运算量非常大，你移动一下鼠标它都要进行重计算的，但有时候为了做浏览器的兼容必须要用到这个||| IE6去死去死！~8.Make JavaScript and CSS External 将JS和CSS外链前面讲到了缓存这个事情，一些较为公用的JS和CSS，我们可以使用外链的形式，譬如我就是从Google外链来的Jquery文件，如果我的浏览者在浏览别的使用了这个外链文件的网站时已经下载并缓存了这个文件，那么他在浏览我的网站的时候就不需要再进行下载了！~9.Reduce DNS Lookups 减少DNS查找貌似是要减少网站从外部调用资源，我的Google分析和picasa的外链图片都算在里面了。10.Minify JavaScript and CSS 减小JS和CSS的体积写JS和CSS都是有技巧的，用最少的代码实现同样的功能，减少空白，增强逻辑性，用缩写方式等等，当然也有不少工具也能够帮你实现这一点。11. Avoid Redirects 避免重定向再写入链接时，虽然”http://www. today-s-ooxx. com”和”http://www. today-s-ooxx. com/” 仅有一个最后的”/”只差，但是结果是不同的，服务器需要花时间把前者重定向为后者然后进行跳转，这个要自己注意，也可以在Apache