Yahoo14条军规-前端性能优化

1、尽可能减少HTTP请求数

什么是http请求?

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

什么是CDN?

3、添加Expire/Cache-Control头

Expire

Cache-Control

4、启用GZip压缩

把文件先放在服务器上压缩一下,然后再传输,这样可以显著减少文件传输的大小。传输完毕后,浏览器会进行解压。

5、将CSS放在页面最上面

在IE下把CSS放到页面底部后,会禁止网页内容的顺序显示 ,在低网速情况下,用户打开网页,只能看到空白页。

而Firefox下 ,当CSS下载后,页面部分元素可能需要重绘,这就导致闪烁的问题。效果如下图:

6、将Scripts放在页面最下面

7、避免在CSS中使用Expressions

什么是CSS Expressions?

CSS Expressions俗称CSS表达式,是用来把CSS属性和JavaScript表达式关联起来,就是说CSS属性后面可以是一段JavaScript代码(表达式),CSS属性的值等于JavaScript表达式计算的结果。

因为CSS Expressions计算频率太高,不仅仅是在页面显示和缩放的时候,乃至于页面滚动和移动鼠标的时候,都会重新计算一次。例子如下:

8、把JS和CSS都放到外部文件中

比较提取出来和放在页面内的两种方式:

9、减少DNS查询

比如当我们要访问“www.a.com” 时候,计算机是不知道这个网址是什么,在哪里,它必须通过一种转换机制,才能到达这个页面。这个机制能把“www.a.com” 对应到一个IP地址,一个计算机理解的地址。(计算机只认IP地址,它不懂域名是什么。),然后通过该IP地址对应到“www.a.com” 这个网站。

如果有很多的查找过程,对我们打开网站的性能肯定有影响,所以我们要对这个过程进行缓存,缓存之后,可减少查找过程。

10、压缩JS和CSS

  • 去除不必要的空白符、格式符、注释符
  • 简写方法名、参数名压缩JS脚本

11、避免重定向

重定向:用户的原始请求被重新转向到了其他请求。

12、移除重复引用脚本

13、配置实体标签ETag

ETag使用特殊的字符串来标识某个请求资源版本。

当浏览器向服务器请求资源时,服务器会进行比较,如果两边的ETag一致,这就意味着该资源没有被修改过,和以前是一模一样的,这时服务器会返回304码告诉浏览器,对比一致,可以使用本地缓存的版本。

14、使用Ajax缓存

GET和POST比较

POST请求每次都发送给服务器执行,不被缓存。GET请求除非你给它指定了一个不同的地址,否则同一地址不重复执行,可以被缓存。

最后推荐网站性能分析工具YSlow。



参考资料:慕课网-Yahoo军规

时间: 2024-10-19 14:32:56

Yahoo14条军规-前端性能优化的相关文章

火狐的34条军规(前端性能优化)

性能优化:          1.稳定性 2.扩展性 3.优化 yelow: Chrome     F12     NetWork         需要经验 firefox         YSLow     yahoo 安装插件      必须有firebug        3.6之后的火狐都不兼容 标签 yslow.org/mobile 不能检测https协议的网址 对咱们没有影响 工具:学习的东西 雅虎给出了优化网站加载速度的34条法则(包括Yslow规则22条) 详细说明,下载转发 po

yahoo14条军规!页面优化

1.尽可能的减少http请求: 2.使用CDN; 3.添加expires头(或者Cache-control); 4.Gzip组件: 5.将css样式放在页面上部: 6.将脚本放在页面底部(包括内联的); 7.避免使用css中的Expressions; 8.将Javascript和Css独立成外部文件: 9.减少DNS查询: 10.压缩JavaScript和css(包括内联的): 11.避免重定向: 12.移除重复的脚本: 13.配置实体标签: 14.使用Ajax缓存:

关于Yahoo十四条军规与前端性能优化

关于Yahoo十四条军规与前端性能优化 热度 4已有 223 次阅读2014-8-3 15:01 |个人分类:前端相关|系统分类:前端优化| 前端优化, yahoo, 性能优化 启用Gzip压缩.Gzip的思想就是把文件先在服务器端进行压缩,然后再传输.这样可以显著减少文件传输的大小.传输完毕后浏览器会 重新对压缩过的内容进行解压缩,并执行.目前的浏览器都能“良好”地支持 gzip.不仅浏览器可以识别,而且各大“爬虫”也同样可以识别,各位seoer可以放下心了.而且gzip的压缩比例非常大,一般

23条前端性能优化,看懂就够了!

前端性能优化是个巨大的课题,如果要面面俱到的说的话,估计三天三夜说不完.所以我们就从实际的工程应用角度出发,聊我们最常遇见的前端优化问题. 1. 减少HTTP请求次数 尽量合并图片.CSS.JS.比如加载一个页面,如果有5个css文件的话,那么会发出5次http请求,这样会让用户第一次访问你的页面的时候会长时间等待.而如果把这个5个文件合成一个的话,就只需要发出一次http请求,节省网络请求时间,加快页面的加载. 2. 使用CDN 网站上静态资源即css.js全都使用cdn分发,图片亦然. 3.

web前端性能优化

前言:  在同样的网络环境下,两个同样能满足你的需求的网站,一个“Duang”的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒,如果等待超过10秒,99%的用户会关闭这个网页.也许这样讲,各位还不会有太多感触,接下来我列举一组数据:Google网站访问速度每慢400ms就导致用户搜索请 求下降0.59%;Amazon每增加100ms网站延迟将导致收入下降1%;雅虎如果有400ms延迟会导致流量下降5-9%.网站的加载速度严重影响了用户体验,也决

2017前端性能优化清单

https://github.com/Findow-team/Blog/issues/11?utm_source=tuicool&utm_medium=referral 2017前端性能优化清单 你开始使用渐进启动了么?是不是已经使用过React和Angular中tree-shaking和code-splitting两个工具?有没有用过Brotli.Zofli和HPACK这几种压缩技术,或者OCSP协议(在线证书状态协议)?知不知道资源提醒,客户端提醒和CSS containment一类的技术?

WEB前端性能优化常见方法

web前端是应用服务器处理之前的部分,前端主要包括:HTML,CSS,javascript,image等各种资源,针对不同的资源有不同的优化方式. 1. 内容优化 (1)减少HTTP请求数:这条策略是最重要最有效的,因为一个完整的请求要经过DNS寻址,与服务器建立连接,发送数据,等待服务器响应,接收数据这样一个消耗时间成本和资源成本的复杂的过程. 常见方法:合并多个CSS文件和js文件,利用CSS Sprites整合图像,Inline Images(使用 data:URL scheme在实际的页

基于大数据的用户行为预测在前端性能优化上的应用

首先,我得说,这篇文章有点标题党了,其实内容并没有标题看起来那么高大上.其次,本文只是做一个技术方案可能性的探讨,并没有提供完善的解决方案,至多给了一个Demo供参考. 目的 如需转载,请注明转自:http://www.cnblogs.com/silenttiger/p/4929841.html 前端性能优化,我觉得最主要的目的就两个:1.提升页面加载速度:2.节约服务器资源. 这里特别提一下节约服务器资源,很多人在做前端性能优化的时候,往往只考虑前端性能的问题,而完全忽视前端的性能优化对后端服

Web前端性能优化的9大问题

1.请减少HTTP请求基本原理: 在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突出. 一个正常HTTP请求的流程简述:如在浏览器中输入"www.xxxxxx.com"并按下回车,浏览器再与这个URL指向的服务器建立连接,然后浏览器才能向服务器发送请求信息,服务器在接受到请求的信息后再返回相应的信息,浏览器接收到来自服务器的应答信息后,对这些数据解释执行. 而当我们请求的网页文件中有很多图片.CSS.JS甚至音乐等信息时,将