前端试题集合

引用作者：
https://juejin.im/post/5b03e79951882542891913e8
金三银四魔都两年半前端面经
浅谈js防抖和节流

css html篇

1、元素水平垂直居中

A元素垂直居中
A元素距离屏幕左右各边各10px
A元素里的文字font—size:20px,水平垂直居中
A元素的高度始终是A元素宽度的50%

	<style type="text/css">
		*{
			margin: 0px;
			padding: 0px;
		}
		.box{
			display: relative;
		}
		.content{
			width: calc(100vw - 20px);
			height: calc(50vw - 10px);
			border:1px solid red;
			font-size: 20px;
			position: absolute;
			top: 50%;
			margin-top: calc(5px - 25vw);
			margin-left: 10px;
			// 元素水平垂直居中 方法一：
			line-height: calc(50vw - 10px);
			text-align: center;
			// 元素水平垂直居中 方法二：
			display: flex;
			align-items: center;
			justify-content: center;
		}
	</style>
	-------------------------------------------------------
	<div class="box">
		<div class="content">111</div>
	</div>

2、事件循环和回调队列

微任务：promise
宏任务：setTimeout
async执行之后，遇到await先返回（async返回promise对象），再走promise的方法，再走async里的的代码，再走promise then里的代码，最后是setTimeout（await返回promise对象的处理结果，也就是then）

async function async1(){
console.log(‘async1 start’)
await async2()
console.log(‘async1 end’)
}
async function async2(){
console.log(‘async2’)
}
console.log(‘script start’)
setTimeout(function(){
console.log(‘setTimeout’)
},0)
async1();
new promise(function(resolve){
console.log(‘promise1’)
resolve();
}).then(function(){
console.log(‘promise2’)
})
console.log(‘script end’)

3、手写bind方法

Function.prototype.my_bind = function() {
      var self = this, // 保存原函数
        // 保存需要绑定的this上下文
        context = Array.prototype.shift.call(arguments), 
        // 上一行等价于 context = [].shift.call(arguments);
        // 剩余的参数转为数组
        args = Array.prototype.slice.call(arguments); 
      // 返回一个新函数
      return function() { 
        // 这里的arguments是9
        self.apply(context, Array.prototype.concat.call(args, Array.prototype.slice.call(arguments)));
      }
    }

  function a(m, n, o) {
    console.log(this.name + ' ' + m + ' ' + n + ' ' + o);
  }

  var b = {
    name: 'kong'
  };

  a.my_bind(b, 7, 8)(9); // kong 7 8 9

4、URL从输入到页面渲染全流程

DNS域名解析
TCP连接
HTTP请求
处理请求返回HTTP响应
页面渲染
关闭连接

5、JS防抖与节流

窗口resize、scroll时，如果不加以控制，调用频率太高

防抖(debounce)

设置一个时间节点2s；在2s内，没触发事件，则执行代码；2s内，触发事件，则清除计时，重新开始2s计时。

function debounce(fn,delay){
    let timer = null //借助闭包
    return function() {
        if(timer){
            clearTimeout(timer) 
        }
        timer = setTimeout(fn,delay) // 简化写法
    }
}

function resizeHandle() {
	console.log(document.body.clientWidth)
}

window.onresize = throttle(resizeHandle, 1000)

节流(throttle)

设置一个时间节点2s，在2s内，无论是否再次触发事件，都在2s后执行代码

function throttle(fn,delay){
   let valid = true
   return function() {
      if(!valid){
          //休息时间 暂不接客
          return false 
      }
      // 工作时间，执行函数并且在间隔期内把状态位设为无效
       valid = false
       setTimeout(() => {
           fn()
           valid = true;
       }, delay)
   }
}

6、[“1”, “2”, “3”].map(parseInt)输出结果