页面中事件绑定数量会直接影响页面的整体运行性能，因为每个事件的回调处理函数都是一个对象，占用一定的内存。如果事件的绑定数量越多，内存也随之增加。另外，回调处理函数需要与DOM节点进行交互，而JS引擎独立于渲染引擎，而DOM是位于渲染引擎，相互访问需要消耗一定的资源。加上操作DOM，会引起浏览器的重排或重绘，而影响页面的整体性能。

事件代理 (事件委托) 利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

因此如何控制事件绑定数量就很重要了，通常都是通过事件代理（事件委托）来解决类似的问题。不过有时借助了事件代理（事件委托），而页面的事件绑定数量也在不断地增加？这可能是某些“不好”代码导致的，那如何定位增加的原因就显得很关键了。这里可以通过chrome的DevTools来辅助诊断。

C、C++语言需要手动管理内存的分配与释放（常用方法：malloc(), calloc(), realloc()和free()等）。而JavaScript与Java、C#相似，内置了垃圾回收器，能自动管理内存的分配与释放。

内存生命周期:

1. 分配内存
2. 使用分配的内存(读与写操作)
3. 当应用程序不再需要时，释放掉已分配的内存

async与defer都是用来延迟（异步）加载脚本，但两者之间还是存在一些区别的，因此使用场景也有所不同。

Legend

在讲解之前，先看一个问题。如下图所示，外部样式表是否阻塞HTML解析（先不要看答案，可以自己思考和实验一下）：

一般z-index失效基本上都是不了解z-index是如何工作导致的（这没有看这篇blog之前，至少我也是这样的）。它不复杂，但如果不花时间去查看z-index文档，可能会不了解一些关键技术点。

不信？能否解答如下问题，作为检验你是否真正了解z-index：

博客由Hexo搭建，hexo是一款基于Node.js的静态博客框架。配合GitHub Pages
，将博客静态资源托管在托管在 GitHub 上。

快速开始

创建一篇新文章

1

$ hexo new "My New Post"

more: 🍁🍁