MJ_001_01前端面经

web面经

由于公司宣布倒闭

所以不得不开始找工作，下面开始每场的面试经验分享，自我介绍略过。

面试是可以从中来感受企业的文化。有的令人怒不可遏，有的让人感受到礼仪。如果你被面的怒不可遏我建议直接走人。这样的公司就算你去了，你也迟早被同化。

注：如果写的有问题，请及时发邮件怼我trustfor@sina.cn

180807第一天(电面一家，约面2家)

1.先说电面的那家

  1. 什么是jsonp,什么是ajax
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
jsonp就是
1请求方创建一个script标签src指向响应方，并传递callback =回调函数名xxx
2响应方根据callback查询参数构造一个 xxx.call(undefined,传递的内容)
3浏览器接到响应，就会执行 xxx.call(undefined,传递的内容)
4请求方得到他想要的数据

ajax
实现原理就是使用XMLHttpRequest对象通过它来发请求
let request = new XMLHttpRequest();
request.open('get','/xxx');
request.send();
request.onreadystatechange = function(){
    if(request.readyState === 4){
        if(request.status >= 200 && request.status <300){
            console.log(request.responseText);
        }else{
            console.log(request.status);
        }
    }
}
  1. promise用了吗？用来干啥的 async/await用过吗？
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
promise就是解决 回调地域问题的，比如一些操作的校验 必须逐步成功才能往下走提交
window.ajax = function({url,method,body,headers}){
    return new Promise(function(resolve,reject){
        //ES6解构赋值
        let request = new XMLHttpRequest();
        request.open(method,url);
        for(let key in headers){
            let value = headers[key];
            request.setRequestHeader(key,value);
        }
        request.send(body);
        request.onreadystatechange = function(){
            if(request.readyState === 4){
                if(request.status >= 200 && request.status <300){
                    resolve.call(undefined,request.responseText)
                }else{
                    reject.call(undefined,request.status)
                }
            }
        }
    });
}

async和await用法：简单说来就是 异步代码同步执行
function xxx(x) { 
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(x);
    }, 2000);
  });
}

async function f1() {
  var x = await xxx(10);
  console.log(x); // 10
}
f1();
  1. js继承是什么？es6的继承了解吗
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
其实我认为js是没有继承的，它是用function模拟的，继承的原理是基于原型链的。

1.我们知道大部分编程语言应该都有Object类型,一般都称为所有类型的基类(也就是类型的顶端)
2.每种类型都有一个共有属性 prototype也就是浏览器里的双下proto 这个属性里放置了一些属性或方法。它被称为原型
3.每个类型都有自己的原型(共有属性)prototype 比如Number有 toFixed
4.此时如果你构造一个类型他就会天生有toString() valueOf()
5.这就是原型链继承，它会逐级向上查找，如果自己本身有这个方法则使用，没有则继续查找，如果顶端Object的prototype上都没有，是属性就undefined调用方法就报错

es6的继承：虽然它有关键字 class让你看起来像java的继承
但是依然是假的，不信你可以查看浏览器里打印 依然是基于prototype的
此时就有一个问题如果我想要一个 共有属性 class怎么办？
如果是prototype 可以很方便的
// ES5
Human.prototype.s = '人类'

// ES6 对不起,不支持,有一种变通的写法
class Human{
    constructor(name){
        this.name = name
    }
    //麻烦不？？？？
    //麻烦不？？？？
    //麻烦不？？？？
    get s(){
        return '人类'
    }
}
  1. vue用过吗？能简单说下双向绑定的原理吗？

原文参考没有比这个更简单的了,如果只是为了面试请看第一章节，如果深入了解看后面我是没看。。。

  1. vue-router用过吗？原理是什么

就是前端路由，通过#分割前后端,详情请看文档比我全多了文档

原理是H5的History

  1. vue组件间通信?

我之前的总结

1
2
3
4
5
父-->子  props
子-->父  子组件emit触发事件xx  父组件 监听xx事件

如果是祖孙三代，孙子给爷爷发消息
就是两个父子关系 emit 非常麻烦所以有了vuex
  1. vuex用过吗？原理是什么

vuex

原理就是一个全局变量，反正就一份，你怎么改都是改的一份

  1. vue的v-if和v-show的区别
1
2
3
4
5
6
v-if 是决定html结构里是否有这个元素
v-show是切换元素的display属性

有性能问题
频繁切换用v-show
如果仅初始化一次的用v-if
  1. vue生命周期方法？

看官网吧！https://cn.vuejs.org/v2/guide/

  1. vue angular react区别
1
2
3
4
5
6
7
8
vue和angular都是双向绑定的
react是单项数据流

angular 从语法书写上可以明显看出MVC思想，它大而全，关键的是官方宣布半年进行一次版本迭代，需要持续跟进学习，适合于大型项目，但是学习成本高

vue 简单快速上手，小而美，渐进式的更新各个功能，对初学者友好，因为作者是中国的，而且据统计 外国用react的多，中国用vue的多。

react facebook的自己造的轮子，单项的数据流，vue也慢慢转向单项数据流，支持jsx语法。可以用class的方式定义组件。通过render渲染，学习路径陡峭
  1. 什么是闭包
1
2
3
4
5
6
7
8
function wrapper(){
    var a = 1
    function inner(){
        a+=1
    }
    return inner
}
这就是闭包

2.直面的一个外派性质的公司

  1. 邮箱验证
1
2
3
4
5
6
7
var str = 'trustfor@sina.cn'
var reg = /^\w+@[a-z0-9]+\.[a-z]+$/i;
if(reg.test(str)){
    //合法
}else{
    //你丫写错了
}

如果你想了解正则

  1. 移动端页面怎么做适配
1
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  1. cookie是啥？前端数据存储了解吗？localStorage是啥？sessionStorage是啥区别呢？

cookie去看吧

session和持久化

  1. 了解数据解构吗？
1
2
3
4
5
6
7
队列(先进先出，请参考电影票是不是先买票的先走) 映射到数组就是 push() shift()

栈：后进先出，汉诺塔上面的盘子移走才能移动下面的盘子。映射到数组就是 push() pop()

树(二叉树/满二叉树/完全二叉树)

堆(最大堆/最小堆)
  1. 性能优化手段？
  • 后台设置gzip压缩
  • 后台设置cache-control 头指定过期时间(更详尽可以看)
  • 图片压缩合并(精灵图这是很久以前的了)
  • js压缩打包，css压缩打包，html压缩打包(webpack解决了这个问题)
  • dns预解析，减少同一域名解析时间
  • 图片懒加载，根据滚动距离高度来判断是否进行加载图片
  • 指定img的宽高，避免网速波动造成页面重排(腾地)
  • 异步加载组件vue

重复问题

  • 什么是闭包？
  • 手写ajax
  • promise
  • async/await
  • vue v-if和v-show区别
  • vue-router
  • vue组件传参
  • vue有哪些生命周期方法

3.直面的一个影视动漫相关的公司

  1. css import和link的区别

看去吧

  1. css隐藏元素的三种方式
  • 你可以将 opacity 设为 0
  • 将 visibility 设为 hidden
  • 将 display 设为 none
  • 将 position 设为 absolute 然后将位置设到不可见区域。
  1. vue适用于什么项目

单页面。开发周期短,项目成员少。看公司需求了。我觉得用啥都行

套用大志哥的送外卖例子：

在古代，你会选择飞毛腿
在有自行车的时候，你会选择骑车最快的
在现在买卖小哥都有了摩托，你会选择评论好的

结论就是：天下武功，唯快不破。你足够快就行

  1. less和sass的语法。写出你用的一些语法
  1. 移动页面1s加载的方案

看看别人的总结，肯定比我好

首屏优化

  1. 视频处理相关js了解吗？ 太冷门了。。。
  • 放弃治疗

重复问题总结

  • jsonp
  • 手写ajax
  • v-if和v-show区别
  • 前端三大框架的区别
  • cookie和 持久化存储
  • 前端性能优化
  • 什么是闭包

180808第二天(约面2家)

1.一个大数据 小程序方向

  1. 主要问项目经验。实现原理，这个看具体项目

这个看你的项目了。用到啥就说啥

  1. 小程序生命周期

照着文档找呗！

重复问题总结

  • 闭包
  • vue基础知识点，组件传参 v-if v-show区别
  • ajax
  • promise
  • 前端性能优化

2.一个中厂sina你懂的

  1. display有哪些值
  • block
  • inline
  • inline-block
  • flex
  • table
  • none
  1. 定位相关
1
2
3
4
5
6
如果一个div有position:absolute是相对谁定位？

逐级向上的父元素
如果有position:absolute就相对它
如果有position:relative就相对它
都没有就相对顶级元素 body
  1. 左端固定右边自适应的布局

实现链接

  1. 各种居中方式 水平，垂直，水平垂直居中

各种布局

  1. css3动画有哪些属性

看文档。。。

  1. es6你都指定哪些新特性

请参考我总结的es6速学

重复问题总结

  • 闭包
  • ajax
  • promise
  • async/await
  • vue组件传参
  • 三大框架区别
  • cookie和持久化相关
  • 前端性能优化

180809第三天(约面3家)

1.一个中厂58你懂的

  1. css3 改变一个div的样子 transform有哪些方法

还是mdn全啊

  1. 左面图片右边汉字你有几种做法？
1
2
3
4
5
6
7
8
9
1. 一个div实现：背景图定位到左边加  padding-left
2. flex布局:最外层容器
    display:flex;
    justify-content:flex-start; 
    左面图片设置宽高，
    右边flex-grow:1
3. 两个标签都左浮
4. position定位
5. table
  1. 正则过滤字符串里的 [“ ‘ 空格]
1
2
res = "aabbcc"
str = "\"\' aabbcc \'\""

  1. 给定一个字符串 aabcccddddcc 已知正则的实现请用replace输出为 2a1b3c4d2c的字符串

  2. vue子组件内有一个滚轮事件如何销毁

1
在生命周期的destroy里移除事件
  1. less/sass用过吗？
1
2
3
由于sass各种报错。我也不想死嗑在这种工具问题上。我用less，基于talkdata的iview就是用的less

答案是 sass通过配置是可以用的  需要装一个ruby的东西
  1. webpack了解吗?有哪些属性
1
2
3
4
5
6
entry 入口
output 输入路径
loads 加载器
plugs 插件

又问 用过什么！看你水平了。 当然是说你用的

重复问题总结

  • 双飞翼布局
  • 水平居中/垂直居中
  • vue组件通信
  • vuex
  • vue-router
  • v-if v-show
  • 双向绑定原理
  • promise
  • async/await
  • es6新特性有哪些

2.一个傲的像全球第一的不到30人的公司[好脉]果然是好卖

非常差的面试体验[中厂的新浪58人家也没像贵公司(不到30人的创业公司)这样]

  1. 开始「各种装」模式。垃圾回收的方式
1
2
3
4
可能真不会。我说把变量置空，移除事件。尽量用委托。事件里不要保存其他变量的引用。

还有呢？
又装了，这个一定是可以调的。(你可以回去看看。好吧！继续看你表演)
  1. 代码题
1
2
3
console.log(a)
var a = 1
答案 undefined 变量提升
  1. 代码题
1
2
3
4
5
6
7
8
9
console.log(a)
console.log(b)
{
var a = 1
let b = 2
}
答案 
第一行undefined
第二行报错
  1. 代码题
1
2
3
4
5
6
7
8
9
{
var a = 1
let b = 2
}
console.log(a)
console.log(b)
答案 
第一行 1
第二行报错
  1. 考察function传参。。。。无语了您是错的好吗？还让我自己浏览器试试。自己去试试再来面好吗？
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function A(A){ console.log(1)}
function A(A,B,C){ console.log(2)}

A(1)
A(1,2,3)
A()
答案 
2 同名函数会发生覆盖。 

你传递多少个参数你不使用有意义？我真不知道啥区别！别逗我行吗？
无论先后调用A函数  都会执行第二个。您居然跟我说执行第一个？厉害

又开始嘲讽啦！ 这个vue react angular变来变去都很简单。无外乎那么点东西。
(从没见过造轮子特别傲的人,但今天看见一个用别人轮子还那么傲的。vue作者都没那么狂。果然全球第一。)
  1. 函数传参的方式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function a(x,y,z){}

a(x,y,z)
a.call(undefined,x,y,z)
a.apply(undefined,[x,y,z])

沉默了一小下，问call、apply区别
区别
call第一参数是this,第二个之后才是你实际传的参数
apply第一参数是this,第二个是你实际传的参数数组

他：嘲讽开始，还有其他方式吗？
我：不清楚。我就想看你说啥！
他：回去自己查查。
我：(我估计你自己都不知道)
  1. 如何实现css加载是怎样的
1
2
3
4
5
6
7
8
各浏览器表现不一致 
google是小姐姐 化了妆出门
ie是女汉子 出门在化妆

我就要加载了css在显示页面呢？

非要实现都一直你就隐藏呗。加载完了在display:block
又开始嘲讽啦 说这有5/6种呢  你自己回去查查。
  1. 又开始装啦！ 问性能优化。怎么达到页面加载速度特快
1
2
3
我按之前的思路回答了，答的不好就不好呗！

又开始了，你回答的很范范。你可以去看看淘宝啊京东啊看他的页面结构抄他们的代码。
  1. 终于夸人了，我就觉得你这个问题回答的好(我醉了)

问埋点做过吗？如果细化到button级别怎么办。

1
事件委托呗。监听document 判断target.tagName是不是button

终于换了一个知书达理的面试官了，好的体验

  1. vue生命周期有几种(8种)
  2. v-if和 v-show区别
  3. js有几种数据类型(7)
  4. 如果实现vue的路由鉴权、菜单鉴权
1
2
3
4
5
6
7
第一种就是每次都发请求设置个cookie头

第二种
1. 登录的一瞬间后台返回 authList 存到sessionStorage里(加密一下，引个库肯定没问题)
 authList = ["if0001","if0002","if0003"] 对应路由的name属性
2. 路由守卫里判断 to.name 是否在authList里 
3. 分支处理
  1. 如何实现不用用户的不同菜单权限组
1
2
3
4
5
6
一、要么后天登录的时候给你生成

二、
1.在router定义的时候  自己定义个属性建议形如[if_authmenu] 公司前缀+权限名称 表示为这个路由是菜单
判断
2.生成路由菜单的时候说明已经登录了 权限数组在你这里 v-for的时候判断
  1. 路由有几种方式?什么是动态路由

看官网吧。

  1. H5有哪些新特性
  • worker 多线程的一个api
  • history 前端路由的实现
  • localStorage
  • sessionStorage
  1. 有没有对axios进行封装。也就是做统一的异常处理

然后面试着一半。就被需求会中断了。产品经理进来就占地。深刻的感受到啥叫野！

  1. axios发请求时为什么是两次
1
2
第一次是option方法  意思是询问 支持不支持我下面发送的方法
第二次是实际的get/put/post/delete等请求

重复问题总结

  • promise
  • async/await
  • v-router了解吗？有哪些方式
  • vuex原理
  • less/sass语法
  • webpack是否自己配置过？问我半天，咱公司自己配置的？我们也是vue-cli 厉害！

3.一个做区块链的挺厉害的公司包了三层办公。

也是非常好的体验！要求5-10年的，但我不够却说不在乎年限只要够优秀。

约的6点而且再三盛情邀请我去试试。cto面我先给我介绍公司现状。然后让我介绍。没有对比就没有伤害。 不知道比上家强多少倍

  1. 上来就算法。。。一紧张想错了整到快排了 50万个随机数的数组要求时间复杂度为O(n)求第三个最大的数
1
2
3
4
5
6
其实就是三次循环每次找最大值然后移除
第一次500,000 找到最大的 然后移除元素
第二次499,999 找到第二个最大的 然后移除元素
第三次499,998 找到第三个最大的 然后结束

时间复杂度 3n
  1. 找到匹配的右括号 
1
2
3
4
5
6
7
8
str = '((()()(()(()()))((()))))'
起点为 index = 1 的左括号 找到对应的右括号索引

答案是利用堆栈知识
左括号代表进栈 x++
右括号代表出栈 x--

所以 x = 0 时 就是匹配的那个右括号对应的索引
  1. 隔行变色。同时变色的行是45度 斑马线的条纹
1
2
3
.xx:nth-child(2n){
    线性渐变的代码。。。 我也不会
}
  1. 如何把表格里的数据给后台。数组形式
1
双重循环遍历成二维数组
  1. 如何添加参数发送一个请求
1
2
3
4
5
6
7
8
9
axios.post(url,param).then(
    ()=>{

    }
).catch(
    ()=>{

    }
)
  1. 如何实现一个树形组件，通过后台传递的格式如下内容
1
2
3
4
5
6
7
8
9
10
id      pid   cname
0100    null   北京
0101    0100   朝阳
0102    0100   海淀
0103    0100   昌平
0200    null   天津
0201    0200   和平
0202    0200   红桥
0203    0200   南开
又卡住了我。。。。
  1. 如何实现上下两部分。拖拽就可以改变上下两个div高度
1
又挂了。  iview-admin里有一个那么的组件