web前端面试题完美整理/涵盖html,CSS、JS、浏览器、Vue、React、移动web。_webgis开发最全技术面试题

本篇文章整理总结了一些前端面试题，涵盖面很广，并且面的都是知名大厂，所以这些题还是很有代表性的，都掌握以后一面基础面应该没什么问题，二面也能应付大半，奉上：
css相关

更多教程：https://sucaiip.com/

1. 万能居中

1.margin: 0 auto;水平
2.text-align: center;水平
3.行高，垂直
4.表格，center,middle；水平垂直
5.display:table-cell；模拟表格，all
6.绝对定位，50%减自身宽高
7.绝对定位，上下左右全0，margin:auto
8.绝对定位加相对定位。不需要知道宽高
9.IE6，IE7：给父元素设一个font-size:高度/1.14,vertical-align:middle

2. BFC优化

块格式化上下文, 特性:

使 BFC 内部浮动元素不会到处乱跑；

和浮动元素产生边界。

3. 盒模型哪两种模式？什么区别？如何设置
   标准模式: box-sizing: content-box; 宽高不包括内边距和边框

怪异模式: box-sizing: border-box

4. 常用清除浮动的方法，如不清除浮动会怎样？
   当父元素不给高度的时候，内部元素不浮动时会撑开, 而浮动的时候，父元素变成一条线, 造成塌陷.

额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）（不推荐）

父元素添加overflow:hidden; (触发BFC)

使用after伪元素清除浮动（推荐使用）

使用before和after双伪元素清除浮动

5. 删格化的原理
   比如antd的row和col, 将一行等分为24份, col是几就占几份, 底层按百分比实现; 结合媒体查询, 可以实现响应式

6. 纯css实现三角形

// 通过设置border
.box
{
width:0px;
height:0px;

        border-top:50px solid rgba(0,0,0,0);
        border-right:50px solid  rgba(0,0,0,0);
        border-bottom:50px solid green;
        border-left:50px solid  rgba(0,0,0,0);
        }
1
2
3
4
5

7. 高度不定，宽100%，内一p高不确定，如何实现垂直居中？

verticle-align: middle;

绝对定位50%加translateY(-50%)

绝对定位，上下左右全0，margin:auto

8. 至少两种方式实现自适应搜索
   rem, em

百分比

媒体查询

bs, antd等的栅格布局

9. 设置一段文字的大小为6px

谷歌最小12px, 其他浏览器可以更小

通过transform: scale实现

10. css菊花图

四个小圆点一直旋转

// 父标签
animation: antRotate 1.2s infinite linear;
// 子标签
animation: antSpin 1s infinite linear;
@keyframe antSpin {
to {
opacity: 1
}
}
@keyframe antRotate {
to {
transform: rotate(405)
}
}
// animation-delay: 逐个延迟0.4s
11. 关于em

123

456

// 此时子元素的font-size为40px, 宽度为80px(还要乘以子元素font-size的系数) 12. 关于vh, vw

vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%。
vh：viewpoint height，视窗高度，1vh等于视窗高度的1%。
vmin：vw和vh中较小的那个。
vmax：vw和vh中较大的那个。

13. Flex布局

flex-direction控制主副轴

flex-wrap控制换行(默认不换行)

flex-flow是上两个的结合

justify-content主轴对齐方式

align-items交叉轴对齐方式

14. overflow原理
    overflow: hidden能清除块内子元素的浮动影响. 因为该属性进行超出隐藏时需要计算盒子内所有元素的高度, 所以会隐式清除浮动

创建BFC条件(满足一个):

float的值不为none；

overflow的值不为visible；

position的值为fixed / absolute；

display的值为table-cell / table-caption / inline-block / flex / inline-flex。

15. 实现自适应的正方形:
    使用vw, vh

width百分比, height: 0, padding-top(bottom): 50%

16. 标准模式和怪异模式

document.compatMode属性可以判断是否是标准模式，当 document.compatMode为“CSS1Compat”，是标准模式，“BackCompat”是怪异模式。

怪异模式是为了兼容旧版本的浏览器, 因为IE低版本document.documentElement.clientWidth获取不到

怪异模式盒模型: box-sizing: border-box; 标准模式: box-sizing: content-box

17. CSS3实现环形进度条
    两个对半矩形遮罩, 使用rotate以及overflow: hidden进行旋转

18. css优先级

选择器的特殊性值表述为4个部分，用0,0,0,0表示。

ID选择器的特殊性值，加0,1,0,0。

类选择器、属性选择器或伪类，加0,0,1,0。

元素和伪元素，加0,0,0,1。

通配选择器*对特殊性没有贡献，即0,0,0,0。

最后比较特殊的一个标志!important（权重），它没有特殊性值，但它的优先级是最高的，为了方便记忆，可以认为它的特殊性值为1,0,0,0,0。

JS相关

1. ES5和ES6继承方式区别

ES5定义类以函数形式, 以prototype来实现继承

ES6以class形式定义类, 以extend形式继承

2. Generator了解
   ES6 提供的一种异步编程解决方案, Generator 函数是一个状态机，封装了多个内部状态。

function* helloWorldGenerator() {
yield ‘hello’;
yield ‘world’;
return ‘ending’;
}

var hw = helloWorldGenerator();
调用后返回指向内部状态的指针, 调用next()才会移向下一个状态, 参数:

hw.next()
// { value: ‘hello’, done: false }
hw.next()
// { value: ‘world’, done: false }
hw.next()
// { value: ‘ending’, done: true }
hw.next()
// { value: undefined, done: true }
3. 手写Promise实现

var myPromise = new Promise((resolve, reject) => {
// 需要执行的代码
…
if (/* 异步执行成功 /) {
resolve(value)
} else if (/ 异步执行失败 */) {
reject(error)
}
})

myPromise.then((value) => {
// 成功后调用, 使用value值
}, (error) => {
// 失败后调用, 获取错误信息error
})
4. Promise优缺点

优点: 解决回调地狱, 对异步任务写法更标准化与简洁化

缺点: 首先，无法取消Promise，一旦新建它就会立即执行，无法中途取消; 其次，如果不设置回调函数，Promise内部抛出的错误，不会反应到外部; 第三，当处于pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成).
极简版promise封装:

function promise () {
this.msg = ‘’ // 存放value和error
this.status = ‘pending’
var that = this
var process = arguments[0]

process (function () {
that.status = ‘fulfilled’
that.msg = arguments[0]
}, function () {
that.status = ‘rejected’
that.msg = arguments[0]
})
return this
}

promise.prototype.then = function () {
if (this.status === ‘fulfilled’) {
arguments0
} else if (this.status === ‘rejected’ && arguments[1]) {
arguments1
}
}
5. 观察者模式

又称发布-订阅模式, 举例子说明.
实现: 发布者管理订阅者队列, 并有新消息推送功能. 订阅者仅关注更新就行

6. 手写实现bind

Function.prototype.bind = function () {
// 保存原函数
var self = this
// 取出第一个参数作为上下文, 相当于[].shift.call(arguments)
var context = Array.prototype.shift.call(arguments)
// 取剩余的参数作为arg; 因为arguments是伪数组, 所以要转化为数组才能使用数组方法
var arg = Array.prototype.slice.call(arguments)
// 返回一个新函数
return function () {
// 绑定上下文并传参
self.apply(context, Array.prototype.concat.call(arg, Array.prototype.slice.call(arguments)))
}
}
7. 手写实现4种继承

function Father () {}
function Child () {}
// 1. 原型继承
Child.prototype = new Father()
// 2. 构造继承
function Child (name) {
Father.call(this, name)
}
// 3. 组合继承
function Child (name) {
Father.call(this, name)
}
Child.prototype = new Father()
// 4. 寄生继承
function cloneObj (o) {
var clone = object.create(o)
clone.sayName = …
return clone
}
// 5. 寄生组合继承
// 6. ES6 class extend继承
8. css菊花图

四个小圆点一直旋转

// 父标签
animation: antRotate 1.2s infinite linear;
// 子标签
animation: antSpin 1s infinite linear;
@keyframe antSpin {
to {
opacity: 1
}
}
@keyframe antRotate {
to {
transform: rotate(405)
}
}
// animation-delay: 逐个延迟0.4s
9. http状态码

1**: 服务器收到请求, 需请求者进一步操作

2**: 请求成功

3**: 重定向, 资源被转移到其他URL了

4**: 客户端错误, 请求语法错误或没有找到相应资源

5**: 服务端错误, server error

304: Not Modified. 指定日期后未修改, 不返回资源

10. Object.create实现（原型式继承，特点：实例的proto指向构造函数本身）
11. async和await：

Generator函数的语法糖，将*改成async，将yield换成await。

是对Generator函数的改进, 返回promise。

异步写法同步化，遇到await先返回，执行完异步再执行接下来的.

内置执行器, 无需next()

12. 算法和数据结构：
    算法：
    解决具体问题所需要的解决方法。执行效率最快的最优算法。时间复杂度。输入，输出，有穷性，确定性，可行性。冒泡排序，二叉树遍历，最长回文，二分查找，指针，链表等，堆栈，队列等。力扣，codewar，算法导论。

数据结构：
逻辑结构：集合、线性、树形、图形结构
物理结构：顺序、链式存储结构

13. 封装JSONP
    1573610173410292.png

function jsonp ({url, param, callback}) {
return new Promise((resolve, reject) => {
var script = document.createElement(‘script’)
window.callback = function (data) {
resolve(data)
document.body.removeChild(‘script’)
}
var param = {…param, callback}
var arr = []
for (let key in param) {
arr.push(${key}=${param[key]})
}
script.src = ${url}?${arr.join('&')}
document.body.appendChild(script)
})
}
14. 手动实现map(forEach以及filter也类似)

// for循环实现
Array.prototype.myMap = function () {
var arr = this
var [fn, thisValue] = Array.prototype.slice.call(arguments)
var result = []
for (var i = 0; i < arr.length; i++) {
result.push(fn.call(thisValue, arr[i], i, arr