1、JavaScript代码确实要比html和css代码消耗内存多,尤其是DOM操作。
作为一个前端开发人员可能都听到过这样的话:尽量减少DOM操作。但是为什么呢?原因很简单,过多的JavaScript代码和过多的dom操作会网页的加载速度慢,当然也会增加内存的开销。但是问题又来了为什么过多的dom操作会导致增加内存开销和导致浏览器变慢呢? 首先,DOM对象本身也是一个js对象,所以严格来说,并不是操作这个对象慢,而是说操作了这个对象后,会触发一些浏览器行为,比如布局(layout)和绘制(paint)。js的一些操作会打破常规,并触发浏览器执行layout:如通过js获取需要计算的DOM属性、添加或删除DOM元素、通过js修改DOM元素样式且该样式涉及到尺寸的改变等。所以频繁的DOM操作确实是可以增加内存开销影响web的性能。
2、哪些方法可以优化这个问题呢?
显然问题引入外接的JavaScript代码和这直接写入网页内的script标记间的JavaScript代码对于的执行效率是一样的。但是对弈页面中的一些不可避免的dom操作我们应该如何最大限度的优化这个问题呢?
a、良好的编程思想,减少代码冗余,尽量代码复用。
简单的说就是我们需要使用面向对象的编程思想尽量将我们常用的功能进行封装然后复用,这样可以在一定程度上减少一些不必要的DOM操作。
b、适当使用一些优化的方法和。
如原生的JavaScript中有一个有一个方法是文档碎片(DocumentFragment() ),使用该方法可以将多个类似的DOM操作挂在文档碎片中,最后执行相当于一次DOM操作的开销。
最后,作为一个前端开发人员对于web性能我们要关注尤其是JavaScript,这要求我们在开发过程中要有一个好的代码习惯。