内容代码优化

• 尽量减少HTTP请求

• 减少DNS查找

• 避免跳转

• 缓存Ajax

• 推迟加载

• 提前加载

• 减少DOM元素数量

• 用域名划分页面内容

• 使frame数量减少

• 避免404错误

1、尽量减少HTTP请求 

终端用户响应的时间中，有80%用于下载各项内容，这部分时间包括下载页面中的图像、样式表、脚本、Flash等。通过减少页面中的元素可以减少HTTP请求的次数，这是提高网页速度的关键步骤。

减少页面组件的方法其实就是简化页面设计。那么有没有一种方法即能保持页面内容的冯富强又能达到加快响应时间的目的呢？这里有几条减少HTTP请求次数同时又可能保持页面内容丰富的技术。

合并文件是通过把所有的脚本放到一个文件中来减少HTTP请求的方法，如可以简单滴把所有的CSS文件都放入一个样式表中。当脚本或者样式表在不同页面中使用时需要做不同的修改，这可能会相对麻烦点，但即便如此，也要把这个方法作为改善页面性能的重要一步。

CSS  Sprites是减少图像请求的有效方法。把所有的背景图像都放到一个图片文件中，然后通过CSS的background-image和background-position属性来显示图片的不同部分；

内联图像是使用data:URL scheme的方法把图像数据加载到页面中。这可能会增加页面的大小。把内联图像放到样式表（可缓存）中可以减少HTTP请求同时又避免增加页面文件的大小，但是内联图像的兼容性需要考虑。

减少页面的HTTP请求是首先要做的第一步，这是改进首次访问用户等待时间的最重要的方法。

2、减少DNS查找次数 

域名系统（DNS）提供了域名和IP的对应关系，就像电话本中人名和他们的电话号码的关系一样。当你在浏览器地址栏中输入www.baidu.com时，DNS解析服务器就会返回这个域名对应的ip地址。DNS解析的过程同样也需要时间的。一般情况下返回给定域名对应的IP地址会花费20到120毫秒的时间。而且在这个过程中浏览器什么都不会做、直到DNS查找完毕。

缓存DNS查找可以改善页面性能，这种缓存需要一个特性的缓存服务器，同样会在用户使用的计算机上产生缓存。DNS信息会保留在操作系统中的DNS缓存中，大多数浏览器有独立于操作系统以外的自己的缓存。由于浏览器有自己的缓存记录，因此在一次请求中它不会受到操作系统的影响。

3、避免跳转  

跳转是使用301和302代码实现的。下面是一个响应码为301的HTTP头：

HTTP/1.1 301 Moved Permanently

Location : http://aaa.com/newuri

Content-Type： text/html

浏览器会把用户指向到Location中指定的URL。头文件中的所有信息在一次跳转中都是必须的，内容部分可以为空。不管他们的名称，301和302响应都不会被缓存除非增加一个额外的头选项，如Expires或者Cache-Control来指定它缓存。<meat/>元素的刷新标签和JavaScript也可以实现URL的跳转，但是如果你必须要跳转的时候，最好的方法就是使用标准的3XXHTTP状态代码，这主要是为了确保“后退”按钮可以正确使用。

但是跳转会降低用户体验。在用户和 HTML文档中间增加一个跳转,会拖延页面中所有元素的显示,因为在 HTML文件被加裁前任何文件(图像、Flash 等)都不会被下载。

4、可缓存的 AJAX 

Ajax经常被提及的一个好处就是由于其从后台服务器传输信息的异步性而为用户带来的反馈的即时性。但是、使用 Ajax并不能保证用户不会在等待异步的JavaScript和 XML响应上花费时间。在很多应用中，用户是否需要等待响应取决于 Ajax如何来使用。例如、在一个基于 Web的 Email客户端中，用户必须等待Ajax返回符合他们条件的邮件查询结果。记住一点，“异步”并不异味着“即时”，这很重要。

为了提高性能,优化 Ajax响应是很重要的。提高 Ajxa性能的措施中最重要的方法就是使响应具有可缓存性，具体的讨论可以査看 Addan Expires or a Cache-Control Header。其它的几条规则也同样适用于Ajax:

Gizp压缩文件

减少 DNS査找次数

精简 JavaScript

避免跳转

配置 ETags

5、推迟加载内容  

你可以仔细看一页面，哪些内容是员面呈现时所必需首先加载的，哪些内容和结构可以稍后再加载？

把整个过程按照 onload事件分隔成两部分, JavaScript是一个理想的选择。例如,如果你有用于实现拖放和动画的 JavaScript,那么它就以等待稍后加载, 因为页面上的拖放元素是在初始化呈现之后才发生的。其它的例如隐藏部分的内容 (用户操作之后才显现的内容) 和处于折叠部分的图像也可以推迟加载。

当性能目标和其它网站开发实践一致时就会相得益彰。这种情况下,通过程序提高网站性能的方法告诉我们,在支持 JavaScript的情况下,可以先去除用户体验,不过这要保证你的网站在没有 Javascript也可以正常。在确定页面运行正常后,再加载脚本来实现如拖放和动画等更加花哨的效果。

6、预加载  

预加载和后加载看起来似乎恰恰相反, 但实际上预加载是为了实现另外一种目标,，预加载是在浏览器空闲时情求将来可能会用到的页面内容 (如图像、 样式表和脚本) ,使用这种方法，当用户要访同下一个页面时，页面中的内容大部分己经加载到缓存中了，因此可以大大改善访同速度。

下面提供了几种预加载方法:

无条件加载:触发 onload事件时,直接加载额外的页面内容

有条件加载:根据用户的操作来有根据地判断用户下面可能去往的页面并相应的預加载更面内容

有预期的加载:载入重新设计过的页面时使用预加载。这种情况经常出现在页面经过重新设计后用户抱怨“新的页面看起来很酷，但是却比以前慢”。同题可能出在用户对子你的旧站点建立完整的缓存，而对于新站点却没有任何缓存内容，因此你可以在访问新站之前就加载一部内容来避免这种结果的出现，在你的旧站中利用浏览器的空余时间、加载新站中用到的图像的和脚本来提高访问速度。

7、减少 DOM元素数量 

一个复杂的页面意味着需要下载更多数据，同时也意味着 JavaScript遍历 DOM的效率越慢，比如当你增加一个事件句柄时在500和5000个 DOM元素中循环效果肯定是不一样的。大量的 DOM元素的存在意味着页面中有可以不用移除内容只需要替换元素标签就可以精简的部分。你在页面布局中使用表格了吗?？你有没有仅仅为了布局而引入更多的 <di v>元素呢？也许会存在一个适合或者在语意是更贴切的标签可以供你使用。

8、根据域名划分页面内容 

把页面内容划分成若干部分可以使你最大限度地实现平行下载，由于 DNS査找带来的影响你首先要确保你使用的域名数量在2个到4个之间。例如，你可以把用到的HTML内容和动态内容放在 http://www.aaa.org/上，而把员面各种组件(图片、脚本、CSS)分别存放在ccc.example.org和bbb.example.org上。

9、使 iframe的数量最小 

ifrmae元素可以在父文档中插入一个新的 HTML文档，了解 iframe的工作理然后才能更加有效地使用它，这一点很重要

<iframe>优点:

解決加载缓慢的第三方内容如图标和广告等的加载问题

并行加载脚本

< iframe>的缺点:

即时内容为空，加裁也需要时间

会阻止页面加载

没有语意

10、不要出现404错误 

HTTP请求时间消耗是很大的，因此使用 HTTP请求来获得一个没有用处的响应(例如404没有找到页面)是完全没有必要的，它只会降低用户体验而不会有一点好处。

有些站点把404错误响应页面改为“你是不是要找***”，这虽然改进了用户体验但是同样也会浪费服务器资源(如数据库等) ，最糟糕的情况是指向外部JavaScript的链接出现同题并返回404代码。首先，这种加载会破坏并行加载；其次浏览器会把试图在返回的404响应内容中找到可能有用的部分当作JavaScr ipt代码来执行。