网站性能优化之yahoo军规

文章目录

  • 一、尽可能减少HTTP请求数
  • 二、使用CDN(内容分发网络)
  • 三、添加Expire/Cache-Control头
  • 四、启用Gzip压缩
  • 五、将CSS放在页面最上面
  • 六、将Script放在页面最下面
  • 七、避免在CSS中使用Expressions
  • 八、将JavaScript和CSS都放在外部文件中
  • 九、减少DNS查询
  • 十、压缩JavaScript和Css
  • 十一、避免重定向
  • 十二、移除重复的脚本
  • 十三、配置实体标签(ETag)
  • 十四、使用AJAX缓存
  • YSlow插件(首先得安装firebug插件)

正文

前言

互联网高速发展当今,用户对快速访问网页需求越来越高,做为网站建设者,如何提高网站性能,成为炙手可热的问题,本课程让你清楚影响网站性能的原因,从而避免不利于网站性能的因素,借助Yslow工具快速找到问题所在,提高网站性能,让提高网站性能、快速访问网站不在是梦想。
yahoo军规


一共有35条,此次讲解其中的14条。

正文

回到顶部

一、尽可能减少HTTP请求数

http请求的定义:从客户端到服务器端的请求消息。包括消息首航中,对资源的请求方法,资源的标识符及使用的协议。
http请求的菜鸟概论:
当你在网页中看到的文字,图片都是你从服务器获取的,每一个内容的获取,都是一个http的请求;每一个内容(如文字、图片、js、css)的获取,就是一个http请求;
如何优化请求:文字,图片合并,js合并,css合并;

回到顶部

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

  1. 在没有使用CDN时,需要经过较多的节点才能访问到目的地。
  2. 使用了CDN时,CDN服务器复制多个副本在你附近,这时候你访问时经过CDN服务器找到最佳节点访问目的地,当然这要购买CDN服务器,用金钱买性能

CDN:通过在网络放置节点服务器,他是一个智能虚拟网络,会根据数据流量,速度,负载量,访问最近的节点
作用:解决网络拥挤,提高网络相应速度。

回到顶部

三、添加Expire/Cache-Control头

expire头的内容是一个时间值,值就是资源在本地的过期时间、存在本地。在本地缓存阶段,找到一个对应的资源值,当前时间还没超过资源的过期时间,就直接使用这一个资源,不会发送 HTTP 请求。
cache-control:是http协议中常用的头部之一,顾名思义,他是负责控制页面的缓存机制,如果该头部指示缓存,缓存的内容也会存在本地,操作流程和expire相似,但也有不同的地方,cache-control有更多的选项,而且也有更多的处理方式。
简单说,就是使用浏览器的缓存功能,将访问数据缓存,在访问同样内容时直接将缓存取出,相对的传输的数据变少,起到提高访问速度的效果。

回到顶部

四、启用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--本地压缩--服务器端对已经压缩的再压缩-
  • 优点:提升文件传输速度;(在服务器端配置)
回到顶部

五、将CSS放在页面最上面

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

回到顶部

六、将Script放在页面最下面

浏览器渲染顺序

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

回到顶部

七、避免在CSS中使用Expressions

避免使用css expression,即CSS表达式
(所谓css expression就是css的属性值是由js计算出来的,用了该属性,鼠标移动,滚动都会对其值进行重新计算),这样会严重影响浏览器效率
因为CSS表达式在页面显示、缩放、滚动或鼠标移动等情况时,都会浏览器进行大量的运算,严重影响浏览器性能,且这并非是必须的。

回到顶部

八、将JavaScript和CSS都放在外部文件中

JS,CSS都放在外部的文件中,单独提取的好处
1 提高了JS和CSS的复用性;
2 减少了页面的体积;
3 提高了JS和CSS的可维护性
缺点:增加请求数,可通过缓存优化

放在内部的优点
1 减少了页面的请求数;
2 提升了页面的渲染速度
只应用于一个页面时,不常访问时,脚本和样式很少的时候(20行以下时),写在页面里

回到顶部

九、减少DNS查询



减少DNS查询:
·底层行为
·定义:访问网址,打开之前,转换机制(ip地址),对应网址;
·时间:20ms最少;
·如果同时很多查找过程,会影响速度;因此需要浏览器的缓存;
·IE30m,ff60s,chrome60s,
缓存长:
减少dns重复查找,节省时间;
缓存短:
及时检测服务器的变化,保证正确性;
多域和单域:

回到顶部

十、压缩JavaScript和Css

1 去除不必要的空白符、格式符、注释符。
2 简写方法名、参数名,压缩JS脚本。使用工具压缩 JavaScript 和 CSS

回到顶部

十一、避免重定向

定义:原始请求被重新转到了其他请求
重定向状态码
301:被移动到另外位置(永久重定向)使搜索引擎智能,不需要从旧地址到新地址,删除旧地址,直接到新地址
302:页面被找到,但不在原始位置(临时重定向)先到旧地址,再到新地址
重定向增加浏览器服务器往返次数 尽量减少Http请求 所以尽量避免重定向

回到顶部

十二、移除重复的脚本

可以减少文件的大小,另外,就是可以避免出现未知的问题!

回到顶部

十三、配置实体标签(ETag)



使用特殊的字符串 来标识某个请求的资源版本
使用一种标志表示一种资源是否做了修改,可以减少服务器的响应,
详细点就是:浏览器想服务器要某种资源,服务器一看,判断出了这种资源已经给过浏览器了,并且在服务器端的也没有变化,所以浏览器可以使用他自身就有的,然后告诉浏览器,浏览器回到自身找找,找到啦就用了,这样浏览器和服务器之间会有对话不过不用服务器再重复的给浏览器资源了!

回到顶部

十四、使用AJAX缓存

使AJAX缓存
get :同一地址不重复执行,可以被缓存,否则返回304;
post:每次都执行,不会被缓存,每次都会传送到服务器那里,一般返回200;

回到顶部

YSlow插件(首先得安装firebug插件)

YSlow(基于浏览器执行),在firefork下执行的最好
对网站进行分析,给出优化报告

来自为知笔记(Wiz)

转载于:https://www.cnblogs.com/xiaxiaobei666/p/7382337.html

网站性能优化之yahoo军规相关推荐

  1. Yahoo网站性能优化的34条规则

    摘自:http://blog.chinaunix.net/uid/20714478/cid-74195-list-1.html Yahoo网站性能优化的34条规则 1.尽量减少HTTP请求次数 终端用 ...

  2. 前端性能优化之雅虎军规

    前端性能优化之雅虎军规 1.尽量减少HTTP请求数 80%的终端用户响应时间都花在了前端上,其中大部分时间都在下载页面上的各种组件:图片,样式表,脚本,Flash等等.减少组件数必然能够减少页面提交的 ...

  3. 【前端性能】网站性能优化

    网站性能优化 1.尽量减少HTTP请求次数 终端用户响应的时间中,有80%用于下载各项内容,这部分时间包括下载页面中的图像.样式表.脚本.Flash等.通过减少页面中的元素可以减少HTTP请求的次数, ...

  4. 网站性能优化的三重境界

    这篇文章是关于网站性能优化体验的,性能优化是一个复杂的话题,牵涉的东西非常多,我只是按照我的理解列出了性能优化整个过程中需要考虑的种种因素.点到为止,包含的内容以浅显的介绍为主,如果你有见解能告知我那 ...

  5. 移动网站性能优化:网页加载技术概览

    移动网站性能优化:网页加载技术概览 2013/08/27 | 分类: IT技术 | 0 条评论 | 标签: WEB开发, 性能优化, 移动 分享到: 47 本文由 伯乐在线 - 伯乐在线读者 翻译自  ...

  6. 网站性能优化从入门到粗通(PHP 篇)

    本文来自作者 蒋岩 在 GitChat 上分享 「网站性能优化从入门到粗通(PHP 篇)」,「阅读原文」查看交流实录. 「文末高能」 编辑 | 哈比 题外话:本次 Chat 的主题是入门到粗通,所以内 ...

  7. JavaScript系列—性能优化之《网站性能优化实战——从12.67s到1.06s的故事》

    本篇博文来源于网络 226 人赞同了该文章 原文作者:IMWeb jerryOnlyZRJ  原文链接:网站性能优化实战--从12.67s到1.06s的故事 - 腾讯Web前端 IMWeb 团队社区 ...

  8. 网站性能优化之HTTP请求过程简述!

    网站性能优化中首要的一条就是要减少HTTP请求,那么为要减少HTTP请求呢?其实有些HTTP分析工具可以帮我们了解当浏览器请求一个资源时大致需要经历的哪些过程. 1 域名解析(DNS Lookup): ...

  9. 02、如何进行网站性能优化或怎么加快页面的加载速度

    2.如何进行网站性能优化? 1) 减少HTTP请求数 合并js文件 合并css文件 雪碧图的使用(css sprite) 使用base64表示简单的图片 2)减小资源体积 gzip压缩 js混淆 cs ...

最新文章

  1. FPGA等效门数的计算方法
  2. 配置腾讯云服务器-2021-3-27
  3. JavaScript判断变量数据类型
  4. Android空间WebView和ViedeoView的使用
  5. matlab optimization terminated,求助Optimization terminated. 的问题
  6. 页面间的跳转,打开,关闭小技巧.
  7. C++ vector的释放
  8. chart控件删除最左边点_常见功能测试点的测试用例大全
  9. 3.写一个简单的弹出菜单
  10. UEditor之实现配置简单的图片上传示例
  11. c语言中字符型char数据在内存中占,互联网常识:在c语言中char型数据在内存中的储存形式为什么...
  12. DS1308 Datasheet
  13. 【无人机知识】吐血整理:史上最全最完整的飞机基本参数名称详解
  14. 多模态 跨模态|人机交互新突破!
  15. 什么是虚拟主机?有什么用?
  16. 3.Hyperledger Fabric v2.0 CA组件
  17. 分析《大话数据结构》
  18. 不会接口测试?用Postman轻松入门(三)——Get请求详解
  19. 股市小白必看!能获取股票数据的编程语言:Python带你看懂股市线
  20. 解决JSCH的sftp连接时出现的com.jcraft.jsch.JSchException: Session.connect: java.io.IOException: End of IO Stre

热门文章

  1. 大数据处理时用到maven的repository
  2. 每天读一遍,不久你就会变!
  3. Fork 一个仓库并同步
  4. SQL SERVER2005加密解密数据
  5. 最新、最全面的LAMP+wordpress安装过程!!
  6. 安装Maya 6.5指南
  7. Python 线程----线程方法,线程事件,线程队列,线程池,GIL锁,协程,Greenlet
  8. Hyper-V虚拟机win7网络红叉,无法上网解决方法
  9. 使用babel编译es6
  10. Android Studio安装配置、环境搭建详细步骤及基本使用