跳至主要內容
JS垃圾回收机制

JS垃圾回收机制

如上文所述自动寻找是否一些内存“不再需要”的问题是无法判定的。因此,垃圾回收实现只能有限制的解决一般问题。本节将解释必要的概念,了解主要的垃圾回收算法和它们的局限性。

引用

垃圾回收算法主要依赖于引用的概念。在内存管理的环境中,一个对象如果有访问另一个对象的权限(隐式或者显式),叫做一个对象引用另一个对象。例如,一个 Javascript 对象具有对它原型的引用(隐式引用)和对它属性的引用(显式引用)。


yyshino大约 3 分钟JSJS
防抖节流

防抖节流

本质

防抖debounce与节流throttle都是控制事件处理函数执行频率的方法,当函数会进行DOM操作或者具有请求服务器等行为并且作为高频事件例如onscroll触发的事件处理函数时,就需要进行事件处理函数执行频率的控制,否则会造成大量的资源浪费致使性能下降,当然无论是防抖与节流实质上并没有减少事件触发次数,而是通过减少事件处理函数的执行次数从而提高性能。

解决问题

针对高频度触发事件问题(例如页面 scroll ,屏幕 resize,监听用户输入等),两种常用的解决方法,防抖和节流。


yyshino大约 3 分钟JSJS
JS的new操作符做了什么

JS的new操作符做了什么

new 操作符新建了一个空对象,这个对象原型指向构造函数的 prototype,执行构造函数 后返回这个对象。

  1. 创建一个空的简单JavaScript对象即{}
  2. 链接该对象(即设置该对象的构造函数)到另一个对象。
  3. 将步骤1新创建的对象作为this的上下文context
  4. 如果该函数没有返回对象,则返回步骤1创建的对象。

yyshino小于 1 分钟JSJS
call apply bind的作用和区别

call和apply和bind的作用区别

【共同点】

call apply bind三个方法都可以用来改变函数的this指向

【区别】

1、call apply改变this,直接调用,bind改变this,不直接调用,返回函数 2、传参不同。call参数是单个的,apply参数是数组(apply 将参数作为一个数组传递,call 将参数直接传递,使用逗号分隔。bind 仅将对象绑定,并不立即执行,其返回值是一个函数,传参方式与 call 相同)


yyshino小于 1 分钟JSJS
JS的各种位置

JS的各种位置

  • clientHeight:表示的是可视区域的高度,不包含 border 和滚动条
  • offsetHeight:表示可视区域的高度,包含了 border 和滚动条
  • scrollHeight:表示了所有区域的高度,包含了因为滚动被隐藏的部分。
  • clientTop:表示边框 border 的厚度,在未指定的情况下一般为 0
  • scrollTop:滚动后被隐藏的高度,获取对象相对于由 offsetParent属性指定的父坐标(css 定位的元素或 body 元素)距离顶端的高度。

yyshino小于 1 分钟JSJS
JS拖拽功能的实现

JS拖拽功能的实现

首先是三个事件,分别是 mousedown,mousemove,mouseup 当鼠标点击按下的时候,需要一个 tag 标识此时已经按下,可以执行 mousemove 里面的 具体方法。 clientX,clientY 标识的是鼠标的坐标,分别标识横坐标和纵坐标,并且我们用 offsetX 和 offsetY 来表示元素的元素的初始坐标,

移动的举例应该是: 鼠标移动时候的坐标-鼠标按下去时候的坐标。 也就是说定位信息为: 鼠标移动时候的坐标-鼠标按下去时候的坐标+元素初始情况下的 offetLeft. 还有一点也是原理性的东西,也就是拖拽的同时是绝对定位,我们改变的是绝对定位条件下的 left 以及 top 等等值。


yyshino大约 2 分钟JSJS
mouseover和mouseenter的区别

mouseover和mouseenter的区别

  • mouseover:当鼠标移入元素或其子元素都会触发事件,所以有一个重复触发,冒泡的过程。对应的移除事件是 mouseout
  • mouseenter:当鼠标移除元素本身(不包含元素的子元素)会触发事件,也就是不会冒泡,对应的移除事件是 mouseleave

yyshino小于 1 分钟JSJS
如何让事件先冒泡后捕获

如何让事件先冒泡后捕获

在 DOM 标准事件模型中,是先捕获后冒泡。但是如果要实现先冒泡后捕获的效果,对于同一个事件,监听捕获和冒泡,分别对应相应的处理函数,监听到捕获事件,先暂缓 执行,直到冒泡事件被捕获后再执行捕获之间。


yyshino小于 1 分钟JSJS
事件委托

事件委托

简介:事件委托指的是,不在事件的发生地(直接 dom)上设置监听函数,而是在其父元素上设置监听函数,通过事件冒泡,父元素可以监听到子元素上事件的触发,通过判断事件发生元素 DOM 的类型,来做出不同的响应

举例:最经典的就是 ul 和 li 标签的事件监听,比如我们在添加事件时候,采用事件委托机制,不会在 li 标签上直接添加,而是在 ul 父元素上添加。

好处:比较合适动态元素的绑定,新添加的子元素也会有监听函数,也可以有事件触发机制。


yyshino小于 1 分钟JSJS
图片的懒加载和预加载

图片的懒加载和预加载

  • 预加载:提前加载图片,当用户需要查看时可直接从本地缓存中渲染。
  • 懒加载:懒加载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数。

两种技术的本质

两者的行为是相反的一个是提前加载,一个是迟缓甚至不加载。 懒加载对服务器前端有一定的缓解压力作用预加载则会增加服务器前端压力


yyshino小于 1 分钟JSJS