今日头条面试题汇总

CSS

• 解释 css 各种定位,absolute 相对于谁定位；
  -> position: relative/absolute/fixed/static/inherit/initial/unset/sticky
  -> 相对于最近一层position非static的父元素
  -> relative不会脱离文档流

• iframe 中的 fixed 定位和什么有关，怎么固定浏览器窗口
  -> iframe窗口非浏览器窗口，通过postmessage通信将top页面的scrolltop传递给iframe，iframe内部通过监听通讯事件动态设置元素的定

• transfrom 的主要用法
  -> transform用来向元素应用各种2D和3D转换，该属性允许我们对元素进行旋转、缩放、移动或倾斜等操作,有translate, scale, rotate, skew,

• flex 盒子布局
  flex 布局详解

• 不同高的子盒子实现头部对齐

// 1. padding 补偿
.parent {
     100%;
    overflow: hidden;
}
.left, right {
    float: left;
    padding-bottom:9999px;
    margin-bottom:-9999px;
}
// 2. flex 布局
.parent{
    display: flex;
}

• css 盒模型；
  -> 标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin -> box-sizing:content-box;
  -> 低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin -> box-sizing:border-box;;

• 重绘和回流的区别
  -> 重绘(repaint)：当render tree中的一些元素需要更新属性，单这些属性只会影响元素的外观，风格，而不会影响到元素的布局，此类的页面渲染叫作页面重绘。
  -> 回流(reflow)：当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而引起的页面重新渲染。
  -> 回流必将引起重绘，而重绘不一定会引起回流

• 如何解决外边距重合问题;
  -> 外边距重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界
  外层元素添加padding;
  外层元素 overflow:hidden;
  外层元素透明边框 border:1px solid transparent;
  内层元素绝对定位 postion:absolute;
  内层元素 加float:left;或display:inline-block;

• 清除浮动
  1、父级div定义 overflow: auto;;
  2、.clearfix

• 两列布局(右侧定宽200px,左边随屏幕自动填充宽度)

// 1. float+margin(一侧定宽，一侧自动)  
// 2. position+margin(一侧定宽，一侧自动)
// 3. float+负margin(一侧定宽，一侧自动)
.right { 
    float:left; 
     100%;
}
.right .cont {
    margin-left:200px;
}
.left {
    float: left; 
     200px; 
    margin-left: -100%; 
}

• 三列布局

// 1. float+margin（两侧定宽，中间自适应）
// 2. position+margin（两侧定宽，中间自适应）
// 3. float+负margin（两侧定宽，中间自适应）
.m-box { 
    float:left; 
     100%;
}
.m-box .center {
    margin:0 200px;
}
.left,.right {
    float: left; 
     200px; 
    margin-left: -100%;
}
.right {
    margin-left: -200px;
}

• 垂直水平居中

// 1、绝对定位+margin：auto  
.box {
    margin: auto;
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
}

// 2、绝对定位+transform反向偏移

.box {
    margin: auto;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}

// 3、display: flex-box

.box {
    display: flex;
    align-items: center;
    justify-content: center;
}

• css 实现4:3的块元素

.box {
     100%;
    height: 0;
    padding-top: 75%;
}

• css写个无限旋转动画

.ig{
    -webkit-animation:circle 1.5s infinite linear;
}
@-webkit-keyframes circle{
    0%{ transform:rotate(0deg); }
    100%{ transform:rotate(360deg); }
}

• 用css画一个三角形

.triangle{
     0; height:0;
    border: 10px solid transparent;
    border-top-color: red;
}

简答题

• 自我介绍,项目介绍，项目中的难点以及解决方案;
• 项目中遇到的技术问题
• 最近在学什么东西
• MVC/MVVM 的理解
• 问了h5语义化的问题
• 为什么用来React又用jquery
• Reat写组件有挑战性的东西
• 关键词标记颜色
• amd 和 cmd 规范理解；
• es6相比es5有没有什么比较好的特性
• 箭头函数和一般函数的区别
• promise了解不
• JS的数据类型
  -> number,boolean,string,undefined,null,object,symbol。
• 发http请求会怎么做
• 常见的状态码
• http缓存怎么做到的
• 浏览器缓存常见的http的头 requestHeader
• 性能优化的事情
• 打包工具 Webpack 的配置，原理，webpack优化；
  -> 解析webpack配置参数，合并从shell传入和webpack.config.js文件里配置的参数，生产最后的配置结果。
  -> 注册所有配置的插件，好让插件监听webpack构建生命周期的事件节点，以做出对应的反应。
  -> 从配置的entry入口文件开始解析文件构建AST语法树，找出每个文件所依赖的文件，递归下去。
  -> 在解析文件递归的过程中根据文件类型和loader配置找出合适的loader用来对文件进行转换。
  -> 递归完后得到每个文件的最终结果，根据entry配置生成代码块chunk。
  -> 输出所有chunk到文件系统。
• nodeJS
• 讲讲同源策略
• url构成，解析一个url，包括hash值；
• post和get的区别
• 事件代理是什么事件代理中target和event细节
• 原型链继承对象、构造函数、prototype、_proto
• http1.0 ,1.1,2.0的区别；
• Object.defineProperty()的缺点；
• post content-type类型
• 然后问了冒泡，捕获；
• 手写一个闭包；
• 考察数组判定、
• 一道异步代码题，说出打印顺序；
• 三个url同时请求，要求按顺序打印结果
• http缓存优缺点
• 单页应用优缺点
• 浏览器缓存优缺点
• addEventListener()有几个参数，是什么？
• typeof的类型(举例说属于什么类型)
• 问针对移动浏览器端开发页面，不期望用户放大屏幕，且要求“视口(viewport)”宽度等于屏幕宽度，视口高度等于设备高度，如何设置？

    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, 
        maximum-scale=1, user-scalable=no">

• == 与 === 的区别；
• cookie是什么，怎么存储。
• cookie和session的区别；
• 问请描述一下cookies，sessionStorage和localStorage的区别？
  答：cookie:一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效，也可设置过期时间,每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题 sessionStorage: 仅在当前会话下有效，关闭页面或浏览器后被清除 localStorage: 除非被清除，否则永久保存,仅在客户端(即浏览器)中保存，不参与和服务器的通信
• 介绍H5的两个浏览器缓存，localStorage和sessionStorage的区别。
  保存数据的生命周期不同。 sessionStorage只是可以将一部分数据在当前会话中保存下来，刷新页面数据依旧存在。但当页面关闭后，sessionStorage 中的数据就会被清空
• fetch和ajax的区别。
  1、fetch()返回的promise将不会拒绝http的错误状态，即使响应是一个HTTP 404或者500。 服务器端返回 状态码 400 500的时候 不会reject Response.ok 属性为 true。
  2、在默认情况下 fetch不会接受或者发送cookies ，要发送 cookies，必须设置 credentials 选项。 credentials: 'include'
• Bom是什么,列举你知道的Bom对象;
• function.prototype.bind/call/apply的用法及区别
• 问什么是浏览器的标准模式和怪异模式
  答：目前浏览器的排版引擎有三种模式：怪异模式(Quirks mode)、接近标准模式(Almost standards mode)、以及标准模式(Standards mode)。在怪异模式下，排版会模拟 Navigator 4 与 Internet Explorer 5 的非标准行为。为了支持在网络标准被广泛采用前，就已经建好的网站，这么做是必要的。在标准模式下，行为即(但愿如此)由 HTML 与 CSS 的规范描述的行为。在接近标准模式下，只有少数的怪异行为被实现。 那么所谓标准模式，就一定都“标准”吗？答案当然是否定的，因为各个浏览器厂商实现标准的阶段不同，所以各个浏览器的“标准模式”之间也会有很大的不同。 Firefox、Safari、Chrome、Opera (自 7.5 以后)、 IE8 和 IE9 都有一个准标准模式。那么既然标准模式都不那么标准，准标准的模式肯定就更不标准了。
• 问解释一下盒模型宽高值的计算方式，边界塌陷，负值作用，box-sizing概念
  答：盒模型 a. ie678怪异模式(不添加 doctype)使用 ie 盒模型，宽度=边框+padding+内容宽度 b. chrome， ie9+, ie678(添加 doctype) 使用标准盒模型，宽度= 内容宽度 box-sizing content-box(默认) 布局所占宽度Width： Width = width + padding-left + padding-right + border-left + border-right 布局所占高度Height: Height = height + padding-top + padding-bottom + border-top + border-bottom border-box 布局所占宽度Width： Width = width(包含padding-left + padding-right + border-left + border-right) 布局所占高度Height: Height = height(包含padding-top + padding-bottom + border-top + border-bottom) 边界塌陷 同一BFC下，相邻快级元素边界取最大值 负值作用 display:inline-block是什么呢？相信大家对这个属性并不陌生，根据名字inline-block我们就可以大概猜出它是结合了inline和block两者的特性于一身，简单的说：设置了inline-block属性的元素既拥有了block元素可以设置width和height的特性，又保持了inline元素不换行的特性。
• window.onload和document.onload是否是同时执行，为什么；
• JS中prototype、proto、super分别是什么？
  答: 这个我一脸懵逼，只说了prototype是原型，_proto_是隐式原型。
• arguments是数组吗？怎么实现用它调用数组方法？类数组和数组的区别是什么？arguments有length属性吗？ 为什么要遍历类数组取值组成数组，还有更简单的方法吗？
• for…in 和for...of的区别
  答：for of 遍历的是值，for in 遍历的是索引。
• 数组中的几个替换/遍历方法
• 如何理解跨域；
• 跨域你是怎么解决的，jsonp有什么缺点
  -> 浏览器的同源策略导致了跨域,用于隔离潜在恶意文件的重要安全机制
  -> [jsonp ，允许 script加载第三方资源]https://segmentfault.com/a/1190000008445998
  -> nginx 代理转发（nginx 服务内部配置 rewrite proxy_pass）
  -> cors 前后端协作设置请求头部，Access-Control-Allow-Origin 等头部信息
  -> iframe 嵌套通讯，postmessage
• cors请求和普通的http请求有什么区别
• 问data-xxx 属性的作用是什么？
  答：data- 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。 存储的(自定义)数据能够被页面的 JavaScript 中利用，以创建更好的用户体验
• promise、setTimeout、async/await的执行顺序。
• 用过NodeJS的EventEmitter模块吗，它是怎么实现功能的，步骤是什么；
• events模块只提供了一个对象：events.EventEmitter。EventEmitter的核心就是事件触发和事件监听器功能封装。
• 同源不同标签之间的通信
• 同源标签之间如何通信；
• hybrid 实现原理
  Hybrid App技术解析 -- 原理篇
• hybrid 通信方式
  -> JSBridge
  Android的WebView中有一个WebChromeClient类，这个类其实就是用来监听一些WebView中的事件的，我们发现其中有三个对应于js中的alert(警告框)，comfirm(确认框)和prompt(提示框)方法,通过重写WebView中WebChromeClient类的onJsPrompt()方法来进行js和java的通信。
  (1) 在js脚本中把对应的方法名，参数等写成一个符合协议的uri，并且通过window.prompt方法发送给java层。
  (2) 在java层的onJsPrompt方法中接受到对应的message之后，通过JsCallJava类进行具体的解析。
  (3) 在JsCallJava类中，我们解析得到对应的方法名，参数等信息，并且在map中查找出对应的类的方法。

React

• React16 有没有使用过
• react 怎样提高性能;
  答：shouldComponentUpdate： react的每次render都是带动整个项目一起render的，渲染性能消耗很大很大。要用shouldComponentUpdate更新生命周期函数优化。 当该函数默认返回true的时候，一旦prop或者state有任何变化，都会引起重新render。 shouldComponentUpdate(object nextProps, object nextState) ： -boolean 当组件决定任何改变是否要更新到DOM时被调用。作为一个 优化 实现比较this.props 和 nextProps 、this.state 和 nextState ，如果React应该跳过更新，返回false。 当props、state发生变化时，React会根据shouldComponentUpdate方法来决定是否渲染整个组件。
• React 的virtual dom 的了解和jquery的直接操作节点的渲染方式相比的优点;
• React 的生命周期
• componentWillReceiveProps componentShouldUpdate 区别
• componentShouldUpdate 会做setState操作吗
• React之间组件通信的方式，两个兄弟组件之间的通信方式
• mobx和redux有没有了解过
• redux基本组成和设计
• 介绍堆栈和队列，如何用堆栈实现队列

VUE

• VUE的原理setter和getter相关知识
• vue项目需要注意什么，可以优化的地方；
• vue的computed实现原理；
• vue-router的原理；

es6 面试题汇总

es6 面试题汇总

编程题

• 快速排序

// 时间复杂度(nlogn), 空间复杂度O(n)
var quickSort = function(arr) {
    if(arr.length<=1) return arr;
    var left = [], right = [], point = Math.floor(arr.length/2);
    var middle = arr.splice(point, 1)[0];
    for(var i = 0; i < arr.length; i++){
        arr[i] < middle ? left.push(arr[i]) : right.push(arr[i]) ;
    }
    return quickSort(left).concat([middle], quickSort(right));
}

• 数组去重

a.forEach(function(value, index){
  b.indexOf(value) === -1 && b.push(value);
})

a.map(function(value, index){
  b.indexOf(value) === -1 && b.push(value);
})

var c;
c = a.filter(function(value, index, array){
  return index === array.indexOf(value);
})

function unique(arr) {
  var ret = [];
  var tmp = {};
  
  for(var i = 0, len = arr.length; i < len; i++){
    if(!tmp[typeof arr[i] + arr[i]]) {
      tmp[typeof arr[i] + arr[i]] = true;
      ret.push(arr[i]);
    }
  }
  
  return ret;
}

• 将多维数组平铺；

1、 var myNewArray = [].concat.apply([], myArray);
2、 var myNewArray4 = [].concat(...myArray);
3、 var myNewArray = myArray.reduce(function(prev, curr) {
        return prev.concat(curr);
    });

• 手写简易 EventEmiter

// 参照 vue 源码实现
var EventEmiter = function (){
  this._events = {};
};
EventEmiter.prototype.on = function (event, cb){
  if (Array.isArray(event)){
    for (let i = 0, l = event.length; i < l; i++){
      this.on(event[i], cb);
    }
  } else {
    (this._events[event] || (this._events[event] = [])).push(cb);
  }
  return this;
};
EventEmiter.prototype.once = function (event, cb){
  function on () {
    this.off(event, cb);
    cb.apply(this, arguments);
  }
  on.fn = cb;
  this.on(event, on);
  return this;
};
EventEmiter.prototype.off = function (event, cb){
  if (!arguments.length){
    this._events = Object.create(null);
    return this;
  }
  if (Array.isArray(event)){
    for (let i = 0, l = event.length; i < l; i++){
      this.off(event[i],cb);
    }
    return this;
  }
  if (!cb){
    this._events[event] = null;
    return this;
  }
  if (cb){
    let cbs = this._events[event];
    let i = cbs.length;
    while(i--){
      if (cb === cbs[i] || cb === cbs[i].fn){
        cbs.splice(i, 1);
        break;
      }
    }
    return this;
  }
};
EventEmiter.prototype.emit = function (event){
  let cbs = this._events[event];
  let args = Array.prototype.slice.call(arguments, 1);
  if (cbs){
    for (let i = 0, l = cbs.length; i < l; i++){
      cbs[i].apply(this,args);
    }
  }
};

• 写一个url解析函数，解析出查询参数；

function parseUrl(url){
    var result = [];
    var query = url.split("?")[1];
    var queryArr = query.split("&");
    queryArr.forEach(function(item){
        var obj = {};
        var value = item.split("=")[1];
        var key = item.split("=")[0];
        obj[key] = value;
        result.push(obj);
    });
    return result;
}

• ['1.45.0','1.5','6','3.3.3.3']要求从小到大排序，注意'1.45'比'1.5'大；

// 使用的是选择排序
const versionSort = version => {
  const temp = version.map(v => v.split('.'));
  for (let i = 0; i < temp.length; i++) {
    let minIndex = i;
    for (let j = i; j < temp.length; j++) {
      for (let k = 0; k < temp[j].length; k++) {
        const current = +temp[j][k],
        min = +temp[minIndex][k];
        if (current < min) {
          minIndex = j;
        }
        // 只要不等，就立刻结束最内层遍历！
        if (current !== min) {
          break
        }
      }
    }
    [temp[i], temp[minIndex]] = [temp[minIndex], temp[i]];
  }
  return temp.map(v = > v.join('.'))
};

• 随意给定一个无序的、不重复的数组arr，任意抽取n个数，相加和为sum，也可能无解，请写出该函数。

• 节流函数怎么写；

function debounce(fn, interval, immediate) {
    let timer;

    return function() {
        const context = this;
        const args = arguments;
        
        timer && clearTimeout(timer);

        if(immediate) {
            var callNow = !timer;
            timer = setTimeout(function() {
                timer = null;
            }, interval);
            callNow && fn.apply(context, args);
        } else {
            timer = setTimeout(function() {
                fn.apply(context, args);
            }, interval);
        }
    }
}

• 手写bind函数；

Function.prototype.bind = function(ctx) {
    var self = this;
    var args = Array.prototype.slice.call(arguments, 1);

    var F = function() {};

    var fBind = function() {
        var argsBind = Array.prototype.slice.call(arguments);
        return self.apply(this instanceof F ? this : ctx, args.concat(argsBind));
    }

    F.prototype = this.prototype;
    fBind.prototype = new F();

    return fBind;
}

• promise封装;
  简单的 Promise

• 写一个parseInt函数;

function parseInt(s, radix = 10) {
    if (typeof s !== 'string') {
        return NaN;
    }
    if (typeof radix !== 'number' || radix < 2 || radix > 36) {
        return NaN;
    }
    let result = 0;
    for (let i = 0; i < s.length; i += 1) {
        let c = s.charCodeAt(i);
        // 小写大写字母转换为数字
        if (c >= 97) {
            c -= 87;    // - 'a' + 10
        } else if (c >= 65) {
            c -= 55;    // - 'A' + 10
        } else {
            c -= 48;    // - '0'
        }
        // 如果字母转化后的值大于进制数，则跳出循环返回之前的结果
        if (c >= radix) {
            if (i === 0) {
                return NaN;
            }
            break;
        }
        // 结果累加，和进制相关
        result = (result * radix) + c;
    }

    return result;
}

• 正则表达式实现1000000中间加','；

function comma(num) {
    var source = String(num).split(".");
        source[0] = source[0].replace(new RegExp('(\d)(?=(\d{3})+$)','ig'),"$1,"); 
    return source.join(".");
}

• 请使用数组的reduce方法实现数组的map方法；

• 大数相加

function sumStrings(a,b) {  
    while(a.length < b.length){  
        a = "0" + a;  
    }  
    while(b.length < a.length){  
        b = "0" + b;  
    }  
    var addOne = 0;  
    var result = [];  
    for(var i=a.length-1;i>=0;i--){  
        var c1 = a.charAt(i) - 0;  
        var c2 = b.charAt(i) - 0;  
        var sum = c1 + c2 + addOne;  
        if(sum > 9){  
            result.unshift(sum - 10);  
            addOne = 1;  
        }  
        else{  
            result.unshift(sum);  
            addOne = 0;  
        }  
    }  
    if(addOne){  
        result.unshift(addOne);  
    }  
    if(!result[0]){  
        result.splice(0,1);  
    }  
    return result.join("");  
}  

• 请用至少两种方法判断一个对象是否是数组，如何将非数组转化为数组

a instanceof Array;
a.constructor === Array;
a.__proto__ === Array.prototype;
Array.prototype.isPrototypeOf(a);  // isProtoTypeOf()
Object.getPrototypeOf(a) === Array.prototype;  // Object.getPrototypeOf()
Object.prototype.toString.call(a) === '[object Array]'; // 首推 -> 前几种继承会扰乱， iframe 下 instance 失效
Array.isArray() // polyfill 就是调用字符串判断法
var argsArray = Array.prototype.slice.call(arguments);

安全

• xss和csrf攻击;
  -> xss 跨站脚本攻击，主要是前端层面的，用户在输入层面插入攻击脚本，改变页面的显示，或则窃取网站 cookie，预防方法：不相信用户的所有操作，对用户输入进行一个转义，不允许 js 对 cookie 的读写
  -> csrf 跨站请求伪造，以你的名义，发送恶意请求，通过 cookie 加参数等形式过滤
  我们没法彻底杜绝攻击，只能提高攻击门槛

• cookie的有哪些安全的设置；