Yahoo军规

248 阅读5分钟

最近在学习网站前端性能优化方面相关的问题,所以现在总结一下。

一、 尽可能的减少HTTP请求

但是什么是http 请求呢?

官方解释

HTTP请求指的是从客户端到服务器端的请求消息,包括消息首行中,对资源的请求方式,资源的标识符和请求的协议。

白话文解释

当你打开网页的时候,你所看到的文字,图像和多媒体资源等等,这一切内容都是你从服务器获取的,每一个资源的获取,都是一个HTTP 请求。

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

什么是内容分发网络?

官方解释

内容分发网络,意思就是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输地更快和更稳定。

白话文解释

在离你最新的地方放置一台性能好链接顺畅的副本服务器,让你更够以最新的距离,最快的速度获取内容。

三、添加Expire/Cache-control

expire头是一个时间值,值就是资源在本地的过期时间、存在本地。在本地缓存阶段,找到一个对应的资源值,当前的时间还没有超过过期时间,就直接使用这一个资源,不会发送http请求。

CACHE-CONTROL

HTTP协议中常用的头部之一,顾名思义,就是负责控制页面的缓存机制,如果该头部指示缓存,缓存的内容也会存储在本地,操作流程和expire相似,但也有不同的地方,cache-control 有更多的选项,而已也有更多的处理方法。

四、启用Gzip压缩

官方解释

Gzip 压缩,是linux 系统中,对文件进行压缩的一种方式,

  • 使用Gzip 压缩,可以减少文件的体积,减少文件传输的时间。
  • 可以减少存储的空间

五、将CSS 放在页面最上面

Cascading Style Sheets表示的是层叠样式表单,表示的是后面的css,会覆盖掉前面的css,级别高的css 会覆盖级别低的css

为什么把css方便页面的最上面的?

  • 因为在IE下,把页面的样式放在页面的底部,它禁止了页面内容的顺序显示。
  • 为了提高浏览器的渲染的性能,避免页面出现空白,以及闪烁的问题

六、将 script 放在页面的最下面

DOM的加载的顺序是从上到下的顺序进行渲染的,将Script 标签放在页面的底部,页面加载的时候会先显示出来。

七、避免在CSS 中使用Expressions

css expression 是什么?

css expression 指的是css表达式,是把CSS属性和Javascript表达式连接起来,这里的CSS属性可以是固有属性也可以是自定义属性,使用CSS表达式的话,例如我们移动鼠标的时候,CSS表达式,会执行上万次,这样会影响性能,并且用户体验也不是很好。

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

把CSS和JS单独提取出来的好处?

  1. 提高CSS和JS的复用性
  2. 减少页面体积
  3. 提高了CSS和JS的可维护性

写在页面中的好处?

  1. 减少页面请求
  2. 提升页面渲染的速度

写在页面内的情况

  1. 只应用于一个页面的情况
  2. 不经常被访问的页面
  3. 脚本或者样式很少的情况下

九、减少DNS查询

怎么减少DNS查询?

例如我们访问一个网址,例如:www.xxx.com 然后DNS就把域名解析成IP地址,然后就根据IP地址,去查找相应的内容,在这过程中,我们需要花费一些时间去解析,所以我们需要进行缓存,

  • 当缓存时间长时,减少DNS的重复查找,节省时间。
  • 当缓存时间短时,及时的检测网站服务器的变化,保证正确性。

十、压缩Javascript和CSS

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

建议小伙伴们

在正式项目上线前,将JavascriptCSS都进行压缩,使线上版本是最轻量级的,大幅提升网站性能。

十一、避免重定向

重定向指的是用户的原始请求被重新转向到了其它请求

重定向的状态码:

  • 301 Moved permanently 被移动到了另外一个地方 永久重定向
  • 302 Found 被找到了,临时重定向

十二、移除重复的脚本

十三、配置实体标签

使用特殊的字符串,来标识某个请求资源脚本

十四、使Ajax缓存

Asynchronous Javascript And XML 标示的是异步JavaScript和XML

Ajax 请求的两种方式

  1. POST 请求,每次都执行,不被缓存
  2. GET 请求 同一地址不重复执行,可以被缓存
GET POST
把参数数据队列加到提交表单ACTION属性所指的URL中,值和表单内的各个字段一一对应,在URL中可以看到 通过HTTP/POST机制,将表单内各个字段预期内容放置在HTML、HEAD内一起传送到ACTION属性所指的URL地址,用户看不到这个过程
服务器端用Request.QueryString获取变量的值 服务器端用Request.form获取提交的数据
传送的数据量比较小,不能大于2kb 传送的数据量较大,一般被默认为不受限制,但理论上,因服务器的不同而有所差异
安全性很低 安全性较高
它会将数据添加到URL中,通过这种方式传递到服务器,通常利用一个问号? 代表URL地址结尾与数据参数的开端,后面的参数每一个数据参数以“名称 = 值”的形式出现,参数与参数之间利用一个连接符&来区分 数据是放在HTTP主体中的,期组织方式不止一种,有&连接方式,也有分割浮方式,可隐藏参数,传递大批参数,比较方便。