网站性能优化以内容优化

时间 2019-12-04

原文原文链接

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

优化手段：前端

可缓存的AJAX后端

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

延迟加载缓存

网站有些场景须要呈现大量图片，例如一个有多屏的页面，多数用户点击后不会彻底看完全部内容。那么实际上，页面在这一过程当中是100%的加载了多个屏幕的全部内容，并且若是内容过多，浏览器状态会一直显示加载状态，给用户感受很是很差。若是能够按需加载内容，集中加载首屏时间及用户可见区域，不但能够减小加载时间，还能够减小大量带宽成本，用户不可见区域须要用户下拉滚动条或翻屏时触发加载。服务器

预加载异步

预加载是在浏览器空闲时请求未来可能会用到的页面内容（图片，样式和脚本）。使用这种方法，当用户访问下一个页面时，页面中大部份内容已经加载到缓存中，所以能够大大提升访问速度。预加载的几种方法：布局

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

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

减小DOM元素数量

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

使iframe的数量最小

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

尽早刷新输出缓冲

当用户请求一个页面时，不管如何都会花费200-500ms用于后台组织HTML文件。在这期间，浏览器会一直空闲等待数据返回。在PHP中，可使用flush()方法，它容许你把已经编译的好的部分HTML响应文件先发给浏览器，这时浏览器就能够下载文件中的内容（脚本等）然后台同时处理剩余的HTML页面。输出缓冲应用最好的一个地方就是紧跟在<head />以后，由于HTML的头部分容易生成并且头部每每包含css和JavaScript的文件，这样浏览器就能够在后台编译剩余HTML的同时并行下载它们。当用户进行页面请求时，服务端须要花费200-500ms时间来拼合HTML，将写在head和body之间，释放缓冲，这样能够将文件头先发送出去，而后再发送文件内容，提升效率。

使用现代化布局

减小使用table，尽可能使用<header>、<footer>等HTML5语义化的标签，除了能提升页面加载性能外，还能提升代码的可维护性。

减小HTML大小

编写代码时为告终构清晰，会使用空格或者TAB进行代码缩进等来保证代码可读性。因此，在代码上线前对HTML进行一次Minify操做。还有一个减小HTML大小的方案是使用前端模板，将重复的内容（例如列表），以基础模板的形式发送到前端，而后使用js到后端获取以JSON为格式的数据，再使用模板引擎将数据渲染出来。使用这种“JS+JSON”的方式能够减小后端渲染HTML标签带来的带宽浪费，从而提升性能。HTML大小减小10%，服务器的QPS就能提升10%。