面试题目-白红宇

遇到不太会的

举例

将不会的变成不会的 (追问细节,扩展为会的)

侃侃而谈

HTML

1. 你是如何理解HTML语义化的 ? - 用正确的标签做正确的事情 - html语义化让页面的内容结构化,结构更清晰,便于对浏览器搜索引擎解析; - 即使在没有css情况下也以一种文档格式显示,并且是易于阅读的; - 搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重,利于SEO; - 是阅读源代码的人对网站更容易将网站分块,便于阅读维护理解.

2. meta viewport 是做什么用的, 怎么写?

控制屏幕的缩放content的几个属性：    width viewport的宽度[device-width | pixel_value]width如果直接设置pixel_value数值，大部分的安卓手机不支持，但是iOS支持；    height – viewport 的高度 （范围从 223 到 10,000 ）    user-scalable [yes | no]是否允许缩放    initial-scale [数值] 初始化比例（范围从 > 0 到 10）    minimum-scale [数值] 允许缩放的最小比例    maximum-scale [数值] 允许缩放的最大比例    target-densitydpi 值有以下（一般推荐设置中等响度密度或者低像素密度，后者设置具体的值dpi_value，另外webkit内核已不准备再支持此属性）         -- dpi_value 一般是70-400//没英寸像素点的个数         -- device-dpi设备默认像素密度         -- high-dpi 高像素密度         -- medium-dpi 中等像素密度         -- low-dpi 低像素密度
    复制代码

canvas 是做什么的 ?

看 MDN canvas入门手册

CSS

1. 说说盒模型

盒子模型是css中一个重要的概念，理解了盒子模型才能更好的排版。其实盒子模型有两种，分别是 ie 盒子模型和标准 w3c 盒子模型。他们对盒子模型的解释各不相同，先来看看我们熟知的标准盒子模型：

从上图可以看到标准 W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。

从上图可以看到 IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading

避免触发IE盒模型的方法是使用声明，告诉IE采用W3C盒子模型即可。

2. css reset 和 normalize.css 有什么区别？

reset 重置，之前的样式我不要，a{color: red;}，抛弃默认样式

normalize 让所有浏览器的标签都跟标准规定的默认样式一致，各浏览器上的标签默认样式基本统一。

3. 如何居中？

水平居中: 内联: parent {    text-align: center}块级: margin: 0 auto;垂直居中:1. table 自带的  
    
                  我已经居中了       
     
    
2. 100% 高度的 afrer before 加上 inline block  // http://js.jirengu.com/tipat/1/edit3. div 装成 table  : display:table-cell; vertical-align: middle4. margin-top -50%5. translate -50%6. absolute margin auto    // position:absolute; margin:auto; top: 0;...7. flex复制代码

4. 选择器优先级如何确定？

选择器越具体，优先级越高。 #xxx 大于 .yyy

同样优先级，写在后面的覆盖前面的。

color: red !important; 优先级最高。

5. BFC 是什么？

6. 如何清除浮动？

overflow: hidden父元素.clearfix:after{    content:'.';    display: block;    clear: both;    height: 0;} .clearfix{    zoom: 1; /* IE 兼容 */ }复制代码

JS

1. JS 有哪些数据类型？

String NumberBooleanUndefinedNullObject  ==> Array Function Date RegExpSymbol复制代码

2. Promise 怎么使用？

then    $.ajax(...).then(成功函数, 失败函数)链式 then    $.ajax(...).then(成功函数, 失败函数).then(成功函数2, 失败函数2)如何自己生成 Promise 对象    function xxx(){        return new Promise(function(resolve, reject){            setTimeout(()=>{                resolve() 或者 reject()            },3000)        })    }    xxx().then(...)复制代码

3. AJAX 手写一下？

var xhr = new XMLHttpRequest()xhr.open('GET', 'url')xhr.onreadystatechange = function () {    if (xhr.readyState === 4) {        if ((xhr.status >= 200 && xhr.status <300) || xhr.status === 304 ) {            console.log(xhr.responseText())        }    }}xhr.send(null)复制代码

4. 闭包是什么？

function F1() {    var a = 100        // 返回一个函数, (函数作为返回值)    return function () {        console.log(a)  // 自由变量, 到父级作用域去找    }}var f1 = F1()var a = 200f1()  // 100复制代码

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

fn() 里面的 this 就是 window

fn() 是 strict mode，this 就是 undefined

a.b.c.fn() 里面的 this 就是 a.b.c

new F() 里面的 this 就是新生成的实例

() => console.log(this) 里面 this 跟外面的 this 的值一模一样

6. 什么是立即执行函数？使用立即执行函数的目的是什么？

(function (){    var name}())(function (){    var name})()!function (){    var name}()~function (){    var name}()造出一个函数作用域，防止污染全局变量ES 6 新语法{    let  name}复制代码

7. async/await 语法了解吗？目的是什么？

function returnPromise() {    return new Promise(function(resolve, reject) {        setTimeout(() => {            resolve('yym')        })    }, 1000)}returnPromise().then(result => {  // 异步写法    result === 'yym'})var result = await returnPromise()  // 同步写法result = 'yym'目的: 把异步代码写成同步代码。复制代码

8. 如何实现深拷贝？

1. var a = {...}JSON.parse(JSON.stringify(a))  // 先变成一个字符串,再变成对象缺点: JSON 不支持函数 引用 undefine RegExp Date ...2. 递归拷贝//递归function deepClone(oldObj){  //判断是不是对象  if(typeof oldObj !== 'object'){    return oldObj  }  //判断是否是内置对象类型  if(oldObj instanceof Array){    var newObj = []  }else{    var newObj = {}  }  //for- in用来枚举对象的属性  for(var key in oldObj){    //判断对象里面的属性是否是对象类型    if(typeof oldObj[key] === 'object'&& oldObj[key] !== null){      //是的话,在拷贝一次      newObj[key] = deepClone(oldObj[key])    }else{      //不是,把oldObj赋值给new      newObj[key] = oldObj[key]    }  }  return newObj}复制代码

9. 如何实现数组去重？

1.计数排序的逻辑（只能正整数）var a = [4,2,5,6,3,4,5]var hashTab = {}for(let i=0; i

10. 如何用正则实现 string.trim() ？

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

11. JS 原型是什么？

1. var a = [1,2,3]2. 只有0、1、2、length 4 个key3. 为什么可以 a.push(4) ，push 是哪来的？4. a.__proto__ === Array.prototype5. push 就是沿着 a.__proto__ 找到的，也就是 Array.prototype.push6. Array.prototype 还有很多方法，如 join、pop、slice、splice7. Array.prototype 就是 a 的原型（__proto__）复制代码

12. ES 6 中的 class 了解吗？

查看 MDN复制代码

12. JS 如何实现继承？

原型链  function Animal(){      this.body = '肉体'  }  Animal.prototype.move = function(){  }  function Human(name){      Animal.apply(this, arguments)      this.name = name  }  // Human.prototype.__proto__ = Animal.prototype // 非法  var f = function(){}  f.prototype = Animal.prototype  Human.prototype = new f()  Human.prototype.useTools = function(){}  var frank = new Human()    class extends 继承   class Animal{      constructor(){          this.body = '肉体'      },      move(){}  }  class Human extends Animal{      constructor(name){          super()          this.name = name      },      useTools(){}  }  var frank = new Human()复制代码

DOM

1. DOM 事件模型是什么？

什么是冒泡

什么是捕获

如果这个元素是被点击的元素，那么捕获不一定在冒泡之前，顺序是由监听顺序决定的。

2. 移动端的触摸事件了解吗？

touchstart touchmove touchend touchcancel模拟 swipe 事件：记录两次 touchmove 的位置差，如果后一次在前一次的右边，说明向右滑了。复制代码

3. 事件委托是什么？有什么好处？

假设父元素有4个儿子，我不监听4个儿子，而是监听父元素，看触发事件的元素是哪个儿子，这就是事件委托。可以监听还没有出生的儿子（动态生成的元素）。省监听器。function listen(element, eventType, selector, fn){ element.addEventListener(eventType, e=>{     if(e.target.matches(selector)){         fn.call(el, e, el)     } })}// 有 bug 但是可以应付面试官的事件委托function bindEvent(el, type, selector, fn) {  // 如果没有第三个参数, selector = fn  if (fn == null) {    fn = selector    selector = null  }  el.addEventListener(type, function (e) {    var target    if(selector) {      target = e.target      // dom 节点是否和选择器匹配      if (target.matches(selector)) {        fn.call(target, e)      }    } else {      fn(e)    }  })}// 使用代理var div = document.getElementById('div1')bindEvent(div, 'click', 'a', function (e) {  e.preventDefault()  // 阻止默认行为  console.log(this.innerHTML)})// 不使用代理var a = document.getElementById('a1')bindEvent(a, 'click', function (e) {  e.preventDefault()  console.log(a.innerHTML)})复制代码

HTTP

1. HTTP 状态码知道哪些？

2. 301 和 302 的区别是什么？

301 永久重定向，浏览器会记住302 临时重定向复制代码

3. HTTP 缓存怎么做？

Cache-Control: max-age=300http://cdn.com/1.js?v=1 避开缓存复制代码

4. Cache-Control 和 Etag 的区别是什么？

5. Cookie 是什么？Session 是什么？

Cookie    HTTP响应通过 Set-Cookie 设置 Cookie    浏览器访问指定域名是必须带上 Cookie 作为 Request Header    Cookie 一般用来记录用户信息Session    Session 是服务器端的内存（数据）    Session 一般通过在 Cookie 里记录 SessionID 实现    SessionID 一般是随机数复制代码

6. LocalStorage 和 Cookie 的区别是什么？

Cookie 会随请求被发到服务器上，而 LocalStorage 不会Cookie 大小一般4k以下，LocalStorage 一般5Mb 左右复制代码

7. GET 和 POST 的区别是什么？

参数。GET 的参数放在 url 的查询参数里，POST 的参数（数据）放在请求消息体里。安全（扯淡）。GET 没有 POST 安全（都不安全）GET 的参数（url查询参数）有长度限制，一般是 1024 个字符。POST 的参数（数据）没有长度限制（扯淡，4~10Mb 限制）包。GET 请求只需要发一个包，POST 请求需要发两个以上包（因为 POST 有消息体）（扯淡，GET 也可以用消息体）GET 用来读数据，POST 用来写数据，POST 不幂等（幂等的意思就是不管发多少次请求，结果都一样。）复制代码

8. 怎么跨域？JSONP 是什么？CORS 是什么？postMessage 是什么？

JSONPCORSpostMessage 看一下 MDN复制代码

Vue

1. Vue 有哪些生命周期钩子函数？

2. Vue 如何实现组件通信？

父子通信（使用 Prop 传递数据、使用 v-on 绑定自定义事件）

爷孙通信（通过两对父子通信，爷爸之间父子通信，爸儿之间父子通信）

兄弟通信（new Vue() 作为 eventBus）

3. Vuex 的作用是什么？

4. VueRouter 路由是什么？

看文档、博客复制代码

5. Vue 的双向绑定是如何实现的？有什么缺点？

看文档，深入响应式原理复制代码

6. Computed 计算属性的用法？跟 Methods 的区别。

computed是响应式的，methods并非响应式。调用方式不一样，computed定义的成员像属性一样访问，methods定义的成员必须以函数形式调用。computed是带缓存的，只有其引用的响应式属性发生改变时才会重新计算，而methods里的函数在每次调用时都要执行。computed中的成员可以只定义一个函数作为只读属性，也可以定义get/set变成可读写属性，这点是methods中的成员做不到的复制代码

算法

排序算法（背诵冒泡排序、选择排序、计数排序、快速排序、插入排序、归并排序）

二分查找法

翻转二叉树

安全

1. 什么是 XSS 攻击？如何预防？

div.innerHTML = userComment  // userComment 内容是   // 恶意就被执行了，这就是 XSS  预防    1. 不要使用 innerHTML，改成 innerText，script 就会被当成文本，不执行    2. 如果你一样要用 innerHTML，字符过滤        把 < 替换成 <        把 > 替换成 >        把 & 替换成 &        把 ' 替换成 '        把 ' 替换成 "    3. 代码 div.innerHTML = userComment.replace(/>/g, '<').replace...    4. 使用 CSP Content Security Policy复制代码

2. 什么是 CSRF 攻击？如何预防？

过程    用户在 qq.com 登录    用户切换到 hacker.com（恶意网站）    hacker.com 发送一个 qq.com/add_friend 请求，让当前用户添加 hacker 为好友。    用户在不知不觉中添加 hacker 为好友。    用户没有想发这个请求，但是 hacker 伪造了用户发请求的假象。    预防    检查 referer，qq.com 可以拒绝来自 hacker.com 的请求    csrf_token 来解决复制代码

你遇到过最难的问题是什么？

回答这种问题讲究一波三折。    一开始没搞懂    去网上看了个答案    一试发现这个广为流传的答案是有坑的    于是自己看 issue    发现还有一个小细节    然后解决了    谁知道还是在某种 edge case有问题    于是自己看规范看源码，搞定复制代码