html页面外内容延迟,网站性能优化之内容优化

页面内容就是网站想要传达比用户得信息，但是信息得传递也有高效和低效之分，内容优化得目的就是使用尽可能少的内容和更高效的方式，传达尽可能多的信息。

优化手段：

可缓存的AJAX

Ajax的好处就是从其后台传输信息的异步性而为用户带来反馈的即时性。但是，使用Ajax并不能保证用户不会在等待异步的JavaScript和XML响应上花费时间。在很多应用中，用户是否需要等待响应取决于Ajax如何来使用。Ajax是实时响应的，在浏览器接收到新的数据前，旧的数据被缓存，这样能够更好地提高效率。用客户端语言来判断用户当前的可视范围，只加载用户可视范围的内容。最主要的是图片，因为文字信息相对较小，其他多媒体内容相对占用服务器流量更多。

延迟加载

网站有些场景需要呈现大量图片，例如一个有多屏的页面，多数用户点击后不会完全看完所有内容。那么实际上，页面在这一过程中是100%的加载了多个屏幕的所有内容，而且如果内容过多，浏览器状态会一直显示加载状态，给用户感觉非常不好。如果可以按需加载内容，集中加载首屏时间及用户可见区域，不但可以减少加载时间，还可以减少大量带宽成本，用户不可见区域需要用户下拉滚动条或翻屏时触发加载。

预加载

预加载是在浏览器空闲时请求将来可能会用到的页面内容(图片，样式和脚本)。使用这种方法，当用户访问下一个页面时，页面中大部分内容已经加载到缓存中，因此可以大大提高访问速度。预加载的几种方法：

① 无条件加载，触发onload事件时，直接加载额外的页面内容。

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

减少DOM元素数量

一个复杂页面意味着需要下载更多数据，同时也意味着JavaScript遍历DOM的效率越慢。大量的DOM元素的存在意味着页面中有可以不用移除内容只需要替换元素标签就可以精简的部分。

使iframe的数量最小

iframe优点是解决加载缓慢的第三方内容如图标和广告等的加载问题。缺点即使内容为空，加载也需要时间，会阻止页面加载，尽可能减少iframes。

尽早刷新输出缓冲

当用户请求一个页面时，无论如何都会花费200-500ms用于后台组织HTML文件。在这期间，浏览器会一直空闲等待数据返回。在PHP中，可以使用flush()方法，它允许你把已经编译的好的部分HTML响应文件先发给浏览器，这时浏览器就可以下载文件中的内容(脚本等)而后台同时处理剩余的HTML页面。输出缓冲应用最好的一个地方就是紧跟在

之后，因为HTML的头部分容易生成而且头部往往包含css和JavaScript的文件，这样浏览器就可以在后台编译剩余HTML的同时并行下载它们。当用户进行页面请求时，服务端需要花费200-500ms时间来拼合HTML，将写在head和body之间，释放缓冲，这样可以将文件头先发送出去，然后再发送文件内容，提高效率。