途虎养车笔试+一面二面hr面

5.8 笔试

考试时间1.5h，有20道选择题，3道编程题，难度不大，力扣简单题

5.16 一面

• 自我介绍
• 介绍一个感觉最好的项目
• 介绍项目的难点
• 答案tensorflow人脸识别+JWT后端权限验证
• 为什么使用tensorflow，不使用face-api等封装好的？
• 冗余、轻便，自己封装好控制，不太重
• 前端为什么选择react不使用vue？对比一下两个框架
• 从设计思路、底层编译、写法、优势等方面结合：react是单向数据流，vue是双向数据绑定，经典mvvm框架；
• react是all in js，vue使用模板，html，css，js结合；
• react是类式的写法，api很少，而Vue是声明式的写法，通过传入各种options，api和参数都很多。所以react结合typescript更容易一起写，Vue稍微复杂；
• vue模板和渲染函数的弹性选择， 简单的语法及项目创建， 更快的渲染速度和更小的体积，react更适用于大型应用和更好的可测试性，同时适用于Web端和原生App， 更大的生态圈带来的更多支持和工具 。
• flex:1
• flex-grow 和 flex-shrink、flex-basis 的简写，默认值为 0 1 auto。flex:1为1 1 auto
• 垂直居中
• 文字（line-height）、display: flex、transform:translate(0， -50%)、align-items:center
• 前端做了哪些优化？
• 压缩Gzip、缓存、大图切割、lazy、CDN、减少重排重绘
• CDN是什么？原理
• 动态选择最近的服务器进行服务提供
• CSS层有什么优化？或者做了哪些工作
• 渐进增强
• BEM规范
• 深拷贝手写
• 底层级：JSON.parse(JSON.stringify(obj))
• 深度嵌套：递归
• new原理？手写

function myNew(fn, ...args){
	let ojb = Object.create(fn, prototype)
	let res = fn.call(obj, ...args)
	if(res && (typeof res === 'object' || typeof res === 'function')){
		return res
	}
	return obj
}

• 数据类型判断
• typeof、instanceof、Object.prototype.toString.call()
• 扩展细说区别
• js数据类型？区别
• Number(数字),String(字符串),Boolean(布尔),Symbol(符号),null(空),undefined(未定义)在内存中占据固定大小，保存在栈内存中； Object(对象)、Function(函数)。其他还有Array(数组)、Date(日期)、RegExp(正则表达式)、特殊的基本包装类型(String、Number、Boolean) 以及单体内置对象(Global、Math)等 引用类型的值是对象 保存在堆内存中，栈内存存储的是对象的变量标识符以及对象在堆内存中的存储地址。
• 算法：链表反转
• 反问
• 部门方向、业务、技术栈、前景

5.17 约二面

5.18 二面

• 互相自我介绍
• 挑一个介绍项目
• 细嗦tensorflow，做了哪些工作？模型怎么训练的
• 谁挑选的技术栈？为什么选择tensorflow？后端承担了哪些工作？前端有多少人，怎么分工的
• 场景题：100000条数据渲染

const renderList = async () => {
    const list = await getList()
    const total = list.length
    const page = 0
    const limit = 200
    const totalPage = Math.ceil(total / limit)
    const render = (page) => {
        if (page >= totalPage) return
        setTimeout(() => {
            for (let i = page * limit; i < page * limit + limit; i++) {
                const item = list[i]
                const div = document.createElement('div')
                div.className = 'sunshine'
                div.innerHTML = `<img src="${item.src}" /><span>${item.text}</span>`
                container.appendChild(div)
            }
            render(page + 1)
        }, 0)
    }
    render(page)

• promise
• 异步编程的一种解决方案，pending(等待态)，fulfiled(成功态)，rejected(失败态)
• eventloop？有什么宏任务微任务
• 区分微任务宏任务
• 有微任务队列的代表就是.then，MutationObserver，宏任务的话就是setImmediate setTimeout setInterval
• this
• 普通函数调用：通过函数名()直接调用：this指向全局对象window（注意let定义的变量不是window属性，只有window.xxx定义的才是。即let a =’aaa’; this.a是undefined）
• 构造函数调用：函数作为构造函数，用new关键字调用时：this指向新new出的对象
• 对象函数调用：通过对象.函数名()调用的：this指向这个对象
• 箭头函数调用：箭头函数里面没有 this ，所以永远是上层作用域this（上下文）
• apply和call调用：函数体内 this 的指向的是 call/apply 方法第一个参数，若为空默认是指向全局对象window。
• 函数作为数组的一个元素，通过数组下标调用的：this指向这个数组
• 函数作为window内置函数的回调函数调用：this指向window（如setInterval setTimeout 等）
• 对象扁平化

function flattenObject(obj, prefix = '') {
  return Object.keys(obj).reduce((acc, k) => {
    const pre = prefix.length ? prefix + '.' : '';
    if (typeof obj[k] === 'object' && obj[k] !== null) {
      Object.assign(acc, flattenObject(obj[k], pre + k));
    } else {
      acc[pre + k] = obj[k];
    }
    return acc;
  }, {});
}

• 堆栈溢出
• JavaScript 的函数调用栈有一定大小限制，当函数调用的嵌套层数过多时，会导致栈溢出错误。

function recursive() {// 递归出现栈溢出
    recursive();
}
recursive();

• JavaScript 的堆也有大小限制。堆是用来存储变量和对象等数据的一段内存空间，当我们创建了大量数据或者数据太大而超过了堆的容量时，就会触发堆溢出错误。

let arr = [];
while (true) {// 堆溢出
  arr.push('a');
}

• addeventlistener第三个参数作用
• 第三个参数是用来规定是采用捕获类型还是冒泡类型。默认false。如果参数为false，那么就采用冒泡型事件，那么事件就会从内部往外层触发。如果参数为true，那么就采用捕获型事件，那么事件就会充外层向内触发。

5.18 约三面

5.19 hr面试

• 薪资
• 手头offer
• 地点
• 学习能力
• 介绍一个简历
• 为什么选择前端
• 未来发展计划
• 介绍途虎

5.22 电话沟通

5.22 下午offer