1.尽可能的去减少HTTP的请求
如对图片的压缩,多张图片合并成sprit图;js文件合并与压缩;css文件合并与压缩;
另外,使用RequireJs的r.js来合并依赖的文件打包成一个文件,也是特别优的方法。
2.使用CDN(内容分发网络)
解决网络拥堵现象,就是在离你最近的地方,放置一台性能好链接顺畅的副本服务器,让你能够以最近的距离,最快的速度获取资源
3.添加Expire/Cache-Control
3.1 如果Appache开启了expire模块,当服务器向Appache请求资源的时候,Appache向服务器返回资源的时候,同时会返回一个expire的http头。而expire头的内容是一个时间值,值就是资源在本地的过期时间、存在本地。在本笃缓存阶段,找到一个对应的资源值,当前时间还没超过资源的过期时间,就直接使用这一个资源,不会发送http请求。
3.2 Cache-Control是http协议中常用的头部之一。顾名思义,他是负责控制页面的缓存机制,如果该头部指示缓存,缓存的内容也会存在本地,操作流程和expire相似,但也有不同的地方,cache-contro有更多的选项,而且也有更多的处理方式。简单的说,服务器发送请求的时候,会添加一个时间值,本机就会根据这个时间值来判断是否要去重新获取资源
4.启用Gzip压缩
什么是Gzip压缩,Gzip的思想就是把文件先放在服务器先压缩一下,然后再传输,这样就可以显著的减少文件传输的大小。传送过后,浏览器就会对压缩过的文件进行解压缩,目前,所有的浏览器都能很好的支持Gzip压缩。使用Gzip的好处就是将文件的体积变小。比如,将一个原始的79KB的JS文件进行压缩后可以变成25KB的原始Gzip文件,再对这个文件进行Gzip压缩就变成15KB大小了,大大减小了文件的体积。在提升文件传输速度的时候起了至关重要的作用。
5.将css放在页面最上面
css是层叠样式表,就是说后面的可以把前面的样式覆盖,级别高的样式可以覆盖级别低的样式。在IE下,把样式放在页面底部的问题是,在于它禁止了网页内容的顺序显示,所以在低网速的情况下,用户在打开网页的第一时候,看到的是空白的显示。而在FireFox下,虽然这样做不会阻止样式的显示,但页面会出现闪烁的问题。为了避免上述的空白和闪烁的问题,我们应该讲css文件样式放在页面最上面。
6.将script放在最下面
首先我们来了解文件的加载顺序,先读取html标签,然后进入读取head和meta并解析,再读取title内容显示网页标题。然后是读取style加载样式并解析样式,读取link加载并解析外部样式表。然后是渲染DOM结构,再读取script加载外部脚本文件并且解析,最后是执行外部脚本。
7.避免在css中使用Expressions
什么是CSS Expression,俗称CSS表达式。CSS Expression在页面显示和缩放、页面滚动、移动鼠标时都要重新的计算样式的值,就是在不停的repiant,严重影响用户的体验
8.把JS和CSS放到外部文件
有很多争议,单独提取或写在页面,可以灵活运用。单独引用:提高了js和css的复用性,减少了页面的体积,提高了js和css的可维护性;写在页面:减少页面请求,提升页面渲染速度。写在页面内的情况:单页应用,不经常被访问到,或是脚本和样式很少。
9.减少DNS查询
这算一个比较底层的行为了,那么如何减少DNS查询呢。当我们访问一个网址时,比如域名www.baidu.com,这个时候服务器会将这个网址对应到比如127.0.0.1这样计算机可以识别的IP地址,然后服务器根据这个IP地址进行DNS查询,将查询到的地址内容返回给域名。查询过程是需要消耗大概20ms的时间,这期间浏览器是一片空白,所以我们要对这个过程进行缓存。浏览器的缓存---IE:DNS的缓存时间为30分钟,FF和chrome都均为60秒。缓存时间长的时候,会减少DNS的重复查找,这样可以节省时间;而缓存时间短的时候,可以及时的检测网站服务器的变化,保证正确性。缓存时间的长短就各有利弊了。这个时候我们得考虑单域和多域的情况,单域的情况时,我们可以将html/img/js都放在同一个域名下,而多域的情况时,我们应该讲三者分开放。比如html放在www.a.com下,img和js和css这些资源可以单独放在img.a.com下。在多域的时候,采用几个域名,这也是我们需要考虑的事情。
10.压缩js和css
js和css最小化,加快文件的加载速度。建议在项目正式的上线前,将js和css都进行压缩,并对各文件加上时间戳防止缓存,这样可以使线上版本是最轻量级的,可以大幅的提升网站的性能。
11.避免重定向
什么是重定向,其实就是用户的原始请求被重新转向到了其他请求。301 moved permanently 指用户请求的资源被移动到了另外的网址,表示的是永久的重定向。 302 Found 用户请求的资源被找到了,但不在原来的位置,表示的临时重定向。这些重定向对用户可能没有很大的影响,但对搜索引擎,它会不定期的对资源进行扫描,比如蜘蛛爬网。301会比较智能,输入旧网址就会自动跳转到新网址,而对于302,则会先找到旧王寨,再从旧网址跳转到新网址。
那么为什么需要去避免重定向。因为这样可以减少浏览器的请求次数。当用户输入www.a.com时,浏览器会向a.com服务器请求资源,然后在通过a.com重定向到b.com服务器去请求资源,再通过a.com服务器向浏览器返回新地址b.com,然后浏览器又要去b.com请求资源。
12.移除重复脚本
重复的脚本会造成结果的错乱。
13.配置实体标签(Entity Tag)
ETag实体标签属于HTTP协议,它受web服务支持。它是使用特殊的字符串来标示某个资源。即浏览器向服务器请求某个资源,服务器收到后进行判断,发现请求的资源浏览器端已经有了,返回给浏览器这个标示告诉它使用浏览器端自己的资源就可以了。这样可以减轻服务器的很多负担。
14.使用ajax缓存
能够在不重新加载页面的情况下就可以刷新页面局部的内容,实现分批加载,局部更新。post和get两种请求,post是每次都执行,成功返回200,请求的内容不被缓存。get是对同一个地址簿重复执行,成功返回304,它请求的资源可以被缓存。他们的区别是:get方式请求会把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看到;而post请求是通过HTTP POST机制,将表单内各个字段与其内容放置在HTML HEADER内一起传送到action属性所指的url地址,用户是看不到这个过程的。get传送的数据小,一般不大于2kb,而post请求传送的数据一般不受限制,但理论上是会根据服务器的不同来区别。get请求的安全性较低,post请求的安全性较高。