当前位置:首页 » 网页前端 » 前端定时请求如何优化
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

前端定时请求如何优化

发布时间: 2022-07-08 05:53:51

‘壹’ 如何对前端性能进行优化

前端开发代码优化、可维护性、浏览器兼容性是非常重要的课题。从实际的工程应用角度出发,最常遇见的前端优化问题。前端性能进行优化规则,基本可以涵盖现在前端大部分的性能优化原则了,很多更加geek和精细优化方法都是从这些原则里面延伸出来的。

前端性能进行优化都有哪些规则

  1. 减少HTTP请求次数

    尽量合并图片、CSS、JS。比如加载一个页面有5个css文件的话,把这个5个文件合成一个的话,就只需要发出一次http请求,节省网络请求时间,加快页面的加载。

2. 使用CDN

网站上静态资源即css、js全都使用cdn分发,包括图片

3. 避免空的src和href

当link标签的href属性为空、script标签的src属性为空的时候,浏览器渲染的时候会把当前页面的URL作为它们的属性值,从而把页面的内容加载进来作为它们的值。所以要避免犯这样的疏忽。

4. 为文件头指定Expires

Exipres是用来设置文件的过期时间的,一般对css、js、图片资源有效。 他可以使内容具有缓存性,这样下回再访问同样的资源时就通过浏览器缓存区读取,不需要再发出http请求。如下例子:

新浪微博的这个css文件的Expires时间是2016-5-04 09:14:14.

5. 使用gzip压缩内容

gzip能够压缩任何一个文本类型的响应,包括html,xml,json。大大缩小请求返回的数据量。

6. 把CSS放到顶部

网页上的资源加载时从上网下顺序加载的,所以css放在页面的顶部能够优先渲染页面,让用户感觉页面加载很快。

7. 把JS放到底部

加载js时会对后续的资源造成阻塞,必须得等js加载完才去加载后续的文件 ,所以就把js放在页面底部最后加载。

8. 避免使用CSS表达式

举个css表达式的例子

font-color: expression( (new Date()).getHours()%3 ? “#FFFFFF" : “#AAAAAA" );

这个表达式会持续的在页面上计算样式,影响页面的性能。并且css表达式只被IE支持。

9. 将CSS和JS放到外部文件中

目的是缓存文件,可以参考原则4。 但有时候为了减少请求,也会直接写到页面里,需根据PV和IP的比例权衡。

10. 权衡DNS查找次数

减少主机名可以节省响应时间。但同时,需要注意,减少主机会减少页面中并行下载的数量。

IE浏览器在同一时刻只能从同一域名下载两个文件。当在一个页面显示多张图片时,IE 用户的图片下载速度就会受到影响。所以新浪会搞N个二级域名来放图片。

下面是新浪微博的图片域名,我们可以看到他有多个域名,这样可以保证这些不同域名能够同时去下载图片,而不用排队。不过如果当使用的域名过多时,响应时间就会慢,因为不用响应域名时间不一致。

11. 精简CSS和JS

这里就涉及到css和js的压缩了。比如下面的新浪的一个css文件,把空格回车全部去掉,减少文件的大小。现在的压缩工具有很多,基本主流的前端构建工具都能进行css和js文件的压缩,如grunt,glup等。

12. 避免跳转

有种现象会比较坑爹,看起来没什么差别,其实多次了一次页面跳转。比如当URL本该有斜杠(/)却被忽略掉时。例如,当我们要访问http:// .com时,实际上返回的是一个包含301代码的跳转,它指向的是http:// .com/(注意末尾的斜杠)。在nginx服务器可以使用rewrite;Apache服务器中可以使用Alias 或者 mod_rewrite或者the DirectorySlash来避免。

另一种是不用域名之间的跳转, 比如访问http:// .com/bbs跳转到http:// bbs..com/。那么可以通过使用Alias或者mod_rewirte建立CNAME(保存一个域名和另外一个域名之间关系的DNS记录)来替代。

13. 删除重复的JS和CSS

重复调用脚本,除了增加额外的HTTP请求外,多次运算也会浪费时间。在IE和Firefox中不管脚本是否可缓存,它们都存在重复运算JavaScript的问题。

14. 配置ETags

它用来判断浏览器缓存里的元素是否和原来服务器上的一致。比last-modified date更具有弹性,例如某个文件在1秒内修改了10次,Etag可以综合Inode(文件的索引节点(inode)数),MTime(修改时间)和Size来精准的进行判断,避开UNIX记录MTime只能精确到秒的问题。 服务器集群使用,可取后两个参数。使用ETags减少Web应用带宽和负载

15. 可缓存的AJAX

异步请求同样的造成用户等待,所以使用ajax请求时,要主动告诉浏览器如果该请求有缓存就去请求缓存内容。如下代码片段, cache:true就是显式的要求如果当前请求有缓存的话,直接使用缓存

$.ajax({ url : 'url', dataType : "json", cache: true, success : function(son, status){ }

16. 使用GET来完成AJAX请求

当使用XMLHttpRequest时,浏览器中的POST方法是一个“两步走”的过程:首先发送文件头,然后才发送数据。因此使用GET获取数据时更加有意义。

17. 减少DOM元素数量

这是一门大学问,这里可以引申出一堆优化的细节。想要具体研究的可以看后面推荐书籍。总之大原则减少DOM数量,就会减少浏览器的解析负担。

18. 避免404

比如外链的css、js文件出现问题返回404时,会破坏浏览器的并行加载。

19. 减少Cookie的大小

Cookie里面别塞那么多东西,因为每个请求都得带着他跑。

20. 使用无cookie的域

比如CSS、js、图片等,客户端请求静态文件的时候,减少了 Cookie 的反复传输对主域名的影响。

21. 不要使用滤镜

IE独有属性AlphaImageLoader用于修正7.0以下版本中显示PNG图片的半透明效果。这个滤镜的问题在于浏览器加载图片时它会终止内容的呈现并且冻结浏览器。在每一个元素(不仅仅是图片)它都会运算一次,增加了内存开支,因此它的问题是多方面的。

完全避免使用AlphaImageLoader的最好方法就是使用PNG8格式来代替,这种格式能在IE中很好地工作。如果你确实需要使用AlphaImageLoader,请使用下划线_filter又使之对IE7以上版本的用户无效。

22. 不要在HTML中缩放图片

比如你需要的图片尺寸是50* 50

那就不用用一张500*500的大尺寸图片,影响加载

23. 缩小favicon.ico并缓存

‘贰’ 如何进行前端优化

1.减少 HTTP 请求....

2.使用 HTTP2

3.使用服务端渲染

4.静态资源使用 CDN

5.将 CSS 放在文件头部,JavaScript 文件放 ...

6.使用字体图标 iconfont 代替图片图标

7.善用缓存,不重复加载相同的资源

8.压缩文件

9.图片优化

(1).图片延迟加载

(2). 响应式图片

(3). 调整图片大小

(4). 降低图片质量

(5). 尽可能利用 CSS3 效果代替图片

(6). 使用 webp 格式的图片

10. 通过 webpack 按需加载代码,提取第三库代码,减少 ES6 转为 ES5 的冗余代码

11. 减少重绘重排

12. 使用事件委托

13. 注意程序的局部性

14. if-else 对比 switch

15. 查找表

16. 避免页面卡顿

17. 使用 requestAnimationFrame 来实现视觉变化

18. 使用 Web Workers

19. 使用位操作

20. 不要覆盖原生方法

21. 降低 CSS 选择器的复杂性

(1). 浏览器读取选择器,遵循的原则是从选择器的右边到左边读取。

(2). CSS 选择器优先级

22. 使用 flexbox 而不是较早的布局模型

23. 使用 transform 和 opacity 属性更改来实现动画

24. 合理使用规则,避免过度优化

性能优化主要分为两类:

    • 加载时优化

    • 运行时优化

‘叁’ 如何做好网站前端优化

一. 清理 HTML 文档
二. 优化 CSS 性能
三.减少外部HTTP请求
四. 压缩 CSS, JS 和 HTML
五. 使用预先获取
六. 使用 CDN 和缓存提高速度
七. 压缩文件
八. 优化你的图片
九. 使用轻量级框架
十.前端优化 – 总结
进行前端优化似乎需要花费很大的精力,相信这篇应用指南中的一些小技巧能帮你极大改善网站加载速度。网站加载地越快,则用户体验越佳。因此, 对前端进行优化能使给你和你的用户都带来益处。如果你有任何其他好的优化方法,请在评论区留下您的宝贵建议。

‘肆’ Web前端应该从哪些方面来优化网站

前端是庞大的,包括 HTML、 CSS、 Javascript、Image 、Flash等等各种各样的资源。前端优化是复杂的,针对方方面面的资源都有不同的方式。那么,前端优化的目的是什么 ?

1. 从用户角度而言,优化能够让页面加载得更快、对用户的操作响应得更及时,能够给用户提供更为友好的体验。
2. 从服务商角度而言,优化能够减少页面请求数、或者减小请求所占带宽,能够节省可观的资源。
总之,恰当的优化不仅能够改善站点的用户体验并且能够节省相当的资源利用。
前端优化的途径有很多,按粒度大致可以分为两类,第一类是页面级别的优化,例如 HTTP请求数、脚本的无阻塞加载、内联脚本的位置优化等 ;第二类则是代码级别的优化,例如 Javascript中的DOM 操作优化、CSS选择符优化、图片优化以及 HTML结构优化等等。另外,本着提高投入产出比的目的,后文提到的各种优化策略大致按照投入产出比从大到小的顺序排列。
一、页面级优化
1. 减少 HTTP请求数
这条策略基本上所有前端人都知道,而且也是最重要最有效的。都说要减少 HTTP请求,那请求多了到底会怎么样呢 ?首先,每个请求都是有成本的,既包含时间成本也包含资源成本。一个完整的请求都需要经过 DNS寻址、与服务器建立连接、发送数据、等待服务器响应、接收数据这样一个 “漫长” 而复杂的过程。时间成本就是用户需要看到或者 “感受” 到这个资源是必须要等待这个过程结束的,资源上由于每个请求都需要携带数据,因此每个请求都需要占用带宽。另外,由于浏览器进行并发请求的请求数是有上限的 (具体参见此处 ),因此请求数多了以后,浏览器需要分批进行请求,因此会增加用户的等待时间,会给用户造成站点速度慢这样一个印象,即使可能用户能看到的第一屏的资源都已经请求完了,但是浏览器的进度条会一直存在。
减少 HTTP请求数的主要途径包括:
(1). 从设计实现层面简化页面
如果你的页面像网络首页一样简单,那么接下来的规则基本上都用不着了。保持页面简洁、减少资源的使用时最直接的。如果不是这样,你的页面需要华丽的皮肤,则继续阅读下面的内容。
(2). 合理设置 HTTP缓存
缓存的力量是强大的,恰当的缓存设置可以大大的减少 HTTP请求。以有啊首页为例,当浏览器没有缓存的时候访问一共会发出 78个请求,共 600多 K数据 (如图 1.1),而当第二次访问即浏览器已缓存之后访问则仅有 10个请求,共 20多 K数据 (如图 1.2)。 (这里需要说明的是,如果直接 F5刷新页面的话效果是不一样的,这种情况下请求数还是一样,不过被缓存资源的请求服务器是 304响应,只有 Header没有Body ,可以节省带宽 )
怎样才算合理设置 ?原则很简单,能缓存越多越好,能缓存越久越好。例如,很少变化的图片资源可以直接通过 HTTP Header中的Expires设置一个很长的过期头 ;变化不频繁而又可能会变的资源可以使用 Last-Modifed来做请求验证。尽可能的让资源能够在缓存中待得更久。

‘伍’ 常用的前端性能优化方法有哪些

常用的优化有两部分
第一:面向内容的优化
1. 减少 HTTP 请求
2. 减少 DNS 查找
3. 避免重定向
4. 使用 Ajax 缓存
5. 延迟载入组件

6. 预先载入组件
7. 减少 DOM 元素数量
8. 切分组件到多个域

9. 最小化 iframe 的数量
10. 不要出现http 404 错误
第二:面向 Server
1. 缩小 Cookie
2. 针对 Web 组件使用域名无关性的

‘陆’ 如何优化前端页面体验和访问速度

1.优化图片

这个绝对是显而易见的,可以看到图片占据的页面内容分量最重。在现代网页设计中,图片绝对占据了大部分的内容。你需要针对你的页面重新定义图片大小。这能够有效地帮助你减少页面大小。而且,这里有很多的功能能够帮助你针对图片减肥,例如,Smush.it和TinyPNG
在photoshop中保存web所用格式图片时候适当的进行压缩。或者采用图片延迟加载技术
2.压缩CSS和Javascript代码

有效地压缩CSS和javascript代码能够有效地减少页面大小,你可以删除空格优化代码。当然,压缩代码对于代码阅读不是非常有用,但是一般作为产品环境来说,我们通过这种方式可以有效地减少页面加载时间。css&js压缩工具
3.避免使用@import

@import CSS语法允许你加载其它的CSS文件。有时间非常有帮助,但是它并不是和主文件一起下载的,所以可能会增加页面加载时间。建议使用link标签,这样会更加高效。
4.减少HTTP请求次数

减少HTTP请求次数可以帮助你有效的增加网站加载速度。你可以使用如下方式:
a.融合文件
将不同的样式表css合成一个文件可以减少http请求的次数。同样对于javascript来说也适用。
b.使用CSS sprites
使用sprites可以帮助你把多个图片文件放置到一个文件里,这样可以减少图片下载的次数。
5.javascript引用位置
例如:javascript的引用和cnzz的统计放到在代码中放到body之后。

‘柒’ 你有用过哪些前端性能优化的方法

这个是面试常问的问题了。

我来简单说下几个方面:

1.减少http请求:在YUI35规则中也有提到,主要是优化js、css和图片资源三个方面,因为html是没有办法避免的。因此,我们可以做一下的几项操作:

  • 合并js文件

  • 合并css文件

  • 雪碧图的使用(css sprite)

  • 使用base64表示简单的图片

2.减少资源体积

  • 压缩css

  • 压缩js

  • 压缩图片

3.图片加载处理:

  • 图片预加载

  • 图片懒加载

  • 首屏加载时进度条的显示

就简单说这些,特别详细的可以网上看下。

‘捌’ 简单谈谈前端性能优化

这个话题,贼大。

个人认为:核心在于,HTTP 请求的减少和请求包大小的减少再加上对代码的重构。

  1. HTTP 请求的减少,瞧瞧现在的前端工程化,工程化的作用之一正是将那些散乱的 js 、css 库全部都集成起来,压缩成一个文件,这么多文件压缩成一个,这请求不就减少了么~还有一个就是”精灵图技术“也是优化的体现,就不展开了。

  2. 请求包大小的减少,这个简直是能减就减啊,比如以前的时候,我们需要将图片直接发送到浏览器上是吧,现在可以不用!如果只是发生一段代码到客户的浏览器上,然后客户用自己的机器生成图片,这得有多快啊,毕竟一段代码大还是一张图片大还是很容易分清的,特别的是 GIF 图!这时候用上 svg 或是 canvas 技术,就不需要发送巨大的 GIF 图片了,只需要调用浏览器的资源生成图像即可。

  3. 重构,反正不满意重构就是了,满意了加功能然后继续重构就是了。

但这都是还只是皮毛啊这是,如果用到框架,那还要讲到框架的优化,因为前端框架的优化同样是性能优化,那都能写几十页了都......

如果再深入讲到浏览器自身......啊,要死了死了,技术是无穷的,命是有限的!

‘玖’ 前端性能优化的具体方法有哪些

解决办法一:

减少http请求次数:CSS Sprites, JS、CSS源码压缩、图片大小控制合适;网页Gzip,CDN托管,data缓存 ,图片服务器。
前端模板 JS+数据,减少由于HTML标签导致的带宽浪费,前端用变量保存AJAX请求结果,每次操作本地变量,不用请求,减少请求次数
用innerHTML代替DOM操作,减少DOM操作次数,优化javascript性能。
当需要设置的样式很多时设置className而不是直接操作style。
少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
避免使用CSS Expression(css表达式)又称Dynamic properties(动态属性)。
图片预加载,将样式表放在顶部,将脚本放在底部 加上时间戳。
解决办法二:

减少HTTP请求次数
使用CDN:CDN在前端开发的作用
避免空的src和href
为文件头指定Expires
使用gzip压缩内容
把CSS放到顶部
把JS放到底部
避 免使用CSS表达式
将CSS和JS放到外部文件中
避免跳转
可缓存的AJAX
使用GET来完成AJAX请求

‘拾’ 常见的前端性能优化手段都有哪些都有多大收益

规则01:尽量减少HTTP请求

前端优化的黄金准则指导着前端页面的优化策略:只有10%-20%的最终用户响应时间花在接受请求的HTML文档上,剩下的80%-90%时间花在为HTML文档所引用的所有组件(图片、脚本、样式表等)进行的HTTP请求上。因此,改善响应时间的最简单途径就是减少组件的数量,并由此减少HTTP请求的数量。当然很多人就会说,既然这样,那我们就减少页面组件的数量不就OK了吗?那你试试,你会掀起一场性能优化和产品设计之间的大PK。
所以,我们要减少HTTP请求是要平衡性能和设计的。如果找到这个平衡点呢?书中从以下几个方面做了介绍,我逐一说明:
① 图片地图
初看“图片地图”四个字,对非专业的前端人员来说一头雾水,我的第一印象就是这样的,咱们以京东的移动站点为例,右侧用户和购物车的图标,正常实现我会选择如下方式:
<a href=”用户跳转页面URL”>
<div class=”定义用户icon显示的样式表”></div>
</a>
<a href=”购物车跳转页面URL”>
<div class=” 定义用户icon显示的样式表”></div>
</a>
这种方式无可厚非的,但是两张图片就有两个HTTP请求,这明显是增加了页面中的HTTP请求。那么我们可以把这两个HTTP请求变成一个吗?
答案当然是可以的,这就是图片地图:允许在一张图片上关联多个URL,而目标URL的选择取决于用户单击了图片上的哪个位置。
这样上面京东两个图标合并成一张图片,这样图片的HTTP请求就减少了一个。
示例代码如下:
<img src=合并后的图片>
<map name=”map1”>
<areashape=”rect” coords=”0,0,40,40” href=”用户跳转页面URL”>
<areashape=”rect” coords=”50,0,90,40” href=”购物车跳转页面URL”>
</map>
不过图片地图只支持矩形形状,其他形状不支持。
② 请CSS喝“雪碧”(CSS Sprites)CSS Sprites一句话:将多个图片合并到一张单独的图片,这样就大大减少了页面中图片的HTTP请求。
③ 内联图片和脚本使用data:URL(Base64编码)模式直接将图片包含在Web页面中而无需进行HTTP请求。但是此种方法存在明显缺陷:- 不受IE的欢迎;- 图片太大不宜采用这种方式,因为Base64编码之后会增加图片大小,这样页面整体的下载量会变大;- 内联图片在页面跳转的时候不会被缓存。(大图片可以使用浏览器的本地缓存,在首次访问的时候保存到浏览器缓存中,典型的是HTML5的manifest缓存机制以及LocalStorage等)。
④ 样式表的合并将页面样式定义、脚本、页面本身代码严格区分开,但是样式表、脚本也不是分割越细越好,因为没多引用一个样式表就增加一次HTPP请求,能合并的样式表尽量合并。一个网站有一个公用样式表定义,每个页面只要有一个样式表就OK啦。
通过以上四个努力之后,你会发现你的网页响应时间最多能减少一半,这不是作者说大话,也不是我狂吹,我亲手用我的移动网站首页做了一个尝试,本地测试之后响应时间能减少40%左右。所以减少页面HTTP请求数量,是一个很重要的原则。遵循此原则可以同时改善首次访问和后续访问的响应时间,而每一个网站的首次响应时间会决定用户之后还来不来的重要原因。
规则02:使用内容发布网络(CDN的使用)
什么叫内容发布网络(CDN)?它是一组分布在多个不同地理位置的Web服务器,用于更加有效地向用户发布内容。主要用于发布页面静态资源:图片、css文件、js文件等。如此,能轻易地提高响应速度。关于CDN的具体详细原理以及优缺点,各位可以自行询问度娘或者google。
规则03:添加Expires头
浏览器使用缓存来减少HTTP请求的数据,并减小HTTP响应的大小,使页面加载更快。Web服务器使用Expires头来告诉浏览器它可以使用一个组件的当前副本,直到指定的deadline为止。HTTP规范中称此头为:在这一时间之后响应被认为失效。个人对这块表示不想使用,其实就是一句话,把一些css、js、图片在首次访问的时候全部缓存到浏览器本地,从我做移动网站的过程中发现,其实没有这么复杂,完全可以使用HTML5提供的本地缓存机制就OK了。关于HTML5本地缓存机制,各位可以查阅相关资料。后续我也会对HTML5的缓存机制进行介绍的。
规则04:压缩组件(使用Gzip方式)
书中关于压缩从gzip压缩方式到如何压缩讲了很多,我想直接跳过,对于做PC网站或者移动网站来说,急需要压缩的是css文件和js文件,至于如何压缩,网上有很多在线工具,去挑选一个自己用的顺手看的顺眼的就好,当然也有人选择对HTML进行压缩,这样也可以。但是实际工作中我没有这么做。之所谓没有这么做,是因为我觉得很麻烦。不要鄙视我,毕竟我不是一个真正意义上的前端工程师,哈哈!
规则05:将CSS样式表放在顶部
如果将css样式定义放在页面中或者页面底部,会出现短暂白屏或者某一区域短暂白板的情况,这和浏览器的运营机制有关的,不管页面如何加载,页面都是逐步呈现的。所以在每做一个页面的时候,用Link标签把每一个样式表定义放在head中。
规则06:将javascript脚本放在底部
浏览器在加载css文件时,页面逐步呈现会被阻止,直到所有css文件加载完毕,所以要把css文件的引用放到head中去,这样在加载css文件时不会组织页面的呈现。但是对于js文件,在使用的时候,它下面所有也页面内容的呈现都会被阻塞,将脚本放在页面越靠下的地方,就意味着越多的内容能够逐步呈现。
规则07:避免使用CSS表达式
CSS表达式是动态玩CSS的一种很强大的方式,但是强大的同时也存在很高的危险性。因为css表达式的频繁求值会导致css表达式性能低下。如果真想玩css表达式,可以选用只求值一次的表达式或者使用事件处理来改变css的值。
规则08:使用外部javascript和CSS内联js和css其实比外部文件有更快的响应速度,那为什么还要用外部呢?因为使用外部的js和css可以让浏览器缓存他们,这样不仅HTML文档大小减少,而且不会增加HTTP请求数量。另外,使用外部js和css可以提高组件的可复用性。
规则09:减少DNS查询
DNS查询有时间开销,通常一个浏览器查找一个给定主机名的IP地址需要20-120ms。缓存DNS:缓存DNS查询可以很好地提高网页性能,一旦缓存了DNS查询,之后对于相同主机名的请求就无需进行再次的DNS查找,至少短时间内不需要。所以在使用页面中URL、图片、js文件、css文件等时,不要使用过多不同的主机名。
规则10:精简javascript
如何精简?
其实W3Cfuns已经给大家准备好精简JS所需的所有工具“前端神器”,这点W3Cfuns为大家做的很不错,在这个规则里我们就用到“JS压缩/混淆/美化工具”
最初始的精简方式:就是移除不必要的字符减小js文件大小,改善加载时间。包括所有的注释、不必要的空白字符。
高级一点的精简方式就是:混淆。
它不但会移除不必要的字符,还会改写代码,比如函数和变量的名字会被改成很短的字符串,这样使js代码更简练更难阅读。
但是我一般很少使用混淆,一个现在互联网时代,代码没有必要整的那么神秘,大可以大家一起share,天下代码一起抄,只要抄出自己的特色就ok了。
而且一旦使用混淆,对于js代码的维护和调试都很复杂,因为有时候混淆之后的js代码完全看不懂。其实实际开发过程中,从文件大小和代码可复用性来说,不仅仅是js代码需要精简,css代码一样也很需要精简。
规则11:避免重定向
重定向的英文是Redirect,用于将用户从一个URL重新跳转到另一个URL。
最常见的Redirect就是301和302两种。
关于重定向的性能影响这里就不说了,自行查阅相关资料吧。
在我们实际开发中避免重定向最简单也最容易被忽视的一个问题就是,设置URL的时候,最后的“/”,有些人有时候会忽略,其实你少了“/”,这时候的URL就被重定向了,所以在给页面链接加URL的时候切记最后的“/”不可丢。
规则12:删除重复脚本
重复的js代码除了有不必要的HTTP请求之外,还会浪费执行js的时间。
将你使用的js代码模块化,可以很好地避免这个问题,至于js模块化如何实现,现在有很多可以使用的开源框架,我用的比较多的是我们公司玉伯的Sea.js。
规则13:配置ETag
Etag(Entity Tag),实体标签,是Web服务器和浏览器用户确认缓存组件的有效性的一种机制。写的很复杂,对我这种非专业的前端开发人员来说,有点过了,关于这个原则有兴趣的自己看吧。
规则14:使Ajax可缓存
针对页面中主动的Ajax请求返回的数据要缓存到本地,当然这个是针对短期内不会变化的数据。如果不确定数据变化周期的话,可以增加一个修改标识的判断,我正常处理过程中会给一些Ajax请求返回的数据增加一个MD5值的判断,每次请求会判断当前MD5是否变化,如果变化了取最新的数据,如果不变化,则不变。