当前位置: 首页 > Web前端 > HTML

网站性能优化之内容优化

时间:2023-04-03 00:56:00 HTML

页面的内容就是网站想要传达给用户的信息,但是也有信息传递的高效率和低效率。内容优化的目的是尽可能少地使用内容并以更有效的方式使用。传达尽可能多的信息。优化方式:可缓存的AJAXAjax的好处在于其后台传输信息的异步??性和用户反馈的即时性。但是,使用Ajax并不能保证用户不会花时间等待异步JavaScript和XML响应。在许多应用程序中,用户是否需要等待响应取决于Ajax的使用方式。Ajax实时响应。在浏览器接收到新数据之前,将旧数据缓存起来,可以更好的提高效率。使用客户端语言判断用户当前可见范围,只加载用户可见范围内的内容。最重要的是图片,因为文字信息比较少,其他多媒体内容相对占用服务器流量比较多。延迟加载网站有些场景需要显示大量图片,比如一个页面有多个屏幕,大多数用户点击后不会完整阅读所有内容。所以实际上这个过程中页面加载了100%的多屏所有内容,如果内容过多,浏览器状态会一直显示加载状态,让用户感觉很不好。如果内容可以按需加载,首屏时间和用户可见区域可以集中加载,不仅可以减少加载时间,还可以减少很多带宽成本。用户不可见区域需要在用户下拉滚动条或翻转屏幕时触发。预加载预加载是在浏览器空闲时请求将来可能使用的页面内容(图像、样式和脚本)的过程。使用这种方法,当用户访问下一个页面时,页面上的大部分内容已经加载到缓存中,因此可以大大提高访问速度。预加载的几种方式:①无条件加载,当onload事件触发时,直接加载额外的页面内容。②条件加载,根据用户的操作判断用户接下来可能会去到的页面,并据此预加载页面内容。减少DOM元素的数量一个复杂的页面意味着需要下载更多的数据,也意味着JavaScript遍历DOM的效率更慢。大量DOM元素的存在意味着页面中有部分可以精简,无需删除内容,只需更换元素标签即可。尽量减少iframe的数量iframe的好处是解决图标、广告等第三方内容加载缓慢的加载问题。缺点即使内容为空,加载也需要时间,导致页面无法加载,尽量减少iframe。尽早刷新输出缓冲区当用户请求页面时,需要200-500毫秒在后台组织HTML文件。在此期间,浏览器将保持空闲状态等待数据返回。在PHP中,可以使用flush()方法,它可以让你先将HTML响应文件的编译部分发送给浏览器,然后浏览器可以在处理的同时下载文件中的内容(脚本等)剩余的文件在后台。HTML页面。应用输出缓冲的最佳位置之一是紧接在之后,因为HTML的头部很容易生成并且头部通常包含css和JavaScript文件,以便浏览器可以在后台编译剩余的HTML,同时并行下载它们。当用户发出页面请求时,服务器需要花费200-500ms来组装HTML,写入head和body之间,并释放缓冲区。这样可以先发送文件头,再发送文件内容,提高效率。使用现代布局减少表格的使用,并尝试使用HTML5语义标签,例如

。除了提高页面加载性能外,还可以提高代码的可维护性。缩减HTML大小在编写代码时,为了结构清晰,使用空格或TAB进行代码缩进,以保证代码的可读性。因此,在代码上线之前,对HTML进行了Minify操作。另一种减小HTML体积的方案是使用前端模板,将重复的内容(如列表)以基本模板的形式发送到前端,然后使用js到后端获取JSON格式的数据,然后使用模板引擎将数据渲染出来。使用这种“JS+JSON”的方式可以减少HTML标签后端渲染带来的带宽浪费,从而提升性能。如果HTML大小减少10%,服务器的QPS可以提高10%。