一、HTML篇
1、简述一下你对HTML语义化的理解？
用正确的标签做正确的事情；
HTML语义化让页面内容结构清晰，便于浏览器、搜索引擎解析；
搜索引擎的爬虫依赖HTML标记来确定上下文和关键字的权重，利于SEO；
便于阅读、维护源代码的用户理解；
2、标签上alt和title属性的区别是什么？
alt是给搜索引擎识别，在图片无法显示时的替代文本；title是关于元素的注释，鼠标悬浮元素会显示title；
在IE中alt起到了title的作用，因此alt和title都应补全；兼容各浏览器；
3、行内元素和块元素举例以及区别；
行内元素： div、hr、p、h、table、header、footer、ul、ol、video、audio等；
块元素： span、img、a、b、i、br、big、small、em、sub、sup、input、button、label等；
默认情况下，行内元素只占据自身宽度空间，块元素独占一整行；
4、href和src
href 指定网络资源位置，建立联系让当前元素链接到目标地址；
src 指向外部资源位置，指向的内容应用到当前标签所在位置；
二、CSS篇；
1、介绍一下css盒子模型；
盒子模型有两种，W3C盒子+IE盒子模型；
content(内容)+padding(填充)+margin(边距)+border(边框)
其中IE盒子模型把边框和填充计算成content
2、css选择器优先级
!important > 行内样式style > ID选择器 > 类选择器 > 标签（div、img等) > *通配符 > 继承 > 浏览器默认继承属性
3、垂直居中几种方式
display：flex；align-items:center;
文字：line-height： height;
图片：vertical-align: middle;
absolute top：50%；left:50%; transform: translate(-50%, -50%);
4、简明说一下css link和import的区别和用法
三、js
1、实现大数相加
number最大能够精准到53位，对于更大的整数只能用字符串来表示数字然后逐位相加；
function bigNumberAdd(a, b) {
let num1 = a.split('');
let num2 = b.split('');
let result = '';
let carry = 0;
while (num1.length || num2.length || carry) {
let val1 = num1.pop() || '0';
let val2 = num2.pop() || '0';
let sum = parseInt(val1) + parseInt(val2) + carry;
carry = Math.floor(sum / 10);
result = (sum % 10) + result;
}
return result.replace(/^0+/, ''); // 移除结果前导0
}
// 使用示例
let sum = bigNumberAdd('1234567890123456789', '9876543210987654321');
console.log(sum); // 输出相加结果2、vite和webpack之间的区别
开发模式的不同
webpack在开发模式下会对所有模块进行打包操作，虽然提供了热更新，但大型项目中，依然可能会出现启动、编译缓慢的问题；而vite采用基于es module开发服务器，只有在有需求时编译对应模块，大幅度提升了开发环境的响应速度；
打包效率不同
webpack在打包的时候会把整个项目打包成一个bundle，这会导致初级加载项目速度较慢；而vite利用了浏览器对es module 的原生支持，只打包和缓存实际改动的模块，从而提高了打包效率；
插件生态不同
webpack插件生态非常丰富，有大量社区和官方的插件提供，覆盖了前端哥个方面，而vite的插件生态尽管在不断发展，但是跟webpack比较还是显得稀少。
配置复杂度不同
webpack的配置相对来说比较复杂。对新手不够友好，而vite在设计上注重开箱即用，大部分情况下无需自己写配置文件；
热更新机制不同
webpack热更新需要整个模块链更新替换打包，对于大型项目会有延迟，而vite 的更新只针对改动过的模块，提高了热更新的速度；
3、图片懒加载的原理
监听图片是否在可视区域内，若在就加载图片，若不在则不加载；实现方案: 自定义属性-将图片真实地址 url 存储在自定义属性中,当监听到图片进入可视区域时,将自定义属性值赋值给 img 的 src 属性。
4、什么是前后端分离以及前后端分离带来的问题？
前端与后端分开，提升前后端开发效率，前端根据确定好的接口文档mock js数据，后台根据postman等接口测试工具做接口测试；项目更新维护变简单，各司其职；提高接口复用率，页面加载变得更快；提升服务器资源利用率；
前后端分离带来的问题：跨域问题，根据不同应用场景，后台在返回的请求header设置即可；单点登录问题；
5、使用cookie、session维持登录状态的原理是什么？
cookie存贮在客户端，web服务器通过传送HTTP包头中的set-cookie把一个cookie发送到用户的浏览器中，如果不设置过期时间则表示这个cookie的生命周期为浏览器会话期间，只要关闭浏览器窗口，cookie就消失。如果设置了过期时间，浏览器会把cookie保存在硬盘上，关闭后再次打开浏览器，cookie过期时间还在设置范围内就还能继续使用，反之则不能；
session机制是一种服务器端的机制。当客户端第一次请求服务端的时候，服务端会检查客户端请求头中携带cookie中是否存在sessionid。如果有则会检索sessionid对应session是否存在；如果不存在则会创建对应会话信息，生成对应session，并将对应sessionid返回给客户端，客户端接受到这个sessionid，把它存贮起来，下一次发送请求的时候，附带把这个session一起发送给服务端，服务端只要根据这个sessionid就知道是谁，而这个sessionid就是这次会话生命周期的凭证，服务端可以设置session过期时间，一但客户端丢失sessionid或者是服务端设置了失效时间，那这次会话结束。
6、mvvm、mvc、mvp?
7、git reset和git revert的理解和区别？
reset用于回退版本，可以遗弃不再使用的提交。执行遗弃时，需要根据影响的范围而指定不同的参数，可以指定是否复原索引或工作树内容
git revert在当前提交后面新增一次提交，抵消掉上一次提交导致的所有变化。不会改变过去的历史，主要是用于安全地取消过去发布的提交。
他们之间的区别:git reset用于回滚，且head向后移动到指定位置，git revert是直接删除指定的commit，head继续前进，只是新的commit的内容抵消要被revert的内容；如果回退分支的代码还需要使用就gitrevert，如果分支提错了，且不被记录则使用reset
8、说说你对前端工程化的理解
前端工程化是指将前端开发中的设计、开发、测试和部署等环节进行标准化和自动化，以提高开发效率和代码质量，并降低维护成本。包括模块化、自动化构建、自动化测试、自动化部署、规范化管理；
9、const box = {x:10,y:20} object.freeze(box); const shape = box; shape.x = 100; 打印shape的值？
{x:10,y:20}
freeze使得无法添加、删除或修改对象的属性;因此在严格模式下，shape.x=100可能会抛出typeError异常。
10、VUE的生命周期
vue2:beforecreate created beforemount mounted beforeupdate updated beforedestroy destroyed activated(使活动的) deactivated(停止工作) errorcaptured
vue3-options API的周期同vue2
vue3-compents API:setup onbeforemount onmounted onbeforeupdate onupdated onbeforeunmount onunmounted onactivated ondeactivated onerrorcaptured onrendertriggered onrendertracked
11、vue3的hooks和vue2的mixin,以及hooks和utils的区别?
vue3的hooks有点类似vue2中的mixin，hooks封装，可将组件的生命周期和状态体现出来，且数据具有响应式；具备可复用功能，才需要抽离为 hooks ，独立文件函数名/文件名以 use 开头，形如: useXX，引用时将响应式变量或者方法显式解构暴露出来；
示例如下：
const{ nameRef, Fn } = useXX() ；
举例：比如鼠标的位置，我们可以进行封装，在各个页面引入，就可以直接获取鼠标位置，减少代码冗余，提高逻辑复用，提高代码可读性和维护性。
hooks的数据具有响应式，而utils是将特定的函数封装起来，数据不具有响应
12、ts的interface和type的区别？
（1）定义类型范围：interface只能定义对象类型，type可定义任何类型，基础类型、交叉类型、联合类型；（2）可扩展性：interface可以extends、implements;从而扩展多个接口或类；类型没有扩展功能；（3）合并声明：interface可以声明两个相同名称的接口，会进行合并；但类型会出现异常；（4）type可以使用typeof获取实例类型
13、防抖和节流的区别？请举例
14、vuex的重要核心属性有哪些？
15、js的数据类型
number、string、null、undefined、Boolean、object、symbol、bigint;
