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

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

JS很快,在JS中修改DOM对象也很快。在JS的世界里,一切都是简单而快速的。但DOM操作不是JS的独舞,而是两个模块之间的协作。

JS很快,在JS中修改DOM对象也很快。在JS的世界里,一切都是简单而快速的。但DOM操作不是JS的独舞,而是两个模块之间的协作。

JS引擎和渲染引擎(浏览器内核)是独立实现的。当我们使用js来操作DOM时,它本质上是js引擎和渲染引擎之间的一种跨境通信。跨境通信的实现并不简单,它是以网桥接口为桥梁的。

我们对DOM的操作不限于访问,而是修改它。当对DOM的更改导致其外观(样式)发生更改时,将触发回流或重画。

实质上,这个过程是由DOM修改触发的渲染树的变化引起的。重画不一定会导致回流,但回流肯定会导致重画。如果你想做一个艰难的比较,你可以做更多的回流比绘制,而且成本也更高。但***,他们都是吃表演,所以他们不善于挑选。在我们的开发中,我们应该从代码级别开始,尽量减少回流和重画的数量。

documentfragment接口表示没有父文件的最小文档对象。它用作文档的轻量级版本,用于存储已排列或未格式化的XML片段。由于文档片段不是真正的DOM树的一部分,因此其更改不会导致DOM树的重新呈现操作(回流),也不会导致性能问题。它显示为一个容器,与实际的DOM树分离以缓存批处理DOM操作。

当我们运行此代码时,我们可以得到与前两个相同的结果。如您所见,domsfragment对象允许我们调用各种domapi,就像真正的DOM一样,因此我们的代码质量是有保证的。而且它的身份也是非常纯粹的:当我们试图将它附加到真实的DOM中时,它会在交出其缓存的所有子节点后撤退,***地完成容器的任务,而不是出现在真实的DOM结构中。这种结构清晰的特性使得DOM片段作为一种经典的性能优化方法受到了广泛的欢迎。

事件循环中有两种异步队列:宏队列和微队列。

完整的EventLoop过程可以概括为以下阶段:

初始状态:调用堆栈为空。微队列为空,宏队列中只有一个脚本(整个代码)。

全局上下文(脚本标记)被推入调用堆栈以同步代码执行。在执行过程中,通过调用一些接口,可以生成新的宏任务和微任务,并将其推送到各自的任务队列中。执行同步代码后,脚本将从宏队列中删除。这个过程本质上是队列宏任务的执行和退出。

执行渲染操作并更新接口(黑板上的键)。

检查是否有webworker任务,如果有,则处理它。(此过程重复,直到两个队列都为空)

当我们使用Vue提供的接口或对更新数据作出反应时,此更新不会立即生效,而是会被推送到队列中。在适当的时间,队列中的更新任务将被批量触发。这是异步更新。

最典型的例子是,例如,有时我们会遇到以下情况:

我们在三个更新任务中修改同一状态三次。如果采用传统的同步更新策略,则需要对DOM进行三次操作。但实质上,需要呈现给用户的目标内容只是第三次的结果,也就是说,只有第三次的操作才有意义——我们白白浪费了两次计算。

但是,如果我们将这三个任务放入异步更新队列,它们将首先在JS级别批量执行。当进程进行渲染时,只需要对DOM操作一次就可以得到有意义的计算结果——这就是异步更新的好处。


17742004931 联系我们,谈您的需求

立即咨询 立即建站