前端入门到弃坑:Dom操作是否会带来性能问题

简介: 前端入门到弃坑:Dom操作是否会带来性能问题

image.png

1.页面的渲染过程

(1)Javascript:通过JS实现动画效果或者操作DOM实现交互

(2)Style:计算样式,如果样式有改变将重新计算,并返回给DOM

(3)Layout:根据DOM的样式,重新布局(重排)

(4)Paint:在多个渲染层上,对新的布局重新渲染(重绘)

(5)Composite:将绘制好的多个渲染层合并,显示到页面上

在页面生成时,至少进行一次布局和渲染,在后面用户不断地操作过程中会进行多次的重排和重绘,以至于影响页面的性能。

2.通过JS操作DOM影响页面性能的问题有

(1)访问和修改DOM

(2)修改DOM元素的样式,导致重绘或者重排

(3)通过对DOM元素的事件处理,完成与用户的交互功能

3.DOM操作对页面性能的影响

(1)DOM的修改会导致重排和重绘

重排是指元素的位置或者大小发生了改变,浏览器需要重新去计算渲染树,新的渲染树建立之后,浏览器会重新绘制所影响的元素

重绘是指元素的样式发生了变化,而大小和尺寸没有发生改变

(2)导致页面重排的一些操作

   内容改变:文本改变或者图片的尺寸改变

   DOM元素的几何属性改变:元素的宽高改变时,原来渲染树中的DOM节点会失效,浏览器会根据DOM的变化重新构建渲染树中的相关节点。如果父元素的几何属性发生变化时,会导致子元素以及兄弟元素的位置发生变化,从而引起重排。

   DOM树结构发生变化:添加DOM节点,修改DOM节点的位置以及删除某个节点都会对渲染树进行修改,从而导致重排。浏览器的布局是自上而下的,修改当前元素不会都之前的元素造成影响,但是会对之后的元素造成影响,导致重排。

   获取某些属性时:当获取一些属性值时,浏览器为了保证获取到正确的值也会引起重排。如元素的offsetTop,offsetLeft,offsetHeight,offsetWidth,scrollTop,scrollWidth,scrollLeft,scrollHeight、

   浏览器窗口尺寸发生改变时:浏览器窗口的尺寸发生改变时,会导致所有元素的尺寸发生变化,从而导致重排。

(3)导致页面重绘的一些操作

只修改元素的样式,而未修改元素的大小和位置,引起重绘

重排一定引起重绘,而重绘不一定引起重排

4.性能优化

(1)浏览器本身的优化策略

浏览器会维护一个队列,将所有引起重排和重绘的操作都放在这个队列里,当操作达到一定的数量或者时间间隔时,浏览器会进行一个批处理。这样可以让多次的重排重绘,变成一次。但是有时候一些特殊的style属性会使这种优化失效,例如offsetTop,scrollTop,clientTop等属性,这些属性都是要实时返回给用户的几何属性或者布局属性,因此浏览器需要立即执行,触发重排返回正确的值。

(2)最小化的重排和重绘

减少对渲染树的操作,并减少对一些style信息的请求。

   将多次样式改变属性合并成一次操作(仅适用于单个节点)

//javascript
        var el = document.getElementById("el");
        el.style.color = "red";
        el.style.height = "100px";
        el.style.width = "20px";

可以使用内联样式的cssText实现

var el = document.getElementById("el");
el.style.cssText = 'color: red; height:100px; width:20px'

还可以使用切换类名的方法

//CSS
        .active{   
            color: red;
            width: 20px;
            height: 100px;
        }
        //javascript
        var el = document.getElementById("el");
        el.className = "active";

        批量修改DOM  

   核心思想:

   让元素脱离文本流;对其进行多重改变;将元素带回文档中;

  a.  采用display属性隐藏元素,修改之后再显示元素,这样只在显示和隐藏元素是触发两次重排; 将多次需要重排元素,position属性设置为absolute和fixed这样就脱离文档流,元素的变化将不会影响其他元素。使用动画效果的元素最好设置成绝对定位。

 b.  使用文档片段创建一个子树,然后再拷贝到文档中。例如要一步获取一个列表中的元素,可以在内存中生成一个列表的HTML片段,然后再一次添加到文档中,而不是每循环一次添加一项。这样就只触发了一次重排。

 c.  将原始元素拷贝到一个独立节点中去,然后操作这个独立的节点,覆盖原始元素。

   缓存布局信息

当访问offsetTop这种属性时,会冲破浏览器本身的优化,所以应减少对布局信息的查询。可以将属性值赋值给局部变量来参与运算。

var a = el.offsetWidth;
    a.style.width = 1 + ++a +'px';
相关文章
|
2月前
|
前端开发 机器人 API
前端大模型入门(一):用 js+langchain 构建基于 LLM 的应用
本文介绍了大语言模型(LLM)的HTTP API流式调用机制及其在前端的实现方法。通过流式调用,服务器可以逐步发送生成的文本内容,前端则实时处理并展示这些数据块,从而提升用户体验和实时性。文章详细讲解了如何使用`fetch`发起流式请求、处理响应流数据、逐步更新界面、处理中断和错误,以及优化用户交互。流式调用特别适用于聊天机器人、搜索建议等应用场景,能够显著减少用户的等待时间,增强交互性。
640 2
|
1月前
|
JavaScript 算法 前端开发
虚拟 DOM 如何提高应用的性能?
虚拟 DOM 通过减少真实 DOM 操作、高效的 Diff 算法、提升渲染性能、跨平台能力以及优化内存管理等多种方式,全面提高了应用的性能,为用户提供了更流畅、高效的交互体验,尤其在构建大型、复杂的前端应用时,其性能优势更加显著。
42 1
|
1月前
|
缓存 前端开发 JavaScript
前端框架的数据驱动方式对性能有哪些影响?
前端框架的数据驱动方式对性能有哪些影响?
|
1月前
|
前端开发 JavaScript 搜索推荐
前端懒加载:提升页面性能的关键技术
前端懒加载是一种优化网页加载速度的技术,通过延迟加载非首屏内容,减少初始加载时间,提高用户访问体验和页面性能。
|
1月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
50 5
|
1月前
|
数据采集 缓存 监控
如何优化前端框架的数据驱动方式以提高性能?
综上所述,通过多种手段的综合运用,可以有效地优化前端框架的数据驱动方式,提高应用的性能,为用户带来更好的体验。同时,随着技术的不断发展和进步,我们需要不断探索和创新,以找到更适合的优化方法和策略。
|
1月前
|
存储 编解码 前端开发
惊!前端新手也能秒懂的高级技巧,轻松提升网页颜值与性能!
本文针对前端新手,介绍了三个简单易学的高级技巧,帮助提升网页的颜值和性能。包括使用CSS框架快速美化网页、优化图片资源加快加载速度,以及利用ARIA属性和媒体查询提高网页的可访问性和响应性。示例代码清晰,适合初学者上手实践。
41 3
|
1月前
|
编解码 前端开发 JavaScript
从入门到精通:揭秘前端开发中那些不为人知的优化秘籍!
前端开发是充满无限可能的领域,从初学者到资深专家,每个人都追求更快、更稳定、更用户体验友好的网页。本文介绍了四大优化秘籍:1. HTML的精简与语义化;2. CSS的优雅与高效;3. JavaScript的精简与异步加载;4. 图片与资源的优化。通过这些方法,可以显著提升网页性能和用户体验。
24 3
|
1月前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
143 1
|
1月前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
45 0