当前位置: 首页> SEO实战> 为什么你的网站这么慢?本文将带您掌握前端HTML5性能优化的技巧
为什么你的网站这么慢?本文将带您掌握前端HTML5性能优化的技巧
发布日期:2020-05-16 11:00:00

在具有多个嵌套循环的程序中,分离多个独立循环比将它们嵌套在一个循环中更有利。

优化循环有三种方法:降低每次迭代的成本、减少迭代次数或重新设计应用程序。

在测试过程中,只能模拟真实的环境:如低端机器和低速网络。

对于连续页面之间差异较小的应用程序,使用Ajax技术可以带来显著的改进。

HTML页面显示后,动态更改页面元素或调整CSS样式将导致浏览器重绘。性能的损失直接取决于动态变化的范围:如果只改变元素的颜色和其他信息,则只重新绘制该元素;如果添加或删除节点或调整节点的位置,则其同级节点也将同时重新绘制。

减少重绘并不意味着不重绘,而是要注意重绘范围:

以更改标签的背景色、宽度和颜色为例。

以上三个重绘将被执行,而通过CSS而不是JavaScript的多个执行将只执行一次。

当浏览器解析正则脚本标记时,在解析和执行之前需要等待脚本下载,而后续的HTML代码只能等待。CSS文件介绍应该放在头中,因为这是HTML呈现的一个基本元素。

为了避免阻塞加载,您应该将脚本放在文档的末尾,而CSS需要放在头部!

深度嵌套的节点在初始化构建时通常需要更多的内存,而在遍历节点时会慢一些,这与浏览器构建DOM文档的机制有关。浏览器将整个HTML文档的结构存储为DOM“树”结构。文档节点的嵌套级别越深,DOM树级别就越深。

通常,在不设置缓存的情况下,每次刷新页面时,都会重新读取服务器的文件。如果设置了缓存,则可以在本地获取所有文件,这将显著提高页面效率。

我们可以通过设置页眉的expires来定义页面过期时间,并将过期时间设置得稍长一点以到达“永久”缓存。

当然,如果项目代码发生更改,因为客户端缓存文件无法获取最新的文件,这将导致显示错误。基于此问题的解决方案是向链接文件添加时间戳。如果时间戳更改,浏览器将认为它是一个新文件,并从服务器请求最新的文件。

所有与请求数据相关的文件都应尽可能压缩,如JavaScript文件、CSS文件和图片文件,特别是图片文件。如果没有高清要求,可以在使用前压缩。

小容量、大容量的文件比大容量、小容量的文件加载速度快,因此有时可以考虑将多个JS文件和多个CSS文件合并在一起。

此外,有几种方法可以减小HTML文档的大小:

实际上,图像合并就是将一些背景图片整合到一个图片文件中,然后使用CSS的“背景图片”、“背景重复”、“背景位置”组合来定位背景。背景位置可以准确定位带有数字的背景图片的位置。

一个页面需要使用多个图标,这些图标可以组合成一个图像,然后只需要发送一次图片请求,并通过CSS定位拆分图标。

使用iframe不会增加同一域名下的并行下载数量。浏览器与同一域名的连接始终在浏览器级别共享连接池。在页面加载过程中,iframe元素将阻止触发父文档的onload事件。Iframe是HTML标签中最消耗资源的标签,其代价比DOM高1-2个数量级,如div、script和style。

为了避免onload事件被阻塞,可以使用JavaScript动态加载iframe元素,或者动态设置iframe的SRC属性(但它仅在高级浏览器IE9及更高版本中有效)。

一般来说,对于同一域名的图片,浏览器最多可以并行下载2-4个线程(不同的浏览器有不同的并发下载)。在下载其他图片之前,不会下载同一域名的其他图片。

有时,图片数据太多。一些公司的解决方案是将图片数据分成多个域名的服务器。它一方面将服务器的请求压力分为多个硬件服务器,另一方面利用了浏览器的特点。(你可以去新浪和腾讯的门户网站查看。这些大型站点的同一页面上加载的图片可能由多个站点提供。)

注意:一个HTML请求的域名不能太多(2-3几乎相同),这可能会导致不同服务器的连接时间不同,但会影响速度。

例如,imgsrc=“\”ahref=“\”是一个非常不受欢迎的设置。即使链接为空,旧浏览器也会以固定的步骤发送请求信息。

此外,不建议使用ahref=\“#\”/A。最好的方法是在链接中添加一个空的JS代码ahref=\“javascript:void();\”/A

Base64是一个字符串,它可以表示图片的所有信息,也就是说,通过

(s表示Base64代码的字符串)以显示图片。这样,就不需要向服务器发送请求,浏览器会将请求完全解析为图片。

目前,高级浏览器支持此功能,但需要注意两点:

如果HTML中的图像没有指定的大小(宽度和高度),或者代码中描述的大小与实际图像的大小不匹配,浏览器需要“回溯”图像并在图像下载后再次显示,这将需要额外的时间。

如果浏览器无法知道页面的编码字符集,则在执行脚本和呈现页面之前,它将缓存字节流,然后搜索可以解析的字符集,或者使用默认字符集解析页面代码,这将导致不必要的时间消耗。

渐进式增强设计的流行解释是:首先,编写一个满足所有浏览器的基本样式,然后为不同的高级浏览器编写一个更漂亮的样式

所有浏览器都支持以下代码:背景色:?2067f5;它满足浏览器的基本实际需要,而下面的背景图片:-WebKit grade是由不同的高级浏览器使用的,只要浏览器能识别,就可以执行此代码(不识别,CSS不会报错,直接忽略它)。

预加载和延迟加载是一种改善用户体验的策略。实际上,它并不能提高程序的性能,但它可以显著改善用户体验或减轻服务器的压力。

预加载意味着在当前用户请求所需的数据之后,页面会自动预加载下一个用户可能希望看到的数据,以便立即显示用户的下一个操作,依此类推。

延迟加载指示用户请求的内容和显示的内容。如果请求需要很长时间才能响应,则不建议延迟加载。

只有当返回的数据太多且请求时间太长时,才能使用此方法。最好实时返回所有正常数据。这种实现方法实际上会增加浏览器渲染时间和用户的整体等待时间,但从用户体验来看会更好。

所谓CDN是一种内容分发网络。它利用智能路由和流量管理技术,找到能够及时向访问者提供最快响应的加速节点,并将访问者的请求定向到提供内容服务的加速节点。

一般来说,您在成都(浏览器)购买北京卖家(服务器)的产品。北京卖家通过快递(CDN服务)寄送包裹。从北京到成都,你可以步行,坐汽车,火车或飞机,而CND快递会选择直飞的航班,因为这种快递方式是最快的。

当然,使用CDN有两种预防措施:

浏览器缓存带来的性能提升众所周知,但很多人并不知道浏览器缓存的过期时间、缓存删除、可以缓存哪些页面等,这些都可以由我们的程序员来控制。只要熟悉HTTP协议,就可以轻松控制浏览器。

所谓动态静态分离,就是将web应用程序的静态和动态内容放在不同的web服务器上,对动态和静态内容进行具体的处理,从而达到提高性能的目的。我们知道如果一个HTML有多个域名请求数据文件,它将改进

Tomcat服务器在处理静态和并发问题上比较薄弱,所以通常采用Apache+Tomcat、nginx+Tomcat等方式进行动态和静态的预先分离。

以Apache+Tomcat为例,其运行机制是:首先把页面请求给Apache,然后Apache分析请求信息是静态的还是动态的,静态的在本地处理,动态的由Tomcat处理。

这实际上是负载平衡的原型。这样的实现不需要开发人员做任何特殊的开发

把它交给服务器就行了。至于这个文件是从Apache还是tomcat获得的,开发人员不需要注意。

浏览器添加连接:在请求头中保持活动状态,告诉服务器“我支持长连接,如果您支持,请与我建立长连接”。如果服务器确实支持长连接,那么添加连接:在响应头中保持活动状态以告诉浏览器“我确实支持,那么让我们建立长连接”。服务器还可以通过keep alive:timeout=…,max=的头告诉浏览器连接失败的时间很长。

长连接的配置通常需要服务器支持这些设置。测试数据表明,使用长连接和不使用长连接的性能比较表明,Tomcat配置的MaxKeepAliveRequests的效率比Tomcat配置的MaxKeepAliveRequests高出近5倍。

HTTP协议支持gzip压缩格式。当服务器返回的HTML消息头包含内容编码:gzip时,它告诉浏览器此响应返回的数据已压缩为gzip格式。浏览器获取数据后,需要进行解压缩,这在一定程度上减轻了服务器传输数据的压力。

许多服务器已经支持通过配置将HTML信息自动压缩到gzip中,例如tomcat或流行的nginx。如果不能在服务器级别配置gzip压缩机制,则可以使用程序压缩。

在线咨询 电话咨询