先说一下个人情况,双非,无实习经验,自己做了个垃圾项目,不知道怎么前几天怎么突然被捞起来,就参加面试了。
一面
一面面试官人挺好的,循循善诱,引导我回答问题。
- 自我介绍
- 看你 Vue 挺熟悉的,说一下Vue 双向数据绑定实现(
Object.defineProperty
和Proxy
) - 表单输入内容,怎么更新到视图的呢?(我说了
v-model
,语法糖) - Vue 路由原理(
hash
和History
模式) - 说一下基本数据类型和引用类型
- 检测数据类型的方式(
typeof
,instanceof
,Object.prototype.toString.call()
),然后写一下Object.prototype.toString.call()
- 刚刚用到了
call
,和apply
和bind
有什么区别(传参,使用方法) - 说一下浏览器渲染过程,我说了解析
DOM
,处理CSS
,构建渲染树,最后绘制,这块说的很模糊,不一定对。 - 引申:回流和重绘的区别
script
标签会阻塞解析吗?会,怎么异步加载?(async
,defer
),有什么不同?(加载顺序)- 继续引申,如果现在有1000个div,怎么加载到页面上,怎么做,我说 Vue 由 虚拟
DOM
实现,他说原生呢?我说把节点的父元素从DOM
移除,添加到里面,然后再挂载回去。要是不能操作父元素呢?我不知道,就没继续问了。 - 说输出,为什么(简单说了下事件循环),结果是
2, 3, 5, 4, 1
setTimeout(() => { console.log('1') }) const promise = new Promise((resolve, reject) => { console.log('2') resolve() console.log('3') }) console.log('5') promise.then(() => { console.log('4') })
- 说下常用状态码
- 状态码说到了304,说一下强缓存(
Cache-control
和Expire
)和协商缓存 (Last-Modified
和ETag
) - 引申:前端文件协商缓存怎么实现的(
Webpack
打包,动态生成文件名) - 最后写代码:
解析 url,实现一个函数,其接受一个参数 url,返回解析query string后的对象。
输入:https://toutiao.com/home?a=q&b=w&c=e&a=r
输出: { a: [‘q’, ‘r’], b: ‘w‘, c: ‘e’ }
我说用 Map
, 就让我开写了。当时脑子卡壳了,在某个地方卡了很久,最后提示我我才做出来。面试结束后我又看了下,发现其实还有问题,我和他都没看出来。。。
修改后的
function getQueries(url) { let queries = url.split("?")[1].split("&"); const map = new Map(); queries.forEach((item) => { // const key = item.split("=")[0]; // const val = item.split("=")[1]; const [key, val] = item.split("="); if (!map.has(key)) { map.set(key, val); } else { let currVal = map.get(key); map.set(key, [...currVal, val]); } }); return Object.fromEntries(map); }
最后问我 split
两次好不好,我说不好。问我知不知道解构,估计是觉得做的还不够好,没用到解构。
另附对象实现
function getQueries(url) { const queries = url.split("?")[1].split("&"); const obj = {} queries.forEach((item) => { const [key, val] = item.split("="); if (!obj.hasOwnProperty(key)) { obj[key] = val } else { const currVal = obj[key] obj[key] = [...currVal, val] } }); return obj }
二面
一面刚刚结束不到10min,hr打电话通知马上二面
全部评论
(8) 回帖