时间节点:2019年8月份的提前批
本人面试状态:腾讯一面挂、字节一、二面、加面后挂
部分面试题有解答,部分我不太确定的答案就不放解答了。
1. 编程题小试牛刀(闭包):实现一个函数 sum(),可以实现这样的效果sum(1,2,3)(2)(1) = 9,即1+2+3+2+1 = 9,或者 sum(1)(2)(3).sumOf() = 6,即1+2+3 = 6。
简要分析:这里需要连续调用函数,并且要计算求和,并且这个求和的值还能缓存下来,实际上就是利用闭包实现累加求和。
function addSum(...numbers){
var sum = 0
for(let i of numbers){
sum += i
}
var f = function (...num) {
for(let i of num){
sum += i
}
return f
}
f.sumOf = function () {
return sum
}
return f
}
console.log(addSum(1,2,3)(5).sumOf()) // 11
2. 事件循环机制终极考验
补充阅读:https://www.jianshu.com/p/65a23cb06452
补充阅读:https://www.jianshu.com/p/0f97e6dadceb
请分析以下事件的输出顺序
async function a1() {
console.log('async1 start');
await a2();
console.log('async1 end')
}
async function a2(){
console.log('async2')
}
console.log('script start')
setTimeout(function(){
console.log('setTimeout')
}, 0);
a1();
new Promise((resolve)=>{
console.log('Promise1');
resolve();
}).then(()=>{
console.log('Promise2')
})
执行结果:
script start
async1 start
async2
Promise1
Promise2
async1 end
setTimeout
关键点在于 async1 end 为什么比 Promise2 后输出,此时需要把 async 函数转化成 promise 对象带入函数,发现输出async1 end的语句确实是先加入到微任务队列中去,但是他是一个嵌套的Promise.resolve(resolve),而 Promise2 虽然是后加入到微任务队列,但是它不是嵌套的,而是resolve(),所以 Promise.resolve(resolve)会先执行,然后又把resolve加入到微任务队列,然后Promise2输出,然后才输出 async1 end。
3. 函数节流和防抖动
概念:
节流 (throttle) 让一个函数不要执行的太频繁,减少执行过快的调用,叫节流。
函数节流就是让连续执行的函数,变为固定时间段间断地执行。
特点:固定时间清除一次计时器,只要计时器存在就不做任何操作,计时器一旦消失就执行一次函数并添加一个在固定时间后消失的计时器,可以使用闭包实现。
var print = function (){
console.log('hello world')
}
function throttlePro(delay, action) {
var tId;
return function () {
if (tId) return;
tId = setTimeout(function () {
action()
clearTimeout(tId);
// setTimeout 返回一个整数,clearTimeout 之后,tId还是那个整数,setInterval同样如此
tId = null;
}, delay);
}
}
window.onscroll = throttlePro(1000,print)
去抖 (debounce) 去抖就是对于一定时间段的连续的函数调用,只让其执行一次。
特点:连续函数不断地清除计时器,计时器只执行最后一次触发的函数,使用闭包实现记录一个计时器的实例。
函数去抖背后的思路是指,减少函数在一定时间段内连续调用的次数,只让其执行一次。创建一个定时器,在指定的时间间隔之后运行代码。当第二次调用该函数时,它会清除前一次的定时器并设置另一个。如果前一个定时器已经执行过了,这个操作就没有任何意义。然而,如果前一个定时器尚未执行,其实就是将其替换为一个新的定时器。目的是只有在执行函数的请求停止了一段时间之后才执行。
例如减少window.onscroll执行的频率,滚动一次滚轮会触发多次onscroll事件,使用函数去抖动的方式来它在指定时间内(500ms)只触发一次onscroll事件,节约资源,提高性能。
function print(){
console.log('hello world')
}
function debounce(delay, action) {
var tId;
return function () {
if (tId) clearTimeout(tId);
tId = setTimeout(function () {
action()
}, delay);
}
}
window.onscroll = debounce(500, print)
4. 如何判断一个对象为空?
(1)遍历属性法
一旦该对象的属性是可遍历的即说明该对象存在属性,则返回false,否则该对象为空对象。
function judgeObj(obj){
for(var attr in obj){
return false
}
return true
}
console.log(judgeObj({}))
(2)JSON.stringify() 方法
function judgeObj2(obj){
if(JSON.stringify(obj) == '{}')
return true
else
return false
}
console.log(judgeObj2({}))
(3)ES6 Object.keys()方法
Object.keys方法是JavaScript中用于遍历对象属性的一个方法 。
它传入的参数是一个对象,返回的是一个数组,数组中包含的是该对象所有的属性名。
function judgeObj3(obj) {
if(Object.keys(obj).length == 0){
return true
} else {
return false
}
}
5. TCP 和 UDP的区别?
不仅需要知道有哪些区别,还有理解其中的缘由。
(1)TCP是面向连接的,UDP是无连接的。TCP需要有三次握手连接,UDP不需要
(2)TCP提供可靠的服务,保证通过TCP连接传输的数据不会丢失、不会重复、保证传输有序,但不保证按序到达。(TCP:确认与重传机制、拥塞控制、流量控制)UDP不提供可靠性服务。
(3)TCP是面向字节流的,UDP是面向报文段的(一次发送一个报文)。
(4)UDP传输比TCP快,TCP首部开销20字节、UDP首部开销8字节
6. 如何使A类继承于B类?
7.假设有一个大数组arr,长度很大,几百万个,循环执行pop方法,怎么样提高效率?
8.HTTP所有的请求方法类型?
HTTP1.0 中定义的方法:GET, POST 和 HEAD方法
HTTP1.1 中新增的5种方法:OPTIONS, PUT, DELETE, TRACE 和 CONNECT 方法
1、OPTIONS
返回服务器针对特定资源所支持的HTTP请求方法,也可以利用向web服务器发送‘*’的请求来测试服务器的功能性
2、TRACE
回显服务器收到的请求,主要用于测试或诊断
GET和POST的区别
最直观的区别就是GET把参数包含在URL中,POST通过request body传递参数。
语义上对于GET方式用来获取数据,POST用来提交的数据。
GET方式提交的数据最多只能有1024字节(受URL地址长度影响),而POST则没有此限制
9.项目部分:如何实现头像的放大缩小、剪裁、图片懒加载是怎实现的?
10.算法部分: 合并两个有序数组、最长不重复子串、二叉树中是否存和为sum的路径
(1)合并两个有序数组(题目虽简单,但需要快和不出错,不写冗余的代码)
var merge = function(nums1, m, nums2, n) {
let nums = []
let i = 0
let j = 0
while(i < m && j < n){
if(nums1[i] <= nums2[j]){
nums.push(nums1[i++])
} else {
nums.push(nums2[j++])
}
}
while(i < m){
nums.push(nums1[i++])
}
while(j < n){
nums.push(nums2[j++])
}
return nums
};
(2)最长不重复子串
(3)二叉树中是否存在路径
1. 高性能数组去重的方法?(隐式转换,高频考点)
2. Webpack如何提高打包效率?
3. Webpack如果减少压缩体积?
4. Webpack打包的流程?
5.你的项目是如何构建的?
6.在你本期实习的项目中,你有哪些收获,沉淀下了什么技术?
7. 页面长时间出现白屏如何排查问题?如果不能使用开发环境如何定位问题?
8.数据隐式转换,数据类型判断
9. 跨域有哪些方法,同源的机制,设置同源的机制是为了什么?
10.如何实现一个Promise对象,实现Promise对象的链式调用?
11.Promise.all方法的实现
12.浏览器的缓存机制,包括缓存位置分类类型 强缓存、协商缓存
解答参考:https://www.jianshu.com/p/54cc04190252
浏览器缓存机制从缓存位置上来说分为四种
强缓存和协商缓存(通过设置HTTP的header来实现)
如果没有设置任何缓存会采用启发式算法。(date-last-modify)*10%
用户行为对浏览器缓存的影响:刷新、强制刷新、输入网址使用的缓存的位置
13.元素样式居中的几种方法?高度不固定。
14.== 和 === 的区别
15.作用域链
16.px、em、rem