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 是什么？

1. fn()
   this => window/global
2. obj.fn()
   this => obj
3. fn.call(xx)
   this => xx
4. fn.apply(xx)
   this => xx
5. fn.bind(xx)
   this => xx
6. new Fn()
   this => 新的对象
7. fn = ()=> {}
   this => 外面的this

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

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

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

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

1. 递归
2. 判断类型
3. 检查循环引用（环）
4. 不可能拷贝原型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.常考：如何实现数组去重？

1. hash
2. [...new Set(array)]
3. WeakMap

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

14.送命题：手写一个 Promise

15.js垃圾回收机制

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

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

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

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

引用计数算法

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;}

js

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的异同

详情