【前端如何进行网站性能优化】前端如何进行网站性能优化

发布时间:2020-03-03 11:30:00

近年来,随着移动互联网的强势崛起,越来越多的网民开始在手机上“冲浪”。为了吸引用户浏览,各大手机厂商开始生产布局越来越复杂、效果越来越炫目的手机应用产品。然而,它也带来了越来越多的问题,如:文件越来越大,下载和运行速度越来越慢等。这些问题的影响直接导致用户流失率越来越高。据统计:

【前端如何进行网站性能优化】前端如何进行网站性能优化

近年来,随着移动互联网的强势崛起,越来越多的网民开始在手机上“冲浪”。为了吸引用户浏览,各大手机厂商开始生产布局越来越复杂、效果越来越炫目的手机应用产品。然而,它也带来了越来越多的问题,如:文件越来越大,下载和运行速度越来越慢等。这些问题的影响直接导致用户流失率越来越高。据统计:

从图中可以看出,71%的用户希望移动页面和PC页面一样快,74%的用户能够容忍5秒的响应时间,所以必须保证移动页面有足够的速度。移动页面的速度与三个因素有关:移动网络带宽的速度、设备性能(CPU、GPU、浏览器)和页面本身。作为开发人员,用户的移动网络带宽环境以及拥有的设备都超出了我们的控制范围。但是页面本身的大小,我们可以通过自己的方式,来改进和升级。

接下来,我们来谈谈如何优化移动页面。首先,我们需要注意一个页面从展示开始到结束需要经历的四个阶段

常规方法如下:1。预加载 2。按需加载。

这种加载方法可以增强用户的体验,让用户在等待页面加载时不会感到那么无聊。

这种加载方法是使***个屏幕上的资源记录尽可能完整。加载***个屏幕后记录***个屏幕以外的资源,可以节省加载时间,提高用户体验。

在浏览器下载了页面中的所有组件——HTML标记、JavaScript、CSS、图片之后,它将解析并生成两个内部数据结构——dom树和呈现树。DOM树表示页面结构,呈现树表示DOM节点的显示方式。要显示的DOM树中的每个节点在呈现树种类中至少有一个对应的节点(值为deploy的隐藏DOM元素为none,呈现树中没有对应的节点)。渲染树中的节点称为“框架”或“框”,它们符合CSS模型的定义,并将页面元素理解为具有填充、边距、边框和位置的框。一旦构建了DOM和呈现树,浏览器就开始显示(绘制)页面元素。当DOM的变化影响到元素的几何属性(宽度或高度)时,浏览器需要重新计算元素的几何属性,其他元素的几何属性和位置也会受到影响。浏览器将使渲染树的受影响部分失效,并重新构造渲染树。这个过程叫做重排。重新排列完成后,浏览器会将受影响的零件重绘到屏幕上,此过程称为重绘。由于浏览器的流程布局,渲染树的计算通常只需遍历一次。除了表及其内部元素外,可能需要多次计算才能确定渲染树中其节点的属性,这通常需要相当于等效元素三倍的时间。这就是我们应该避免使用表进行布局的原因之一。并非所有的DOM更改都会影响几何属性。例如,更改元素的背景色不会影响元素的宽度和高度。在这种情况下,只会重新绘制。为了提高网页的性能,我们需要减少“重排”和“重画”的频率和成本,并尽量减少重新渲染的次数。Dom和样式更改都会触发重新呈现。不过,浏览器已经非常智能。它将尝试将所有更改放在一起,形成一个队列,然后一次执行它,以避免多次重新呈现。

在上面的代码中,div元素有两个样式更改,但是浏览器只会触发重新排列和重画。如果写得不好,它将触发两次重新排列和重画。

在上面的代码设置div元素的背景色之后,第二行要求浏览器给出元素的位置,因此浏览器必须立即重新排列。

一、布局信息更改时尽量不要查询(这将导致强制刷新呈现队列)。二、同一个DOM的多个属性更改可以一起写入(减少DOM访问,并将强制刷新呈现队列的风险降低到0)。三、设置需要多次重新排列的元素,将position属性设置为absolute或fixed,使元素与文档流分离,其更改不会影响到其他元素。例如,具有动画效果的元素***设置为***定位。在渲染的另一个方面,我们尽量使用CSS3来处理移动端的动画,而不是JS。这样可以减少脚本的加载,硬件加速,避免渲染树的计算和渲染。


联系我们,谈您的需求

立即咨询