Fork me on GitHub

2018春招面试&秋招面试

PS:陆续开始更新秋招面经
从三月初开始投第一份简历开始,到五月拿到百度offer,历时三个月的春招也告一段落了。期间一直没有时间更博,拿到百度offer后也咸鱼了一段时间,推了几家面试和offer,现在对春招考到的题做个总结和梳理吧。

HTML


CSS

  • CSS优先级

  • 垂直水平居中
    (1)知道宽高和不知道宽高以及宽高不同的情况
    (2)分析一下兼容性问题
    (3)一个元素不设置width和height,margin有用吗?

  • 实现一个三栏布局,中间自适应,分析兼容性问题

  • margin坍塌原理(BFC)

  • 清除浮动

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .clear:after {
    content: ".";
    height: 0;
    visibility: hidden;
    display: block;
    clear: both; // 原理即为BFC
    }
    .clear {
    zoom: 1; // 兼容IE
    }
  • CSS动画
    (1)CSS动画基础,与JS动画的区别
    (2)CSS的旋转锚点在哪? 如何改变旋转锚点?

  • 如何处理CSS的兼容性问题
    (1)方法一:postcss-loader,参考资料1参考资料2参考资料3

    1
    2
    postcss-loader 包含Autoprefixer、cssnext插件,一般写在style-loader和css-loader后面。
    其中cssnext相当于CSS的babel,包括了Autoprefixer的core,相比于Autoprefixer多了对CSS4等新特性的转义。

    (2)方法二:浏览器hack(较麻烦)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    // 判断 IE 浏览器版本
    <!--[if IE 8]> ie8 <![endif]-->
    <!--[if IE 9]> 骚气的 ie9 浏览器 <![endif]-->

    // 判断是否是 Safari 浏览器
    var isSafari = /a/.__proto__=='//';

    // 判断是否是 Chrome 浏览器
    var isChrome = Boolean(window.chrome);

JavaScript

  • JS如何计算浏览器的渲染时间?
    主要方法:performance.timing,参考文章

    1
    2
    /* 近似于首屏时间 */     
    let time = performance.timing.domContentLoadedEventEnd - performance.timing.domContentLoadedEventStart;
  • 闭包原理和使用场景
    使用场景:1、单例模式 2、柯里化

  • JS的回收机制(IE9以前为计数清除(可能会造成内存泄漏),V8为新生代老生代算法和标记清除)

  • 原型链
    (1)__proto__prototype分别是什么(又称隐式原型和显式原型)?
    (2)原型链原理
    (3)在原型链上Object再往上是什么?
    (4)newObject.create的区别
    (5)哪种情况下__proto__prototype的指向是同一个?
    (6)原型链继承和构造函数继承的区别?

  • JS的基本 & 复杂类型
    (1)基本类型和复杂类型有哪些?
    (2)typeof array null undefined NaN分别是什么?
    (3)undefined和null的区别,把undefined和null转成Number分别是什么?

  • 如何判断是否为数组?
    instanceOfconstructor可以,但是有原型链断裂的风险导致判断为Object,Object.prototype.toString.call()最稳定

  • 实现函数柯里化

  • DOM节点操作
    (1)增删改查
    (2)如何获取父节点和兄弟节点

  • JS如何获取用户来源?(navigator.userAgent)

  • 跨域方法有哪些?(CORS、jsonp、WebSocket、postMessage、Hash、Nginx反向代理)
    JSONP的原理是什么?除了script标签还可以通过什么标签实现?

  • object.defineProperty的缺点是什么?
    对于数组,只能监听shift、push、pop、reverse等方法,不能直接监听内容变化

  • JS提取URL里的参数

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    function getUrlParam(sUrl, sKey){
    var result = {};
    sUrl.replace(/\??(\w+)=([\w+:\w]+)&?/g, function(matchString, first, second){
    if (result[first] !== void 0) {
    let alreadyExisted = result[first];
    result[first] = [].concat(alreadyExisted, second);
    }
    else {
    result[first] = second;
    }
    });
    if (sKey === void 0) {
    return result;
    }
    else {
    return result[sKey] || '';
    }
    }
  • 查找两个节点的最近的一个共同父节点,可以包括节点自身

    1
    2
    3
    4
    5
    6
    7
    function commonParentNode(oNode1, oNode2) {
    for( ; oNode1; oNode1 = oNode1.parentNode){
    if(oNode1.contains(oNode2)){
    return oNode1;
    }
    }
    }
  • 用JS模拟一个双向链表

  • bind、apply、call的区别以及bind的实现

ES6新特性

  • Promise原理
    (1)如果让你实现一个Promise你怎么实现?
    (2)promise.all()promise.race()等API
  • let & const,以及let和var的区别
    (1)var变量提升的底层原理:先编译,后执行。
  • 箭头函数
    (1)箭头函数的this和普通this的区别
    (2)箭头函数的arguments问题
    (3)async/await和promise的异同

移动端

  • 移动端适配方案有哪些?

  • jsBridge原理 & webview性能优化

  • 移动端的坑点
    (1)click 300ms 延迟造成点透

    • 解决:fastclick,使用touch事件代替click

    • 注意touch事件和click事件的顺序

      (2)IOS监听onscroll不敏感

    • 解决:使用ontouchmove代替onscroll


框架问题(主要为React)

  • 对于框架的了解,框架的比较(React、Vue、Angular、San)
    (1)易上手程度:Vue(中文文档最完善) > React > San(文档一般) > Angular(东西太多、学习曲线陡)
    (2)社区丰富度:React > Vue > Angular > San
    (3)兼容性:San(兼容IE6) > 另外三个
    (4)渲染类型:虚拟DOM(React、Vue)、AST+脏检查(Angular、San)
    (5)可扩展性:React > Vue
  • React中key的作用(参考《深入浅出React和Redux》)
    (1)key相当于React的”身份证”,用于帮助React识别变换前后两个组件的差别,协助shouldComponentUpdate来避免无谓的更新操作。
    (2)需要注意的是,key虽然是一个prop,但接受key的组件的组件并不能得到key的值(key与ref是React保留的两个特殊prop)
    (3)不能使用数组的index来当做可以,因为数组下标可能变化,并不唯一。
  • Redux原理,解决了什么问题
    (1)数据存储在哪,为什么这样做
    (2)redux如何更新数据
  • React的Virtual DOM和Diff算法
  • React的生命周期
  • 如何优化组件
  • BootStrap底层原理

计算机网络

  • WebSocket
    (1)WebSocket基本原理
    (2)与轮询相比有什么异同
    (3)为什么支持全双工通信
    (4)WebSocket的断线检查与重连

  • TCP & UDP
    (1)如何处理分包和粘包
    (2)如何防篡改
    (3)如何做信息缺失校验
    (4)为什么说TCP是可靠的
    (5)TCP拥塞控制算法
    (6)UDP广播协议

  • HTTP缓存

  • HTTP/1.0 HTTP/1.1 HTTP/2 HTTPS
    (1)HTTP1.0 和 HTTP2.0 对于顺序请求和并发请求处理的异同点
    (2)HTTPS请求的过程,中间人攻击是怎样的

  • OSI七层模型
    局域网两端通信,整个过程是怎样的?

  • TCP半开连接
    Dos攻击(加cookie时间戳解决)


浏览器/内核原理型


工程化和模块化

  • Webpack和loader的原理
  • style-loader 和 css-loader 的区别:css-loader负责解析css,style-loader负责把解析后的css插入代码中。
  • AMD, CMD, common.js

前端安全

  • XSS & CSRF 原理与防护
  • dns劫持与http劫持的区别
    http劫持通常表现为在页面中插入小广告,如中间人攻击。
    dns劫持通常表现为混淆ip解析,将页面跳转到其他网站。

Node.js

  • Node与其他语言相比有什么优劣性
  • Node如何进行线程管理
  • Node如何监测并定位内存泄露
  • Node的网络模型

前端性能优化


场景题

  • 文件上传
  • 实现一个抢购系统
  • 聊天室项目中,如果出现数据传输出错怎么解决?
  • 现在有一大段文字,如何将它们轮播出来
  • 写一个API,实现jQuery的$(selector)选择器,要求兼容IE6
  • 如何处理高并发情况下,用户顺序问题(如抢购网站如何判定谁先点击)
  • 图片压缩的原理
  • 一个页面需要渲染一万个二维码并且可供下载,如何实现

算法 & 数据结构

  • 基础的排序方法
  • 数组取两数之和(leetcode第一题)
  • 给一个无序数组,要求分割成m组,这m组里和最大的一组要是所有可能的分割情况里最小的。(二分答案法)
  • 反转二叉树以及时间复杂度
  • 链表找环,并给出环的入口
  • hashMap的原理
  • 数组循环右移K位,时间复杂度O(n),空间复杂度O(1)
  • BFS & DFS

OS

  • 进程和线程的区别
  • 如何选择进程和线程
    进程更稳定更安全。线程速度更快,消耗更小,适合短期需要后销毁的场景
  • 操作系统如何对CPU进行分配

移动端

  • jsBridge原理
  • 移动端滑动卡顿
  • click、touchmove区别,点透现象
返回顶部