web前端开发如何提高页面性能优化,如何提升web前端性能

　　前言：

　　同样的网络环境，同样能满足你需求的两个网站，一个“Duang”一下子就加载了，另一个挣扎了很久才出来。你会选择哪一个？研究表明，用户打开网页最满意的时间是2-5秒。如果他们等待超过10秒，99%的用户会关闭网页。或许，你不会有太多的感触。接下来我列举一组数据：Google网站每400ms的慢访问速度导致用户搜索请求下降0.59%；亚马逊网站延迟每增加100ms，将导致收入下降1%；如果雅虎有400ms的延迟，流量会下降5-9%。网站的加载速度严重影响用户体验，决定了这个网站的生死存亡。

　　可能有人会说，网站的性能是后端工程师的事，和前端关系不大。我只能说，太年轻太单纯。事实上，只有10%~20%的最终用户响应时间花在从Web服务器获取HTML文档并将其发送到浏览器上。剩下的时间都去哪了？看看性能的黄金法则：

　　只有10%~20%的最终用户响应时间花在下载HTML文档上。剩下的80%~90%的时间都花在了下载页面中的所有组件上。

　　接下来我们将研究前端攻城狮如何提高页面的加载速度。

　　首先，减少HTTP请求

　　如上所述，80%~90%的时间花在下载页面中所有组件发出的HTTP请求上。因此，改善响应时间的最简单方法是减少HTTP请求的数量。

　　图片图：

　　假设导航栏上有五张图片。点击每张图片都会导致一个链接，这样五张导航图片加载后会生成五个HTTP请求。但是，使用图片地图可以提高效率，这样只需要一个HTTP请求。

　　服务器端图像映射：所有点击都提交到同一个url，同时提交用户点击的X和Y坐标，服务器端根据坐标映射进行响应。

　　客户端图片映射：直接将点击映射到动作。

　　img src= Planets . jpg border= 0 use map= # planet map alt= Planets /map name= planet map id= planet map area shape= rect coords= 180，139，14 href= Venus . html alt= Venus /area shape= rect coords= 129，161，10 href= mercur . html alt= Mercury /area shape= rect coords

　　使用图片地图的缺点：在指定坐标区域时，矩形或圆形比较容易指定，其他形状比较难手动指定。

　　CSS精灵

　　CSS Sprites的直译是CSS sprite，但是这个翻译显然是不够的。其实就是通过把多张图片融合成一张图片，然后通过一些CSS技术在网页上布局出来。特别是对于图片很多的网站，如果能利用css sprites减少图片数量，速度会有所提升。

　　差异

　　span id= image1 /span span id= image2 /span span id= image3 /span span id= image4 /span span id= image5 /span/div

　　50px

　　高度：50px显示：内嵌-块；边框：1px纯色# 000；背景-图像：URL( E:/1 . png )；} #image1 {背景位置：0 0；} #image2 {背景-位置：-95px 0；} #image3 {背景-位置：-185 px 0；} #image4 {背景-位置：-275 px 0；} # image5 { background-position:-366 px-3px；}

　　运行结果：

　　PS:使用CSS Sprites也可以减少下载量。也许你会认为合并后的图像会比分离后的图像之和大，因为可能会有额外的空白区域。实际上，合并后的图片会比分离后的图片之和更小，因为它减少了图片本身的开销，如颜色表、格式信息等。

　　字体图标

　　能使用大量字体图标的地方，我们就尽量用。字体图标可以减少很多图片的使用，从而减少http请求。字体图标也可以通过CSS设置颜色、大小等样式，何乐而不为。

　　合并脚本和样式表

　　将多个样式表或脚本文件合并到一个文件中，可以减少HTTP请求的数量，缩短生效时间。

　　然而，合并所有文件对于许多人来说是难以忍受的，尤其是那些编写模块化代码的人。而且，合并所有的样式文件或脚本文件可能会导致在加载一个页面时加载比所需更多的样式或脚本，这将增加那些只访问网站一个(或几个)页面的人的下载量。所以大家要自己权衡利弊。

　　第二，用CDN

　　如果应用程序web服务器离用户更近，HTTP请求的响应时间就会缩短。另一方面，如果组件web服务器离用户更近，则多个HTTP请求的响应时间会缩短。

　　CDN(内容发布网络)是一组分布在许多不同地理位置的Web服务器，用于更有效地向用户发布内容。在优化性能时，选择向特定用户发布内容的服务器是基于对网络海量开放在线课程拥塞的测量。比如CDN可能会选择网络步数最少的服务器或者响应时间最短的服务器。

　　CDN还可以备份数据，扩展存储容量和缓存，帮助缓解Web流量的峰值压力。

　　CDN的缺点：

　　1.响应时间可能会受到其他网站流量的影响。CDN服务提供商在其所有客户之间共享一个Web服务器组。

　　2.如果CDN的服务质量下降，你的工作质量也会下降。

　　3.无法直接控制组件服务器。

　　三。添加过期标题

　　第一次访问页面的访问者会发出许多HTTP请求，但通过使用一个长的Expires头，可以缓存这些组件，下次访问时，可以减少不必要的HTPP请求，从而提高加载速度。

　　服务器通过Expires头告诉客户机在指定的时间之前可以使用组件的当前副本。例如：

　　到期时间：Fri，格林威治时间2016年3月18日07时41分53秒

　　Expires的缺点：要求服务器和客户端时钟严格同步；到期日期需要经常检查。

　　HTTP1.1中引入了Cache-Control来克服Expires头的限制，max-age用于指定组件被缓存多长时间。

　　缓存控制：最大年龄=12345600

　　如果同时设置了Cache-Control和Expires，max-age将覆盖Expires标头。

　　四。压缩组件

　　从HTTP1.1开始，Web客户端可以通过HTTP请求中的Accept-Encoding头来表达对压缩的支持。

　　接受编码：gzip，deflate

　　如果Web服务器在请求中看到这个头，它将使用客户机列出的方法之一来压缩它。Web服务器通过响应中的内容编码通知Web客户端。

　　内容编码：gzip

　　代理缓存

　　当浏览器通过代理发送请求时，情况会有所不同。假设发送给代理的第一个URL请求来自不支持gzip的浏览器。这是代理的第一个请求，缓存是空的。将代理请求转发给服务器。此时，响应被解压缩，同时代理缓存被发送到浏览器。现在，假设对代理的请求是同一个url，并且来自支持gzip的浏览器。代理将使用缓存中未压缩的内容进行响应，因此失去了压缩的机会。相反，如果第一个浏览器支持gzip，而第二个浏览器不支持，那么您的代理缓存中的压缩版本将被提供给后续的浏览器，不管它们是否支持gzip。

　　解决方案：在Web服务器的响应中添加vary头。web服务器可以告诉代理根据一个或多个请求头更改缓存的响应。因为压缩的决定是基于Accept-Encoding请求头，所以有必要在vary响应头中包含Accept-Encoding。

　　变化：接受-编码

　　第五，把样式表放在头部。

　　首先，将样式表放在头部对实际页面加载时间没有太大影响，但会减少首页出现的时间，使页面内容逐渐出现，提高用户体验，防止“白屏”。

　　我们一直希望页面能够尽快显示内容，为用户提供视觉反馈，这对于网速慢的用户来说非常重要。

　　将样式表放在文档的底部可以防止浏览器中的内容逐渐出现。为了避免在样式改变时重绘页面元素，浏览器会阻止内容的渐进呈现，造成“白屏”。这来自于浏览器的行为：如果样式表还在加载，那么构建呈现树就是浪费，因为所有的样式表加载的都是在解析完成之前会撤退的东西。

　　不及物动词把剧本放在最下面。

　　更像是样式表，把脚本放在底部，对实际页面加载时间没有太大影响，但是会减少页面首屏出现的时间，让页面内容逐渐出现。

　　js的下载和执行会阻塞Dom树的构建(严格来说是中断了Dom树的更新)，所以当脚本标签放在首屏范围内的HTML代码段时，首屏的内容会被截断。

　　下载脚本时禁用并行下载。——即使使用了不同的主机名，也不会启用其他下载。因为脚本可能会修改页面内容，浏览器会等待；另外，也是为了保证脚本能够按照正确的顺序执行，因为后面的脚本可能和前面的脚本有依赖关系，如果不按照顺序执行，可能会导致错误。

　　七。避免CSS表达式

　　CSS表达式是动态设置CSS属性的一种强大而危险的方式。IE5和更高版本以及IE8之前的版本都支持它。

　　p {

　　expression(func()，document.body.clientWidth 400？400px :自动)；

　　高度：80px边框：1px纯色# f00}

　　p span/span/p p span/span/p p span/span/p p span/span/p p span/span/p script var n=0；func(){ n；//alert()；console . log(n)；}/脚本

　　鼠标动了几次，函数轻松运行的次数就达到了上千次，危险性显而易见。

　　如何解决：

　　一次性表达式：

　　p {

　　表达式(func(this))；

　　高度：80px边框：1px纯色# f00}

　　p span/span/p p span/span/p p span/span/p p span/span/p p span/span/p script var n=0；func(elem){ n；elem . style . width=document . body . client width 400？400px :自动；console . log(n)；}/脚本

　　事件处理机制

　　Js事件处理机制用于动态改变元素的样式，从而控制函数的运行次数。

　　八。使用外部JavaScript和CSS

　　内联脚本或样式可以减少HTTP请求，从而提高页面加载速度。但在实际操作中，当从外部导入脚本或样式时，浏览器可能会缓存，这样以后加载时就可以直接使用缓存，HTML文档的大小会减小，从而提高加载速度。

　　影响因素：

　　1.每个用户产生的页面浏览量越少，内联脚本和样式的论据就越强。例如，如果一个用户一个月只访问你的网站一到两次，在这种情况下最好是内嵌的。如果用户可以生成大量的页面浏览量，缓存的样式和脚本会大大减少下载时间和提交页面的加载速度。

　　2.如果你的网站不同页面使用的组件大致相同，那么使用外部文件可以提高这些组件的复用率。

　　加载后下载

　　有时我们想要内联样式和脚本，但是我们可以为下面的页面提供外部文件。然后我们可以在页面加载完成后动态加载外部组件，以便用户以后访问。

　　2 setTimeout(downloadFile()，1000)；

　　3 } 4 5 window.onload=doOnload6 7函数download file(){ 8 download CSS( http://ABC . com/CSS/a . CSS )；9 download js( http://ABC . com/js/a . js )；10 } 11 12函数download CSS(URL){ 13 var ele=document . createelement( link )；14 ele.rel= stylesheet15 ele . type= text/CSS ；16 ele.href=url17 18 document . body . appendchild(ele)；19 } 20 21函数download js(URL){ 22 var ele=document . createelement( script )；23 ele.src=url24 document . body . appendchild(ele)；25 }

　　在这个页面中，JavaScript和CSS被加载了两次(内联和外部)。为了使它正常工作，我们必须处理双重定义。将这些组件放在一个不可见的IFrame中是一个更好的解决方案。

　　九、减少DNS查找

　　当我们在浏览器的地址栏中输入网址(例如，www.linux178.com)，然后按enter键，当我们看到页面时会发生什么？

　　域名解析——发起TCP三次握手——TCP连接建立后发起http请求——服务器响应http请求，浏览器获取html代码——浏览器解析html代码，请求html代码中的资源(如js、css、图片等。)-浏览器渲染页面并呈现给用户。

　　域名解析是页面加载的第一步，那么域名是如何解析的呢？以Chrome为例：

　　1.Chrome浏览器会先搜索浏览器自己的DNS缓存(缓存时间比较短，只有1分钟左右，只能容纳1000个缓存)，看自己的缓存中是否有www.linux178.com对应的条目，并且没有过期。如果是，决议到此结束。

　　注：如何检查Chrome自带的缓存？可以用chrome://net-internal/# DNS查看。

　　2.如果在浏览器自己的缓存中没有找到对应的条目，Chrome会搜索操作系统本身的DNS缓存。如果找到了并且没有过期，它将停止搜索和解析。

　　注意：如何检查操作系统本身的DNS缓存？以Windows系统为例，可以在命令行使用ipconfig /displaydns进行检查。

　　3.如果在Windows系统的DNS缓存中找不到它，那么尝试读取hosts文件(位于C:\ Windows \ System32 \ drivers \ etc)来查看其中是否有与该域名对应的IP地址。如果有，则解析成功。

　　4.如果在hosts文件中没有找到对应的条目，浏览器会发起DNS系统调用，它会向本地配置的首选DNS服务器发起域名解析请求(一般由电信运营商提供，也可以使用Google这样的DNS服务器)(请求通过UDP协议发送到DNS的53端口，这是一个递归请求，即运营商的DNS服务器必须向我们提供域名的IP地址)。运营商的DNS服务器先搜索自己的缓存，找到对应的条目，未过期则解析成功。如果没有找到相应的条目，运营商的DNS将代表我们的浏览器发起一个重复的DNS解析请求。首先，它会找到根域的DNS的IP地址(这个DNS服务器内置了根域的13个DNS的IP地址)，然后它会向根域的DNS地址发起请求(请问这个域在www.linux178.com的IP地址是多少？)，根域发现这是一个顶级域com域的域名，于是跟运营商的DNS说我不知道这个域名的IP地址，但是我知道com域的IP地址，所以你可以查到，于是运营商的DNS得到了com域的IP地址，向com域的IP地址提出了请求(请问这个域名的IP地址在www.linux178.com是多少？)，com域名这个服务器告诉运营商的DNS，我不知道这个域名的IP地址在www.linux178.com，但是我知道这个域名的DNS地址在linux178.com，你去吧，于是运营商的DNS向这个域名的DNS地址在linux178.com提出请求(这个一般是域名注册商提供的，比如王湾，王新等。)(请问这个域名在www.linux178.com的IP地址是什么？)，这个时候linux178.com域的DNS服务器查的时候，诶确实是跟我在一起，所以就把查到的结果发给了运营商的DNS服务器。这时，运营商的DNS服务器得到了www.linux178.com域名对应的IP地址，并将其返回给Windows系统内核。内核随后将结果返回给浏览器，最终浏览器获得了与www.linux178.com对应的IP地址。是采取进一步行动的时候了。

　　注意：正常情况下，不会执行以下步骤。

　　如果上述四个步骤后解决不成功，将执行以下步骤：

　　5.操作系统将查找NetBIOS名称缓存(NetBIOS名称缓存，存在于客户端计算机中)。这个缓存有什么？最近一段时间内与我成功通信的所有计算机的名称和Ip地址都将存储在此缓存中。这一步在什么情况下可以解析成功？就是名字刚好几分钟前和我沟通成功，所以这一步可以成功解决。

　　6.如果步骤5失败，将查询WINS服务器(具有NETBIOS名称和IP地址的服务器)。

　　7.如果在步骤6中查询不成功，则客户端将进行广播搜索。

　　8.如果第7步也没有成功，那么客户机将读取LMHOSTS文件(与HOSTS文件在同一个目录中，写入方法相同)

　　如果第八步没有解决成功，那么该解决被宣布为失败，并且与目标计算机的通信是不可能的。只要这八个步骤中有一个可以解析成功，就可以和目标计算机成功通信。

　　DNS也是一个开销。通常浏览器查找给定域名的IP地址需要20 ~ 120ms。在域名解析完成之前，浏览器无法从服务器加载任何内容。那么如何减少域名解析时间，加快页面加载速度呢？

　　当客户端DNS缓存(浏览器和操作系统)缓存为空时，DNS查找的次数与要加载的网页中唯一主机名的数量相同，包括页面URL、脚本、样式表、图片、Flash对象等的主机名。减少主机名的数量可以减少DNS查找的次数。

　　减少唯一主机名的数量会潜在地减少页面并行下载的数量(HTTP 1.1规范建议从每个主机名并行下载两个组件，但实际上可以不止一个)，所以减少主机名和并行下载的方案会是矛盾的，需要大家自己权衡。建议将组件放在至少两个但不超过四个主机名下，以减少DNS查找并允许高度并行下载。

　　X.简化JavaScript

　　简化

　　精简是从代码中删除不必要的字符，以减少文件大小和加载时间。精简代码时，不必要的空白字符(空格、换行符、制表符)将被删除，这样整个文件的大小变得更小。

　　不著名的

　　混淆是应用于源代码的另一种方式。它删除了注释和空白，还重写了代码。为了避免混淆，函数和变量的名字会被转换成更短的字符串，然后代码会更加精炼，难以阅读。这样做通常是为了增加对代码进行逆向工程的难度，这也提高了性能。

　　缺点：

　　混乱本身是复杂的，可能会导致错误。

　　标记不可更改的符号，以防止JavaScript符号(如关键字和保留字)被修改。

　　混乱会使代码难以阅读，这使得在生产环境中调试问题更加困难。

　　上面提到了文件是用gzip等压缩方式压缩的。在这里，即使文件是用gzip等方法压缩的，也要简化代码。一般来说，压缩产生的节约高于精简产生的节约。在生产环境中，同时使用精简和压缩可以最大限度地节省更多成本。

　　CSS的简化

　　一般来说，CSS精简的节省要比JavaScript精简少，因为CSS中的注释和空白相对较少。

　　除了删除空白和注释，CSS还可以通过优化获得更多节省：

　　合并相同的类；

　　移除未使用的类；

　　使用缩写，如

　　填充顶部：0；边距：0 10px边框：1px solid #111 }。错误的{ color:# ffffff；padding-top:0px；边距-顶部：0；边距-底部：0；左边距：10px右边距：10px边框颜色：# 111；border-1px；边框样式：纯色；}

　　以上。右是正确的写法。颜色用缩写，0代替0px，可以合并的合并样式。此外，在精简时，可以使用“；”最后一行实际上是风格。也可以省略。

　　看一看简化的例子：

　　以上分别是jquery-2.0.3的学习版(非简化版)和简化版。可以看出，简化文件的大小比源文件小155k。而且在简化版中，jquery做了一些混淆，比如用e代替window，以获得最大的节省。

　　XI。避免重定向

　　什么是重定向？

　　重定向用于将用户从一个URL重新路由到另一个URL。

　　常见重定向的类型

　　31:永久重定向，主要用来告诉搜索引擎某个网站的域名发生了变化，要把旧域名的数据和链接数转移到新的域名上，这样网站的排名就不会因为域名的变化而受到影响。

　　02:临时重定向，主要实现post请求，告知浏览器转移到新的URL。

　　34:未修改，主要用于浏览器在其缓存中保留一个组件的副本，并且该组件已经过期的情况。这意味着浏览器将生成一个有条件的GET请求。如果服务器的组件没有被修改，它将返回一个304状态码，同时，它不会携带主体，告诉浏览器它可以重用这个副本，减少响应大小。

　　如何重定向性能？

　　当页面被重定向时，整个HTML文档的传输将被延迟。在HTML文档到达之前，页面中不会显示任何内容，也不会下载任何组件。

　　我们举一个实际的例子：对于ASP.NET的Web表单开发，初学者很容易犯一个错误，就是把页面的连接写入服务器控件的后台代码，比如使用一个按钮控件，在其后台的click事件中写入：response . redirect( )；但是这个按钮的作用只是传递URL，效率很低，因为点击按钮后，向服务器发送Post请求，服务器处理响应后。Redirect()，它向浏览器发送302响应，然后浏览器根据响应的URL发送GET请求。正确的做法是在html页面中直接使用A标签作为链接，这样可以避免冗余的post和重定向。

　　重定向的应用场景

　　1.跟踪内部流量

　　重定向通常用于跟踪用户流量的方向。当你有一个门户主页，想跟踪用户离开主页后的流量，这个时候可以使用重定向。例如，一个网站主页新闻的链接地址是http://a.com/r/news.点击这个链接会产生301响应，其位置设置为http://news.a.com。通过分析a.com的web服务器日志，我们可以知道人们离开主页后去了哪里。

　　我们知道重定向如何损害性能。为了达到更好的效率，我们可以使用Referer日志来跟踪内部流量。每个HTTP请求都有一个referrer来表示原始请求页面(除了从书签打开或者直接输入URL)。记录每个请求的referrer可以避免向用户发送重定向，从而提高响应时间。

　　2.跟踪出站流量

　　有时链接可能会把用户从你的网站带走。在这种情况下，使用Referer并不现实。

　　您还可以使用重定向来解决跟踪出站流量的问题。以百度搜索为例，百度通过将每个链接包装在一个302重定向中来解决追踪问题，比如搜索关键词“前端性能优化”，搜索结果中有一个URL是https://www.baidu.com/link? URL=pdjwtfa 0 IAF _ frbnlw 1 qldtq 27 ybujwp 9 JPN 4 q 0 qjdntgtdbk 3 ja 3 jyyn 2 gxr 5 ataywg4 si 6v 1 nypksyliswjiufqdinhpvn 4 QE-ulgwd=EQID=9 c 02 BD 21001 c 69177(个人感觉：字符串中包含要访问的网址，点击后会生成302重定向，会将页面转移到目标页面(要修改请指正))

　　除了重定向，我们还可以选择使用beacon)——，这是一个HTTP请求，其URL包含跟踪信息。可以从信标网络服务器的访问日志中提取跟踪信息。信标通常是1px*1px的透明图片，但204响应更好，因为它更小，从不缓存，也从不改变浏览器的状态。

　　十二。删除重复的脚本

　　当一个团队开发一个项目时，因为不同的开发人员可能会向页面添加页面或组件，所以同一个脚本可能会被多次添加。

　　的重复脚本会造成不必要的HTTP请求(如果脚本没有缓存)，执行多余的JavaScript会浪费时间，还可能导致错误。

　　如何避免重复脚本？

　　1.形成良好的剧本组织。当不同的脚本包含相同的段落时，可能会出现重复的脚本。有些是必须的，有些不是，所以要把脚本组织好。

　　2.实现脚本管理器模块。

　　例如：

　　1函数插入脚本($file) {

　　2 if(had inserted($ file)){ 3 return；4 } 5 exe insert($ file)；6 7 if(has dependencies($ file)){ 8 9 $ deps=get dependencies($ file)；10 11 foreach($ deps as $ script){ 12 insert script($ script)；13 } 14 15 echo script type= text/JavaScript src= 。 getVersion($file)。/script ；16 17 } 18 }

　　先检查是否已经插入，如果已经插入则返回。如果脚本依赖于其他脚本，也将插入依赖脚本。最后将脚本发送到页面，getVersion会检查脚本并返回附加了相应版本号的文件名，这样如果脚本的版本发生变化，之前的浏览器缓存就会失效。

　　十三。配置ETag

　　浏览器先前缓存的内容将无效。

　　ETag是什么？

　　EntityTag是唯一标识组件特定版本的字符串。它是web服务器用来确认缓存组件有效性的一种机制，通常可以利用组件的一些属性来构造。

　　条件GET请求

　　如果组件过期，浏览器在重用它之前必须首先检查它是否有效。浏览器将向服务器发送一个条件GET请求。如果服务器判断缓存仍然有效，它将发送304响应，告诉浏览器缓存组件可以重用。

　　那么服务器通过什么来判断缓存是否仍然有效呢？有两种方法：

　　ETag(实体标签)；

　　最近的修改日期；

　　最新修改日期

　　原始服务器通过Last-Modified响应头返回组件的最新修改日期。

　　举个栗子：

　　当我们在没有缓存的情况下访问www.google.com.hk时，我们需要下载google的logo，然后我们会发送一个这样的HTTP请求：

　　请求：

　　获取Google logo _ color _ 272 x92dp . pnghttp 1.1

　　主持人：www.google.com.hk

　　回应：

　　HTTP 1.1 200没问题

　　最后修改：Fri，2015年9月4日22:33:08 GMT

　　当需要再次访问同一个组件并且缓存已过期时，浏览器将发送以下条件GET请求：

　　请求：

　　getgoogle logo _ color _ 272 x92dp . pnghttp 1.1

　　如果-修改-自：Fri，2015年9月4日22:33:08 GMT

　　主持人：www.google.com.hk

　　回应：

　　HTTP 1.1 304未修改

　　实体标签

　　ETag提供了另一种方法来检测浏览器缓存中的组件是否与原始服务器上的组件匹配。从书中摘录的例子：

　　没有缓存的请求：

　　请求：

　　获取/i/yahoo/gif HTTP 1.1

　　主持人：us.yimg.com

　　回应：

　　HTTP 1.1 200没问题

　　最后修改时间：星期二，2006年12月12日03:03:59 GMT

　　ETag:"10c24bc-4ab-457elc1f "

　　再次请求相同的组件：

　　请求：

　　获取/i/yahoo/gif HTTP 1.1

　　主持人：us.yimg.com

　　if-Modified-Since:2006年12月12日星期二03:03:59 GMT

　　如果-无-匹配：" 10c24bc-4ab-457elc1f "

　　回应：

　　HTTP 1.1 304未修改

　　为什么要引入ETag？

　　ETag主要是解决一些Last-Modified解决不了的问题：

　　1.有些文件可能会定期更改，但其内容不会更改(仅更改时间)。这个时候，我们不希望客户端认为这个文件被修改了，重新获取；

　　2.有些文件修改非常频繁，比如在秒以内修改(比如说1s内修改n次)，If-Modified-Since可以检查的粒度是S级，所以这种修改无法判断(或者UNIX记录MTIME只精确到秒)；

　　3.有些服务器无法准确获取文件的最后修改时间。

　　ETag引起的问题

　　ETag的问题在于，它通常是用某些属性构造的，有些属性是网站部署的特定服务器所特有的。当使用集群服务器时，浏览器从一个服务器获取原始组件，然后向另一个不同的服务器发送条件GET请求，ETag将出现不匹配。例如，inode-size-timestamp用于生成ETag。文件系统使用inode来存储文件类型、所有者、组和访问模式等信息。在多台服务器上，即使文件大小、权限和时间戳相同，inode也是不同的。

　　最优方法

　　1.如果Last-Modified没有任何问题，可以直接移除ETag。谷歌的搜索首页不使用ETag。

　　2.确定要用ETag。在配置ETag的值时，删除可能影响组件集群服务器验证的属性，比如使用size-timestamp生成时间戳。

　　十四。使Ajax可缓存

　　维基百科是这样定义Ajax的：

　　AJAX，即“异步JavaScript和XML”(Asynchronous JavaScript and XML technology)，指的是一套集成了多种技术的浏览器端网页开发技术。Ajax的概念是由杰西詹姆斯贾勒特提出的。

　　传统的Web应用程序允许用户填写表单，并在提交表单时向Web服务器发送请求。服务器接收并处理传入的表单，然后将其发送回一个新的网页，但这种做法浪费了大量带宽，因为前后页中的HTML代码大多是相同的。因为每个应用程序通信都需要向服务器发送请求，所以应用程序的响应时间取决于服务器的响应时间。这导致用户界面的响应比本机应用程序的响应慢得多。

　　与此不同，AJAX应用程序只能向服务器发送和检索必要的数据，并在客户端使用JavaScript处理来自服务器的响应。因为服务器和浏览器之间交换的数据大大减少(只有原来的5%左右)[源请求]，服务器响应更快。同时，大量的处理工作可以在发出请求的客户机上完成，因此Web服务器的负载也减少了。

　　与DHTML或LAMP类似，AJAX不是指单一的技术，而是对一系列相关技术的有机利用。虽然它的名字包含XML，但实际上数据格式可以用JSON代替，进一步减少数据量，形成所谓的AJAJ。并且客户端和服务器不需要异步。一些基于AJAX的“衍生/复合”技术也在不断涌现，比如AFLAX。

　　Ajax的目的是突破web本质的开端——停止交互模式。给用户看白屏然后重绘整个页面不是好的用户体验。

　　异步和即时

　　Ajax的一个明显特点是它向用户提供即时反馈，因为它从后端web服务器异步请求信息。

　　用户是否需要等待的关键因素是Ajax请求是被动的还是主动的。被动请求是提前发起以备将来使用，而主动请求是基于用户当前的操作发起的。

　　什么样的AJAX请求可以被缓存？

　　无法在客户端缓存POST请求。每个请求都需要发送到服务器进行处理，每次都会返回状态码200。(数据可以缓存在服务器端，提高处理速度)

　　GET请求可以缓存在客户机上(默认情况下)。除非指定不同的地址，否则具有相同地址的AJAX请求不会在服务器上重复执行，而是返回304。

　　使用缓存的Ajax请求

　　在进行Ajax请求时，可以选择尽量使用get方法，这样可以利用客户端的缓存，提高请求速度。

　　如果是原创文章，请注明出处：http://www..com/MarcoHan/.

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。