前端面试题

2024/4/30

1.node.js与npm关系：

node.js是运行环境，对chrom v8引擎的一个封装，是js运行在服务器端的开发平台，优点：[1]Node.js提供替代的API，使得V8在非浏览器环境下运行得更好。V8引擎执行Javascript的速度非常快，性能非常好。
[2]Node.js是一个基于Chrome JavaScript运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。
npm是包管理器，内置在node.js中

2.什么是盒子模型：

把所有的网页元素都看成一个盒子，它具有： content，padding，border，margin 四个属性，这就是盒子模型。

3.什么是虚拟dom：

普通的js对象。是一个用来描述真实dom结构的js对象，因为它不是真实的dom，所以才叫做虚拟dom。
我们都知道传统的dom数据发生变化的时候，我们都需要不断的去操作dom，才能更新dom数据，虽然后面出现了模板引擎，可以让我们一次性更新多个dom。但模板引擎依旧没有一种可以追踪状态的机制，当引擎内某个数据发生变化时，它依然操作dom去重新渲染整个引擎。
而虚拟dom可以很好地跟踪当前dom状态，因为它会根据当前数据生成一个描述当前dom结构的虚拟dom，然后数据发生变化时，又生成一个新的虚拟dom，而两个虚拟dom恰好保存了变化前后的状态。然后通过diff算法，计算出当前两个虚拟dom之间的差异，得出一个更好的替换方案。
vue2后面的虚拟dom是snabbdom，有四个核心方法

h函数
patch函数
patchVnode函数
updateChildren函数

4.什么是vue生命周期

Vue 实例从开始创建、初始化数据、编译模板、挂载Dom和渲染、更新和渲染、卸载等一系列过程，这是 Vue 的生命周期
vue的生命周期的八个钩子函数
beforeCreat() 创建前 在new一个vue实例后，只有一些默认的生命周期钩子和默认事件，其他的东西都还没创建。在此生命周期执行的时候，data和methods中的数据都还没有初始化。不能在这个阶段使用data中的数据和methods中的方法
created（）被创建 data 和 methods都已经被初始化好了，可以调用了
beforeMount() 挂载前 在内存中已经编译好了模板了，但是还没有挂载到页面中，此时，页面还是旧的
mounted（）已挂载 Vue实例已经初始化完成了。此时组件脱离了创建阶段，进入到了运行阶段。 如果我们想要通过插件操作页面上的DOM节点，最早可以在和这个阶段中进行
beforeupdate（）更新前 页面中的显示的数据还是旧的，data中的数据是更新后的， 页面还没有和最新的数据保持同步
updated（）更新 页面显示的数据和data中的数据已经保持同步了，都是最新的
beforeDestroy() 销毁前 Vue实例从运行阶段进入到了销毁阶段，这个时候上所有的 data 和 methods ， 指令， 过滤器 ……都是处于可用状态。还没有真正被销毁
destroyed（）被销毁 这个时候上所有的 data 和 methods ， 指令， 过滤器 ……都是处于不可用状态。组件已经被销毁了。
vue生命周期的作用是什么
它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑

第一次页面加载会触发哪几个钩子
第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子

DOM渲染在哪个周期中已经完成
mounted

简述每个周期具体适合哪些场景
beforecreate : 可以在这加个loading事件，在加载实例时触发
created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用
mounted : 挂载元素，获取到DOM节点
updated : 如果对数据统一处理，在这里写上相应函数
beforeDestroy : 可以做一个确认停止事件的确认框
nextTick : 更新数据后立即操作dom

created和mounted的区别
created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

5.什么是懒加载

懒加载，也称为延迟加载，是一种在前端开发中常用的优化技术。它的核心思想是推迟加载页面上的某些元素，直到这些元素真正需要显示的时候才去加载它们。这种方法可以显著提高页面加载的速度，减少初始载入的数据量，从而提升用户体验。

懒加载通常用于图像、视频或其他资源密集型的内容。例如，在一个包含大量图片的网页上，初始时只加载用户可见区域（即视窗或viewport）内的图片，而视窗外的图片则会在用户滚动到它们的位置时才开始加载。

实现懒加载的技术方法有多种，包括使用JavaScript监听滚动事件，检测元素是否进入可视区域，并动态加载资源；或者利用HTML的loading="lazy"属性，让浏览器自动处理懒加载。

6.什么是跨域

跨域是前端开发中经常遇到的一个问题，主要涉及到浏览器的同源政策。同源政策是浏览器的一种安全策略，目的是防止恶意文档窃取到用户数据。

同源政策
同源政策规定，如果两个页面的协议、域名和端口号三者之一不同，那么它们不具有相同的源。这种情况下，一个源的文档或脚本在默认情况下无法获取或操作另一个源的内容。

跨域访问
跨域访问（Cross-Origin Resource Sharing, CORS）是指从一个域的网页去请求另一个域的资源。例如，你的网页试图通过AJAX请求访问另一个域上的API，由于同源政策的限制，这种请求默认是不被允许的。

解决跨域问题的常见方法
CORS: 服务器可以在HTTP响应头中设置Access-Control-Allow-Origin来允许特定的外部域访问资源。
JSONP：这是一种较老的方法，利用