DOM 的全称是 Document Object Model,中文意思是文档对象模型,在浏览器中,主要用来与 HTML 打交道并使用 DOM API 来访问文档中的数据。
DOM 的访问与修改
如下代码,我们访问 p 标签并每次设置该标签的值,然后在 Chrome 下 执行 performance 分析过程,发现一个这段代码居然执行了 695ms,我们知道 JavaScript 中当一个任务执行超过 60ms 就属于是一个 Long Task 了,他会拖慢我们 Web 应用的性能,由此可见我们使用 DOM API 操作 DOM 的代价是非常昂高贵的。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
<!DOCTYPE html> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width, initial-scale=1.0"> <title>DOM</title> </head> <body> <p></p> <script> window.onload = function () { for (let i = 0; i <= 1000; i++) { document.querySelector('p').innerHTML += '1'; } } </script> </body> </html>
高性能的访问与修改
在实际的工作中我们无法避免访问 DOM 和修改 DOM,那针对这种情况如何优化呢?有两个基本的黄金法则:1、缓存 DOM 对象;2、减少修改的频率,我们优化代码后可以看到这段脚本的执行时间变成了 2ms