针对于网站的性能优化,如何让用户更快地打开自己的网站?Yahoo军规比较权威地告诉我们如何提高网站速度的一些知识。


尽可能减少HTTP请求数

HTTP是指从客户端到服务器的请求信息。包括消息首行中,对资源的请求方法、资源的标识符以及使用的协议。就是说,当你打开网站的时候,你所看到的文字、图片、多媒体等内容都是从服务器获取的,每一个内容的获取都可以算是一次HTTP请求。

在我们的网站中,可以通过一些技术手段,把图片、js、css等请求分类合并,从而减少网站加载时候的HTTP请求数。比如说,把所有的css样式合并到一个css文件中,把所有的javascript代码合并到一个js文件中。


使用CDN(内容分发网络)

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

通过在网络各处放置节点服务器所构成的在现有互联网基础之上的一层智能虚拟网络,根据实时的网络流量和各点的连接负载状况以及用户的距离和相应时间等综合信息,将用户的请求重新导向到离用户最近的服务器节点上。其目的是使用户就近取得所需内容信息,解决网络拥挤的状况,提高用户访问网站的响应速度。


添加Expire/Cache-Control头

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

Cache-Control是http中最常用的头部之一,它负责控制页面的缓存机制。如果该头部指示缓存,缓存的内容也会存在本地。操作流程和Expire相似,但是Cache-Control的选择及处理方式更多。


启用Gzip压缩

Gzip压缩就是把文件先放在服务器上压缩了再进行传输,这样来减少文件在传输中的大小,传输完毕之后浏览器会对压缩过的内容进行解压并执行,目前大多数的浏览器都很好地支持Gzip,在Yahoo中也特别强调了所有的内容都应该被Gzip压缩,包括HTML、PHP、JS、CSS、XML、TXT等。

jsGzip20160804161259

比如说一个文件大小为79k的js文件,普通压缩后在进行Gzip压缩,那么它在传输时候的大小就仅仅是15k,大大的减少了传输的时间。


将css放在页面最上面

CSS = Casading Style Sheets = 层叠样式表单

为了提高浏览器的渲染性能,避免页面出现空白或闪烁的问题,我们应该讲CSS内容放在页面顶部head标签内进行加载和渲染,从而避免上述问题。


将script放在页面最下面

如上面提到的CSS应该放在页面的最上面,一般来说我们会将Script内容放在页面的最下面。首先,我们可以了解一下页面的加载顺序:

script

之前网络上有流行过的十二行代码让你的浏览器崩溃,就是涉及到这个问题,感兴趣的可以跳转到之前的文章中了解一下:

这十二行代码能让浏览器崩溃上周在推特上让人眼前一亮的一段JavaScript代码能让firefox,chrome,safari浏览器崩溃,而且还能让iPhone重启。然后博主也十分感兴趣地拿来折腾了一下,的确是可以用来作死。...

发表于 2016-01-25 - 2 条评论.

大概意思就是当你Script内容放在页面前面加载的时候,会严重影响到页面的加载速度,甚至当你的Script出现死循环的时候将会严重导致你的浏览器崩溃甚至系统崩溃。而如果把Script内容放在最下面,当出现加载缓慢或者死循环的时候,页面的主要内容已经都加载出来了,不会影响到用户的浏览体验。


避免在CSS中使用Expressions

CSS Expressions = CSS表达式 = 把CSS属性和JavaScript表达式关联起来

CSS Expressions 会在页面显示和缩放、页面滚动、移动鼠标的时候重新计算一次。当你把它写入CSS中的时候,就连你的鼠标移动,浏览器都会不停地计算,严重影响浏览器的性能。


把JavaScript和CSS都放到外部文件中

提取出来的好处:减少页面体积,提高js和css的复用性,提高js和css的可维护性。
写在页面内的好处:减少页面请求,提升页面渲染速度。

这个问题的争议性很大,其实我们在制作网页的时候应该灵活应用。一般来说,经常用到的js和css放在外部文件中还是利大于弊的,但是如果某些js和css只是应用在一个页面、某些不经常被访问的页面中或者页面的脚本和样式很少的时候,就被必要单独写在一个文件里面了。


减少DNS查询

DNS(Domain Name System,域名系统),因特网上作为域名和IP地址相互映射的一个分布式数据库,能够使用户更方便的访问互联网,而不用去记住能够被机器直接读取的IP数串。通过主机名,最终得到该主机名对应的IP地址的过程叫做域名解析(或主机名解析)。

dns

所以,我们可以对这个过程进行缓存,进而减少dns的查询过程。现在大多数的浏览器也都会进行缓存(IE 30m,Firefox 和Chrome  60s),当缓存的时间长时可以减少dns的重复查找而节约时间,当缓存时间短时能及时检测网站的服务器IP地址的变化而保证准确性。

dns20160804165636

在这个问题上的优化,就可以根据网站的特点来配置,是选择单域还是选择多域来放置资源。


压缩 JavaScript 和 CSS

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

js

可以看到处理前后的文件大小、行数等的差别也是比较大的。那么建议,在项目正式上线前,将JavaScript和CSS都进行压缩,使线上版本是最轻量级的可以大幅提升网站的性能。


避免重定向

重定向:将用户的原始请求重新转向到其他请求,在HTTP中主要通过301 (Moved Permanently)和302 (Found)两种状态码来标识这中情况。301表示永久重定向,302表示临时重定向,这两个请求对用户来说是没有什么区别的,但是对搜索引擎来说就完全不一样了。301会使搜索引擎智能识别新的地址,而302使搜索引擎先找到旧地址再跳转到新地址。

为什么避免重定向,其实无论是301还是302都增加了浏览器的往返次数,也增加了HTTP请求。所以,不必要的重定向应该尽可能地避免使用。

关于重定向的更多内容,可以浏览:

301 重定向新域名备案下来了,更换新域名后,考虑到原来域名也被收录了不少页面,就这样让这些链接变成死链就太可惜了。所以把新域名作为主要域名后,原来的域名也并没有删除解析。但是如果什么都不做,就会发现。...

发表于 2016-01-07 - 2 条评论.

移除重复的脚本

导致一个脚本的重复又两个主要因素:团队大小和脚本数量。开发一个网站需要极大数量的资源,不同的团队需要构建一个大型web的不同部分,当团队整合和沟通工作没有做足,则容易出现重复脚本的情况。当然脚本数量也是重要的一环,脚本数量越多越容易出现重复脚本的情况。

在没有缓存的情况下,如果在html中重复链接了相同的脚本,IE7以下(包括IE7)将会产生两次HTTP请求,IE8以上则不会。除了产生不必要的HTTP请求外,对脚本进行重复执行也会浪费时间,脚本的重复执行在浏览器中都存在。

如何避免重复脚本:

  1. 形成良好的脚本组织。重复脚本有可能出现在不同的脚本包含同一段脚本的情况,有些是必要的,但有些却不是必要的,所以需要对脚本进行一个良好的组织。
  2. 实现脚本管理器函数。

配置实体标签(ETag)

ETag = Entity Tag = 实体标签

属于HTTP协议,受Web服务支持。就是使用特殊的字符串来标识某个请求起源版本。

Etag在HTTP1.1中有介绍,主要的作用就是在(css file, image, javascript file)文件后面添加一个唯一的参数(相当于查询参数字符串),Etag有服务器端生成,并且随着文件的改变而改变,这样浏览器端就会只重新请求获取 Etag发生变化的文件,减少浏览器端数据的流量,加快浏览器的反应速度,重要的是减轻服务器端的压力,所以服务器端Etag的实现就比较重要了。


使用 AJAX 缓存

Asychronous JavaScript and XML = 异步的JavaScript和XML

它能够在不重新加载页面的情况下,使客户端与服务器进行交换数据,可以使网站的内容进行分批加载和局部更新。AJAX请求的两种方法:POST和GET,POST为每次都向服务器请求(不被缓存),GET为同一地址不重复执行(可被缓存)。

GETPOST
 把参数数据队列加到提交表单的Aciton属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看到。通过HTTP POST机制,将表单内各个字段与其内容放置在HTML HEAD内一起创送到Aciton属性所指定的URL地址。用户看不到这个过程。
服务器使用Request.QueryString获取变量的值。

服务器使用Request.Form获取提交的数据。

传输的数据量较小,不能超过2kb。传输的数据量较大,一般被默认为不受限制。
单理论上因服务器的不同而异。
 安全性非常低安全性较高
 method为get时,action页面后边带的参数列表会被忽视。method为post时,action页面后边带的参数列表不会被忽视。
 它会将数据添加到URL中,通过这种方式传递到服务器,通常利用一个问好?代表URL地址的结尾与数据参数的开端,后面的参数每个数据参数以“名称=值”的形式出现,参数与参数之间利用一个连接符&来区分。 数据是放在HTTP主体中的,其组织方式不止一种,有&连接方式也有分隔符方式,可隐藏参数,传递大批数据,非常方便。

Yslow网站性能优化工具

Yahoo针对网站性能优化开发的插件YSlow:基于浏览器Firefox使用。能够对网站进行分析,根据分析结果提供你一些优化建议,你可以根据它提供的优化规则一步一步地优化你的网站。39E7.tm安装建议:在Firefox浏览器中,并且提前安装Firebug插件。xxs804152245

Rulesets:
(v2)= 22条测试规则
(v1)= 13条测试规则
Small Site or Blog = 14条测试规则

Grade等级视图:对网站页面进行评分A-FComponents组件视图:检视各个元素(css、js、img等)占用空间大小。Statistics统计信息视图:与Components相似,以图形形式展示。Tools工具集:提供多种其他实用工具来帮助你优化网站。tools20160804153742

You Might Also Like

4 Comments

  • Reply 灰常记忆 2016-08-04 at 21:22

    用简洁的主题也可以做到速度快

  • Reply 黑暗游侠 2016-08-31 at 20:20

    360的google字体有点问题,加载很慢,google字体国内会解析到北京服务器了

    • Reply AARON 2016-09-01 at 22:47

      @黑暗游侠 这个问题很见仁见智阿,能不用时最好的

    Leave a Reply