前端面试题

1、webpack是什么？

webpack是一个用于现代javascript应用程序的 静态模块打包工具。当webpack处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图，然后将项目中所需的每一个模块组合成一个或多个bao(bundles),他们均为静态资源，用于展示内容。

2、webpack中loader和plugin的作用是什么？

loader: loader让webpack能够去处理那些非javescript文件(webpack自身只理解javascript)
plugins:插件(plugins)可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。

3、说一下原型链和继承？

(1)每个构造函数都有一个原型对象，原型对象都包含指向构造函数的指针，而实例都包含一个指向原型对象的内部指针(proto)
(2)一个对象会指向一个原型，原型对象会有自己的原型，以此类推，构成原型链
(3)实例使用方法和属性时，会先从构造函数内部找，找不到再去原型对象上找，还找不到就去原型对象的原型上找，直到(原型对象的原型为null) Object.prototype.proto===null,停止寻找
继承：(4)继承是指能够访问另外一个对象中的方法和属性。

4、js去重你能想到多少种方法？

(1)Array.from(new Set(array))
(2)newArray.filter 返回[item]/newArray.find 返回item项
(3)newArray.include(旧item) 返回true/false
(4)使用对象属性名的唯一性来保证不重复 let obj = {} if(!obj[array[i]]) { result[array[i]] = true } Object.keys(obj);
(5)使用indexOf(item) === -1, newArray.indexOf(arr1[i]) === -1
(6)使用Map数据结构去重： let map = new Map(); if (map.has(array[i])) {map.set(array[i], true)}

5、js中this的指向

(1)全局环境下指向widow,严格模式下undenfind, 函数也指向window。
(2)对象内部方法的this指向调用这些方法的对象，也就是谁调用就指向谁。
(3)箭头函数中的this指向于函数作用域所用的对象。
(4)构造函数中的this是指向实例
更改this指向：call / apply / bind()方法

6、promise的用法？你在什么情况下会使用promise？

用法（Promise对象是一个构造函数，用来生成Promise实例）
let p = function () {return new Promise((resolve,reject) => {resolve(‘需要返回出去的值’)})}
p.then(data => {})

7、node是如何处理高并发的

(1)事件循环机制：
Node.js采用事件驱动机制，通过事件轮询的方式实现异步I/O操作。当有异步I/O操作完成时，会将对应的事件加入到事件队列中，由事件循环机制负责调度执行。事件循环机制是Node.js实现高并发的核心，它能够充分利用CPU资源，减少I/O的阻塞等待时间，提高了处理请求的效率。
(2)非阻塞I/O:
Node.js采用非阻塞I/O，避免了I/O的阻塞等待时间，从而提高程序的并发性能。非阻塞I/O是指在进行I/O操作时，不会阻塞后续代码的执行，而是在后台等待I/O操作完成后立即返回结果。这种方式可以减少线程切换的开销，提高了整个应用程序的执行效率。
(3)事件驱动回调函数:
Node.js采用事件驱动回调函数，使得应用程序能够及时响应用户的请求。通过这种方式，当用户请求进入系统时，会获取一个事件处理器，并注册一个回调函数，当事件处理器产生事件时，会自动调用注册的回调函数进行处理。这种方式能够提高系统的响应速度和处理能力。
(4)内置异步模块：
Node.js内置的异步模块也是实现高并发的关键。Node.js提供了各种内置的异步模块，例如HTTP、HTTPS、FS、Net等，这些模块都是通过事件循环机制结合非阻塞I/O实现的，可以在高并发的情况下高效地处理请求。
(5)Cluster模块:
Cluster是Node.js中用于多进程处理的模块。该模块可以启用多个子进程来处理请求，从而提高应用程序的并发性能。每个子进程都是独立的，因此可以充分利用CPU资源，提高系统的处理能力。使用Cluster模块可以有效地解决单线程模型下的瓶颈问题，使得系统能够更加高效地处理大量的请求。

8、介绍一下node中require模块的加载机制

模块在第一次加载后会被缓存。这也意味着多次调用require()不会导致模块的代码被多次执行。
(1)内置模块的加载优先级最高:例如，require(‘fs’) 始终返回内置的 fs 模块，即使在 node_modules 目录下有名字相同的包也叫做 fs。

(2)自定义模块的加载机制:
使用 require() 加载自定义模块时，必须指定以 ./ 或 …/ 开头的路径标识符。在加载自定义模块时，如果没有指定 ./ 或 …/ 这样的路径标识符，则 node 会把它当作内置模块或第三方模块进行加载。
同时，在使用 require() 导入自定义模块时，如果省略了文件的扩展名，则 Node.js 会按顺序分别尝试加载以下的文件：
1.按照确切的文件名进行加载
2.补全 .js 扩展名进行加载
3.补全 .json 扩展名进行加载
4.补全 .node 扩展名进行加载
5.加载失败，终端报错

(3)第三方模块的加载机制：如果传递给 require() 的模块标识符不是一个内置模块，也没有以 ‘./’ 或 ‘…/’ 开头，则 Node.js 会从当前模块的父目录开始，尝试从 /node_modules 文件夹中加载第三方模块。
例如，假设在 ‘C:\Users\itheima\project\foo.js’ 文件里调用了 require(‘tools’)，则 Node.js 会按以下顺序查找：

C:\Users\itheima\project\node_modules\tools
C:\Users\itheima\node_modules\tools
C:\Users\node_modules\tools
C:\node_modules\tools

(4)目录作为模块：当把目录作为模块标识符，传递给 require() 进行加载的时候，有三种加载方式：
在被加载的目录下查找一个叫做 package.json 的文件，并寻找 main 属性，作为 require() 加载的入口
如果目录里没有 package.json 文件，或者 main 入口不存在或无法解析，则 Node.js 将会试图加载目录下的 index.js 文件。
如果以上两步都失败了，则 Node.js 会在终端打印错误消息，报告模块的缺失：Error: Cannot find module ‘xxx’

9、闭包的作用是什么？你能举个使用闭包的例子吗？

(1)延长局部变量的寿命
(2)使外部能够访问到函数内部的变量
例子: 如果一个属性是全局变量，不想让人直接访问，局部变量又访问不到时，暴露一个函数让间接访问；
function(){
var lives = 50
window.奖励一条命 = function(){ // 简明起见，用了中文
lives += 1
}
window.死一条命 = function(){
lives -= 1
}
}()

10、当在浏览器输入url后，发生了些什么？

(1)URL 解析:浏览器首先对 URL 解析，解析出协议、域名、端口、资源路径、参数等。
(2)DNS 域名解析:首先需要将一个域名转化为相应的 IP 地址
(3)建立TCP连接
(4)发送HTTP请求：当浏览器与服务器建立连接后，就可以进行数据通信过程，浏览器会给服务器发送一个 HTTP 请求报文，请求报文包括请求行、请求头、请求空行和请求体。在请求行中会指定方法、资源路径以及 HTTP 版本，其中资源路径是指定所要操作资源在服务器中的位置，而方法是指定要对这个资源做什么样的操作。
(5)服务器对请求进行处理并作出响应
(6)浏览器解析渲染页面
(7)断开TCP连接
注意：
浏览器为了提升性能，在 URL 解析之后，实际会先查询是否有缓存，如果缓存命中，则直接返回缓存资源。
如果是 HTTPS 协议，在建立 TCP 连接之后，还需要进行 SSL/TLS 握手过程，以协商出一个会话密钥，用于消息加密，提升安全性。

11、说下vue的生命周期

Vue的生命周期钩子函数主要包括：

• 1.beforeCreate(): 在实例初始化之后调用, data和methods都还没有初始化完成, 通过this不能访问
• 2.created(): 此时data和methods都已初始化完成, 可以通过this去操作, 可以在此发ajax请求
• 3.beforeMount(): 模板已经在内存中编译, 但还没有挂载到页面上, 不能通过ref找到对应的标签对象
• 4.mounted(): 页面已经初始显示, 可以通过ref找到对应的标签, 也可以选择此时发ajax请求
• 5.beforeUpdate(): 在数据更新之后, 界面更新前调用, 只能访问到原有的界面
• 6.updated(): 在界面更新之后调用, 此时可以访问最新的界面
• 7.beforeDestroy(): 实例销毁之前调用, 此时实例仍然可以正常工作
• 8.destroyed(): Vue 实例销毁后调用, 实例已经无法正常工作了
• 9.deactivated():组件失活, 但没有死亡
• 10.activated(): 组件激活, 被复用
• 11.errorCaptured(): 用于捕获子组件的错误,return false可以阻止错误向上冒泡(传递)
• 我们通常在created()/mounted()进行发送ajax请求，启动定时器等异步任务，而在beforeDestory()做收尾工作，如: 清除定时器操作。

不过需要注意的是mounted生命周期钩子中并不代表界面已经渲染成功，因为 mounted 不会保证所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以在 mounted 内部使用 vm.$nextTick。
js面试题：

<div ref="text"></dev>
beforeMouted() {
 console.log(this.$refs.text); // 会打印什么
}

mouted() {
 console.log(this.$refs.text); // 会打印什么
}

12、怎样判断在屏幕的可视化区域

• offsetTop、scrollTop
• getBoundingClientRect
• Intersection Observer

13、说下如下代码的值

let a= {
name: ‘A’,
fun: function() {
console.log(this.name);
}
}
console.log(a.fun()); // A
console.log(a.fun.call({name: ‘B’})); // B
let f1 = a.fun();
console.log(f1); // A

console.log(typeof undefined) // undefined
console.log(typeof null) // object
console.log(typeof console.log) // function
console.log(typeof [1, 2, 3]) // object
console.log(typeof ‘123’) // string
console.log(typeof 123) // number