思考 html是标签语言，只有JS才能实现判断、循环，而模版有指令、插值、JS表达式，能够实现判断、循环等，故模板不是html，因此模板一定是转换为某种JS代码，这种编译又是如何进行的？...它是一个对象数组，存储着原始的html属性名和值 attrsList: [], // 同上，区别是attrsMap是以键值对的方式保存html属性名和值的 attrsMap: {}, // 存储着该节点所有子节点的元素描述对象...（从栈里面弹出来）所以栈中的最后一项就是父元素 解析阶段，节点会被拉平，没有层级关系，通过观察可以发现节点树，可以发现是最里面的节点被解析完成，最后一个解析往往是父元素，故我们通过一个栈(stack)来记录节点的层级关系...optimize 优化器 优化器的作用主要是对生成的AST进行静态内容的优化，标记静态节点，为了每次重新渲染，不需要为静态子树创建新节点，可以跳过虚拟DOM中patch过程（即不需要参与第二次的页面渲染了...，但是父节点为动态节点的节点 generate 代码生成器 代码生成器的作用是通过AST语法树生成代码字符串，代码字符串被包装进渲染函数，执行渲染函数后，可以得到一份vnode JS的with语法 使用
第二种方式，通过对象的 constructor 属性来判断，对象的 constructor 属性指向该对象的构造函数，但是这种方式不是很安全，因为 constructor 属性可以被改写。...diff算法是怎么运作 每一种节点类型有自己的属性，也就是prop，每次进行diff的时候，react会先比较该节点类型，假如节点类型不一样，那么react会直接删除该节点，然后直接创建新的节点插入到其中...对树分层比较，两棵树 只对同一层次节点 进行比较。如果该节点不存在时，则该节点及其子节点会被完全删除，不会再进一步比较。 只需遍历一次，就能完成整棵DOM树的比较。...当发现节点不存在时，则该节点及其子节点会被完全删除掉，不会用于进一步的比较。 这样只需要对树进行一次遍历，便能完成整个 DOM 树的比较。...； 脚本是否并行执行：async属性，表示后续文档的加载和执行与js脚本的加载和执行是并行进行的，即异步执行；defer属性，加载后续文档的过程和js脚本的加载(此时仅加载不执行)是并行进行的(异步)，
而body是子节点，要访问到body标签，在脚本中应该写：document.body。 3.为什么浮动元素可以撑开父级容器？...也就是通过变量var声明全局对象的属性无法删除，我们还会发现和函数声明创建的全局对象属性也无法删除。...小结： JS并不是等待所有的JS代码加载完成之后才开始解析的，而是加载完一个JS代码块之后便对该代码块进行解析。...其中一个内部属性是[[Scope]]，由ECMA-262标准第三版定义，该内部属性包含了函数被创建的作用域中对象的集合，这个集合被称为函数的作用域链，它决定了哪些数据能被函数访问。...这里也说明了一个问题，函数体内的局部变量var i; 在函数执行完毕后并没有被销毁，依然保持着上次离开函数体时的值。 （5）JS变量的销毁 为什么没有被销毁，那么JS中变量什么时候才会被销毁呢？
，也就是prop，每次进行diff的时候，react会先比较该节点类型，假如节点类型不一样，那么react会直接删除该节点，然后直接创建新的节点插入到其中，假如节点类型一样，那么会比较prop是否有更新...，假如有prop不一样，那么react会判定该节点有更新，那么重渲染该节点，然后在对其子节点进行比较，一层一层往下，直到没有子节点 把树形结构按照层级分解，只比较同级元素。...对树分层比较，两棵树 只对同一层次节点 进行比较。如果该节点不存在时，则该节点及其子节点会被完全删除，不会再进一步比较。 只需遍历一次，就能完成整棵DOM树的比较。...当发现节点不存在时，则该节点及其子节点会被完全删除掉，不会用于进一步的比较。 这样只需要对树进行一次遍历，便能完成整个 DOM 树的比较。...如下两个图所示： 介绍一下Vue中的Diff算法 在新老虚拟DOM对比时 首先，对比节点本身，判断是否为同一节点，如果不为相同节点，则删除该节点重新创建节点进行替换 如果为相同节点，进行patchVnode
代码示例 // 某个需要被监控的 dom 元素。...属性 描述 type 根据变动类型的不同，值可能性：attributes，characterData、childList target 触发通知的DOM节点 addedNodes 被添加的节点 removedNodes...被删除的节点 previousSibling 被添加或被删除的节点的前一个兄弟节点 nextSibling 被添加或被删除的节点的后一个兄弟节点 attributeName 发生变更的属性的名称 attributeNamespace...发生变更的属性的命名空间 oldValue 果 type 为 characterData，则返回该节点变化之前的文本数据；如果 type为 childList，则返回 null 方法详解 observe...本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
将根节点最大的堆叫做最大堆或大根堆，根节点最小的堆叫做最小堆或小根堆。 堆是线性数据结构，相当于一维数组，有唯一后继。 栈（Stack） 栈在计算机科学中是限定仅在表尾进行插入或删除操作的线性表。...进行插入操作的端称为队尾，进行删除操作的端称为队头。队列中没有元素时，称为空队列。 队列的数据元素又称为队列元素。在队列中插入一个队列元素称为入队，从队列中删除一个队列元素称为出队。...因为队列只允许在一端插入，在另一端删除，所以只有最早进入队列的元素才能最先从队列中删除，故队列又称为先进先出（FIFO—first in first out） 什么是Event loop？...JS调用栈 JS调用栈采用的是后进先出的规则，当函数执行的时候，会被添加到栈的顶部，当执行栈执行完成后，就会从栈顶移出，直到栈内被清空。...每个 await，会新产生一个promise,但这个过程本身是异步的，所以该await后面不会立即调用。
,旧节点) 将一个新的节点插入到旧节点的前边 父节点.replaceChild(新节点,旧节点) 使用一个新的节点去替换旧节点 父节点.removeChild(子节点) 删除指定的子节点 推荐方式...# 绑定事件的方式 可以在标签的事件属性中设置相应的JS代码 例子： 可以通过为对象的指定事件属性设置回调函数的形式来处理事件 例子： # 事件对象 当响应函数被调用时，浏览器每次都会将一个事件对象作为实参传递进响应函数中...， 这样当事件被触发时，响应函数将会按照函数的绑定顺序执行 这个方法不支持IE8及以下的浏览器 attachEvent() 在IE8中可以使用attachEvent()来绑定事件 参数： 事件的字符串...，开始拖拽 onmousedown 当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove 当鼠标松开时，被拖拽元素固定在当前位置 onmouseup 提取一个专门用来设置拖拽的函数 /* * 提取一个专门用来设置拖拽的函数...对象表示法 JS中的对象只有JS自己认识，其他的语言都不认识 JSON就是一个特殊格式的字符串，这个字符串可以被任意的语言所识别， 并且可以转换为任意语言中的对象，JSON在开发中主要用来数据的交互
descriptor 将被定义或修改的属性的描述符 descriptor configurable 当且仅当该属性的 configurable 为 true 时，该属性描述符才能够被改变，同时该属性也能从对应的对象上被删除...enumerable 当且仅当该属性的 enumerable 为 true 时，该属性才能够出现在对象的枚举属性中。默认为 false 。...writable 当且仅当该属性的 writable 为 true 时，该属性才能被赋值运算符改变。默认为 false 。...script> 已经实现的简单的数据劫持, 那么有多个属性, 就要实现一个数据监听器 Observer ，能够对数据对象的所有属性进行监听，还需要一个订阅器 Dep 来收集这些属性的变动来通知订阅者 元素节点的...v-model , v-on:click , 就需要实现一个指令解析器 Compile ，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数 最后实现一个订阅者 Watcher
规定返回需要添加/删除的一个或多个类名的函数。...position:absolute来设置子元素相对于父元素的定位距离 l Position()函数用于返回当前匹配元素相对于其被定位的祖辈元素的偏移，也就是相对于被定位的祖辈元素的坐标。...该函数只对可见元素有效。 l 该函数返回一个坐标对象，该对象有一个left属性和top属性。Position()中的坐标参考系是以被定位的祖辈元素的左上角为原点（0，0），向右为正，向下为正。...，指定的元素集合前面 6 after（）和insertAfter() 在每个匹配元素之后插入内容 节点删除和复制 1 remove（） 删除匹配的元素集合中所有的子节点（...empty（）删除匹配的元素集合中所有子节点，选中的元素保留，仅删除子节点，内容删除，元素依然保留 4 clone（）复制节点，选中元素进行复制 <script type="text/
：key和type相同表示可以复用节点key不同直接标记删除节点，然后新建节点key相同type不同，标记删除该节点和兄弟节点，然后新创建节点组件通信的方式有哪些⽗组件向⼦组件通讯: ⽗组件可以向⼦组件通过传...当发现节点不存在时，则该节点及其子节点会被完全删除掉，不会用于进一步的比较。这样只需要对树进行一次遍历，便能完成整个 DOM 树的比较。...一个 会遍历其所有的子 元素，并仅渲染与当前地址匹配的第一个元素。...，为其中的每一项增加唯一key属性，以方便React的diff算法中对该节点的复用，减少节点的创建和删除操作render函数中减少类似onClick={() => {doSomething()}}的写法...componentWillReceiveProps调用时机已经被废弃掉当props改变的时候才调用，子组件第二次接收到props的时候React 性能优化shouldCompoentUpdatepureComponent
滚动回调函数 scrollSensitivity 距离滚动区域多远时，滚动滚动条 scrollSpeed 滚动速度 [countUp.js-数字滚动效果] darkmode-js Darkmode.js...获取上、下级html元素 js删除html元素方法] js获取下级html元素:htmlEle.childNode; js获取上级html元素:htmlEle.parentNode; js删除当前html...元素: htmlEle.removeNode(true); js删除子级html元素:parEle.removeChild(childEle); Object.values() Object.values...，如果该元素没有父节点，或者父节点不是一个 DOM [元素]，则返回 null。...如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素 注意： 这种方法会改变原始数组。 返回值 如果仅删除一个元素，则返回一个元素的数组。如果未删除任何元素，则返回空数组。
该查找法仅适用于线性表的顺序存储结构，不适合链式存储结构，且要求元素按照关键字有序排序。 分块查找 分块查找的基本思想：将查找表分为若干个子块。...当被删除的关键字在终端结点中时，有下列几种情况： 直接删除关键字：若被删除关键字所在结点的关键字个数>⌈m/2⌉-1，表明删除该关键字后仍满足B树的定义，则直接删除该关键字 兄弟够借：若被删除关键字所在结点删除前的关键字个数...image.png 删除8：因为删除8后，不破坏树的性质，所以直接删除即可 image.png 删除16：这导致该节点只剩下一个13节点，不满足节点内元素个数为2~4个的要求了。所以需要调整。...这里可以向孩子借节点 image.png 删除15：删除15后同样需要调整。调整的方式是18上升，17下降到原来15的位置 image.png 删除4：删除4后该节点只剩下5，需要调整。...散列函数 散列函数：一个把查找表中的关键字映射成该关键字对应的地址的函数，记为Hash(key)=Addr。
当提供唯一的键值 IS 时，将根据对键的更改对元素进行重新排序（并且不使用新数据对它们进行修补），如果删除了 key（例如，删除列表中的项目时），则对应的元素节点也被销毁或删除。 请注意下图： ?...我们看到三个列表项被渲染为三个子组件节点。这些子组件都包含一个 span 标记和一个输入框，可能还包含一个本地状态对象（可选）。...文档对象模型或 DOM 定义了一个接口，该接口允许 JavaScript 之类的语言访问和操作 HTML 文档。元素由树中的节点表示，并且接口允许我们操纵它们。...这时你可以将组件包含在 keep-alive 元素中。keep-alive 元素缓存该组件并从那里获取它，而不是每次都重新渲染它。 14. 在大型 Vue 程序中管理状态的推荐方法是什么？为什么？...在声明或注册组件时，Vue 接受提供 Promise 的工厂函数。然后可以在调用该组件时对其进行“解析”。 通过仅加载基本组件并把异步组件的加载推迟到未来的调用时间，可以节省带宽和程序加载时间。
添加、删除、更新DOM节点 通过display: none隐藏一个DOM节点 通过visibility: hidden隐藏一个DOM节点：只触发重绘 移动或者给页面中的DOM节点添加动画 添加一个样式表...比如，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？...引用计数 (reference counting) 引用计数的策略是跟踪记录每个值被使用的次数，当声明了一个变量并将一个引用类型赋值给该变量的时候这个值的引用次数就加1，如果该变量的值变成了另外一个，则这个值得引用次数减...变量提升 仅针对使用var声明变量的情况，使用let声明不会提升 JavaScript 中，函数及变量的声明都将被提升到函数的最顶部，函数被提升到变量声明之上。...不允许删除一个不允许删除的属性 变量名不能使用保留关键字 由于一些安全原因，在作用域eval()创建的变量不能被调用 禁止this关键字指向全局对象（因此，使用构造函数时，如果忘了加new，this不再指向全局对象
概述 * 是 javaScript 的框架 2. js与jq的互转 * js ---> jq $(js) * jq ---> js jq[索引]、jq.get(索引) # jq 可以看成是...删除属性 * prop() 获取/设置元素的属性 * removeProp() 删除属性 - 对class属性操作...对象1和对象2是兄弟关系 ⑤ remove():移除元素 * 对象.remove():将对象删除掉 ⑥ empty():清空元素的所有后代元素。...* 对象.empty():将对象的后代元素全部清空，但是保留当前对象以及其属性节点 6. 动画 1....) - 当单击jq对象对应的组件后，会执行fn1.第二次点击会执行fn2.....
当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。...1）创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元素 createTextNode() //创建一个文本节点...= result[result.length - 1] && result.push(v); //仅与result最后一个元素比较 });} 10.快速排序 function quickSort...js可以通过构造函数和原型的方式模拟实现类的功能。 另外，js类式继承的实现也是依靠原型链来实现的。 原型式继承与类式继承 类式继承是在子类型构造函数的内部调用超类型的构造函数。...，因此，isPrototypeof()方法也会返回true 在js中，被继承的函数称为超类型（父类，基类也行），继承的函数称为子类型（子类，派生类）。
按节点间关系查找，节点树包含所有节点，分为元素和文本 ①....，这种查找方式会连看不见的空字符也算文本节点，会对结果产生一定的干扰，解决方法是按仅包含元素节点的树结构去查找。...按 class 属性查找 parent.getElementsByClassName("class") 按 class 属性查找可在任意父元素上调用，该属性不要求完整匹配，只要包含即可，它会返回多个元素组成的集合...仅获取/修改内联样式: elem.style.css 属性名 ①....捕获: 由外向内，记录各级父元素绑定的事件处理函数 (2). 目标触发: 首先执行目标元素上的事件处理函数 (3). 冒泡: 由内向外，反向执行捕获阶段记录的处理函数 22.
Keys是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识在开发过程中，我们需要保证某个元素的 key 在其同级元素中具有唯一性。...在 React Diff 算法中React 会借助元素的 Key 值来判断该元素是新近创建的还是被移动而来的元素，从而减少不必要的元素重渲染。...图片参考：前端react面试题详细解答diff算法是怎么运作每一种节点类型有自己的属性，也就是prop，每次进行diff的时候，react会先比较该节点类型，假如节点类型不一样，那么react会直接删除该节点...，然后直接创建新的节点插入到其中，假如节点类型一样，那么会比较prop是否有更新，假如有prop不一样，那么react会判定该节点有更新，那么重渲染该节点，然后在对其子节点进行比较，一层一层往下，直到没有子节点...这是一个发生在渲染函数被调用和元素在屏幕上显示之间的步骤，整个过程被称为调和。
DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。 ? ? HTML文档可以说由节点构成的集合，三种常见的DOM节点: 1....元素节点：上图中、、等都是元素节点，即标签。 2. 文本节点:向用户展示的内容，如里的内容JavaScript、DOM、CSS等文本。 3....属性节点:元素属性，如标签的链接属性href="http://www.imooc.com"。...： 无非就是用JS操作DOM对象而已 JS的引入方式 JS代码可在html中任意位置编写，但浏览器解析代码是从上到下的，需注意此时html是否已经解析该标签，能让JS能否获取该DOM对象，所以有时会把代码放到...作用域 情况1：函数内没找到该参数，会一直外部继续找，直到全局空间（函数外）寻找window属性 情况2：var声明变量；在函数内声明仅属于该函数内的局部变量。
('被点击了') }) 事件监听三要素： 事件源：那个dom元素被事件触发了，要获取dom元素 事件：有什么方式触发，比如鼠标点击click 事件触发时调用的函数 版本 DOM L0 语法：事件源.on...结点的删除 删除节点和隐藏节点（display:none） 有区别的： 隐藏节点还是存在的，但是删除，则从html中删除节点在 JavaScript 原生DOM操作中，要删除元素必须通过父元素删除 语法...，同样的事件将会在该元素的所有祖先元素中依次被触发 简单理解：当一个元素触发事件后，会依次向上调用所有父级元素的同名事件 事件冒泡是默认存在的 事件捕获 从DOM的根元素开始去执行对应的事件 (从外到里...) 匿名函数无法被解绑 事件委托 事件委托其实是利用事件冒泡的特点， 给父元素添加事件，子元素可以触发 优点：给父级元素加事件（可以提高性能） 实现：事件对象.target 可以获得真正触发事件的元素...JavaScript 内置的一个用来让代码延迟执行的函数，叫 setTimeout 语法：setTimeout(回调函数,等待的毫秒数) setTimeout 仅执行一次，简单来说把一段代码延迟执行
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
