JS代码运行机制

JS代码运行机制

1、每调用一个函数,就将这个函数当作一个帧压入栈中,先调用的先进栈后出栈,后调用的后进栈先出栈;

2、对象被分配在堆(非结构化)中;

3、进入队列的待处理消息,先进入的先处理,被处理的消息会被移出队列,并将处理消息关联的回调函数作为一个帧压入栈中,接着将栈中回调函数执行完,再执行消息队列中的下一个消息;

4、消息队列中,必须等待上一个消息执行完,才能接着执行下一个消息。这种机制的缺点是,如果上一个消息执行时间过长,在此期间就无法完成与用户之间的交互,例如滚动或点击;

5、每当一个事件发生,并且这个事件上绑定了一个事件监听器,那么这个事件就会作为一个消息添加到消息队列,该事件的事件行为会被压入栈中,如果该事件没有绑定监听器,该事件就会被忽略;

6、延时器setTimeout()接收两个参数:第一个为待加入消息队列中的消息,第二个为该消息被加入到队列的最小延迟时间(并非确切延迟时间)

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue.js 是一款轻量级的前端框架,采用 MVVM 架构,本质上是一个响应式的系统,通过观察者模式的方式,实现了数据与视图之间的双向绑定。Vue.js 的实现原理主要包括以下几个方面: 1. 数据响应式 Vue.js 基于 ES5 的 Object.defineProperty() 方法,实现了双向绑定的核心机制。当一个 Vue 实例被创建后,Vue 会遍历这个实例的 data 对象属性,将这些属性通过 Object.defineProperty() 方法转化为 getter 和 setter,并在 getter 方法中建立一个依赖收集的机制,记录所有依赖这个属性的 Watcher,当属性值发生变化时,依赖收集器会通知相关的 Watcher, Watcher 会更新视图。 2. 模板解析与生成虚拟 DOM Vue.js 的模板采用了类 HTML 的语法结构,Vue 的编译器会将其转换成虚拟 DOM,并将其与 Vue 实例进行绑定,当 Vue 实例数据发生变化时,Vue 会重新生成虚拟 DOM,并与之前的虚拟 DOM 进行比较,得出需要更新的部分,最终通过真实 DOM 更新视图。这个过程需要用到 diff 算法,用来尽可能地复用页面已有的元素,减少重绘重排的开销。 3. 组件化开发 Vue.js 将页面抽象成一个一个的组件,每个组件都有自己的作用域、模板、数据等属性。当组件数据发生变化时,Vue.js 会重新生成组件对应的虚拟 DOM,并对比之前的虚拟 DOM,最终只更新变化的部分,通过这种方式提供了组件级别的性能优化。 总之,Vue.js 实现了一种基于数据的响应式机制,通过虚拟DOM进行DOM操作,最终生成所需要显示的页面。Vue.js组件化开发的方式可以提高代码的可维护性和可扩展性,框架底层的实现优化可以提高页面的性能。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值