Yahoo对Web前端优化的14条经验拔萃
|
终的结果是，对于完全相同的组件，从一台服务器到另一台，Apache和IIS产生的ETag是不会匹配的。如果ETag不匹配，用户就不会按照ETag的设计计划那样接收到更小更快的304响应；相反，它们会收到普通的200响应以及组件的所有数据。如果只在一台服务器上部署网站，这通常不会产生问题；但如果使用了服务器集群，同时使用Apache或者IIS进行默认的ETag配置，用户响应将变慢，服务器负载将变高，将消耗更多的带宽，同时代理缓存的效率也会下降。即使组件具有长久的Expires头，一旦用户单击了Reload或Refresh按钮，依然会产生条件GET请求。 规则14——使Ajax可缓存（Make Ajax Cacheable） 为了提升性能，最重要的是优化Ajax响应。而改善这些主动Ajax请求的最重要的方式就是使响应可缓存。如同在“添加Expires头”中讨论的，一些其他规则也适用于Ajax，包括：压缩组件、减少DNS查找、精简JavaScript、避免重定向、配置Etag。 PS：具体的关于优化的知识点或问题 1. 为什么网页设置缓存后仍然有请求（304响应）？ 浏览器刷新是conditional request，所以如果通过刷新来看缓存是否有效肯定是304。可以试试输入网址按回车或者回退键来看效果。另外由于HTML文档很少设置完全缓存（一般要和服务器验证），可以看静态组件的缓存效果（200 ok (from cache)）。 2. expirationTime = responseTime + freshnessLifetime - currentAge freshnessLifetime具体怎么算可以参考https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching_FAQ。 3. Flash of unstyled content（无样式内容闪烁） Flash of unstyled content（FOUC）就是在加载外部样式表之前，浏览器按默认样式显示了内容，这是因为浏览器在所有资源都下载好前就开始渲染页面了。一旦外部样式被加载，浏览器就会修正样式，但这种修正可能是可见的，也就是FOUC。 怎么避免？在<head>中通过<link>引入样式，避免使用@import。 （编辑：核心网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
