最新前端⾯试中常见的⾯试题（附答案）
前端⾯试笔记
前⾔
关于前端⾯试的题，这⾥整理了⼀些⼲货，经常被问到的⼀些问题，出现频率⽐较⾼的问题，如有不⾜之处，请⼤家指出，持续更新…（ps：⼀到三颗 代表重要性）
⼀、HTML篇
1.语义话的⽬的是什么？
（这个问题问到过⼀两次可以忽略）
答：⽤正确的标签做正确的事
2.HTML5新特征
1. Canvas绘图以及SVG绘图。
2. 拖放（Drag and drop）API
3. 语义化标签（header、nav、footer、article、section）
4. ⾳频、视频（audio、video）API
5. 地理定位（Geolocation）
6. 本地离线存储（localStorage），长期存储数据，关闭浏览器后不丢失。
7. 会话储存（sessionStorage），数据在关闭浏览器后⾃动删除。
8. 表单控件（calendar、date、time、email、url、search）
9. 新技术如Web Worker、Web Socket。
1. 保存⽅式
cookie存放在客户的浏览器上。
session都在客户端中保存，不参与服务器通讯。
2. ⽣命周期
cookie可设置失效时间
localStorage除⾮⼿动清除否则永久保存
sessionStorage关闭当前页⾯或浏览器后失效
3. 存储的⼤⼩
cookie 4kb左右
session 5M
4. 易⽤性
cookie需⾃⼰封装
session可以接受原⽣接⼝
因为cookie每次请求都会携带在http请求中，所以它的主要⽤来识别⽤户登录,localStorage可以⽤来跨页⾯传参,sessionStorage可以⽤来保留⼀些临时数据。
关于storage使⽤的⽅式可以查看
⼆、CSS篇
1.css有哪些基本的选择器，执⾏先后顺序？
类选择器（class）、标签选择器、ID选择器
!important>内联样式（⾮选择器）>ID选择器>类选择器>标签选择器>通配符选择器（*）
2.垂直居中DIV
请看这⾥
3.两栏布局左边固定右边⾃适应
请看这⾥
3.三栏布局左右固定中⾃适应
请看这⾥
4.常⽤的块与⾏属性内标签有哪些？有什么特征
块标签：div、h1~h6、ul、li、table、p、br、form。
特征：独占⼀⾏，换⾏显⽰，可以设置宽⾼，可以嵌套块和⾏
⾏标签：span、a、img、textarea、select、option、input。
特征：只有在⾏内显⽰，内容撑开宽、⾼，不可以设置宽、⾼（img、input、textarea等除外）。
5.清除浮动
1. ⽗级div定义overflow:hidden
2. 结尾处加空div标签clear:both
3. ⽗级div定义height
4. ⽗级div定义overflow:auto
5. ⽤伪元素，⽗级div定义伪类:after（必须设置content）
6.CSS3新特征
1. 圆⾓（border-radius）
2. 阴影（box-shadow）
3. ⽂字特效(text-shadow)
4. 线性渐变（gradient）
5. 变换(transform)
6. 更多的CSS选择器
7. 更多背景设置（background）
8. ⾊彩模式（rgba）
9. 伪元素（::selection）
10. 媒体查询（@media）
11. 多栏布局（column）
12. 图⽚边框（border-image）
7.介绍⼀下盒模型
答：
1. 盒模型由内容(content)、内边距(padding)、边框(border)、外边距(margin)组成。
2. 盒模型分为IE盒模型和W3C标准盒模型。
3. W3C标准盒模型⼜叫content-box，元素宽度/⾼度由border+padding+content组成。
（属性width,height只包含内容content，不包含border和padding）
4. IE盒模型⼜叫border-box，元素宽度/⾼度由content组成。
（属性width,height包含border和padding，指的是content+padding+border。）PS：盒模型这个东西需要多理解。。。
8.CSS中有哪些长度单位？
1. 绝对长度单位：px
2. 百分⽐: %
3. 相对⽗元素字体⼤⼩单位: em
4. 相对于根元素字体⼤⼩的单位: rem
5. 相对于视⼝*宽度的百分⽐（100vw即视窗宽度的100%）: vw
6. 相对于视⼝*⾼度的百分⽐（100vh即视窗⾼度的100%）: vh
9.display:none和visibility:hidden的区别
display:none：隐藏元素，在⽂档布局中不在给它分配空间（从⽂档中移除）
visibility:hidden: 隐藏元素，但是在⽂档布局中仍保留原来的空间（还在⽂档中）
10. ⽤CSS 实现长宽为浏览器窗⼝⼀半的正⽅形
1. ⽤%
css布局左边固定右边自适应width:50%;
padding-top:50%;
background-color: red;
2. ⽤vw
width:50vw;
height:50vw;
background-color: red;
11. ⽤CSS 实现⾼度为0.5像素的线条
这个可以⽤伪类来实现
.
line::before {
display: block;
content:"";
height:1px;
left:-50%;
position: absolute;
background-color: #333333;
width:200%;//设置为插⼊元素的两倍宽⾼
-webkit-transform:scale(0.5);
transform:scale(0.5);
box-sizing: border-box;
}
12. ⽤CSS 实现三⾓形
向上
width:0;
height:0;
border-left:30px solid transparent;
border-right:30px solid transparent;
border-bottom:30px solid red;
三、JS篇
1.ES6新特性？
1. 新增块级作⽤域let定义变量和const定义常量
2. 变量的解构赋值
3. 模板字符串 （’${}’）
4. 默认参数（key=value）
5. 箭头函数（=>）
6. 扩展运算符（…）
7. 模块（import/export）
8. 类（class/extends）
9. Promise
10. Proxy
了解关于es6的更多知识可以看
2.闭包的理解
理解：主要是为了设计私有的⽅法和变量。
优点：可以避免全局变量造成污染。
缺点：闭包会常驻内存，增加内存使⽤量，使⽤不当会造成内存泄漏。
特征：（1）函数嵌套函数。（2）在函数内部可以引⽤外部的参数和变量。（3）参数和变量不会以垃圾回收机制回收。
3.call()、apply()、bind（）的区别
详情请看
4.原型，原型链
主要是还是实现继承与扩展对象。
1.每个函数对象都有⼀个 prototype 属性，这个属性就是函数的原型对象。
2.原型链是JavaScript实现继承的重要⽅式，原型链的形成是真正是靠__proto__ ⽽⾮prototype。
详细可以看看这篇⽂章
5.JS基本数据类型
1. Number：数值，包括整型和浮点型。
2. String：字符型。
3. Undefined：未定义，声明变量时未赋值。
4. Null：定义为空或者不存在。
5. Boolean：布尔值，true or false。
6. Object：对象，表⽰复合结构的数据集。
注：可以使⽤typeof运算符来监测类型
1. 均可导出常量、函数、⽂件、模块等。
2. 在⼀个⽂件或模块中，export、import可以有多个。export default仅有⼀个。
3. 通过export⽅式导出，在导⼊时要加{ }，export default则不需要。
7.箭头函数和普通函数的区别
1. 语法更加简洁、清晰，=>()
2. 箭头函数是匿名函数，不能作为构造函数，不能使⽤new
3. 箭头函数不能使⽤arguments，⽽⽤reat参数…解决
4. 箭头函数没有⾃⼰的this，会捕获其所在的上下⽂的this值，并且不能通过call()和apply()来改变其this
5. 箭头函数没有原型
8.GET和POST的区别
表⾯区别
1. 后退/刷新：GET⽆害，POST数据会被重新提交。
2. 书签：GET产⽣的URL地址可以被收藏为书签，⽽POST不可以。
3. 数据：GET⼀般是⽤来获取数据，POST提交数据。
4. 数据类型：GET只允许ASCII字符,POST⽆限制。
5. 数据⼤⼩：GET⼤⼩有限制（⼀般来说1024字节）,POST理论上来说没有⼤⼩限制。
6. 安全性：GET⽐POST更不安全，因为参数直接暴露在URL上，所以不能⽤来传递敏感信息。
7. 可见性：GET参数通过URL传递对所有⼈可见，POST数据不可见。
8. 历史保留：GET请求参数会被完整保留在浏览器历史记录⾥，⽽POST中的参数不会被保留。
9.forEach和map的区别
forEach没有返回值，map返回新的数组。

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