前端面试题整合

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


 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/397651.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JavaScript - 数组对象中实用好玩的reduce方法

JavaScript中reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值。 语法: arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue]) 参数配置: 参数名描述cal…

渗透学习之漏洞复现

漏洞 贷齐乐的漏洞复现RCE 贷齐乐的漏洞复现 <?php header("Content-type: text/html; charsetutf-8"); require db.inc.php;function dhtmlspecialchars($string) {if (is_array($string)) {foreach ($string as $key > $val) {$string[$key] dhtmlspecial…

【Oracle点滴积累】解决ORA-20001: Latest xml inventory is not loaded into table故障的方法

广告位招租&#xff01; 知识无价&#xff0c;人有情&#xff0c;无偿分享知识&#xff0c;希望本条信息对你有用&#xff01; 今天和大家分享在安装Oracle Critical Patch Update (Patch Number:33806138) 遇到ORA-20001: Latest xml inventory is not loaded into table故障…

广东盈致MES系统——注塑和冲压行业的智能化管理

广东注塑冲压行业MES制造执行系统是一种专门为注塑和冲压行业设计的生产管理系统&#xff0c;可以帮助企业实现生产过程的智能化管理和优化。盈致MES系统是一种常见的MES系统&#xff0c;具有以下特点和功能&#xff1a; 生产计划和调度&#xff1a;MES系统可以帮助企业进行生产…

SpringCloud网关

1.网关的作用 2.网关入门 2.1引入依赖 <dependencies><dependency><groupId>com.heima</groupId><artifactId>hm-common</artifactId><version>1.0.0</version></dependency><!--网关--><dependency><g…

SAP通过函数TR_RELEASE_REQUEST释放指定请求

一&#xff1a;不通过SE09/10释放请求号 *&---------------------------------------------------------------------* *& Report Z_TRANSPORT_REQUEST *&---------------------------------------------------------------------* *& *&----------------…

AI与人类智慧的共舞:程序员在人工智能时代的新角色

文章目录 每日一句正能量前言AI辅助编程对程序员工作的影响提高编码效率改善代码质量促进学习与成长改变工作流程潜在风险与挑战技术伦理与责任应对策略结论 程序员应重点发展的核心能力复杂系统设计能力跨学科知识整合能力与AI协作的能力创新和解决问题的能力技术领导力和团队…

ctfshow-web入门-sql注入(web206-web210)系统练习sqlmap之tamper的使用与编写

目录 1、web206 2、web207 3、web208 4、web209 5、web210 1、web206 sql需要闭合 测了一下还是会先请求 /api/getToken.php 查询语句里新增了括号&#xff0c;我们注入也需要将其闭合掉&#xff0c;就像我们闭合单引号那样&#xff0c;对于 sqlmap 它会自动对闭合点进行…

HttpSession常用方法

1.HttpSession常用方法 是在Java Servlet中用来管理会话状态的重要接口&#xff0c;它提供了一种在多个请求或页面之间存储用户特定信息的方式。以下是一些 HttpSession 常用的方法和用法&#xff1a; 获取会话对象&#xff1a; HttpSession session request.getSession();…

三十八、大数据技术之Kafka3.x(1)

&#x1f33b;&#x1f33b; 目录 一、Kafka 概述1.1 定义1.2 消息队列1.2.1 消息队列内部实现原理1.2.2 传统消息队列的应用场景1.2.3 消息队列的两种模式 1.3 Kafka 基础架构 二、 Kafka 快速入门2.1 安装前的准备2.2 安装部署2.2.1 集群规划2.2.2 单节点或集群部署2.2.3 集群…

浙大数据结构慕课课后题(04-树5 Root of AVL Tree)

题目要求&#xff1a; AVL 树是一种自平衡的二叉搜索树。在 AVL 树中&#xff0c;任何节点的两个子子树的高度最多相差一;如果在任何时候它们相差不止一&#xff0c;则进行重新平衡以恢复此属性。图 1-4 说明了旋转规则。 图1 图2 图3 图4 现在给定一系列插入&#xff0c;您应该…

【经验总结】ShardingSphere5.2.1 + Springboot 分库分表 快速开始

Sharding Sphere 官方文档地址&#xff1a; https://shardingsphere.apache.org/document/current/cn/overview/maven仓库&#xff1a;https://mvnrepository.com/artifact/org.apache.shardingsphere/shardingsphere-jdbc 官方的文档写的很详尽到位&#xff0c;这里会截取部分…

Spring事务管理:程序化 vs 声明式

Spring事务管理&#xff1a;程序化 vs 声明式 1、程序化事务管理2、声明式事务管理3、总结 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; Spring框架为事务管理提供了两种主要方式&#xff1a;程序化事务管理和声明式事务管理。 1、程序化…

【数据结构】六、图:3.十字链表、邻接多重表、边集数组

3.十字链表&#xff08;有向图&#xff09; 文章目录 3.十字链表&#xff08;有向图&#xff09;3.1性能分析 4.邻接多重表&#xff08;无向图&#xff09;4.1性能分析 5.边集数组 十字链表是有向图的一种链式存储结构。 不足 对于有向图来说&#xff0c;邻接表是有缺陷的。了…

Go语言fmt包中print相关方法

Go语言的fmt包提供了多种打印相关的函数&#xff0c;主要用于在控制台或其他输出目标上格式化并输出数据。下面是一些常用的print相关方法的用途和区别&#xff1a; 1.fmt.Print() 功能: fmt.Print() 将参数的内容按默认格式输出到标准输出&#xff08;通常是控制台&#xff…

【从零开始一步步学习VSOA开发】发布订阅服务端

发布订阅服务端 概念 **发布订阅模式&#xff08;Publish-Subscribe Pattern&#xff09;**是一种消息传递模式&#xff0c;其中发布者发布消息&#xff0c;而订阅者接收和处理这些消息。它是一种松耦合的通信方式&#xff0c;允许发布者和订阅者在不知道彼此存在的情况下进行…

【C++】面向对象三大特性之—— 多态(从底层带你理解多态)

目录 前言 什么是多态 多态的定义及实现 虚函数 虚函数的重写 多态的构成条件 虚函数重写的两个例外 协变 析构函数的重写&#xff08;重要&#xff01;&#xff01;&#xff01;&#xff09; override 和 final&#xff08;了解&#xff09; override final 重载、…

linux 查看端口占用并处理

lsof 命令 lsof -i:端口注意pid netstat 命令 netstat -tnpla | grep 端口注意pid 查看详情 ps -ef | grep 3766607删除 kill -9 PIDkill -9 3766607

【整数规划】+【0—1规划】解决优化类问题(Matlab代码)

目录 文章目录 前言 一、整数规划 分类&#xff1a; 二、典例讲解 1.背包问题 2.指派问题 总结 前言 如果觉得本篇文章还不错的话&#xff0c;给作者点个赞鼓励一下吧&#x1f601;&#x1f601;&#x1f601; 在规划问题中&#xff0c;有些最优解可能是分数或小数&am…

SpringBoot+Vue3+SSE实现实时消息语音播报

目录 1、前言 2、什么是SSE 2.1、与WebSocket有什么异同&#xff1f; 3、代码实现 3.1、前置代码 3.2、SSE相关代码 3.3、消息类相关代码 3.4 、前端代码 4、实机演示 1、前言 有这样一个业务场景&#xff0c;比如有一个后台管理系统&#xff0c;用来监听订单的更新&…