html直接加载与js渲染内存消耗

html直接加载与js渲染内存消耗

直接写在同一页面和将js代码写在其他页面再引入到该也执行效果是一样的,同样的代码占用 的内存基本是相差无几,之所以写到另一页是为了方便开发和维护。下面我说一下个人对于js代码占用内存的一些看法:
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,这要求我们在开发过程中要有一个好的代码习惯。

另一种说法

这个是不占内存的。
理论是这样的,当你的电脑首次调用某个JS,如abc.js时,电脑将abc.js存储到你的浏览器缓存文件夹内,当你再次调用abc.js(如果网站服务器端的abc.js与你本地的一致,也就是没有更新过),那么电脑则读取你浏览器缓存文件夹内的abc.js。这个“缓存”与内存是不一样的。
举个例子,你本次开机时读取的本地abc.js,的确是被放在内存里,但这其实跟js无关,因为你的电脑就是这样工作的,你打开个word也是暂存在内存里。当你下次开机时,你的内存都被清空,无论是调用js还是直接读取代码,都将是计算机重新到你的缓存文件夹里去找。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值