美文网首页
前端性能-缓存ajax结果

前端性能-缓存ajax结果

作者: Addy_Zhou | 来源:发表于2017-11-13 18:18 被阅读105次

Web 2.0,DHTML,and Ajax

Web2.0是一个包含像应用程序富用户界面和整合多个web服务信息的概念;

DHTML允许网页加载完成后,改变html页面,这是通过js和css与浏览器DOM交互完成的。

Ajax 在UI和web服务器之间增加了一个层,Ajax层驻留在客户端,与web服务器请求获取到信息,与表现层交互只更新必要的部分。

优化Ajax请求

优化ajax请求,最重要的方法是缓存ajax响应。13条优化规则中的一些在ajax请求优化中也适用:

  • Rule4: Gzip Components
  • Rule9: Reduce DNS Loopups
  • Rule10: Minify Javascript
  • Rule11: Avoid Redirects
  • Rule13: ETags - Use'Em or Lose'Em

缓存 Ajax

缓存ajax不是只使用浏览器缓存机制(设置缓存相关响应头字段)就可以了,因为ajax响应的内容往往是动态变化的,需要确保在响应内容改变的情况下,使缓存失效。一个简单的解决办法是在请求url上添加查询字符串。

比如Google Spreadsheets 后台会在响应内容最后被修改的时候生成一个时间戳,并把它嵌入到ajax请求的查询字符串中:
/ar?id=[snip...]&srow=0&erow=100&t=1177458941

相关文章

  • 前端性能-缓存ajax结果

    Web 2.0,DHTML,and Ajax Web2.0是一个包含像应用程序富用户界面和整合多个web服务信息的...

  • 前端性能优化指南

    前端性能优化指南 AJAX优化 缓存AJAX: 请求使用GET:当使用XMLHttpRequest时,而URL长度...

  • 漫谈Web缓存

    作者 | WilsonLiu95 背景说明 缓存一直是前端性能优化中,浓墨重彩的一笔。了解前端缓存是打造高性能网站...

  • Vue路由

    后端渲染(存在性能问题) Ajax前端渲染(前端渲染提高性能,但是不支持浏览器前进后退功能) SPA(Single...

  • 原生js开发AJAX数据分页缓存模块

    效果知识点:原生Js实现ajax数据交互、数据分页技术原理剖析,前端数据缓存, H5domAPI应用, 职业化前端...

  • 常用的后端性能优化六种方式:缓存化+服务化+异步化等

    性能优化专题 前端性能优化 数据库性能优化 jvm和多线程优化 架构层面优化 缓存性能优化 常用的后端性能优化六大...

  • Ajax的缓存问题

    产生缓存的原因: 当Ajax发送数据成功后,会把请求的URL和返回的响应结果保存到缓存内,当下一次调用Ajax发送...

  • 前端性能优化

    性能优化问题 代码层面:避免使用css表达式,避免使用高级选择器,通配选择器。 缓存利用:缓存Ajax,使用CDN...

  • 【前端性能优化指南】1 - 利用缓存减少远程请求

    更多前端性能优化系列请点击这里 >> 欢迎来到「前端性能优化之旅」的第一站 —— 缓存。 当浏览器想要获取远程的数...

  • webpack hash哈希值

    静态资源缓存是前端性能优化的一个点,所以在前端开发过程中,一般会最大限度的利用缓存(这里主要是强缓存)。回到本文主...

网友评论

      本文标题:前端性能-缓存ajax结果

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