前端面试题整合

一、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位，对于更大的整数只能用字符串来表示数字然后逐位相加；

javascript 复制代码

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;