我们知道我们平时的页面都是有很多Dom组成，那虚拟Dom(virtual dom)到底是什么，简单来讲，就是将真实的dom节点用JavaScript来模拟出来，而Dom变化的对比，放到 Js 层来做。 下面是一个传统的dom节点，大家肯定都不陌生。 很简单，大家都能看懂，tag…

本文主要介绍了不同 DOM 级别下的事件处理程序，同时介绍了事件冒泡和捕获的触发原理和方法。熟练地使用不同级别的 DOM 事件并且解决相应的浏览器兼容性问题对我们的前端项目开发会很有帮助。

本文是博主最近处理一些网站卡顿问题的学习记录。 在讲DOM操作的最佳性能实践之前，先介绍下浏览器的基本渲染原理。浏览器渲染展示网页的主流程大致可以用下图表示： 需要着重指出的是，这是一个渐进的过程。为达到更好的用户体验，浏览器会力求尽快将内容显示在屏幕上。它不必等到整个 HTM…

mouseover：当指针设备移动到存在监听器的元素或其子元素的时候，mouseover事件就会被触发。 mouseout：事件在当指针设备（通常是鼠标）移出了附加侦听器的元素或关闭了它的一个子元素时触发。 mouseleave：指点设备（通常是鼠标）的指针移出某个元素时，会触…

DOM（Document Object Model）是网页上所有对象的基础。它描述文档的结构，并且为编程语言提供操作页面的接口。它被构造成逻辑树。每个分支以节点结束，每个节点包含有子节点。DOM API 有很多，在本文里面，我仅介绍一些我认为最有用的 API。 document…

hello~各位亲爱的看官老爷们大家好。估计大家都听过，尽量将CSS放头部，JS放底部，这样可以提高页面的性能。然而，为什么呢？大家有考虑过么？很长一段时间，我都是知其然而不知其所以然，强行背下来应付考核当然可以，但实际应用中必然一塌糊涂。因此洗（wang）心（yang）革（b…

我们常听到DOM0级事件，DOM1级事件，DOM2级事件处理，其实这里的DOM0，DOM1，DOM2和DOM级别是密切相关的。 最开始的时候，IE4和Netscape等浏览器各自实现自己的一套DOM api，没有一个统一的标准，对于开发者和用户来说是一件头疼的事，于是，1998…

在探讨 CSS、JS 对阻塞行为前，先建立如下的 html，后续的探讨都在这个 html 的基础上进行。 可以预见的是 html 加载完毕后页面会呈现一个蓝色的正方形。 对于没有 async 和 defer 属性的 script，当浏览器解析到 script 标签时会立即加载并…

@saiki：有一天，我的朋友向我提了一个有关 React 的问题： 组件化， 单向数据绑定，这些我都懂了。但是 React 为什么要用 Virtual DOM 呢？ 我的回答非常套路，“因为直接操作 DOM 比较低效，比较慢。” https://hashnode.com/post/the-one-thing-that-no-one-properly-explains-about-react-why-virtual-dom-cisczhfj41bmssp53mvfwmgrq