今日头条面试题汇总

CSS

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

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

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

  • flex 盒子布局
    flex 布局详解前端

  • 不一样高的子盒子实现头部对齐
// 1. padding 补偿
.parent {
    width: 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;;vue

  • 重绘和回流的区别
    -> 重绘(repaint):当render tree中的一些元素须要更新属性,单这些属性只会影响元素的外观,风格,而不会影响到元素的布局,此类的页面渲染叫做页面重绘。
    -> 回流(reflow):当render tree中的一部分(或所有)由于元素的规模尺寸,布局,隐藏等改变而引发的页面从新渲染。
    -> 回流必将引发重绘,而重绘不必定会引发回流java

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

  • 清除浮动
    一、父级div定义 overflow: auto;;
    二、.clearfixreact

  • 两列布局(右侧定宽200px,左边随屏幕自动填充宽度)
// 1. float+margin(一侧定宽,一侧自动)  
// 2. position+margin(一侧定宽,一侧自动)
// 3. float+负margin(一侧定宽,一侧自动)
.right { 
    float:left; 
    width: 100%;
}
.right .cont {
    margin-left:200px;
}
.left {
    float: left; 
    width: 200px; 
    margin-left: -100%; 
}
  • 三列布局
// 1. float+margin(两侧定宽,中间自适应)
// 2. position+margin(两侧定宽,中间自适应)
// 3. float+负margin(两侧定宽,中间自适应)
.m-box { 
    float:left; 
    width: 100%;
}
.m-box .center {
    margin:0 200px;
}
.left,.right {
    float: left; 
    width: 200px; 
    margin-left: -100%;
}
.right {
    margin-left: -200px;
}
  • 垂直水平居中
// 一、绝对定位+margin:auto  
.box {
    margin: auto;
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
}

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

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

// 三、display: flex-box

.box {
    display: flex;
    align-items: center;
    justify-content: center;
}
  • css 实现4:3的块元素
.box {
    width: 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{
    width: 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的区别。
    一、fetch()返回的promise将不会拒绝http的错误状态,即便响应是一个HTTP 404或者500。 服务器端返回 状态码 400 500的时候 不会reject Response.ok 属性为 true。
    二、在默认状况下 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层。jquery

(2) 在java层的onJsPrompt方法中接受到对应的message以后,经过JsCallJava类进行具体的解析。webpack

(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;
}
  • 将多维数组平铺;
一、 var myNewArray = [].concat.apply([], myArray);
二、 var myNewArray4 = [].concat(...myArray);
三、 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;
}
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的有哪些安全的设置;

相关文章
相关标签/搜索