Yahoo军规

A.要求:尽量减少HTTP请求;

·HTTP请求是什么?
每一个内容(如文字、图片、js、css)的获取,就是一个http请求;

·如何优化请求:文字,图片合并,js合并,css合并;B.
CDN:通过在网络放置节点服务器,他是一个智能虚拟网络,会根据数据流量,速度,负载量,访问最近的节点
作用:解决网络拥挤,提高网络相应速度。
使用CDN(内容分发网络)前后对比
1.在没有使用CDN时,需要经过较多的节点才能访问到目的地。
2.使用了CDN时,CDN服务器复制多个副本在你附近,这时候你访问时经过CDN服务器找到最佳节点访问目的地,当然这要购买CDN服务器,用金钱买性能
C.添加 Expire/Cache-Control 头:
expire头的内容是一个时间值,值就是资源在本地的过期时间、存在本地。在本地缓存阶段,找到一个对应的资源值,当前时间还没超过资源的过期时间,就直接使用这一个资源,不会发送 HTTP 请求。
cache-control:是http协议中常用的头部之一,顾名思义,他是负责控制页面的缓存机制,如果该头部指示缓存,缓存的内容也会存在本地,操作流程和expire相似,但也有不同的地方,cache-control有更多的选项,而且也有更多的处理方式。就是经过一段时间后,要不要重新发送HTTP请求D.D.使用Gzip压缩数据Gzip支持压缩文本数据,包括:HTML,PHP,JS,CSS,XML,TXT等等。

GZIP最早由Jean-loup Gailly和Mark Adler创建,用于UNIX系统的文件压缩。后缀为.gz的文件,它们就是GZIP格式的。现今已经成为Internet 上使用非常普遍的一种数据压缩格式,

或者说一种文件格式。HTTP协议上的GZIP编码是一种用来改进WEB应用程序性能的技术。大流量的WEB站点常常使用GZIP压缩技术来让用户感受更快的速度。这一般是指WWW服务器中安装的一个功能,
一般对纯文本内容可压缩到原大小的40%.这样传输就快了。
使用Gzip:
·把文件先压缩,再传输
·流程:原始79--本地压缩--服务器端对已经压缩的再压缩-
·优点:提升文件传输速度;(在服务器端配置)

E.

 css(层叠样式表):后面的样式会覆盖前面的,级别高的样式会覆盖级别低的样式。
               先加载css,放在头部<head>提高渲染性能,避免页面空白或者重绘。
IE:css放body底部,IE禁止了网页内容的顺序显示,低网速情况下导致空白
FF:不阻止显示,但会导致闪烁重绘

    就是将CSS放在页面的最上方。

F.

  将script标签放在页面底部。

  可以让页面内容优先呈现出来,而非先暴露script的bug,将Script放在页面的最下面,因为浏览器加载和解释网页的顺序是从左到右从上到下的,如果JavaScript代码有死循环的问题,网页可能是空白一片的,如果放在页面的最下面即使如此,页面也能展现出来,当然这个问题最好避免!

G.

避免使用css expression,即CSS表达式
(所谓css expression就是css的属性值是由js计算出来的,用了该属性,鼠标移动,滚动都会对其值进行重新计算),这样会严重影响浏览器效率

H.

CSS、JS写在页面内的情况:
    只应用于一个页面。
    不经常被访问到。
    脚本和样式很少。
JS,CSS都放在外部的文件中,单独提取的好处
1:提高了JS和CSS的复用性;
2:减少了页面的体积;
3:提高了JS和CSS的可维护性
缺点:增加请求数,可通过缓存优化

放在内部的优点
1:减少了页面的请求数;
2:提升了页面的渲染速度
I.
减少DNS查询:
·底层行为
·定义:访问网址,打开之前,转换机制(ip地址),对应网址;
·时间:20ms最少;
·如果同时很多查找过程,会影响速度;因此需要浏览器的缓存;
·IE30m,ff60s,chrome60s,
·缓存长:减少dns重复查找,节省时间;
·缓存短:及时检测服务器的变化,保证正确性;

多域和单域:
多域:
不同资源放在不同的ip
单域:
所有资源放在一个IP
J.
 最小化 JavaScript 和 CSS:
1、去除不必要的空白符、格式符、注释符。
2、简写方法名、参数名,压缩JS脚本。
使用工具压缩 JavaScript 和 CSS
K.
避免重定向
定义:原始请求被重新转到了其他请求
301:被移动到另外位置(永久重定向)使搜索引擎智能,不需要从旧地址到新地址,删除旧地址,直接到新地址
302:页面被找到,但不在原始位置(临时重定向)先到旧地址,再到新地址
重定向:重新请求下载资源,增加了http请求L.
移除重复引用的脚本 ,因为其会执行多次
移除重复的脚本可以减少文件的大小,另外,就是可以避免出现未知的问题!
M.
ETag:entity tag(实体标签) 属于HTTP协议 受web服务支持 使用特殊的字符串 来标识某个请求的资源版本
使用一种标志表示一种资源是否做了修改,可以减少服务器的响应,详细点就是:浏览器想服务器要某种资源,服务器一看,判断出了这种资源已经给过浏览器了,并且在服务器端的也没有变化,所以浏览器可以使用他自身就有的,然后告诉浏览器,浏览器回到自身找找,找到啦就用了,这样浏览器和服务器之间会有对话不过不用服务器再重复的给浏览器资源了!
N.
使用Ajax缓存
分批下载,局部更新
post:每次都执行,不被缓存;
get:同一地址不重复执行,可被缓存
 
 
时间: 2024-10-24 07:53:31

Yahoo军规的相关文章

Yahoo军规笔记(网站优化)

Yahoo军规(网站优化技巧) 1.尽可能的减少HTTP请求数. http请求:从客户端到服务端的请求消息.包括消息首行中,对资源的请求方法,资源的标识符及使用的协议. 2.使用CDN(内容分发网络) CDN网络:内容分发网络.意思是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快,更稳定. 也就是在用户最近的地方放置一台性能好链接顺畅的副本服务器,让你能够以最近的距离,最快的速度获取内容. 3.添加Expire/Cache-Control头 expire模块:ex

Yahoo军规

1.尽可能减少http请求数. 2.使用CDN(内容分发网络). 3.添加Exprie/Cache-Control头. 4.启用Gzip压缩. 5.将CSS放在页面最上面. 6.将script放在页面最下面. 7.避免在css中使用exprissions 也就是css表达式 8.把JavaScript和CSS都放到外部文件中 写在页面内的情况:只应用于一个页面:不经常被访问到:脚本和样式很少: 9.减少DNS查询. 10.最小化JavaScript和CSS,即压缩. 11.避免重定向. 12.移

Yahoo关于性能优化的N条规则

本来这是个老生常谈的问题,上周自成又分享了一些性能优化的建议,我这里再做一个全面的Tips整理,谨作为查阅型的文档,不妥之处,还请指正: 一. Yahoo的规则条例: 谨记:80%-90%的终端响应时间是花费在下载页面中的图片,样式表,脚本,flash等: 详细的解释来这里查:http://developer.yahoo.com/performance/rules.html 也可以直接firebug上一项项比对,如下图: 简单翻译解释下: 1.尽量减少HTTP请求个数——须权衡 合并图片(如cs

Yahoo14条军规-前端性能优化

1.尽可能减少HTTP请求数 什么是http请求? 2.使用CDN(内容分发网络) 什么是CDN? 3.添加Expire/Cache-Control头 Expire Cache-Control 4.启用GZip压缩 把文件先放在服务器上压缩一下,然后再传输,这样可以显著减少文件传输的大小.传输完毕后,浏览器会进行解压. 5.将CSS放在页面最上面 在IE下把CSS放到页面底部后,会禁止网页内容的顺序显示 ,在低网速情况下,用户打开网页,只能看到空白页. 而Firefox下 ,当CSS下载后,页面

前端性能优化-基础认知

基础:1.本地存储 2.后端逻辑 DNS寻址以及IP解析访问 Network 下的 Headers -> Remote Address 一样可以访问本站 WebServer 背后的事 性能优化包括前端.后端.网络以及硬件机器 页面渲染流程HTML页面请求浏览器的js引擎 尽量减少页面的reflow防止js绘制dom节点阻塞其他标签的解析甚至下载,比如 document.write 浏览器的JS引擎 WebPageTest 分析网络性能 性能优化:Yahoo军规 技术优化出发点 写成可复用的模块

前端学习推荐资料

这里所整理的视频教程均来自于http://www.imooc.com/course/list?c=fe,各位有兴趣可前往就自己感兴趣的内容进行更多的学习.前端开发工具快乐的sublime编辑器http://www.imooc.com/view/333 前端开发工具技巧介绍—Sublime篇http://www.imooc.com/view/40 WEB调试工具---Firebughttp://www.imooc.com/view/137HTML.CSS基础HTML+CSS基础课程http://w

分针网—IT教育: Html / CSS常见问题的解决方案

1. 解决Safari下input光标过大 2. 设置浮层 3. CSS绘制三角形 4. 清除浮动 1) 浮动元素父级添加样式 2) 父元素后添加伪元素 3) 同样可以使用如下方式(兼容IE) 4) 在浮动元素后添加div.clear 注意点 1) .clearfix 应用在包含浮动子元素的父级元素上 2) 使用clear清除浮动会发生margin重叠显现,使用BFC清除浮动(在浮动元素的父元素上添加overflow: hidden;)则会把整个元素包起来,从而不会发生margin重叠现象 5.

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

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

Yahoo网站性能优化的34条军规

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

雅虎Yahoo 前段优化 14条军规

Yahoo 14条 雅虎十四条 腾讯前端设计的Leader推荐我背熟的.请大家都能好好学习,不要像我一样一扫而过,好好的记下来!不仅仅是晓得一些CSS xhtml就好了,深刻认识到很多的东西需要学习的.很早就用Firebug,但是却没听说过Yslow,这叫不喜欢追求.希望大家关注前端设计的,多追求. 有兴趣的同学可以装个 Firebug 下的 Yslow ,测试下自己的网站. Web 应用性能优化黄金法则:先优化前端程序 (front-end) 的性能,因为 这是 80% 或以上的最终用户响应时