# JavaScript 面试题

# cookie sessionStorage localStorage 区别？

共同点：

• 都是存储在浏览器本地的

区别：

• cookie 是由服务器端写入的，而 SessionStorage、 LocalStorage 都是由前端写入
• cookie 的生命周期是由服务器端在写入的时候就设置好的，LocalStorage 是写入就一直存在，除非手动清除，SessionStorage 是页面关闭的时候就会自动清除
• cookie 的存储空间比较小大概 4KB，SessionStorage、 LocalStorage 存储空间比较大，大概 5M
• Cookie、SessionStorage、 LocalStorage 数据共享都遵循同源原则，SessionStorage 还限制必须是同一个页面
• 在前端给后端发送请求的时候会自动携带 Cookie 中的数据，但是 SessionStorage、 LocalStorage 不会

# JS 实现异步的方法

所有异步任务都是在同步任务执行结束之后，从任务队列中依次取出执行。 回调函数是异步操作最基本的方法，比如 AJAX 回调，回调函数的优点是简单、容易理解和实现，缺点是不利于代码的阅读和维护，各个部分之间高度耦合，使得程序结构混乱、流程难以追踪（尤其是多个回调函数嵌套的情况），而且每个任务只能指定一个回调函数。此外它不能使用 try catch 捕获错误，不能直接 return Promise 包装了一个异步调用并生成一个 Promise 实例，当异步调用返回的时候根据调用的结果分别调用实例化时传入的 resolve 和 reject 方法，then 接收到对应的数据，做出相应的处理。Promise 不仅能够捕获错误，而且也很好地解决了回调地狱的问题，缺点是无法取消 Promise，错误需要通过回调函数捕获。

# 浏览器如何渲染页面的？

• HTML 被 HTML 解析器解析成 DOM 树
• CSS 被 CSS 解析器解析成 CSS 规则树
• 浏览器会将 CSS 规则树附着在 DOM 树上，并结合两者生成渲染树 Render Tree
• 生成布局（flow），浏览器通过解析计算出每一个渲染树节点的位置和大小，在屏幕上画出渲染树的所有节点
• 将布局绘制（paint）在屏幕上，显示出整个页面

# JS 变量提升

变量提升是指 JS 的变量和函数声明会在代码编译期，提升到代码的最前面。 变量提升成立的前提是使用 Var 关键字进行声明的变量，并且变量提升的时候只有声明被提升，赋值并不会被提升，同时函数的声明提升会比变量的提升优先。 变量提升的结果，可以在变量初始化之前访问该变量，返回的是 undefined。在函数声明前可以调用该函数。

# 事件循环 Event loop，宏任务与微任务

浏览器的事件循环：执行 JS 代码的时候，遇见同步任务，直接推入调用栈中执行，遇到异步任务，将该任务挂起，等到异步任务有返回之后推入到任务队列中，当调用栈中的所有同步任务全部执行完成，将任务队列中的任务按顺序一个一个的推入并执行，重复执行这一系列的行为。

异步任务又分为宏任务和微任务。

宏任务：任务队列中的任务称为宏任务，每个宏任务中都包含了一个微任务队列。

微任务：等宏任务中的主要功能都完成后，渲染引擎不急着去执行下一个宏任务，而是执行当前宏任务中的微任务

宏任务包含：执行 script 标签内部代码、setTimeout/setInterval、ajax 请求、postMessageMessageChannel、setImmediate，I/O（Node.js）

微任务包含：Promise、MutonObserver、Object.observe、process.nextTick（Node.js）