前端的网络请求的话包含,css,js,img的请求。也包含ajax发起的请求(简单请求和预检请求)。
资源请求
1. 减少HTTP请求次数
建议尽可能的根据需要去合并静态资源图片,js和css文件,减少页面请求数,这样可以缩短页面首次访问的等待时间
2.减少HTTP请求大小
除了减少请求资源数,也要减少每个http请求的大小。比如减少没必要的图片,js,css和html等。对文件进行压缩优化,开启gzip压缩传输内容,以缩短网络传输等待延迟
3.避免页面中的空href和src
当link标签的href属性为空或者script、img、iframe标签的src属性为空的时候,浏览器在渲染过程中还是会把href的空内容进行加载,直到加载失败。这样就阻塞了页面中其他资源的下载进程,并且最后加载的内容是无效的,因此要尽量避免。
4.合理设置Etag和Last-Modified
尽量去避免304的发生,因为会多出一次请求,让浏览器直接从缓存中读取文件,减少下载消耗的带宽和服务器的负载
单独写一篇文章去介绍缓存的使用。点这里
5.使用预加载
//预加载cdn,将域名提前转换为ip
<link rel='dns-prefetch' href='http://fls-na.amazon.com'>
//预加载资源
<link rel='prefetch' href='prefetch.js'>
//预渲染网页
<link rel='prerender' href='http://www.baidu.com'>
6.使用CDN
ajax请求
1. 拉取数据使用get请求
POST请求会先发送文件头,然后发送http正文的数据。而get请求的话只发送头部,所以在拉取数据时使用get请求效率更高
2.减少cookie的大小并进行cookie隔离
HTTP请求默认是会带上浏览器端的cookie一起发送给服务器端的,所以在非必要的情况下尽量减少cookie。对于静态的资源,尽量使用不同的域名存放,因为cookie默认是不能跨域的,这就做到了不同域名下静态资源请求的cookie隔离。
3.跨域的两次请求处理
对于http请求来说,分为简单请求和预检请求。
如果你使用自定义的请求头,server自然无法理解。就需要发出OPTIONS请求。这种情况就是预检请求。就是你的一次请求对于客户端来说会发出两次请求,影响服务器性能。可以通过服务器端设置字段去简化成一次请求。Access-Control-Max-Age