摘要：页面内容就是网站想要传达比用户得信息，但是信息得传递也有高效和低效之分，内容优化得目的就是使用尽可能少的内容和更高效的方式，传达尽可能多的信息。延迟加载网站有些场景需要呈现大量图片，例如一个有多屏的页面，多数用户点击后不会完全看完所有内容。
页面内容就是网站想要传达比用户得信息，但是信息得传递也有高效和低效之分，内容优化得目的就是使用尽可能少的内容和更高效的方式，传达尽可能多的信息。
优化手段：
可缓存的AJAX
Ajax的好处就是从其后台传输信息的异步性而为用户带来反馈的即时性。但是，使用Ajax并不能保证用户不会在等待异步的JavaScript和XML响应上花费时间。在很多应用中，用户是否需要等待响应取决于Ajax如何来使用。Ajax是实时响应的，在浏览器接收到新的数据前，旧的数据被缓存，这样能够更好地提高效率。用客户端语言来判断用户当前的可视范围，只加载用户可视范围的内容。最主要的是图片，因为文字信息相对较小，其他多媒体内容相对占用服务器流量更多。
延迟加载
网站有些场景需要呈现大量图片，例如一个有多屏的页面，多数用户点击后不会完全看完所有内容。那么实际上，页面在这一过程中是100%的加载了多个屏幕的所有内容，而且如果内容过多，浏览器状态会一直显示加载状态，给用户感觉非常不好。如果可以按需加载内容，集中加载首屏时间及用户可见区域，不但可以减少加载时间，还可以减少大量带宽成本，用户不可见区域需要用户下拉滚动条或翻屏时触发加载。
预加载
预加载是在浏览器空闲时请求将来可能会用到的页面内容（图片，样式和脚本）。使用这种方法，当用户访问下一个页面时，页面中大部分内容已经加载到缓存中，因此可以大大提高访问速度。预加载的几种方法：
① 无条件加载，触发onload事件时，直接加载额外的页面内容。
② 有条件加载，根据用户的操作来有根据地判断用户下面可能去往的页面并相应的预加载页面内容。
减少DOM元素数量
一个复杂页面意味着需要下载更多数据，同时也意味着JavaScript遍历DOM的效率越慢。大量的DOM元素的存在意味着页面中有可以不用移除内容只需要替换元素标签就可以精简的部分。
使iframe的数量最小
iframe优点是解决加载缓慢的第三方内容如图标和广告等的加载问题。缺点即使内容为空，加载也需要时间，会阻止页面加载，尽可能减少iframes。
尽早刷新输出缓冲
当用户请求一个页面时，无论如何都会花费200-500ms用于后台组织HTML文件。在这期间，浏览器会一直空闲等待数据返回。在PHP中，可以使用flush()方法，它允许你把已经编译的好的部分HTML响应文件先发给浏览器，这时浏览器就可以下载文件中的内容（脚本等）而后台同时处理剩余的HTML页面。输出缓冲应用最好的一个地方就是紧跟在
使用现代化布局
减少使用table，尽量使用
减少HTML大小
编写代码时为了结构清晰，会使用空格或者TAB进行代码缩进等来保证代码可读性。所以，在代码上线前对HTML进行一次Minify操作。还有一个减少HTML大小的方案是使用前端模板，将重复的内容（例如列表），以基础模板的形式发送到前端，然后使用js到后端获取以JSON为格式的数据，再使用模板引擎将数据渲染出来。使用这种“JS+JSON”的方式可以减少后端渲染HTML标签带来的带宽浪费，从而提高性能。HTML大小减少10%，服务器的QPS就能提高10%。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/54087.html
摘要：浅谈网站性能之前端性能优化性能优化的目的无非是减少用户流量消耗，提升用户首屏体验，提升用户访问速度，让用户专注内容本身。前端性能优化减少请求数量基本原理在浏览器与服务器进行通信时，主要是通过进行通信。 最近项目慢慢走上正轨，需求趋于平稳，这才想起需要对整站进行性能优化。经过一段时间的学习，结合现在项目的实际性能情况，发现确实有许多地方可以进行优化。于是就开始了我的前端性能优化之旅。以下...
摘要：浅谈网站性能之前端性能优化性能优化的目的无非是减少用户流量消耗，提升用户首屏体验，提升用户访问速度，让用户专注内容本身。前端性能优化减少请求数量基本原理在浏览器与服务器进行通信时，主要是通过进行通信。 最近项目慢慢走上正轨，需求趋于平稳，这才想起需要对整站进行性能优化。经过一段时间的学习，结合现在项目的实际性能情况，发现确实有许多地方可以进行优化。于是就开始了我的前端性能优化之旅。以下...
摘要：业务和架构不分家，架构是建立在对业务的理解之上的。主键最好保持顺序递增，随机主键会导致聚簇索引树频繁分裂，随机增多，数据离散，性能下降。没有索引的更新，可能会导致全表数据都被锁住。 本博客并非全部原创，其实是一个知识的归纳和汇总，里面我引用了很多网上、书上的内容。也给出了相关的链接。 本文涉及的知识点比较多，大家可以根据关键字去搜索相关的内容和购买相应的书籍进行系统的学习。不对的地方...
阅读 3363·2021-10-08 10:15
阅读 5134·2021-09-23 11:56
阅读 1395·2019-08-30 15:55
阅读 407·2019-08-29 16:05
阅读 2692·2019-08-29 12:34
阅读 2004·2019-08-29 12:18
阅读 848·2019-08-26 12:02
阅读 1615·2019-08-26 12:00
