DOM 的本质是什么知乎

2024-10-31

DOM的本质和方法

<JavaScript DOM编程艺术> 读书笔记一句话解释DOM: DOM,即我们所看到的网页,其在浏览器背后的文档结构(树状分支结构),涵盖了每一个节点(称之为对象).可以通过JS等语言去操控改变每一个节点,达到我们想要呈现的效果. DOM实际上是以面向对象方式描述的文档模型. DOM是对象,JS是语言,语言可以操作对象 DOM 是HTML文档结构,其实就是为了能让JS操作html元素而制定的一个规范,dom 的根本就是 document 对象,改对象有很多属性和方法,例如创建节点.复制

React 入门与实战-课时7 虚拟DOM的本质和目的

DOM树的概念: 一个网页呈现的过程: 1.浏览器请求服务器获取页面HTML代码 2.浏览器先在内存中,解析DOM结构,并在浏览器内存中,渲染出一颗DOM树: 3.浏览器把DOM树,呈现到页面上: React虚拟DOM的本质和目的本质:用JS对象,来模拟DOM元素和嵌套关系: 目的:就是为了实现页面元素的高效更新:

Virtual DOM 系列一：认识虚拟DOM

1. 什么是Virtual DOM? Virtual DOM(虚拟DOM)是指用JS模拟DOM结构.本质上来讲VD是一个JS对象,并且至少包含三个属性:tag(html标签),props(标签的属性,如class),children(子元素对象). <div class="setting-menu"> <ul> <li>Picture</li> <li>Sound</li> <li>Time</l

谈谈Vue/React中的虚拟DOM(vDOM)与Key值

谈谈Vue/React中的虚拟DOM(vDOM)与Key值一.DocumentFragment 在了解虚拟DOM前,先来了解DOM的一个对象属性--DocumentFragment. 在一次操作中,需要频繁操作DOM时,就可以先将要改变的节点附在DocumentFragment上,之后再将该对象渲染到DOM中,改方法只对DOM进行了一次操作,可以显著提高性能. 但是该方法只适用于局部操作,而在真实的项目中,需要的不仅仅是DocumentFragment,于是就有了虚拟DOM的产生紧接着,对于

DOM对象

DOM是以层次结构组织的节点或信息片断的集合.文档对象模型(Document Object Model)是给HTML与XML文件使用的一组API.DOM的本质是建立网页与脚本语言或程序语言沟通的桥梁. 浏览器对象是一个分层结构,也称为文档对象模型,如下图所示: 从上图可以看出: (1)打开网页后,首先看到的是浏览器窗口,即顶层的window对象. (2)其次,看到的是网页文档的内容,即document文档. (3)定位对象: window.document.myform.text1 或 docu

Dom对象和JQuery对象的详细介绍及其区别

一直搞不清Dom对象和JQuery对象之间的区别,今天好好总结下 1.dom对象(摘抄自百度百科http://baike.baidu.com/link?url=4L8bZ7kW6kE-it4F-1LUIgaPhjuTTPIVJu9wZafjm-M7QJw5J8kkAWUpItGBb-eoEXK9-q8vwmz6funpAOfQsa) DOM—Document Object Model,它是W3C国际组织的一套Web标准.它定义了访问HTML文档对象的一套属性.方法和事件. DOM是以层次结构组织

深入理解react中的虚拟DOM、diff算法

文章结构: React中的虚拟DOM是什么? 虚拟DOM的简单实现(diff算法) 虚拟DOM的内部工作原理 React中的虚拟DOM与Vue中的虚拟DOM比较 React中的虚拟DOM是什么? 虽然React中的虚拟DOM很好用,但是这是一个无心插柳的结果. React的核心思想:一个Component拯救世界,忘掉烦恼,从此不再操心界面. 1. Virtual Dom快,有两个前提 1.1 Javascript很快 Chrome刚出来的时候,在Chrome里跑Javascript非

react中虚拟DOM的基本概念

react中的核心概念 1.DOM的本质是什么: 浏览器中的概念,用js对象来表示页面上的元素,并提供操作DOM对象的API 2.什么事react中的虚拟DOM:是框架中的概念,是程序员用js对象来模拟页面上的DOM和DOM 的嵌套 3.为什么要实现虚拟DOM:为了实现页面中DOM元素的高效更新 4.DOM和虚拟DOM的区别: DOM:浏览器中提供的概念,用js对象表示页面上的元素,并提供操作议元素的API 虚拟DOM:手动用js对象来模拟DOM元素和嵌套关系 <!DOCTYPE html>&

直接操作DOM一定比虚拟DOM操作耗时，diff算法，key值，虚拟 DOM的定义

直接操作DOM一定比虚拟DOM操作耗时吗? 或者一次直接DOM操作一定比一次虚拟DOM操作耗时吗? 1)虚拟DOM的本质就是一个JS对象,虚拟DOM减少了真实DOM的操作,当修改数据的时候,就是修改虚拟DOM产生全新的虚拟DOM, 新旧虚拟DOM使用diff算法,得到patch(也就是需要修改的部分),然后将这个patch打到浏览器的DOM上 (减少重绘和回流,从而达到性能优化的目的) 2)每次DOM操作会引起重绘或者回流,频繁的真实DOM的修改会触发多次的排版和重绘相当耗性能(完全增删改) 一

【React自制全家桶】二、分析React的虚拟DOM和Diff算法

一.React如何更新DOM内容: 1. 获取state 数据 2. 获取JSX模版 3. 通过数据 +模版结合,生成真实的DOM, 来显示,以下行代码为例(简称代码1) <div id=' abc '><span>hello world</ span></div> 4.生成代码1对应的虚拟DOM (简称代码2):(解释:虚拟DOM就是一个JS对象,用它来描述真实DOM) ['div', {id: 'abc'}, ['span', {}, 'hello

虚拟DOM与diff算法

虚拟DOM与diff算法虚拟DOM 在DOM操作中哪怕我们的数据,发生了一丢丢的变化,也会被强制重建整预DOM树.这么做,涉及到很多元素的重绘和重排,导致性能浪费严重只要实现按需更新页面上的元素即可,只需要把修改的数据,所对应的DOM元素重新构建一下,其它没有变化的数据,所对应的DOM节点不需要被强制更新如何按需更新页面上的元素只需拿到页面被更新前的内存中的DOM树,同时,再拿到页面更新前,新渲染出来的内存DOM树,然后,对比这两棵新旧DOM树,只需要找到那些需要被重新创建和修改的元素即

怎么理解虚拟 DOM？

一.前言现在web前端的开发,对于MVVM框架的运用,那是信手拈来,用的飞起.一个xxx-cli工具,就能初始化一套模板,再填充业务代码,打包部署即可.但是会用,是一个方面,大家有没有底层深入思考一下,这些框架核心的技术突破点在哪里?解决了哪些问题?作为一个爱主动学习的童鞋,我们得花点小时间稍微去研究一下才行.今天,我们就简单谈谈虚拟dom,来揭开它的神秘面纱. 首先看一道经典的面试题: "为什么我们需要虚拟 DOM?". 这个问题比较常见的回答思路是:"DOM 操作是很慢

Real DOM和 Virtual DOM 的区别？优缺点？

一.是什么 Real DOM,真实DOM, 意思为文档对象模型,是一个结构化文本的抽象,在页面渲染出的每一个结点都是一个真实DOM结构,如下: Virtual Dom,本质上是以 JavaScript 对象形式存在的对 DOM 的描述创建虚拟DOM目的就是为了更好将虚拟的节点渲染到页面视图中,虚拟DOM对象的节点与真实DOM的属性一一照应在React中,JSX是其一大特性,可以让你在JS中通过使用XML的方式去直接声明界面的DOM结构 const vDom = <h1>Hello Worl

Javascript基础篇小结

转载请声明出处博客原文随手翻阅以前的学习笔记,顺便整理一下放在这里,方便自己复习,也希望你有也有帮助吧第一课时入门基础知识点: 操作系统就是个应用程序只要是应用程序都要占用物理内存浏览器本身也是一个应用程序浏览器本身只懂得解析HTML 调用浏览器这个应用程序的一个功能绘制 1.javascript介绍 JavaScript操作DOM的本质是=获取+触发+改变目的:就是用来操作内存中的DOM节点修改DOM节点的属性过javascript语法组织逻辑代码操作DOM BOM(wi

scrolling 优化避免卡顿

让我们来瞧瞧在滚动时到底发生了什么.在理解这个问题之前,我们先简要的介绍下浏览器是如何向屏幕绘制内容的.这一切都是从 DOM 树(本质上就是页面中的所有元素)开始的.浏览器先检查拥有了样式的 DOM,然后找到那些它认为在滚动时不会改变的元素,然后将这些元素分组并对它们拍照(也就是层).这些层都需要绘制并栅格化为一个纹理,然后混合在一起成为你在屏幕上看到的图像. Chrome 的渲染细节 http://www.chromium.org/developers/design-documents

jQuery基础细节

使用CDN版的jQuery 用托管在公共CDN(Content Delivery Network,内容分发网络)上的jQuery库,CDN是一种内容分发网络,当用户请求其数据时,CDN智能的分配离用户最近的服务器提供服务.用户体验更好,用户列蓝旗很可能缓存了来自其他网站的同一个jQuery库,这意味着用户很可能不必真的向CDN服务器发送请求文件(而是直接从缓存中读取). 百度静态资源公共库 http://cdn.code.baidu.com/ 360CDN

史上前端面试最全知识点（附答案）---html & js & css

史上前端面试最全知识点(附答案) 一.html & js & css 1.AMD和CMD是什么?它们的区别有哪些? AMD和CMD是二种模块定义规范.现在都使用模块化编程,AMD,异步模块定义:CMD,通用模块定义.AMD依赖前置,CMD依赖就近.CMD的API职责单一,没有全局require,AMD的一个API可以多用. 2.web开发常见的漏洞. XSS(跨站脚本攻击):其原理是攻击者向有XSS漏洞的网站中输入(传入)恶意的HTML代码,当其它用户浏览该网站时,这段HTML代码会自动执

react的学习笔记

React中几个核心的概念### 虚拟DOM(Virtual Document Object Model) + **DOM的本质是什么**:浏览器中的概念,用JS对象来表示页面上的元素,并提供了操作 DOM 对象的API: + **什么是React中的虚拟DOM**:是框架中的概念,是程序员用JS对象来模拟页面上的 DOM 和 DOM嵌套: + **为什么要实现虚拟DOM(虚拟DOM的目的):**为了实现页面中, DOM 元素的高效更新 + **DOM和虚拟DOM的区别**: + **DO

CSS中的伪类与伪元素

在前端开发中,大家或多或少的有接触过CSS伪类和伪元素,使用伪元素的时候,总感觉和伪类很相似,但又不能详细的说出两者的区别和联系,那么两者到底有什么区别和联系呢? 在 W3C 中定义: 伪类:用于向某些选择器添加特殊的效果.应用于一组 HTML 元素. 伪类的作用获取页面中不存在的信息,即通过选择器找到那些不存在于DOM树中的信息以及不能被常规CSS选择器获取到的信息.一个元素可以同时设置多个伪类效果.伪类名称对大小写不敏感. 伪类有以下几种,截图引自W3School: 注: a:link /

JS高级-异步

单线程只有一个线程,同一时间只能做一件事原因:避免DOM渲染的冲突浏览器需要渲染DOM JS可以修改DOM结果 JS执行的时候,浏览器DOM渲染会暂停两段JS也不能同时执行(修改DOM就冲突) webworker支持多线程,但是不能访问DOM,本质JS还是单线程解决方案:异步 case1 { var i, sum = 0 for(i = 0; i < 100000000; i++) { sum += i } console.log(sum) } case2 { console.log(

DOM 的本质是什么 知乎

热门专题

DOM 的本质是什么知乎