高级前端知识点(持续更新)

js篇

call,apply,bind

call,apply,bind这三者的区别,及内部实现原理,点这里

promise

promise函数的内部实现原理

 异步与事件轮询机制

JavaScript语言的核心特点就是单线程,单线程的原因主要是对DOM的操作,多线程操作DOM会引起冲突。为了利用多核CPU的计算能力,HTML5提出了web worker标准,允许JavaScript创建多线程,且创建线程完全受主线程控制,且不得操作DOM。

js的异步是通过回调函数实现的,即任务队列。虽然js是单线程的,但浏览器的多线程的,则js的执行遇到异步任务都会调用浏览器的多线程去执行,当异步任务有了结果,则会将异步任务的回调函数放入异步任务队列。

任务队列分为两种:宏任务队列与微任务队列。

当js从上往下执行时,如遇到异步任务,浏览器则用其他线程去执行,当异步任务有了结果,则将回调函数放到任务队列中,当主执行栈执行完后,会去查询微任务队列,如果有则执行,微任务队列执行完后,则将宏任务队列放入主执行栈重新开始下一轮循环。

不同的js异步API的回调函数放入不同的任务队列。

宏任务(macrotask)队列API:

  • setTimeout
  • setInterval
  • setImmediate(node)
  • requestAnimationFrame(js)

微任务(microtask)队列API:

  • process.nextTick(node)
  • MutationObserver(node)
  • Promise.then catch finally

注意的一点:微任务队列中的微任务回调函数是放入当前微任务队列中,而不是下轮循环队列。

 浏览器垃圾回收机制

标记清除

大部分浏览器以此方式进行垃圾回收,当变量进入执行环境(函数中声明变量,执行时)的时候,垃圾回收器将其标记为“进入环境”,当变量离开环境的时候(函数执行结束)将其标记为“离开环境”,在离开环境之后还有的变量则是需要被删除的变量。标记方式不定,可以是某个特殊位的反转或维护一个列表等。
垃圾收集器给内存中的所有变量都加上标记,然后去掉环境中的变量以及被环境中的变量引用的变量的标记。在此之后再被加上的标记的变量即为需要回收的变量,因为环境中的变量已经无法访问到这些变量。

引用计数

另一种不太常见的垃圾回收策略是引用计数。引用计数的含义是跟踪记录每个值被引用的次数。当声明了一个变量并将一个引用类型赋值给该变量时,则这个值的引用次数就是1。相反,如果包含对这个值引用的变量又取得了另外一个值,则这个值的引用次数就减1。当这个引用次数变成0时,则说明没有办法再访问这个值了,因而就可以将其所占的内存空间给收回来。这样,垃圾收集器下次再运行时,它就会释放那些引用次数为0的值所占的内存。

js执行上下文和执行栈

该点的解释则是表明JavaScript程序内部的执行机制。

执行上下文,简而言之,就是当前JavaScript代码被解析和执行时所在环境的抽象概念,JavaScript任何代码都是在执行上下文中运行。

三种类型:

  • 全局执行上下文:不在任何函数内的代码都处于全局执行上下文,一个程序只能有一个全局执行上下文。做了两件事:1、创建了一个全局对象,浏览器则是window;2、将this指向这个全局对象。
  • 函数执行上下文:每个函数都有自己的执行上下文。调用函数时,都会为这个函数创建一个新的执行上下文,也只在函数被调用时才会被创建。一个程序内的函数执行上下文没有数量限制,每当一个函数执行上下文被创建,则会执行一系列操作。
  • eval函数执行上下文:不常用,略。

生命周期:

  • 创建:创建变量对象,创建作用域链,确定this指向(this的赋值是在执行的时候确定的)。
  • 执行:变量赋值,代码执行。
  • 回收:执行完成,执行上下文出栈,等待回收。

管理执行上下文:

所有的执行上下文采用的是栈结构来管理,遵循先进后出。全局JavaScript代码在浏览器执行时,实现创建一个全局执行上下文,压入执行栈的底端,每创建一个函数执行上下文,则把它压入执行栈的顶端,等待函数执行完,该函数的执行上下文出栈等待回收。

JavaScript解析引擎总是访问执行栈的顶端,当浏览器关闭,则全局执行上下文出栈。

url输入到页面显示之间的过程

  • 用户输入的url作DNS解析,获取IP地址
  • 建立TCP连接
  • 发送HTTP请求,获取html文件
  • 解析HTML文件,构建DOM树及CSSOM规则树,然后合并渲染树,绘制界面。
  • 发送HTTP获取HTML文件内其他资源。

new操作符中的执行过程

 

nodejs篇

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章