2022年前端面试题总结

一、HTML面试题

1.行内元素有哪些？块级元素有哪些？ 空(void)元素有哪些

答：
CSS规范规定，每个元素都有display属性，确定该元素的类型。每个元素都有默认的display值，如div的display默认值为“block”，则为“块级”元素；span默认display属性值为“inline”，是“行内”元素。
1.行内元素： a（锚点），b（粗体（不强调使用）），span（常用内联容器，定义文本内区块），img（图片），input（输入框），select（项目选择），strong（粗体强调），label（表格标签），cite（引用），code（计算机代码）
2.块级元素： div ul（无序列表）ol（有序列表）dl（定义列表）table（表格）form（表单）h1（一级标题）p（段落）pre（预格式化）

3.常见的空元素： <br> <hr> <img> <input> <link> <meta>

2.页面导入样式时，使用link和@import有什么区别？

答：

1. 类型不同
   link: 是html标签
   @import: 是css语法

2. 加载时机不同
   link: 引入的样式在页面加载时同时加载
   @import: 引入的样式需等页面完全载入以后再加载

3. 兼容性
   link: 是XHTML标签没有兼容性问题
   @import: 不兼容ie5以下

4. 动态改变
   link: 支持使用Javascript控制DOM去改变样式
   @import: 不支持

!important > 行内样式 > ID > 类、伪类、属性 > 标签名 > 继承 > 通配符

3.title与h1的区别、b与strong的区别、i与em的

区别？
答：

1. title与h1的区别
   　定义：
   　　　　title是网站标题，
   　　　　h1是文章主题
   　作用：
   　　　　title概括网站信息，可以直接告诉搜索引擎和用户这 个网站是关于什么主题和内容的，是显示在网页Tab栏里的；
   　　　　h1突出文章主题，面对用户，更突出其视觉效果，指向 页面主体信息，是显示在网页中的。

2. b与strong的区别
   　定义：
   　　　　b(bold)是实体标签，用来给文字加粗，
   　　　　strong是逻辑标签，作用是加强字符语气。
   　区别：
   　　　　b标签只是加粗的样式，没有实际含义，常用来表达无强调或着重意味的粗体文字，比如文章摘要中的关键词、 评测文章中的产品名称、文章的导言；
   　　　 strong表示标签内字符重要，用以强调，其默认格式是加粗，但是可以通 过CSS添加样式，使用别的样式强调。
   　
   建议：为了符合CSS3的规范，b应尽量少用而改用strong

3. i与em的区别
   　定义：
   　　　　i(italic)是实体标签，用来使字符倾斜，
   　　　　em(emphasis)是逻辑标签，作用是强调文本内容
   　区别：
   　　　　i标签只是斜体的样式，没有实际含义，常用来表达无强调或着重意味的斜体，比如生物学名、术语、外来语；
   　　　　em表示标签内字符重要，用以强调，其默认格式是斜体，但是可以通过CSS添加样式。

建议：为了符合CSS3的规 范，i应尽量少用而改用em

4.img标签的title和alt有什么区别？

答：

1. alt属性和title属性的相同点和区别：
   相同之处：它们都会出现一个小浮层，显示图片相关的内容
   不同之处如下：
   alt属性的特点：
   ① 倘若图片加载不成功未能显示出来，就会在图片未显示的地方出现 一段文字。这一作用是为了给未加载出来的图片提供信息，方便用户浏览网页，同时也方便开发人员维护网页。
   ②搜索引擎可以通过这个属性的文字描述获取图片
   title属性的特点：
   title属性可以用在任何元素上，当用户把鼠标移动到元素上时，就会出现title的内容，起到对图片说明的作用，其实质就是对图片的一种备注或者注释

通俗来讲，alt属性的实质是通过文字来代替图片的内容，而title属性的实质是对图片的描述或者注释。
总结：无论图片是否正常显示，图片仅设置title属性，当鼠标悬停图片时，可以看到图片的文字描述。当图片仅设置alt属性时，用鼠标悬停图片之上，可以看到该图片alt属性的替代文字。如果图片同时设置了title属性和alt属性，鼠标悬停时仅显示图片的title属性。

5.png、jpg、gif 这些图片格式解释一下，分别什么时候用？

答：
（1）BMP，是无损的、既支持索引色也支持直接色的、点阵图。这种图片格式几乎没有对数据进行压缩，所以BMP格式的图片通常
具有较大的文件大小。

（2）GIF是无损的、采用索引色的、点阵图。采用LZW压缩算法进行编码。文件小，是GIF格式的优点，同时，GIF格式还具
有支持动画以及透明的优点。但，GIF格式仅支持8bit的索引色，所以GIF格式适用于对色彩要求不高同时需要文件体积较小的场景。

（3）JPEG是有损的、采用直接色的、点阵图。JPEG的图片的优点，是采用了直接色，得益于更丰富的色彩，JPEG非常适合用来
存储照片，与GIF相比，JPEG不适合用来存储企业Logo、线框类的图。因为有损压缩会导致图片模糊，而直接色的选用，又会导致图片文件较GIF更大。

（4）PNG-8是无损的、使用索引色的、点阵图。PNG是一种比较新的图片格式，PNG-8是非常好的GIF格式替代者，在可能的情况下，应该尽可能的使用PNG-8而不是GIF，因为在相同的图片效果下，PNG-8具有更小的文件体积。除此之外，PNG-8还支持透明度的调节，而GIF并不支持。现在，除非需要动画的支持，否则我们没有理由使用GIF而不是PNG-8。

（5）PNG-24是无损的、使用直接色的、点阵图。PNG-24的优点在于，它压缩了图片的数据，使得同样效果的图片，PNG-24格式的文件大小要比BMP小得多。当然，PNG24的图片还是要比JPEG、GIF、PNG-8大得多。

（6）SVG是无损的、矢量图。SVG是矢量图。这意味着SVG图片由直线和曲线以及绘制它们的方法组成。当你放大一个SVG图片的时候，你看到的还是线和曲线，而不会出现像素点。这意味着SVG图片在放大时，不会失真，所以它非常适合用来绘制企
业Logo、Icon等。

（7）WebP是谷歌开发的一种新图片格式，WebP是同时支持有损和无损压缩的、使用直接色的、点阵图。从名字就可以看出来它是为Web而生的，什么叫为Web而生呢？就是说相同质量的图片，WebP具有更小的文件体积。现在网站上充满了大量的图片，
如果能够降低每一个图片的文件大小，那么将大大减少浏览器和服务器之间的数据传输量，进而降低访问延迟，提升访问体验。

•在无损压缩的情况下，相同质量的WebP图片，文件大小要比PNG小26%；
•在有损压缩的情况下，具有相同图片精度的WebP图片，文件大小要比JPEG小25%~34%；
•WebP图片格式支持图片透明度，一个无损压缩的WebP图片，如果要支持透明度只需要22%的格外文件大小。

但是目前只有Chrome浏览器和Opera浏览器支持WebP格式，兼容性不太好。

总结
针对JPG和PNG
1.单纯从图片所占存储空间的角度考虑，
颜色种类单一、主要以纯色或者渐变色进行填充的图片适合使用PNG格式存储；颜色种类多样、且颜色变化明显的图片适合使用JPG格式存储。

2.从移动开发角度考虑
LOGO、启动图标、按钮等适合用PNG，而背景图、广告等色彩变化多样的适合使用JPG

二、CSS面试题

1.介绍一下CSS的盒子模型

答：
①盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)
②类型： IE 盒子模型、标准 W3C 盒子模型；
③两种盒模型的主要区别是:标准盒模型的宽高是值内容宽高(content)
④而IE盒模型的宽高是指content+padding+border。
⑤设置盒模型的方式是：设置box-sizing
box-sizing:content-box 标准盒模型
box-sizing:border-box IE盒模型
⑥盒子模型的定位
网页默认的布局方式
浮动
Position定位

2.line-height和heigh区别

3.CSS选择符有哪些？哪些属性可以继承？

选择器
1、id选择器（ # myid）
2、类选择器（.myclassname）
3、标签选择器（div, h1, p）
4、相邻选择器（h1 + p）
5、子选择器（ul > li）
6、后代选择器（li a）
7、通配符选择器（ * ）
8、属性选择器（a[rel = “external”]）
9、伪类选择器（a:hover, li:nth-child）

可继承属性
1、font-size
2、font-family
3、color
4、UL LI DL DD DT

不可继承属性
1、border
2、padding
3、margin
4、width
5、height

4.CSS优先级算法如何计算？

5.用CSS画一个三角形

6.一个盒子不给宽度和高度如何水平垂直居中？

7.display有哪些值？说明他们的作用。

常用的有：
none：此元素不显示。
block：将元素显示为块级元素，前后会带换行符。
inline:默认值，元素会被显示为内联元素，前后没有换行符。
inline-block:行内块级元素。

8.对BFC规范(块级格式化上下文：block formatting context)的理解？

9.清除浮动有哪些方式？

10.在网页中的应该使用奇数还是偶数的字体？为什么呢？

答： 偶数字号相对更容易和 web 设计的其他部分构成比例关系，使用奇数号字体不好的地方是，文本段落无法对齐

11.position有哪些值？分别是根据什么定位的？

static：默认值
不脱离文档流，top，right，bottom，left 等属性不生效
绝对定位：absolute
绝对定位的关键是找对参照物，要成为绝对定位元素的参照物必须满 足以下两个条件：
1.参照物和绝对定位元素必须是包含与被包含关系；
2.该参照物必须具有定位属性；
如果找不到满足以上两个条件的父级定位包含块，那么相对于浏览器窗口进行定位

注：设置了 position:absolute;属性后，元素会脱离正常文档流，不在占据空间；左右 margin为 auto 将会失效；我们通过 left、top、bottom、right 来决定元素位置

相对定位：relative
参照物：元素偏移前位置（子绝父相，父级相对定位，主要给子级当参照物）
注：设置了相对定位，左右 margin 为 auto 仍然有效、并且不会脱离文档流。

固定定位：fixed
参照物：浏览器窗口；
注：固定定位会脱离文档流；
当绝对定位和固定定位参照物都是浏览器窗口时： 当出现滚动条时，固定定位的元素不会跟随滚动条滚动，绝对定位会跟随滚动条滚动

12.写一个左中右布局占满屏幕，其中左、右俩块固定宽200，中间自适应宽，要求先加载中间块，请写出结构及样式。

<div id="left">我是左边</div>
    <div id="center">我是中间</div>
    <div id="right">我是右边</div>

html,body{ margin: 0px;width: 100%; } 
#left,#right{width: 200px;height: 200px;background-color: aqua;
    position: absolute;}
    #left{left: 0;top:0;}
    #right{right: 0;top:0;}
    #center{margin: 0 200px;background-color: blue;height: 200px;}

样式表的元素选择器选择越精确，则其中的样式优先级越高：
id选择器指定的样式 > 类选择器指定的样式 > 元素类型选择器指定的样式
对于相同类型选择器制定的样式，在样式表文件中，越靠后的优先级越高
所以把类选择器center写在后面就可以了。

13.什么是CSS reset？

HTML标签在浏览器中都有默认的样式，不同的浏览器的默认样式之间存在差别。例如ul默认带有缩进样式，在IE下，它的缩进是由margin实现的，而在Firefox下却是由padding实现的。开发时浏览器的默认样式可能会给我们带来多浏览器兼容性问题，影响开发效率。所以解决的方法就是一开始就将浏览器的默认样式全部去掉，更准确说就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。这就是CSS reset。

Reset重置浏览器的css默认属性，浏览器的品种不同，样式不同，然后重置，让他们统一。

html {
overflow-x:auto;
overflow-y:scroll;
}
body, dl, dt, dd, ul, ol, li, pre, form, fieldset, input, p, blockquote, th, td {
font-weight:400;
margin:0;
padding:0;
}
h1, h2, h3, h4, h4, h5 {
margin:0;
padding:0;
}
body {
background-color:#FFFFFF;
color:#666666;
font-family:Helvetica,Arial,sans-serif;
font-size:12px;
padding:0 10px;
text-align:left;
}
select {
font-size:12px;
}
table {
border-collapse:collapse;
}
fieldset, img {
border:0 none;
}
fieldset {
margin:0;
padding:0;
}
fieldset p {
margin:0;
padding:0 0 0 8px;
}
legend {
display:none;
}
address, caption, em, strong, th, i {
font-style:normal;
font-weight:400;
}
table caption {
margin-left:-1px;
}
hr {
border-bottom:1px solid #FFFFFF;
border-top:1px solid #E4E4E4;
border-width:1px 0;
clear:both;
height:2px;
margin:5px 0;
overflow:hidden;
}
ol, ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
caption, th {
text-align:left;
}
q:before, q:after, blockquote:before, blockquote:after {
content:””;
}
2.百度（CSS Reset）：
body {
font-family:arial,helvetica,sans-serif;
font-size:13px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:1.4;
text-align:center;
}
body, ul, ol, dl, dd, h1, h2, h3, h4, h5, h6, p, form, fieldset, legend, input, textarea, select, button, th, td {
margin:0;
padding:0;
}
h1, h2, h3, h4, h5, h6 {
font-size:100%;
font-weight:normal;
}
table {
font-size:inherit;
}
input, select {
font-family:arial,helvetica,clean,sans-serif;
font-size:100%;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
}
button {
overflow:visible;
}
th, em, strong, b, address, cite {
font-style:normal;
font-weight:normal;
}
li {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
img, fieldset {
border:0 none;
}
ins {
text-decoration:none;
}
3.《超越css》（CSS Reset）：
/* Normalizes margin,padding */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td { margin:0;padding:0}
/* Normalizes font-size for headers */
h1,h2,h3,h4,h5,h6 { font-size:100%}
/* Removes list-style from lists */
ol,ul { list-style:none }
/* Normalizes font-size and font-weight to normal */
address,caption,cite,code,dfn,em,strong,th,var { font-size:normal; font-weight:normal }
/* Removes list-style from lists */
table { border-collapse:collapse; border-spacing:0 }
/* Removes border from fieldset and img */
fieldset,img { border:0 }
/* Left-aligns text in caption and th */
caption,th { text-align:left }
/* Removes quotation marks from q */
q:before,q:after { content:”}
4.Eric Meyer（CSS Reset）——推荐：
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ”;
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need ‘cellspacing=”0″‘ in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
5.YUI（CSS Reset）：
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:”;
}
abbr,acronym { 
border:0;
}

14.css sprite是什么,有什么优缺点

概念：将多个小图片拼接到一个图片中。通过background-position和元素尺寸调节需要显示的背景图案。

优点：
减少HTTP请求数，极大地提高页面加载速度。
增加图片信息重复度，提高压缩比，减少图片大小。
更换风格方便，只需在一张或几张图片上修改颜色或样式即可实现。

缺点：
图片合并麻烦。
维护麻烦，修改一个图片可能需要从新布局整个图片，样式。

15.display: none;与visibility: hidden;的区别

16.opacity 和 rgba区别

三．Vue

1.有使用过vue吗？说说你对vue的理解?

2.vue封装指令，常用的指令，应用场景有哪些？

3.说说你对SPA单页面的理解，它的优缺点分别是什么？如何实现SPA应用呢?

4.Vue中的key的作用、原理

5.Diff算法

6.Vuex的原理

7.Vue双向绑定原理，怎么实现

8.路由的几种模式，history的原理

9.请描述下你对vue生命周期的理解？在created和mounted这两个生命周期中请求数据有什么区别呢？

10.Vue的计算属性和侦听属性

11.Vue组件之间的通信方式都有哪些？

12.v-show和v-if有什么区别？使用场景分别是什么？

13.v-if和v-for的优先级是什么？如果这两个同时出现时，那应该怎么优化才能得到更好的性能？

14.SPA首屏加载速度慢的怎么解决？

15.Vue中组件和插件有什么区别？

16.为什么data属性是一个函数而不是一个对象？

17.动态给vue的data添加一个新的属性时会发生什么？怎样解决？

18.Vue实例挂载的过程是什么？

19.Vue中的$nextTick有什么作用？

20.说说你对vue的mixin的理解，有什么应用场景？

21.说说你对slot的理解？slot使用场景有哪些？

22.Vue.observable你有了解过吗？说说看

23.怎么缓存当前的组件？缓存后怎么更新？说说你对keep-alive的理解是什么？

24.Vue常用的修饰符有哪些？有什么应用场景？

25.Vue中的过滤器了解吗？过滤器的应用场景有哪些？

26.什么是虚拟DOM？如何实现一个虚拟DOM？说说你的思路

27.Vue项目中有封装过axios吗？主要是封装哪方面的？

28.你了解axios的原理吗？有看过它的源码吗？

29.SSR解决了什么问题？有做过SSR吗？你是怎么做的？

30.使用vue开发过程你是怎么做接口管理的？

31.说下你的vue项目的目录结构，如果是大型项目你该怎么划分结构和划分组件呢？

32.vue要做权限管理该怎么做？如果控制到按钮级别的权限怎么做？

33.Vue项目中你是如何解决跨域的呢？

34.vue项目本地开发完成后部署到服务器后报404是什么原因呢？

35.你是怎么处理vue项目中的错误的？

36.Vue3有了解过吗？能说说跟Vue2的区别吗？

四．JS

1.常用的es6数组的方法（一些算法题）

2.Href和src区别

3.图片怎么判断是否显示成功

4.浏览器渲染页面过程

5.浏览器输入网址后发生了什么

6.回流和重绘(BFC)

7.手写递归函数用作深拷贝,stringfy有什么缺点

8.手写一个闭包函数,它有一些什么缺点和优点

9.手写几个数组去重(一些算法题)

10.Promise函数的作用, async awite函数手写

11.防抖和节流函数,手写一个防抖和节流函数

12.说一说面向对象

13.说一说js的原型和原型链

14.Flex布局实现瀑布流,实现骰子布局

五．算法题

1.js一段字符串判断出现次数最多的

2.判断一个数据是否是数组、对象

字符串匹配及优化，两个字符串“ababceekabc” “abc” 找abc出现的第一个位置
KMP算法，暴力肯定没分
1.两数之和
扩展到15.三数之和
20. 有效的括号
88. 合并两个有序数组
226. 翻转二叉树
415.大数相加
扩展到43.大数相乘
455.分发饼干
704.二分查找
277.实现一个计算器II III需要会员，hard级别