首页 前端知识 前端面试题整合

前端面试题整合

2024-08-18 22:08:15 前端知识 前端哥 214 757 我要收藏

一、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;


 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/15973.html
标签
评论
发布的文章

jQuery 教程 (一)

2024-08-24 23:08:43

select 多选联动

2024-08-24 23:08:41

jQuery2 高级教程(九)

2024-08-24 23:08:22

使用CDN提高jQuery加载速度

2024-08-24 23:08:21

jQuery2 秘籍(七)

2024-08-24 23:08:20

【ECharts】雷达图

2024-08-24 23:08:18

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!