面试题汇总

2019-05-09 本文已影响0人头大如牛

HTML题目

1. meta viewport是干什么的

<meta name="viewport" content="width=device-width, initial-scale=1, maximun-scale=1">

通过将初始缩放和最小缩放设置为0.86来限制一些智能手机的缩小操作。结果是水平滚动在任何方向都被抑制，用户可以根据需要放大。

<meta name="viewport" content="width=device-width, initial-scale=0.86, maximun-scale=3.0, minimum-scale=0.86">

2. 什么是函数式编程

�抽象问题搜知乎，代码问题搜MDN stackoverflow或者博客

3. 用过哪些html5标签

header main footer article
// 以下标签肯定会追问深入
canvas video audio

4. html5新特性

增加的标签

标签	描述
header	定义文档头部
footer	定义文档尾部
nav	定义文档导航
section	定义区块
article	定义页面独立的内容区域
aside	定义边栏
details	定义文档描述细节
summary	标签包含details元素标题
dialog	定义对话框，比如提示框
canvas	用于绘画的标签
audio	音频播放
video	视频播放

增强型表单type

输入类型	描述
color	选取颜色
date	从一个日期选择器选取一个日期
datetime	选择一个日期（UTC时间）
datetime-local	选择一个日期和时间（无时区）
email	包含一个邮件地址输入域
month	选择一个月份
number	数值的输入域
range	一定范围内的数字值输入域
search	用于搜索域
tel	定义输入电话字段
time	选择一个时间
url	URL地址的输入域
week	选择周和年

新增表单属性

属性	描述
placeholder	输入框提示灰色字
required	boolean属性，要求输入域不为空
pattern	描述了一个正则用于验证input值
min和max属性	设置了元素的最小值最大值
step	为输入域规定合法数字间隔
height和width	用于image类型input图像高度宽度
autofocus	boolean属性，页面加载自动获得焦点
multiple	boolean属性，规定input元素可选择多个值

5. canvas动画

标签只是容器，必须用js来绘制图形

// 创建画布标签
<canvas id="myCanvas" width="200px" height="200px" style="1px solid red"></canvas>

js才能绘图

<script>
    var myCanvas = document.getElementById("myCanvas");
    var ctx = myCanvas.getContext('2d');
    ctx.fillStyle = "blue";
    ctx.fillRect(0,0,150,75)
    
</script>

CSS

1. 两种盒模型，浏览器内核

盒模型	结构
W3C标准盒模型

2. 实现垂直居中

3. flex怎么用

<div class='container'>
    
</div>

4. BFC是啥

举例

5. css优先级

选择器	符号
id	#idName
class	.classname
相邻选择器	ul+div
子选择器	ul>div
后代选择器	ul div
通配符	*
属性选择器	a[href='xxx']
伪类选择器	a:after a:hover

6. 清楚浮动

.clearfix {
    content: '';
    display: block;
    clear: both;
}

JavaScript题目

1. ES6新特性

2. Promise、Promise.all、Promise.race分别怎么用

3.必考：手写函数防抖和函数节流

函数防抖和函数节流，都是优化高频率执行js代码的一种手段

函数节流实际应用场景，多数为监听页面元素滚动事件，示例代码

// 函数节流
var canRun = true;
document.getElementById("throttle").onscroll = function (){
    if (!canRun){
    // 判断状态是否空闲，如果在执行中，直接return
        return;
    }
    canRun = false;
    setTimeout(function(){
        console.log('函数节流')；
        canRun = true
    }, 300);
}

函数防抖是指对于事件被触发的一段时间后再进行的回调，如果这段时间又重新被触发，重新开始计时，适用于

表单组件输入内容的验证
多次点击导致的表单多次提交优化

// 函数防抖
function debounce(fn, wait) {
    var timer = null;
    return function(){
        var context = this
        var args = arguments
        if (timer) {
            clearTimeout(timer);
            timer = null;
        }
        timer = setTimerout(function(){
            fn.apply(context, args)
        }, wait)
    }
}
var fn = function (){
    console.log('boom')
}
setInterval(debounce(fn, 500), 1000)

4.必考：手写AJAX

var request = new XMLHttpRequest();
request.open('GET','/xxxx')
request.onreadystatechange = function () {
    if (request.response.status >= 200 && request.response.status < 300){
    console.log('请求成功')
    }else {
        console.log('请求失败')
    }
}
request.send()

5.必考：这段代码里的 this 是什么？

fn()
this => window/global
obj.fn()
this => obj
fn.call(xx)
this => xx
fn.apply(xx)
this => xx
fn.bind(xx)
this => xx
new Fn()
this => 新的对象
fn = ()=> {}
this => 外面的this

6.必考：闭包/立即执行函数是什么？

7.必考：什么是 JSONP，什么是 CORS，什么是跨域？

8.常考：async/await 怎么用，如何捕获异常？

9.常考：如何实现深拷贝？

递归
判断类型
检查循环引用（环）
不可能拷贝原型proto

10.常考：如何用正则实现 trim()？

function trim(string){
    return string.replace(/^\s+|\s+$/g,'')
}

11.常考：不用 class 如何实现继承？用 class 又如何实现？

function Animal(){
    this.a = 1
}
Animal.prototype.move = function(){}

function Dog(){
    Animal.apply(this, arguments)
    this.d = 2
}

let f = function(){}
f.prototype = Animal.prototyoe
Dog.prototype = new f()

Dog.prototype.constructor = Dog

Dog.say = function(){}

class Dog extends Animal{
    constructor(){
        super()
    }
}

12.常考：如何实现数组去重？

hash
[...new Set(array)]
WeakMap

13.放弃：== 相关题目（反着答）

14.送命题：手写一个 Promise

15.js垃圾回收机制

window永远不会是垃圾，页面所有属性都挂载在window上面，全局变量
对象如果没有被引用，将会成为垃圾被回收，即使引用别人也不行

孤岛机制，环引用中 family=null 剩下的互相引用也会成为垃圾

垃圾回收机制会从全局变量向下找，引用的对象会mark出来，全部mark之后，会将没有mark的部分视为垃圾清除
被成为标记-清除算法（mark-sweep）
js为单线程，每次标记的时候会中断js的代码，
三种优化：

new代 old代
增量执行，分批多次执行
空闲时间执行

引用计数算法

DOM面试题

1. 事件委托

ul.addEventListener('click', function(e){
    if(e.target.tagName.toLowerCase() === 'li'){
        fn()//执行某个函数
    }
})

bug：如果li里面有span被点击无法穿透到li标签监测到被点击

function delegate(element, eventType, selector,fn) {
    element.addEventListener(eventType, e => {
        let el = e.target
        while(!el.mathes(selector)){
            if(element === el) {
                el = null
                break
            }
            el = el.parentNode
        }
        el & fn.call(el, e, el)
    })
    return element
}

这里思路为，点击span后，递归遍历span的祖先元素查看有没有ul里面的li，适用的事件 click，mousedown，mouseup，keydown，keyup，keypress。

2. 实现一个可拖拽的div

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div id="xxx"></div>
</body>
</html>

css

div{
  border: 1px solid red;
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
}

*{margin:0; padding: 0;}

var dragging = false;
var position = null;

moveDiv.addEventListener('mousedown',function(e){
  dragging = true;
  position = [e.clientX,e.clientY]
})

document.addEventListener('mousemove',function(e){
  if(dragging === false){
    return
  }
  const x = e.clientX;
  const y = e.clientY;
  const newX = x - position[0];
  const newY = y - position[1];
  // 因为left top 自带px，需要转化成数字
  const numLeft = parseInt(moveDiv.style.left || 0);
  const numTop = parseInt(moveDiv.style.top || 0);
  moveDiv.style.left = numLeft + newX + 'px';
  moveDiv.style.top = numTop + newY +'px';
  position = [x,y]
  console.log(position)
})

document.addEventListener('mouseup',function(){
  dragging = false;
})

HTTP题目

1. HTTP状态码有哪些?分别是什么意思

2xx 表示成功
3xx 表示需要进一步操作
4xx 浏览器方面出错
5xx 表示服务器方面出错

2. HTTP缓存有哪几种

Etag、CacheControl、Expires的异同

详情