JS和ES6 篇： 2024高频前端面试题 JavaScript 和 ES6 篇-CSDN博客
Vue2 和 Vue3 篇： 2024高频前端面试题 Vue2 和 Vue3 篇-CSDN博客
一 . HTML 篇
1. H5有什么新特性
1) 语义化标签
用正确的标签做正确的事情。
html 语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析；即使在没有样式 CSS 情况下也以一种文档格式显示，并且是容易阅读的;
搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重，利于 SEO;
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
常见的语义化标签：
<header></header> 头部（可作为介绍内容或者导航链接栏的容器） <nav></nav> 导航栏（代表一个含有多个超链接的区域，可做导航条区域） <section></section> 区块（有语义化的div） <main></main> 主要区域（定义文档主要内容 ） <article></article> 主要内容（可以表示文章、博客等内容 ） <aside></aside> 侧边栏（） <footer></footer> 底部（定义网页结构的页脚。通常包含该章节作者、版权数据或者与文档相关的链接等
2) 增强型表单
新增表单控件：
- type为 email 邮箱地址类型
当格式不符合email格式时，提交是不会成功的，会出现提示；只有当格式相符时，提交才会通过
在移动端获焦的时候会切换到英文键盘
- type为 search 搜索类型
有清空文本的按钮
- type为 range : 特定范围内的数值选择器
type为number和range时，可以设置属性:min、max、step步数 <input type="range" min="10" max="20" step="1"></input>新增表单属性：
- placeholder : 输入框提示信息
- required : 此项必填，不能为空
- autofocus : 指定表单获取输入焦点
新增表单事件：
- oninput 每当input里的输入框的内容发生变化时都会触发此事件
- oninvalid 当验证不通过时触发此事件
3) 增加video和audio标签
<!-- 视频标签 --> //src 视频URL controls 展示控件，如播放按钮 <video src="url" controls="controls"><video> <!-- 音频标签 --> //src:音频URL loop:音频结束时重新播放 muted:静音播放 <audio src="url" loop="loop" muted="muted"><audio>
4) canvas绘图
是HTML5新增的元素，可用于通过使用 JavaScript 中的脚本来绘制图形。例如，它可以用于绘制图形、制作照片、创建动画，甚至可以进行实时视频处理或渲染
5) SVG绘图
SVG是一种基于XML的矢量图形格式，用于在Web和其他环境中显示各种图形；它允许我们编写可缩放的二维图形，并可通过CSS或JavaScript进行操作
6) 地理定位
7) 拖放API
dragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发。
drag：事件主体是被拖放元素，在正在拖放被拖放元素时触发。
dragend：事件主体是被拖放元素，在整个拖放操作结束时触发。
drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发。
dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。
dragover：事件主体是目标元素，在被拖放在某元素内移动时触发。
dragleave：事件主体是目标元素，在被拖放元素移出目标元素是触发。
8) webSocket
WebSocket是HTML5提供的一种浏览器与服务器进行全双工通讯的网络技术，属于应用层协议。它基于TCP传输协议，并复用HTTP的握手通道。浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接， 并进行双向数据传输。
WebSocket 的出现就解决了半双工通信的弊端。它最大的特点是：服务器可以向客户端主动推动消息，客户端也可以主动向服务器推送消息。
9) webWork
10) webStorage
sessionStorage与localStorage、cookie
共同点：都是保存在浏览器端、且同源的
区别：
1、存储空间：cookie存储空间最小、只有4kb、但是http请求中可以携带cookie，loacalstorage、sessionstorage存储空间5M或更大
2、有效期：cookie不设置时间、关闭浏览器销毁，sessionstorage关闭浏览器（窗口或者标签页）销毁，loacalstorage不手动清除一直保留
3、作用域：sessionStorage不在不同浏览器窗口（标签页）共享、即使同源，cookie、localstorage在所有同源窗口之间共享
应用场景不同：
cookie一般用于存储登录验证信息，sessionId或者token
localStorage常用于存储不易变动的数据，减轻服务器压力
sessionStorage可以用来检测用户是否刷新进入页面
2. 标签上 title 与 alt 属性的区别是什么？
alt 是给搜索引擎识别，在图像无法显示时的替代文本；
title 是关于元素的注释信息，主要是给用户解读。
当鼠标放到文字或是图片上时有 title 文字显示。（因为 IE 不标准）在 IE 浏览器中 alt 起到了 title 的作用，变成文字提示。
在定义 img 对象时，将 alt 和 title 属性写全，可以保证在各种浏览器中都能正常使用。
3. 页面导入样式时,使用 link 和@import 有什么区别?
1.从属关系区别
@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。
2.加载顺序区别
加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。
3.兼容性区别
@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。
4.DOM可控性区别
link 支持 js 控制 DOM 来改变样式， @import 不可以
4. src 与 href ？
src 用于替换当前元素，
href 用于在当前文档和引用资源之间确立联系。
src:
src 是 source 的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求 src 资源时会将其指向的资源下载并应用到文档内，例如 js 脚本，img 图片和 frame 等元素。
当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js 脚本放在底部而不是头部。
href:
href 是 Hypertext Reference 的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果在文档中添加。那么浏览器会识别该文档为 css 文件，就会并行下载资源并且不会停止对当前文档的处理。 这也是为什么建议使用 link 方式来加载 css，而不是使用@import 方式。
5. iframe的优缺点？
优点：
1.iframe能够原封不动的把嵌入的网页展现出来。
2.如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。
3.网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。
4.如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。
缺点：
1.会产生很多页面，不容易管理。
2.iframe框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动条，会分散访问者的注意力，用户体验度差。
3.代码复杂，无法被一些搜索引擎索引到，这一点很关键，现在的搜索引擎爬虫还不能很好的处理iframe中的内容，所以使用iframe会不利于搜索引擎优化。
4.很多的移动设备(PDA 手机)无法完全显示框架，设备兼容性差。
5.iframe框架页面会增加服务器的http请求，对于大型网站是不可取的。
6. title与h1的区别、b与strong的区别、i与em的区别
1）title属性没有明确意义只表示是个标题，H1则表示层次明确的标题，对页面信息的抓取也有很大的影响2）b标签只是一个简单加粗标签，strong标签有语义，是起到加重语气的效果。
b标签之间的字符都设为粗体，strong标签加强字符的语气都是通过粗体来实现的，而搜索引擎更侧重strong标签
3）i 内容展示为斜体，em表示强调的文本
二 . CSS 篇
1. CSS 的盒子模型
盒模型都是由四个部分组成的，分别是margin、border、padding 和 content。
标准盒模型：
标准盒模型的width和height属性的范围只包含了content（即添加padding或border不会改变content的大小，只会相应地增加盒子的大小）。
怪异盒模型：
IE盒模型的width和height属性的范围包含了border、padding和content。添加padding或者border，会从中减少content内容的占据区域，来为padding和border制造空间，宽高不会相对应的进行增长。
box-sizing: content-box; 转换为 标准盒模型。
box-sizing: border-box; 转换为 怪异盒模型。
2. 选择器优先级
1) 就近原则,后加样式优于前面的样式；
2) 内嵌样式 > 内联样式 > 外联样式；
3) !Important 大于一切样式；
4) ！important > 行内1000 > id选择器100 >类选择器 伪类选择器10 （属性选择器） > 标签选择器1（与伪元素选择器） > 继承 或者*（通配符）；
3. 简明说一下 CSS link 与 @import 的区别和用法
link 是 XHTML 标签，除了加载CSS外，还可以定义 RSS 等其他事务；@import 属于 CSS 范畴，只能加载 CSS。
link 引用 CSS 时，在页面载入时同时加载；@import 需要页面网页完全载入以后加载。
link 是 XHTML 标签，无兼容问题；@import 是在 CSS2.1 提出的，低版本的浏览器不支持。
link 支持使用 Javascript 控制 DOM 去改变样式；而@import不支持。
4. 行内元素有哪些？块级元素有哪些？区别
行内元素：a、b、span、img、input、select、strong
块级元素：div、ul、li、dl、dt、h1～h5、p
行内块元素: img、input 、td、 button
空元素：br、hr、img、link、meta
块级：
每个块级元素都是独自占一行；
高度，宽度，行高，外边距（margin）以及内边距（padding）都可以控制；
元素的宽度如果不设置的话，默认为父元素的宽度（父元素宽度100%）；
多个块状元素标签写在一起，默认排列方式为从上至下；
行内：
不会独占一行，相邻的行内元素会排列在同一行里，直到一行排不下才会自动换行，其宽度随元素的内容而变化；
高宽、行高无效，对外边距（margin）和内边距（padding）仅设置左右方向有效，上下无效；
设置行高有效，等同于给父级元素设置行高；
元素的宽度就是它包含的文字或图片的宽度，不可改变；
行内元素中不能放块级元素，a 链接里面不能再放链接；
行内块：
行内块级元素，它既具有块级元素的特点，也有行内元素的特点，它可以自由设置元素宽度和高度，也可以在一行中放置多个行内块级元素。比如：input、img就是行内块级元素，它可设置高宽以及一行多个
总结：
块级元素会独占一行，而行内元素和行内块元素则会在一行内显示；
块级元素和行内块元素可设置 width、height 属性，而行内元素设置无效；
块级元素的 width 默认为 100%，而行内元素则是根据其自身的内容或子元素来决定其宽度
5. 怎么理解回流跟重绘？什么场景下会触发？
回流：布局引擎会根据各种样式计算每个盒子在页面上的大小与位置
重绘：当计算好盒模型的位置、大小及其他属性后，浏览器根据每个盒子特性进行绘制
触发条件：1) 回流：
添加或删除可见的DOM元素
元素的位置发生变化
元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）
内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代
页面一开始渲染的时候（这避免不了）
浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）
2) 重绘:
颜色的修改
文本方向的修改
阴影的修改触发回流一定会触发重绘
6. px、em、rem有什么区别
px:
绝对长度单位。相对于显示器屏幕分辨率而言，存在浏览器不兼容问题。
em:
相对长度单位。em值并不是固定的，如果自身设置了font-size则计算自身的，否则em会继承设置了font-size的父级元素的字体大小，存在容易造成字体设置混乱问题。
rem:
相对长度单位。相对于根节点html字体大小来计算。任意浏览器默认字体高都是16px，浏览器兼容性比较好
7. 1rem、1em、1vh、1px，vmin，vmax各自代表的含义？
rem
rem是全部的长度都相对于根元素元素。通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem。
em
子元素字体大小的em是相对于父元素字体大小
元素的width/height/padding/margin用em的话是相对于该元素的font-size
vw/vh
全称是 Viewport Width 和 Viewport Height，视窗的宽度和高度，相当于屏幕宽度和高度的 1%，不过，处理宽度的时候%单位更合适，处理高度的 话 vh 单位更好。
px
px像素（Pixel）。绝对长度单位。像素px是相对于显示器屏幕分辨率而言的。
一般电脑的分辨率有{19201024}等不同的分辨率
19201024 前者是屏幕宽度总共有1920个像素,后者则是高度为1024个像素
vmin/vmax: 取视窗高度和宽度的最小值作为基准/取视窗高度和宽度的最大值作为基准。
如果窗口高度1080，宽度1920那么。1vmin=1080px/100=10.8px 1vmax=1920px/100=19.2px
8. 实现响应式布局的方法
什么是响应式： 一种网络页面设计布局，页面的设计与开发应当根据用户行为以及设备环境（系统平台，屏幕尺寸，屏幕定向等）进行相应的响应和调整
基本原理： 通过媒体查询检测不同的设备屏幕尺寸做处理，为了处理移动端，页面头部必须有meta声明viewport.
1) 媒体查询 + rem + flex布局
缺点：
在响应式布局中，必须通过js来动态控制根元素font-size的大小，也就是说css样式和js代码有一定的耦合性，且必须将改变font-size的代码放在css样式之前。
解决：
默认情况下我们html标签的font-size为16px,我们利用媒体查询，设置在不同设备下的字体大小。
2）媒体查询 + 百分比布局
缺点：
不易计算，布局问题变得复杂
3）媒体查询 + vw + rem布局
给根元素大小设置随着视口变化而变化的vw单位，这样就可以实现动态改变其大小
限制根元素字体大小的最大最小值，配合body加上最大宽度和最小宽度
4）Bootstrap栅格系统
9. 什么是媒体查询
媒体查询是可以针对不同的媒体类型定义不同的样式，从而实现响应式布局 ，也可以针对不同的分辨率设置不同的样式。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
10. Flex弹性布局有哪些属性
flex-direction ： 决定元素是横排还是竖着排
flex-wrap ：设置了弹性容器超出时，是否换行
flex-flow ：flex-direction 和 flex-wrap 的简写
align-items ：设置弹性容器的子元素在纵轴方向的对齐方式
align-content ： 多行对齐方式
justify-content ：设置弹性容器子元素在横轴方向上的对齐方式
11. 隐藏元素的方法
display：none，不会在页面中占据位置，也不会响应绑定的监听事件。
visibility：hidden，元素在页面中仍占据空间，但是不会响应绑定的监听事件。
opacity：0，将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。
12. display:none和visibility:hidden的区别？
display:none 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。
visibility:hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间。
13. rgba和opacity的透明效果有什么不同
Rgba即可以指定元素颜色也可以指定透明度，opacity只能控制元素透明度不能设置颜色
Rgba透明度是基于实际颜色而opacity是针对元素本身透明度设置，在使用rgba是可以实现元素不同部位透明度不同，而opacity使元素透明度一致
支持rgba的浏览器比支持opacity的更普遍但是在低版本的ie中rgba不被支持而支持opacity
14. display的属性值及作用
15. display的block，inline和inline-block区别
block: 会独占一行，多个元素会另起一行，可以设置width、height、margin和padding属性;
inline: 元素不会独占一行，设置width、height属性无效。但可以设置水平方向的margin和padding属性，不能设置垂直方向的padding和margin;
inline-block: 将对象设置为inline对象，但对象的内容作为block对象呈现，之后的内联对象会被排列在同一行内。
16. position的值， relative和absolute分别是相对于谁进行定位的
relative: 相对定位，相对于自己本身在正常文档流中的位置进行定位。
absolute: 生成绝对定位，相对于最近一级定位不为static的父元素进行定位。最终找到body
fixed: （老版本IE不支持）生成绝对定位，相对于浏览器窗口或者frame进行定位。
static: 默认值，没有定位，元素出现在正常的文档流中。
sticky: 生成粘性定位的元素，容器的位置根据正常文档流计算得出。
17. 清除浮动
清除浮动主要是为了解决，父元素没有设置高度时，因为子级元素浮动引起的内部高度为0的问题
方法：
- 给需要清除浮动的元素设置样式：clear：both
- 父元素结束标签之前插入清除浮动的块级元素
- 利用伪元素（clearfix）.clearfix :: after{ clear：both }
- 给父元素构建一个BFC，比如overflow为hidden，display为flex
额外标签法： 给谁清除浮动，就在其后额外添加一个空白标签
优点： 通俗易懂，书写方便。（不推荐使用）
缺点： 添加许多无意义的标签，结构化比较差。
父级添加overflow方法： 可以通过触发BFC的方式，实现清楚浮动效果。优点： 简单、代码少、浏览器支持好
缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。不能和position配合使用，因为超出的尺寸的会被隐藏。
使用after伪元素清除浮动： :after方式为空元素的升级版，好处是不用单独加标签了。
优点： 符合闭合浮动思想，结构语义化正确，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）
缺点： 由于IE6-7不支持
18. 什么是 BFC
BFC 也就是常说的块格式化上下文，这是一个独立的渲染区域，规定了内部如何布局， 让处于 BFC 内部的元素和外部的元素相互隔离，并且这个区域的子元素不会影响到外面的元素，其中比较重要的布局规则有内部 box 垂直放置，计算 BFC 的高度的时候，浮动元素也参与计算。
触发条件：
根元素，即HTML元素
浮动元素：float值为left、right
overflow值不为 visible，为 auto、scroll、hidden
display的值为inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
position的值为absolute或fixed
应用场景：
防止margin重叠
清除内部浮动
自适应多栏布局
19. 可继承属性和不可继承属性
1） 可继承
font-family：字体系列
font-weight：字体的粗细
font-size：字体的大小
text-indent：文本缩进
text-align：文本水平对齐
line-height：行高
color：文本颜色
visibility：控制元素显示隐藏
cursor：光标显示为何种形态
2） 不可继承
盒子模型属性：width、height、border、margin、padding
display：规定元素应该生成的框的类型
vertical-align：垂直文本对齐
background：背景属性
定位属性：float、position
20. 如何实现盒子的水平垂直居中？
1) felx布局
<div class="box"> <div class="box-content"></div> </div> 方式一 .box { display: flex; justify-content: center; align-items: center; } 方式二 .box { display: flex; .box-content { margin: auto; //垂直水平居中 margin： auto 10px; //垂直居中 margin： 10px auto; //水平居中 } }
2) 定位 + 偏移
<div class="box"> <div class="box-content"></div> </div> .box { position: relative; .box-content { width: 200px; height: 200px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) //（不知道盒子宽高）偏移自身的宽度和高度的 -50% transform: translate(-100px, -100px) //（知道盒子宽高）偏移自身的宽度和高度的一半 } }
21. 如果要做优化，CSS提高性能的方法有哪些？
内联首屏关键CSS
避免使用css表达式
异步加载CSS
资源压缩
合理使用选择器
减少使用昂贵的属性 如
box-shadow/border-radius/filter/透明度/:nth-child等不要使用@import
22. pageX，clientX，screenX，offsetX区别
pageX/Y： 对于整个页面来说，包括了被卷去的body部分的长度
clientX/Y： 点击位置距离当前body可视区域的x，y坐标
screenX/Y： 点击位置距离当前电脑屏幕的x，y坐标
offsetX/Y： 相对于带有定位的父盒子的x，y坐标
23. base64的原理及优缺点？
优点可以加密，减少了
HTTTP请求缺点是需要消耗
CPU进行编解码
24. li 与 li 之间有看不见的空白间隙是什么原因引起来的，怎么解决
原因：
浏览器的默认行为是把 inline 元素间的空白字符（空格换行 tab）渲染成一个空格，也就是我们上面的代码<li>换行后会产生换行字符，而它会变成一个空格，当然空格就占用一个字符的宽度
解决方案： 消除间隔
ul { letter-spacing: -5px; } ul li { letter-spacing: normal; }
25. 画一个三角形
.box {
width: 0;
height: 0;
border-width: 100px;
border-style: solid;
border-color: transparent #0099CC transparent transparent;
transform: rotate(90deg); /*顺时针旋转90°*/
}
<div class="box"></div>
26. 画一条0.5px的直线？
考查的是css3的transform
height: 1px; transform: scale(0.5);
27. CSS3动画有哪些？
transition 实现渐变动画 transition动画详解
transform 转变动画 transform属性详解
animation 实现自定义动画 animation详解
28. CSS3渐变？
CSS3 定义了两种类型的渐变（gradients）：
线性渐变 - 向下/向上/向左/向右/对角方向
径向渐变 -（Radial Gradients）- 由它们的中心定义
线性渐变：语法：background-image:linear-gradientdirection,color-stop1,color-stop2,……);
direction：渐变方向/角度，可选（45deg，to bottom，to top,to right,to left,to left top…）
color-stop：选择颜色rgba可以设置透明度，也可以设置色标点区域 例：rgba(255,255,255,0.3) 20%
径向渐变：语法：background-image: radial-gradient(shape size at position, start-color, …, last-color);
shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。
size：主要用来确定径向渐变的结束形状大小。如果省略了，其默认值为“farthest-corner”
at position起点：中心点的位置，可以是关键字（水平方向–left,center,right, 垂直方向–top,center,bottom），具体数值或百分比。
