前端性能优化:雅虎14条优化规则

1.减少HTTP请求数

  常用的方法,合并css,js(将一个页面中的css和js文件分别合并)以及 Image maps和css sprites等。

2.使用CDN(内容分发网络)

  通过在现有的Internet中增加一层新的网络架构,将网站的内容发布到最接近用户的 cache服务器内,通过DNS负载均衡的技术,判断用户来源就近访问cache服务器取得所需的内容。

3.添加Expire/Cache-Control 头

  Expire其实就是通过header报文来指定特定类型的文件在浏览器中的缓存时间。

  大多数的图片,flash在发布后都是不需要经常修改的,做了缓存以后这样浏览器以后就不需要再从服务器下载这些文件而是直接从缓存中读取,这样再次访问页面的速度会大大加快。

4.启用Gzip压缩

  Gzip的思想就是把文件先在服务器端进行压缩,然后再传输,这样可以显著减少文件传输的大小。

传输完毕后浏览器会重新对压缩过的内容进行解压缩,并执行。

5.将css放在页面最上面

  因为 IE,Firefox等浏览器在css全部传输完全之前不会去渲染任何的东西。

  IE把样式表放在页面的底部的问题在于它禁止了网页内容的顺序显示。浏览器阻止显示以免重画页面元素,那用户只能看到空白页了。

  Firefox不会阻止显示,但这意味着当样式表下载后,有些页面元素可能需要重画,这导致闪烁问题。

  所以我们应该尽快让css加载完毕。

6.将script放在页面最下面

  因为script脚本的执行会阻塞页面的下载并且会阻塞并行下载数量,放在页面最下面可以有效减少页面可视元素的加载时间。

7.避免在CSS中使用Expressions

  避免在CSS中使用表达式。

8.把javascript和css都放到外部文件中

  不仅从性能优化上会这么做,用代码易于维护的角度看也应该这么做。

9.减少DNS查询

  在域名和ip地址之间的转换工作称为域名解析,也称DNS查询。

  一次DNS的解析过程会消耗20-120毫秒的时间,在DNS查询结束之前,浏览器不会下载该域名下的任何东西。

所以减少DNS查询的时间可以加快页面的加载速度。

10.压缩 JavaScript 和 CSS

  减少页面字节数,容量小页面加载速度自然也就快,而且压缩除了减少体积以外还可以起到一定的保护作用。

11.避免重定向

  每增加一次重定向就会增加一次web请求,所以应该尽量减少。

12.移除重复的脚本

13.配置实体标签ETags

  ETags 是用于确定浏览器缓存中元素是否与 Web server 中的元素相匹配的机制, 它是比 last-modified date 更灵活的元素验证机制。

14.AJAX 缓存

  即使AJAX是动态产生的而且只对一个用户起作用,他们依然可以被缓存。

原文地址:https://www.cnblogs.com/gg-qq/p/10647836.html

时间: 2024-10-05 06:33:30

前端性能优化:雅虎14条优化规则的相关文章

网站前端网页优化的原则(雅虎14条)

内容再丰富的网站,如果慢到无法访问也是毫无意义的:SEO做的再好的网站,如果搜索蜘蛛抓不到也是白搭:UE设计的再人性化的网站,如果用户连看都看不到也是空谈. 所以,网页的效率优化绝对是最值得关注的方面,那么,我们该如何才能提高一个网页的效率呢?对此,我今天就在马海祥博客上为大家分享一下雅虎网页优化的14条原则,也被称为:雅虎十四条,而这些原则也是我们作为一名SEO人员所必须了解的. 1.减少HTTP请求次数 据统计,有80%的最终用户响应时间是花在前端程序上,而其大部分时间则花在各种页面元素,如

雅虎36条优化准则

雅虎团队经验:网站页面性能优化的34条黄金守则1.尽量减少HTTP请求次数      终端用户响应的时间中,有80%用于下载各项内容.这部分时间包括下载页面中的图像.样式表.脚本.Flash等.通过减少页面中的元素可以减少HTTP请求的次数.这是提高网页速度的关键步骤.      减少页面组件的方法其实就是简化页面设计.那么有没有一种方法既能保持页面内容的丰富性又能达到加快响应时间的目的呢?这里有几条减少HTTP请求次数同时又可能保持页面内容丰富的技术. 合并文件是通过把所有的脚本放到一个文件中

Web前端性能优化的14条规则

1.减少Http请求 使用图片地图 使用CSS Sprites 合并JS和CSS文件 这个是由于浏览器对同一个host有并行下载的限制,http请求越多,总体下载速度越慢 2.使用CDN(内容发布网络):当页面中有很多资源的时候,可以从不同的服务中去读取,同时可以提高并行下载速度 3.添加http Expires头:为图片视频之类很少改变的资源设置长的Expires时间将直接减少http请求 如果资源设置了Expires头为将来的某个时间,下次访问时候浏览器发现资源还没有过期,会直接从缓存中读取

雅虎十四条:网站前端网页优化的14条原则

Web应用性能优化黄金法则:先优化前端程序(front-end)的性能,因为这是80%或以上的最终用户响应时间的花费所在. 法则1. 减少HTTP请求次数 80%的最终用户响应时间花在前端程序上,而其大部分时间则花在各种页面元素,如图像.样式表.脚本和Flash等,的下载上.减少页面元素将会减少HTTP请求次数.这是快速显示页面的关键所在. 一种减少页面元素个数的方法是简化页面设计.但是否存在其他方式,能做到既有丰富内容,又能获得快速响应时间呢?以下是这样一些技术: Image maps组合多个

YaHoo Web优化的14条法则

Web应用性能优化黄金法则:先优化前端程序(front-end)的性能,因为这是80%或以上的最终用户响应时间的花费所在. 法则1. 减少HTTP请求次数 80%的最终用户响应时间花在前端程序上,而其大部分时间则花在各种页面元素,如图像.样式表.脚本和Flash等,的下载上.减少页面元素将会减少HTTP请求次数.这是快速显示页面的关键所在. 一种减少页面元素个数的方法是简化页面设计.但是否存在其他方式,能做到既有丰富内容,又能获得快速响应时间呢?以下是这样一些技术: Image maps组合多个

Web优化之YaHoo Web优化的14条法则

Yahoo Web优化建议原文:Best Practices for Speeding Up Your Web Site Web应用性能优化黄金法则:先优化前端程序(front-end)的性能,因为这是80%或以上的最终用户响应时间的花费所在. 法则1. 减少HTTP请求次数 80%的最终用户响应时间花在前端程序上,而其大部分时间则花在各种页面元素,如图像.样式表.脚本和Flash等,的下载上.减少页面元素将会减少HTTP请求次数.这是快速显示页面的关键所在. 一种减少页面元素个数的方法是简化页

雅虎14条前端性能优化

1.尽量减少HTTP请求数(Make Fewer HTTP Requests) 2.使用CDN加速(Use a Content Delivery Network) 3.添加Expire/Cache-Control头(Add an Expires Header) 4.启用Gzip压缩:Gzip Components 5.将css放在页面最上面 ( Put Stylesheets at the Top) 6.将script放在页面最下面 (Put Scripts at the Bottom) 7.避

雅虎14条性能优化(经典)

1.进入短信界面 2.菜单-设置 3.修改短信中心号码(Set the SIM's smsc number) 保存 [测试结果]:提示保存成功,但是号码没有改变,退出重新进入设置才会看到号码更新 [预期结果]:提示保存成功,号码变为修改过的号码 相关Activity:通过Logcat中I/ActivityManager( 896):我们可以定位到该类-MessagingPreferenceActivity: 相关控件:mSmscPrefList.add(pref); 根据分析我们发现在Messa

雅虎35条优化黄金守则

Excetional Performance 团队总结出了一系列可以提高网站速度的方法.可以分为 7大类 35条.包括内容 .服务器 . CSS . JavaScript .Cookie .图片 .移动应用 ,七部分. 一.内容部分 尽量减少 HTTP请求 减少 DNS查找 避免跳转 缓存 Ajxa 推迟加载 提前加载 减少 DOM元素数量 用域名划分页面内容 使 frame数量最少 避免 404错误 1.尽量减少 HTTP请求次数 终端用户响应的时间中,有 80%用于下载各项内容.这部分时间包