1.自我介绍
2.css两种盒子模型
3.rem和em
4.px概念
**像素（px）**是显示器或屏幕上最小的可控单位，表示图像或文本在屏幕上的大小。它是一个绝对单位，通常用来衡量界面元素的宽度、高度、边距、内边距、字体大小等。
5.transition和animation的区别
6.移动端适配方案
在移动端开发中，通过在 HTML 的 <head> 部分添加 viewport 的 meta 标签，可以控制页面的缩放和适应手机屏幕的大小。
html
<meta name="viewport" content="width=device-width, initial-scale=1.0">width=device-width：设置 viewport 的宽度为设备的宽度。initial-scale=1.0：设置初始缩放比例为 1。
使用 rem 单位可以让页面的元素相对于根元素（<html>）的字体大小进行缩放，便于响应式设计。同时，结合媒体查询可以针对不同屏幕尺寸进行调整。
css
html {
font-size: 16px; /* 基础字体大小 */
}
.container {
width: 80rem; /* 80 * 16px = 1280px */
margin: 0 auto;
}
@media (max-width: 600px) {
html {
font-size: 12px; /* 小屏幕下字体缩小 */
}
.container {
width: 90rem; /* 90 * 12px = 1080px */
}
}vw 和 vh 单位分别代表视口宽度和视口高度的百分比。使用这些单位可以方便地创建相对布局。
html
<style>
.full-screen {
width: 100vw; /* 100% 的视口宽度 */
height: 100vh; /* 100% 的视口高度 */
background-color: #181818;
}
</style>
<div class="full-screen">
Hello, World!
</div>100vw：占满整个视口的宽度。100vh：占满整个视口的高度。
使用百分比来设置元素的宽度和高度可以使布局具有更好的灵活性，但需要注意父元素的宽度。
html
<style>
.parent {
width: 500px; /* 父元素固定宽度 */
height: 300px; /* 父元素固定高度 */
background-color: lightgray;
position: relative;
}
.child {
width: 50%; /* 子元素占父元素宽度的 50% */
height: 50%; /* 子元素占父元素高度的 50% */
background-color: blue;
position: absolute;
top: 0; /* 垂直居顶 */
left: 0; /* 垂直居左 */
}
</style>
<div class="parent">
<div class="child">子元素</div>
</div>7.vh、vw、%
8.js基本数据类型
9.call、apply、bind的区别
10.js实现继承的方法
原型链继承：将父类的实例作为子类的原型，通过 prototype 进行继承
构造继承：将父类的实例属性复制给子类，通过 call 进行继承
实例继承：为父类实例添加新特性，作为子类实例返回
拷贝继承：将父类实例通过循环拷贝给子类
组合继承：就是 原型链继承 和 构造继承，一起使用
寄生组合继承：通过寄生方式，砍掉父类的实例属性，避免了 组合继承中，在调用两次父类的构造时，初始化两次实例方法/属性 的缺点
11.get和post的区别
12.web安全（XSS，CSRF）
XSS（跨站脚本攻击）
概念：
XSS 是一种安全漏洞，攻击者可以通过向用户提交的数据中注入恶意代码（如 JavaScript），从而在用户的浏览器中执行这些代码。这可能导致用户的敏感信息（如 Cookies、会话令牌等）被窃取。
修复方式：
-
对实体字符进行转义：在服务器端对用户输入的数据进行转义，防止浏览器将输入的代码作为可执行脚本解析。
- 例如，将
<转义为<，>转义为>。
- 例如，将
-
使用 HTTP-only Cookie：将 Cookie 标记为 HTTP-only，禁止 JavaScript 读取 Cookie，降低被窃取的风险。
-
输入时校验：对用户输入进行严格的验证和过滤，拒绝不符合要求的输入数据。
-
统一字符编码：确保浏览器与 Web 应用端使用相同的字符编码，避免字符集相关的问题。
CSRF（跨站请求伪造攻击）
概念：
CSRF 是一种攻击方式，攻击者诱使用户在已认证的会话中发送未经授权的请求，可能导致敏感操作被执行。
修复方式：
-
嵌入 Token：在需要防范 CSRF 的页面中，嵌入一个随机生成的 Token，并在用户提交表单时附带该 Token。服务器在处理请求时验证 Token 的合法性。
-
再次输入密码：对于重要的操作（如更改密码或资金转账），要求用户再次输入密码进行确认，增加操作的安全性。
-
校验 Referer：在服务器端检查请求的 Referer 头，确保请求来源于合法的页面，拒绝来自可疑来源的请求。
13.跨域
CORS：跨域资源共享（Cross-Origin Resource Sharing），是一种允许浏览器向跨域服务器发送 Ajax 请求的机制，支持现代浏览器，服务器端需要设置 Access-Control-Allow-Origin 头信息，指定允许的源或通配符，从而实现跨域请求。
代理：在同源页面内部发送 AJAX 请求到同域服务器，由服务器代理转发请求到跨域服务器，最后再将结果返回给同源页面。
WebSocket：WebSocket 是一种 HTML5 协议，它使得浏览器和服务器之间可以建立持久化的连接，可以直接使用 Socket 进行通信，避免了浏览器的跨域限制。
14.vue2/vue3的响应式原理
双向数据绑定就是：数据劫持 + 发布订阅模式（观察者模式）。
Vue2中在实例初始化时遍历 data 中的所有属性，并使用 Object.defineProperty把这些属性全部转为 getter/setter。并 劫持各个属性 getter 和 setter，在数据变化时发布消息给订阅者，触发相应的监听回调，而这之间存在几个问题
- 初始化时需要遍历对象所有 key，如果对象层次较深，性能不好
- 通知更新过程需要维护大量 dep 实例和 watcher 实例，额外占用内存较多
- Object.defineProperty 无法监听到数组元素的变化，只能通过劫持重写数方法
- 动态新增，删除对象属性无法拦截，只能用特定 set/delete API 代替
- 不支持 Map、Set 等数据结构
Vue3中使用 Proxy 来监控数据的变化。Proxy 是 ES6 中提供的功能，其作用为：用于定义基本操作的自定义行为（如属性查找，赋值，枚举，函数调用等）。
15.vue新增的特性
更灵活的响应式系统：Vue 2.x 中响应式系统的核心是 Object.defineProperty，劫持整个对象，然后进行深度遍历所有属性，给每个属性添加getter和setter，实现响应式。Vue 3.x 中使用 Proxy对象重写响应式系统。
更快的渲染速度：Vue3 的编译器生成的渲染函数比 Vue2 生成的更高效。
编译阶段：Vue 2.x 通过标记静态节点，优化 diff 的过程。Vue 3.x中标记和提升所有的静态节点，diff的时候只需要对比动态节点内容。
更小的体积：Vue3 将源码拆分为多个独立的模块，这样就可以按需导入所需的模块，从而减小了整个库的体积。
更好的 TypeScript 支持：Vue3 对 TypeScript 的支持更加友好，内部使用了更先进的 TypeScript 特性，并为其提供了更好的声明文件。
更好的组件系统：比如，Vue3中引入了一个新的 Fragment 组件，它可以替代原来的 template 标签作为根节点
新增了setup组合式API
16.有没有做过很有成就感的项目
有，一个小程序
17.做项目时碰到的难点
有，直播，网上大佬给出了解决方案
18.平时怎么学习前端的知识的
学习一点知识后，去写demo，遇到不会的就问chatgpt
反问
贵公司的技术栈（react）
内容参考
部分答案参考牛客大佬：一小时复习前端面试｜2024年年初30道面试题冲刺金三银四_牛客网