为什么80%的码农都做不了架构师？>>>   hot3.png

十四、
Make Ajax Cacheable
tag: content
使Ajax可缓存
标签：内容
Ajax的显著好处之一是对于用户来说它提供了瞬间的反馈，因为它通过异步方式从后端服务器请求信息。然而，使用Ajax也不能保证用户不翘起拇指来等待这些异步返回的Javascript和XML。在许多站点中，用户是否要等待取决于Ajax的使用方式。例如，在一个基于web的邮件客户端中，用户会持续等待Ajax的请求结果来找到匹配其查询条件所有邮件信息。重要的是要记住"异步"并不代表"瞬间"。

为了提高性能，优化这些Ajax请求是很重要的。提高Ajax性能的最重要的方式是使响应可缓存的，正如在 Add an Expires or a Cache-Control Header所说的那样。

一些其它的原则同样适用于Ajax：
Gzip Components
Reduce DNS Lookups
Minify JavaScript
Avoid Redirects
Configure ETags
让我们看一个例子，Web2.0的邮件客户端可能使用Ajax来下载用户的地址簿。如果在上次使用该web邮件应用时，用户没有编辑地址簿，之前的地址响应可以从缓存中被读出来，只要Ajax响应通过 Expires 或者 Cache-Control 头设置为可缓存的。相对于之前缓存过的地址簿，当用户要使用新的地址簿时，必须显示的通知浏览器。这可以通过在请求地址簿信息的Ajax的URL后加一个时间戳指示用户上次编辑地址簿的时间来完成。例如&t=1190241612。如果地址簿从上次下载后就没有编辑过，时间戳会是相同的并且地址簿会从浏览器缓存中读出，从而消除了额外的HTTP环回过程。如果用户已经编辑了他的地址簿，时间戳会保证新的URL不会匹配已经缓存的响应信息，之后浏览器会请求更新后的地址簿实体。
尽管在Ajax响应是动态创建的，并且只能被用于单一用户，它们仍旧可以被缓存。做这些会加速你的Web2.0应用。
十五、
Flush the Buffer Early
tag: server
尽早清除缓存
标签：服务器 
当用户请求一个页面时，服务器可能会花费200-500毫秒来组装HTML页面。在这段时间内，浏览器是处于空闲状态因为它在等待数据的到来。在PHP里存在flush()函数。它允许你发送部分已经准备好的HTML响应到浏览器中以便浏览器能够获取组件，而服务器此时正在忙于准备剩下的HTML页面。这些好处常被当称作是忙碌的后端或者是轻前端。
HEAD标签后被认为是是清除缓存的好的地方，因为HTML的head通常是容易准备的，并且允许浏览器并发下载HEADer中包含的任何CSS和Javascript文件，而此时后台仍旧忙于处理的过程中。
例子：
... <!-- css, js -->
</head>
<?php flush(); ?>
<body>
... <!-- content -->

Yahoo! search 先前的研究和实际用户的测试证明了使用这项技术的好处。

十六、
Use GET for AJAX Requests
tag: server
在AJAX请求中使用GET
标签：服务器
Yahoo! Mail的团队发现在使用XMLHttpRequest时，浏览器通过两步处理来实现POST方法：首先发送请求头，然后发送数据。所以最好使用GET方法，该方法只会发送一个TCP包（除非你有许多的cookies）。IE中URL的最大长度是2K，所以如果你要发送超过2K的数据时你可能不能再用GET方法。
一个有趣的负面效果是不带有任何数据的POST方法的行为就像GET一样。基于HTTP详细说明书，GET方法是为了取回信息，所以当你真的只是请求数据时，使用GET是有有意义（语义上）的，相反的是发送数据到服务器端去存储是无意义（语义上）的。
十七、
Post-load Components
tag: content
延迟加载组件
标签：内容
当你进一步观察你的页面时，你问自己："在最初渲染页面时，到底什么是必须？"其它的内容和组件是可以等待的。
Javascript是理想的候选者，可以分散在加载事件之前或者之后。例如如果你有用于拖拽，拖放和动画的Javascript代码和库，这些都是可等待的，以为拖拽页面上的元素是在初始渲染之后才能实施的。其它可选的可延迟加载的内容包括隐藏内容（在用户动作之后才出现的内容）和折叠组件下的图片。

可以帮助你省事的工具： YUI Image Loader允许你延迟加载折叠组件下的图片，YUI Get utility 是联机加载Javascript和CSS的好方法。作为一个实例你可以在开启Firebug网络面板的情况下查看原生的Yahoo! Home Page来进行验证。

当性能目标和其它的最佳实践方式保持一致时是好的。在这种情况下，逐步增强的想法告诉我们，在支持的情况下，Javascript可以提高用户的体验但是你也必须保证在没有Javascript的情况下页面也能正常工作。所以在你确定页面已经正常工作之后，你可以通过延迟加载的脚本来给你添加更多的花样如拖拽，拖放和动画。
十八、
Preload Components
tag: content
预加载组件
标签：内容
预加载可能看起来与延迟加载是对立的，但实际上它是针对不同的目标的。通过预加载组件你可以充分利用浏览器的空闲时间来请求你不久将要的组件（如图片，样式，脚本）。这样当用户浏览下一个页面时，你可能已经缓存了多数的组件，对于用户来说你的页面将加载的更快。
以下有几种预加载的方式：
  • 无条件预加载—只要onload事件触发，你就会前去抓取额外的组件。例如检查google.com来了解一个精灵图片是如何在onload中被请求的。 google.com并不需要该精灵图片，但是在接下来连续不断的搜索结果页面中却是需要该图片的。
  • 有条件预加载—基于用户动作你会对用户接下来要去哪做一个有根据的猜测，从而进行相应的预加载。在search.yahoo.com你会发现在你在输入框中输入文字后， 一些额外的组件是如何被请求的。
  • 按期望的预加载————在再设计之前提前预加载。在再设计之后你经常会听到"新的站点很cool，但是比之前的站点要慢"。问题的一部分可能是 用户之前是在一个全缓存状态下浏览你的旧站点，但在空缓存状态下浏览你的新站点。你可以在重新加载新页面之前预加载其组件来缓解该副作用。 你的旧站点可以利用浏览器的空闲时间请求一些你的新站点会用到的一些图片，脚本。
十九、
Reduce the Number of DOM Elements
tag: content
家少DOM元素的数量
标签：内容
复杂的页面意味着要下载更多的字节并且同样会降低Javascript访问DOM的速度。例如，一次通过500个DOM元素添加一个事件和一次通过5000元素添加一个事件处理，这之间是有很大差别的。
大量的DOM元素可能预示着在不去除必要内容的前提下，一些页面内容应该得到改善。你正在使用嵌套的表格作为布局用途吗？你正在加入更多的<div>标签而仅是为了修复布局问题吗？可能存在更好的且更加语义化的方式来处理你的标签。
YUI CSS utilities提供好的布局帮助：grid.css可以帮助你进行总体布局，font.css和reset.css可以帮助你去除浏览器的格式设置。重新开始考虑你的标签存在着挑战，例如只有在有语义时才使用<div>，而不是把它渲染为一个新行。

DOM的数量可以很容易的进行测试，只要在Firebug的console下键入：

document.getElementsByTagName('*').length。

至于DOM的数量为多少时才能算多？检查一下类似的有较好标签设计的页面即可。例如 Yahoo! Home Page是一个复杂的页面但仍旧只有少于700个的HTML元素（HTML 标签）
二十、
Split Components Across Domains
tag: content
跨域分隔组件
标签：内容
分隔组件让你能够最大化并行下载。确保你使用的域名不要超过2-4个，由于DNS查询也会有损耗。例如，你在www.example.org 提供你的HTML和动态的内容，并且在static1.example.org 和 static2.example.org之间分隔你的静态内容。
要获取更多的信息，查看由 Tenni Theurer 和 Patty Chi.发表的 " Maximizing Parallel Downloads in the Carpool Lane"。
二十一、
Minimize the Number of iframes
tag: content
减小iframes的数量
标签：内容
iframes允许HTML文档插入到它的父文档中。理解iframes的工作方式是十分重要的，只有这样我们才能更高效的利用iframes。
<iframe> pros:
  • 帮助减少类似于徽章和广告这样的第三方内容
  • 安全沙盒
  • 并发下载脚本
<iframe> cons:
  • 尽管空白，但都是花费昂贵的。
  • 阻碍页面加载
  • 非语义化Non-semantic
二十二、
No 404s
tag: content
拒绝404s
标签：内容
HTTP请求是宝贵的，所以产生一个HTTP请求然后获得一个无用的响应（例如：404没有找到）是完全不必要的并且这将在没有任何益处的情况下降低用户体验。
所以站点拥有一个有用的404s"Did you mean X?"，对于用户体验来说是极好的，但同时也浪费了服务器资源（如数据库，等等）。尤其糟糕的是当链接到外部Javascript的“链接“（link）坏掉，返回的结果是404。首先，这个下载会阻塞并发下载。紧接着浏览器可能尝试着解析404响应体就好像它（响应体）是正常的Javascript代码一样，并尝试发现响应体中有用的部分。
二十三、
Reduce Cookie Size
tag: cookie
减小Cookie的大小
标签：cookie
HTTP Cookie用于多种原因例如认证和个性化。在Web服务器和浏览器之间，关于cookie的信息是在HTTP头部中进行交换的。保持cookies的大小尽可能小是很重要这是为了降低对用户响应时间的影响。
要获取更多信息，请查看Tenni Theurer 和 Patty Chi发表的 " When the Cookie Crumbles" 。该研究的精要是：
  • 消除不必要的cookies
  • 保持cookies的体积尽可能小，以降低对用户响应时间的影响
  • 记住要在合适的域名级别下设置cookies，以避免对子域的影响。
  • 设置一个合适的失效日期。过早的失效日期或者是马上消除cookies会提高用户的响应时间。

转载于:https://my.oschina.net/hmj/blog/27885

Best Practices for Speeding Up Your Web Site(4)相关推荐

  1. Web 站点提速的最佳实践（Best Practices for Speeding Up Your Web Site）

    Web 站点提速的最佳实践(Best Practices for Speeding Up Your Web Site) 太阳火神的美丽人生 (http://blog.csdn.net/opengl_e ...

  2. Best Practices for Speeding Up Your Web Site

    今天突然发现一篇好文章Best Practices for Speeding Up Your Web Site http://developer.yahoo.com/performance/rules ...

  3. 【转载】Best Practices for Speeding Up Your Web Site

    转载自Best Practices for Speeding Up Your Web Site.本地使用markdown对原文进行了编辑,更新了一些无效的链接. Best Practices for ...

  4. [转]Best Practices for Speeding Up Your Web Site

    本文转自:http://developer.yahoo.com/performance/rules.html#minify The Exceptional Performance team has i ...

  5. 加快您的网站的最佳实践（Best Practices for Speeding Up Your Web Site）

    转自:http://www.cnblogs.com/jiahaohk/archive/2009/08/29/1556330.html

  6. speeding up your web site 前端性能优化

    关注网站前端性能不得不提到一篇文章,Best Practices for Speeding Up Your Web Site,他来自yahoo性能研究团队,文章列出了7类35条网站提速的最佳实践. Y ...

  7. speeding up your web site 前端性能优化规则（二）

    接上一篇:speeding up your web site 前端性能优化规则(一) --------------------------------------------------------- ...

  8. speeding up your web site 前端性能优化规则（一）

    接上一篇:speeding up your web site 前端性能优化 -------------------------------------------------------------- ...

  9. Azure China (7) 使用WebMetrix将Web Site发布至Azure China

    <Windows Azure Platform 系列文章目录> 本章介绍的是,使用世纪互联运维的Azure云服务. 1.首先我们登陆Azure管理界面.http://manage.wind ...

最新文章

  1. Linux Centos 7 安装配置nginx
  2. PHP函数处理方法总结
  3. vbn中使用的3种流程控制结构是_细菌进化树构建：从模式种序列下载到构建系统发育树一键搞定...
  4. http://www.ybtsoft.com/
  5. 利用mybatis-generator自动生成代码
  6. STL：transform
  7. SAP Spartacus b2b home页面的自动换行是怎么做到的
  8. teamviewer无法建立连接原因未知_3389远程无法连接的5种原因分析
  9. js模拟点击事件实现代码
  10. uniapp——获取退出登录
  11. 浅谈股价预测模型：分类树算法
  12. 2022年1月语音合成(TTS)和语音识别(ASR)论文月报
  13. 计算机应用基础评分标准及评分细则,《计算机应用基础》评分标准
  14. 看完了小米12发布会,连夜写下这篇JavaScript笔记
  15. idea设置-目录结构
  16. 装了双系统怎么删除一个
  17. Excel怎么快速删除空白表
  18. 达达-京东到家完成新一轮5亿美金融资，沃尔玛、京东分别增持
  19. APP移动应用测试策略与工具思维导图
  20. Java+SSM网上订餐系统点餐餐厅系统(含源码+论文+答辩PPT等)

热门文章

  1. 优先级队列之PriorityQueue
  2. RHCS Oracle HA for OEL5.8 KVM实践配置
  3. svn利用钩子脚本功能实现代码同步到web目录
  4. 路由接口无法配时钟频率
  5. 总结几个等价无穷小相关的关系运算
  6. 深夜不眠，爬起来写博客
  7. 赢者通吃自编码器（WTA-AE）
  8. javascript 日常
  9. sqlserver 迁移
  10. java mail使用qq邮箱发邮件的配置方法