👁 8

Html

1.前端页面由哪三部分组成，作用是什么？

结构层：html或xhtm等标记语言创建

表示层：由css创建

行为层：js

css

1.选择器有哪几种？

标签选择器，类名选择器，id选择器，通配符选择器

2.选择器优先级？

！import>内联样式>ID选择器>类选择器、属性选择器、伪类选择器>元素选择器、伪元素选择器>通配符选择器、关系选择器

3.有哪几种盒模型？通过什么进行切换？盒模型由什么组成？（讲过）

怪异盒子，标准盒子，通过box-sizing切换

组成：内容，内边距，边框，外边距

4.介绍水平垂直居中方法（为什么transform？相对于什么元素？top left相对于什么元素）？有没有不改动父元素的方法？

垂直居中：transform: translate(-50%, -50%)（本身)，position(最近的父级)

不改动父元素： absolute /fixed + transform

5.暗黑亮色模式主题切换怎么实现的？

color-scheme

6.有没有用过 sass/less，说一下

sass：定义变量$， 定义混合@mixin+变量名 使用混合@include 变量名

less： 定义变量@， 定义混合 变量（） 使用混合 .变量（）

7.flex：1的具体含义是什么？

将剩余空间按照比例给元素分配空间

flex-grow：1

flex-shrink:1

flex-basis:0

9.transition有哪些属性

transition-property：设置过渡效果

transition-duration；过渡效果的持续时间

transition-timing-function：设置过渡的速度曲线

transition-delay：过渡效果开始前的延迟时间

10.css响应式布局哪些单位

绝对单位（px，pt）

视口相对单位：vw、vh

rem 根据根元素html的字体大小

em 参照自己的font-size ，若自己没有就参照父级

小程序：rpx

11.css 类和伪类

：hover 悬停效果

：active点击效果

：link未访问过的链接

：visited 被访问过的链接

：focus 键盘输入焦点的元素

12.css有哪些属性可以继承？

文本字体颜色行高，都能继承

盒子定位背景边距，都不能继承

13.BFC独立块(讲解过)

bfc:块级格式化上下文,页面中一块独立、隔绝外界渲染规则的渲染区域，内部布局不会影响外部，外部也不会干扰内部。

特性

1.内部块元素垂直方向依次排列

2.垂直外边距会发生折叠（margin 塌陷），但同一个 BFC 内才会塌陷；不同 BFC 之间 margin 不塌陷

3.BFC 区域不会与浮动盒子重叠

触发条件

float不为none

overflow为hidden/scroll/auto

display:inline-block

display:table-cell/table-caption

position:absolute/fixed

作用

清除浮动、解决垂直margin塌陷、实现自适应两栏布局

14.动画相关（讲过)

定义+使用+控制

@keyframes 动画名

animation: 动画名 持续时间 等待时间 是否循环 循环次数 停止状态

通过js dom操作

js/ts

2.sessionstorage和localstorage的区别？这些缓存可以无限存吗？

sessionStorage：回话存储，关闭标签页或者浏览器窗口即清除，仅当前标签页可用

localStorage：永久存储，除非手动删除，同一域名下所有标签共享

两者通常约 5MB

4.深拷贝和浅拷贝的区别，如何实现深拷贝？代码实现一下，然后数据去重

浅拷贝：

const original = {
  name: "测试",
  info: { age: 20 } // 嵌套对象
};
​
// 浅拷贝方式1：Object.assign()
const shallowCopy = Object.assign({}, original);
//方式2
const shallowCopy = { ...original };  

深拷贝

function deepClone(target) {
    //判断如果是基本数据类型或者为空直接返回
  if (typeof target !== "object" || target === null) {
    return target;
  }
    
  const result = Array.isArray(target) ? [] : {};
​
  // 遍历 target 所有可枚举键名
  for (let key in target) {
    // 关键：只拷贝【自身属性】，不拷贝原型链上的属性
    if (target.hasOwnProperty(key)) {
      result[key] = deepClone(target[key]);
    }
  }
  return result;
}

5.生命周期函数

创建周期：beforeCreate created

挂载周期：beforeMount Mounted

更新周期: beforeUpdata Updated

销毁周期：beforeDestroy destroyed

6.箭头函数和普通函数的核心区别有哪些？

普通函数：1.可以作为构造函数，使用new

2.内置arguments,接收所有实参

3. this由调用方式决定，调用谁就指向谁 4. 拥有prototype原型对象

箭头函数：1.不能使用new

2.不存在arguments，使用剩余参数…rest

3.没有自己 this，会继承外层作用于的this，一旦确定永远不会改变

4.不存在原型对象

8.IndexDB 与localstorage如何选型，有什么区别？

IndexDB ：浏览器内置数据库，适合存大量数据

localstorage：容量小

9.TS中的type和interface有什么区别？any与unknown的区别？

两者都能被class实现，但interface更原生

type:

1.基本类型、联合类型、元组、函数、对象都可以定义

2、继承方式为&

interface：

1、定义对象和类的结构

2、重复定义会自动合并

3.继承方式以为extends

能用unknown就不用any，any是最后一道防线。

any是不管你是什么类型都可以，unknown是我不知道是啥类型，我会确认后再用

10..TS中的&&，!，？？分别表示什么？

&&逻辑与

！逻辑非

？？空值合并运算符（只有null和undefined被当做空）

11.为什么要用typescript，怎么用的？

1.ts提供了静态类型检测

2.代码可读性和可维护性

3.ts继承了强大的开发工具支持，包括代码不全、智能提示、错误检测和重构功能

4.支持最新的ECMA Script，通过编译生成兼容的JaveScript代码

12.components、utils、hooks的区别，实现一个功能，应该用三者中的哪一个，判断依据是什么

1、components （组件）可以复用的界面

2.hooks（钩子） 可以复用的逻辑

3.utils （工具）可以复用的函数

13.如何实现Event bus？

eventBus.on 监听

eventBus.emit 发送

eventBus.off 取消

14.原型链？

每个对象都有_proto__（隐式原型）

每个函数都有prototype（显式原型）

原型链最顶端是Object.prototype，再往上是null

对象.proto === 函数.prototype

15.如何判断js数据类型？

typeof 判断基本数据类型，无法判断数组、对象、null

Object.prototype.tostring.call() 最精准，可以判断所有数据类型

instanceof：判断引用数据类型，基于原型链

Array.isArray 专门判断数组

16.事件委托？（讲过）

把事情绑定在父元素上，让父元素代替子元素执行事件

适用于：大量子元素需要绑定相同事件

动态生成、未来新增的元素

需要减少事件绑定、提升页面性能

统一管理事件逻辑

事件冒泡：当盒子触发事件后，会逐级向上触发 div=》body=>html=>document

时间捕获:当盒子触发事件后，顶层容器会逐层向下触发事件，直到当前盒子触发事件后结束

先捕获==当前盒子触发===冒泡

17.跟在url地址栏后，以###的形式进行访问，同时页面显示的区域 位置自动去找到id=xxx的盒子进行显示（vue router react router的hash路由的原理

1.url中#后面的叫hash，改变它页面不刷新

2.原生有hashchange事件监听变化

18.var、let、const区别

1.var 是函数级，let/const 是块级

2.var能重复声明，let/const 不能

4.const定义后基本类型不能改，引用类型内部可以改

5.var可以先使用后定义值为undefined，const/let 不可以

6.开发优先用const，需要变再用let，尽量不用var

19.获取随机数

Math.random() 获取0-1之前的数值，左闭右开

返回一个区间的数值公式 Math.floor(Math.random() * (max – min + 1)) + min;

20.NUll和undefined的区别

undefined为已声明，但未赋值

null：主动赋值为空对象

undefined==null 为true undefined===null 为false

typeof undefined=undefined

typeof null=object

22.描述innerHTML，innerText，TextContent的区别

innerHTML识别HTML标签，能插入/读取带标签的内容

innerTEXT 只识别文本，会受css样式影响（隐藏的文字拿不到，会触发页面重排）

textContent;只识别存文本，不受css影响，性能最好（性能最好，不触发重排，能拿到影藏的文字、空格等）

23、forEach与for循环，谁的性能更好

for>forEach

forEach是函数，每遍历一次，都要调用过一次函数，还要处理参数、回调、this指向，不能使用break、continue、return中断

for是原生语法，只有简单的判断和自增

25.事件循环能解释一下吗

事件循环=先执行同步-> 再执行异步微任务->最后执行异步宏任务

同步任务：直接在主线程执行

例如：console.log、普通函数、变量赋值

微任务:优先级最高

Promise.then/catch/finally

宏任务后执行：优先级最低

setTimeout、setINterval、DOM时间，AJAX/featch

26.数组/对象 字符串/数字 操作方法 (讲过)

27.作用域

全局 局部

块级 let {} const {} 闭包

for(var a=5; a>0; a -- ) {
setTimeout(()=>{
console. log(a)
3,0)
​
// 5个0
​
}
​
for(let a=5; a>0; a -- ){
setTimeout(()=>{
console. log(a)
3,0)
​
//54321
​
}

28.this的指向？this代表的是什么?如何更改this指向？

1.全局的this 指向window

2.一般函数内部的this 指向window

3.对象的方法中的this 谁调用指向谁

4.箭头函数的this 指向的是上一级作用域函数层级的this

5.定时器 延时器this 指向为window

6.类中的this 指向的是实例对象

更改this指向 call() apply() bind()

29.手写class类 手撕

react

1.用过哪些react的hooks

useState状态管理

useEffect副作用处理

useRef获取dom或存变量

useMemo 缓存计算

UseContext跨组件传值

useNavigate路由跳转

useParams获取路由参数

2.useState 的底层实现原理是什么？

闭包 + 链表 + 状态队列

初始化状态：在组件首次渲染的时候，useState会创建一个Hook对象，并将初始状态值存储在该对象中

更新状态：当调用setState函数时，react会创建一个更新对象，并将其添加到更新队列中。然后react触发组件的重新渲染，并根据队列中的所有更新对象来计算新的状态值。

状态共享：在组件的多次渲染之间，useState返回的状态值是共享的，这意味着每次渲染时都可以访问最新的状态值

3.简单介绍React Fiber架构解决了什么问题

Fiber 将同步不可打断的递归渲染，改造为分片、可调度、可中断的异步协调机制，解决大页面渲染卡顿，同时支撑 React 并发更新能力。

4.虚拟DOM的作用是什么，简单讲下Diff流程

虚拟DOM是用js对象描述真实DOM结构，解决两个问题：

1.直接操作DOM性能差，虚拟DOM现在js层计算变更，批量一次性更新真实DOM，减少重绘重排

2.跨平台渲染：一套虚拟DOM对象，可渲染到DOM、小程序等，实现多端复用

3.统一更新逻辑：配合diff算法自动对比新旧节点。 DIff流程：

1.树层级对比

2.同层级元素对比

3.同层级多子节点列表对比（key关键）

vue2

1.vue3和vue2区别

vue3 引入了<script setup> 和动态css，这种语法糖简化了代码结构

vue3提升了ref的性能

vue3 推荐使用vite作为构建工具，而vue2仍然主要依赖Vue CLI。vite提供更快的启动速度和热更新能力

2.vue2组件通信

父传子：主要通过props向子组件传递数据

子传父：使用自定义事件$emit或ref

全局状态管理vuex

小型项目考虑事件总线

3.如何实现一个v-model的自定义组件

子组件通过props接受value

父组件值变化时$emit(‘input’,新值)

父组件直接用v-model绑定

4.computed和watch的区别

computed 计算属性 依赖一个值算出一个新值，使用return返回

watch 监听器 监听某个值的变化，执行一段逻辑，不用return

5.v-model原理

v-model数据双向绑定，结合了v-bing（缩写：）和v-on （@）的功能。在表单元素上，v-model等价于绑定value属性并监听input时间。在组件上他会传递value属性并监听input事件，实现父子组件之前的数据同步。

6.vue组件通信

父传子 props 用readonly修饰，禁止组件内部修改props

interface Props{
    readonly id:number
}

子传父 $emit

跨级组件传：provide/inject

全局通信EventBus

全局状态管理vuex

7.MvvM是什么？

model 数据 view视图 VM：viewModel：视图和数据的双向绑定

MVC:model 数据 view 视图 control【+serve】控制层(业务控制+)

8.简单说下Vue中v-if和v-show的差异？

v-if当条件为false是销毁并移除dom元素。为true时创建并插入dom节点。

v-show通过display样式控制显隐。

v-if适用于条件变化不频繁。v-show适用于频繁切换显隐状态。

9.Vue2和Vue3的数据双向绑定区别？

vue2：数据挟持

vue3:通过 reactive、ref 创建响应式数据，数据变化时触发依赖更新

10.nextick是什么，有什么应用场景，实现原理是什么

nextTick是一个Vue提供的异步方法，确保回调在DOM更新后执行。他利用微任务或宏任务机制，在时间循环的末尾执行回调，常用于数据变化后需要等待DOM更新的操作。尽管数据多次变更，Vue仅在下一个tick中更新页面一次，通过watcher管理和nextTick的回调队列实现。nextTick中的回调是在下次DOM更新循环结束之后执行的延迟回调。

vue3

1.vue3响应式原理

proxy（代理）+Reflect(反射)

使用proxy代理整个对象：可以监听对象、数组的任意变化

使用Reflect完成真实操作：用于执行默认的赋值/取值行为

get中收集依赖（track)

set中触发依赖(trigger)

2.vue3生命周期

setup（）函数作为入口点

onBeforeMount()

onMounted()

OnBeforeUpdate()

onUpdated()

onBeforeUnmount()

onUnmounted()

跨端

1.多端适配有做过么、怎么做的、有哪些方案？（媒体查询、flex/grid响应式布局、wv/wh相对单位）

flex弹性布局

rem适配

vw适配

响应式布局+媒体响应 @media

百分比布局+固定宽高

2.在各种屏幕尺寸如何保证某个元素的的宽高尺寸比例保持一致

padding百分比法

aspect-ratio

前端工程化

1. 用过webpack吗 为什么用vite

vite 启动超快，按需编译、热更新秒开，利用ESBuild进行依赖预构建，速度极快

webpack 先把所有模块打包成一个bundle，在启动服务

前端性能-提高用户体验

1.类似抖音视频左右滑动，初始化有很多个视频，怎么保证首次快速加载

只渲染当前屏视频

预加载下一个视频

视频懒加载

视频首帧图

4.Token 中存储用户信息每次查库性能较差，有什么优化方案？

JWT把用户信息存在token里

redis缓存用户信息

本地缓存用户信息

全局状态管理粗怒用户信息

5.如何防止攻击者伪造 Token

JWT验证

设置短过期时间

刷新令牌机制

使用https防止劫持

6.HTTP 的缓存机制

协商缓存和强制缓存

先检查强缓存，命中直接读取本地缓存，不向服务端发请求

强缓存失效，走协商缓存，服务端校验资源是否更新

资源未更新返回403，浏览器继续用本地缓存

资源已更新返回200+最新资源，同时更新本地缓存

网络请求

1.网络同源，如何解决跨域？详述CORS

后端设置请求头，告诉浏览器允许跨域

webpack/vite本地代理

nginx反向代理

2.SSE和WebSocket

sse单工通道，只能服务器想客户端发消息，基于http，自动重连

websocket全双工通信，客户端和用户可以互相通信，基于tcp，长连接

3.http和https的区别

http端口80 https端口443

http基于SSL/TLS加密

HTTPS需要证书

HTTP明文传输不安全

4.get和post区别

get用于获取数据，post用于提交数据

get参数放在url，post 放在请求体

get不安全 post相对安全

get可以缓存，post不会缓存

5..async await

异步转同步写法

6.axios 底层用的什么技术

XMLHttpRequest

支持请求/响应拦截器

支持自动转JSON

7.HTTP预检请求是什么，什么场景下会触发预检请求

跨域时浏览器不会直接发目标请求，而是先自动发送一次options请求向后端咨询当前源、请求方法、请求头是否被服务器允许跨域，这个options请求就叫预检请求。

作用：体检校验跨域权限，避免直接发送危险请求造成数据泄露/修改

8.. Promise 三种状态

pending 等待：初始状态，未完成

fulfilled 成功：执行resolve（），不可逆

rejucted 失败：执行reject（）/内部报错，不可逆，状态一旦变更就不会再改变

9.Promise.all/allSettled /race/any 区别

all：一个失败全部就失败，全部成功才算成功

allsettled:不管成功还是失败，等待全部完成，统一返回结果数组

race：谁先成功就返回谁，其余不等待

any：只要有一个成功就返回，全部失败才进入catch

其他

1git rebase和git merge的区别

merge合并分支，保留完整历史，会多一条合并记录 适合公共分支

rebase：变基，把提交线性化，历史更干净、更整洁 适合个人分支