⼀到三年经验前端⾯试题总结——看完这些⽉薪过万没问题（持续更新中）前⾔：
以下是根据⾃⼰复习的资料和⾯试遇到的问题整理出来的，后⾯逐渐更新，复习⽤！！希望⼤家都能到满意的⼯作
我⾃⼰的技术栈是vue加⼩程序，所以react这⽅⾯写的少
因为是⾯试题总结，我就不详细的写知识点，只写最简洁的话术，⾯试能直接回答上来的
⼀、思想
1、说⼀下你是怎么学习前端的？padding是外边距还是内边距
这⾥每个⼈都不⼀样，⾃⾏回答就ok
⼆、html css html5和css3阶段
1、 说⼀下三栏布局，两边固定，中间⾃适应，五种
1浮动
2定位
3flex
4圣杯布局
5双飞翼布局
2、BFC
块级格式化上下⽂：
是⼀个独⽴的区域，渲染规则和外部⽆关
BFC产⽣的⽅法：
1、float的值不是none。
2、position的值不是static或者relative。
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4、overflow的值不是visible
3、html语义化是怎么理解的
元素本⾝包含了⼀些标签内所包含的内容类型的⼀些信息，浏览器或开发者能从标签知道其语义。
优点：内容呈现结构化，⽅便程序员进⾏阅读和维护，有利于浏览器的SEO
4、说⼀下flex
flex布局就是弹性布局，⽤来为盒⼦提供最⼤的灵活性，基于传统的盒⼦模型，依赖display属性+position属性+float属性，⽤起来⽐较⽅便
5、说⼀下rem em vw vh
px代表物理屏幕上能显⽰出的最⼩的⼀个点,
em 是相对于⽗级的字体⼤⼩,
rem是相对于HTML根元素的字体⼤⼩,
vh 和vw相对于视⼝的⾼度和宽度,1vh 等于1/100的视⼝⾼度，1vw 等于1/100的视⼝宽度
6、translate transform、 transition animation
transition（过渡）
transform（变换）
animation（动画）
translate:(移动)
参考链接：
7、css阻塞怎么办
1、使⽤CDN
2、对css进⾏压缩
3、 合理使⽤缓存
4、减少http请求树
参考链接：
8、介绍⼀下你认识的盒⼦模型
盒⼦简单来说就是⽤来装页⾯上的元素的矩形区域，CSS盒模型包括IE盒模型和标准的W3C盒模型
box-sizing有三个值：他们的主要区别是width包含的范围不⼀样
border-box：IE盒模型{怪异模式} width包含border和padding
padding-box：width包含padding+context+width
content-box：width包含content
9、类选择器的解析顺序，从左到右还是从右到左
从右到左
原因是遍历的时候能提⾼性能
参考链接：
10、⾏内元素和块级元素的区别
块级元素独占⼀⾏，可以设置宽⾼，⽔平⽅向margin和padding设置有效，垂直⽅向⽆效，可以包含⾏内元素和块级元素⾏内元素不独占⼀⾏，宽⾼设置⽆效，margin上下⽆效，padding上下⽆效，⾏内元素⽆法嵌套其他⾏内元素或者块元素11 、根节点的字体⼤⼩是怎么确定的
JS根据设备宽度设置根节点（html）font-size字体⼤⼩
参考链接：
12、⼏种隐藏⽅式及其不同点
7种⽅式：
1、display：none
2、visibility：hidden
3、opacity=0 透明度设置为0
4、position：absolute脱离⽂档流之后设置⼀个很⼤的负值
5、transform：scale（0），把⼀个元素⾊红孩⼦成为⽆限⼩，位置还在，看不见
6.HTML5 hidden attribute ，与display：none相同
7、height：0，overflow：hidden ，把元素在垂直⽅向上收缩为0，元素消失
8.filter：blur（0），把⼀个元素的模糊度设置为0，看不见了
不同点：
1、visibility: hidden----将元素隐藏，但是在⽹页中该占的位置还是占着。性能更好⼀点。不会回流
2、display: none----将元素的显⽰设为⽆，即在⽹页中不占任何的位置。
13、css动画⽐js动画的优势是什么
css动画优点：
1、浏览器可以对动画进⾏优化
3、强制使⽤硬件加速
缺点：
1.对动画的控制⽐较弱，没有回调函数
2、想实现复杂的动画代码⽐较长
js动画优点：
1、对动画控制能⼒很强
2、动画效果⽐css3更丰富
3、css3有兼容性问题，js没有
缺点：代码复杂度⾼于css3
js在浏览器的主线程中运⾏，可能丢帧
14. css预处理器
知道的有三种：
sass
less
stylus
使⽤less，在vue-cli中安装less的依赖 可以嵌套选择器 混合声明 继承属性
15、 清除浮动的⼏种⽅式
1.在浮动元素末尾加⼀个空标签 加clear：both属性
2.⽗元素添加overflow属性 触发BFC
3.使⽤after伪元素清除浮动
4.使⽤before和after双伪元素清除浮动
参考链接：
16、为什么css放到前⾯ js放到后⾯
这⾥涉及到的知识点是dom渲染
css放头部时 css的下载解析和html是同步进⾏的，如果放到尾部需要花费额外的时间来解析，加载出来的先试⼀个html页⾯，这样⽐较丑
js放在脚部是因为浏览器遇到js代码的时候，会⽴即下载执⾏，就会中断html的解析，如果js脚本过⼤会造成页⾯假死，阻塞
17、mate标签
mate标签是⼀个html头部的辅助性标签 可以定义页⾯编码语⾔UTF-8 搜索引擎悠哈 ⾃动刷新页⾯ 控制页⾯缓存，响应式窗⼝等等18、 img标签中alt和title的区别
alt是局部属性，⽤在图⽚加载失败时的替代⽂本
title是全局属性，提供额外的信息，⿏标滑到该元素是，显⽰定义的提⽰
19、css重置的原因
css重置就是重置浏览器的css默认属性
因为浏览器的品种很多，每个浏览器的默认样式不⼀样，⽐如a链接的下划线 li的前置圆点，我们在开发的时候是不需要的，元素的内边距和外边距 边框等等因此需要重置
⼀般开发之间会引⼊⼀个reset全局重置样式表进⾏重置css样式：
20、css3新特性
图⽚优化⽅法
21、link和import的区别
1、link是xhtml标签，⽆兼容性问题，@import是css2.1提出的，低版本浏览器不⽀持，只有ie5以上才⽀持
2、link能加载css javascript @import只能加载css
3、link链接的内容是和html页⾯同步加载的，@import需要等到页⾯全部加载完成之后才能加载。
22、canvas是什么
canvas是html5新增的⼀个可以使⽤js在其中绘制图像的html元素 简单来说就是⼀个画布
基本概念有坐标 绘图 基本图形，线条 路径 圆形 弧等等
23.css做圆形、做三⾓形
画⼀个圆
border-radus：50%
画⼀个三⾓形：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
/* css3绘制三⾓形 */
.triangle{
width: 0px;                          /*设置宽⾼为0，所以div的内容为空，从才能形成三⾓形尖⾓*/
height: 0px;
border-bottom: 200px solid #00a3af;
border-left: 200px solid transparent;    /*transparent 表⽰透明*/
border-right: 200px solid transparent;
}
</style>
</head>
<body>
<div class="triangle"></div>
</body>
</html>
三⾓形原理：
24、垂直居中的⽅法：
1、margin：auto
2、margin负值，设为宽度和⾼度的⼀半
3、display：table-cell（未脱离⽂档流）
4、display：flex
align-items:center
justfy-content:center
三、js JQuery
1、 js基本数据类型和基本数据类型的区别
基本数据类型：7种 新增⼀种
string
Number
null
underfined
Boolean
object（引⽤型。包括object array function）
symbol（ES6中新增 独⼀⽆⼆不会重复的）
bigInt
2、 js数据类型的检测和装换
检测：四种⽅式：
typeof
typeof是⼀元运算符，返回⼀个字符串类型，⽤来判断变量是否为空或者其类型
注：typeof不能判断null和object。其他都可以正确返回
instanceof ⽤来检测⼀个对象原型链上是否存在prototype属性
constructor判断引⽤类型
String.call() 最准确的⽅式 可以检测出所有类型
1、转化成为number两种⽅法：
number：v8底层引擎机制的转化规则
parseFloat parseInt 额外的⽅法
2.转化成为字符串：
tostring⽅法（）就是之前是什么样⼦ 在外层包⼀层引号
3、转化成布尔值：
‘ ’ underfined NaN null false 0这六个转化成为false 其他为true
参考链接：
3、实现instanceof
instanceof 运算符⽤于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。
所以实现instanceof的思路就是判断右边变量的原型是否存在于左边变量的原型链上。
function instanceOf(left, right) {
let leftValue = left.__proto__;
let rightValue = right.prototype;
while (true) {
if (leftValue === null) {
return false;
}
if (leftValue === rightValue) {
return true;
}
leftValue = leftValue.__proto__;
}
}
4、 什么是原型链

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。