美文网首页
前端优化之网络请求。

前端优化之网络请求。

作者: 七六丶 | 来源:发表于2018-09-20 14:51 被阅读0次

前端的网络请求的话包含,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

相关文章

  • 网络请求优化之取消请求

    网络请求优化之取消请求 网络请求优化之取消请求

  • 前端优化之网络请求。

    前端的网络请求的话包含,css,js,img的请求。也包含ajax发起的请求(简单请求和预检请求)。 资源请求 1...

  • 前端性能优化

    前端性能优化 1.网络请求 DNS 查询优化 减少请求域名数量 减少请求数 合并文件 css 合并 js Spri...

  • 前端性能优化方法

    前端性能优化 一、请求响应优化 减少DNS查找:每次主机名的解析都需要一次网络往返,从而增加了请求的延迟时间同时还...

  • 2018.5面试总结

    问题1:前端性能优化 优化图 参考:掘金 1.1. http请求优化 优化手段1:合并请求合并请求的主要目的是减少...

  • 网络请求优化之取消请求

    页面返回的时候,将网络请求取消同一个请求多次请求时,短时间忽略相同的请求同一个请求多次请求时,取消之前发出的请求发...

  • 前端性能优化

    前端性能优化点 dns是否可以通过缓存减少dns查询时间 网络请求的过程走最近的网络环境? 相同的静态资源是否可以...

  • 2022-01-25

    蛙笑网络请求优化方案 优化目的 解耦网络请求,解决嵌套地狱,减少内存泄漏 方案对比 原始请求方式: 改造完成的请求...

  • 前端性能优化

    之前写过一篇文章前端网络高级篇(六)网站性能优化,里面提到过13个性能优化的点: 减少HTTP请求 使用CDN 利...

  • 网络优化(一)缓存优化

    除了上面的JobSchedule的网络时机请求的网络优化还有其他优化。 1.请求的缓存。Http请求是可以做缓存的...

网友评论

      本文标题:前端优化之网络请求。

      本文链接:https://www.haomeiwen.com/subject/ulcnnftx.html