面试总结,八家公司经典面试题总结

初衷

除了自己给自己充电 还有给同样从事前端的朋友一点面试经验补充
面试题目很多,我总结的是我前段时间面试遇到的比较经典的问题, 面试样本有8家
两家高级,其他初中级,高级侧重算法,初中级侧重框架使用的熟练程度和对源码的理解(理解层次看个人能力了)
前端基础 + WEB安全 + 性能优化 是不分级别的 所有前端人员都应该掌握,不同级别掌握的量多量少而已

本文适用读者:

  • 正在从事前端工作有技术提升的意向开发
  • 打算跳槽的前端开发人员
  • 正在学习前端的童鞋(先学会基础再看)

通用面试题目

HTML+CSS

由于我目前面试到的公司中 对于布局这部分的题目少之又少 即使有也是双飞翼或者类似双飞翼布局的问题 所以这部分的题目有些欠缺 欢迎大家补充

Javascript

  • apply call bind (改变this指向)
    深入浅出妙用 Javascript 中 apply、call、bind
    不用call和apply方法模拟实现ES5的bind方法

  • 原生事件委托和 JQ 的动态监听(on live方法)

    问题:不管是原生JS添加事件监听和JQ的on方法(一般用法) 法在动态添加元素之后 新增加的元素均无法绑定事件

    1
    2
    3
    4
    5
    6
    7
    8
    <ul id="list-wrapper">
    <li class='item'>item1</li><!--onclick事件正常监听-->
    <li class='item'>item2</li><!--onclick事件正常监听-->
    <li class='item'>item3</li><!--onclick事件正常监听-->
    <li class='item'>item4</li><!--onclick事件正常监听-->
    <!--假设这个元素是通过js动态添加的-->
    <li class='item'>item5</li><!--无法监听onclick事件-->
    </ul>
    1
    2
    3
    4
    // JQ
    $('.item').on('click', function(){})
    // 原生js 只是演示 就不区分 IE6-8 和 chrome 的区别了 兼容写法用 attachEvent
    document.getElementsByClass('.item').addEventListener('click', function(){})

    这时候需要用到事件委托或者 jquery on 方法的特殊用法 还有 delegate live 方法(live 在 jq1.7版本以后就废弃了 不做演示)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    $('#list-wrapper').on('click', 'li', function(e){
    console.log(e)
    })
    $('#list-wrapper').delegate('li', 'click', function(e){
    console.log(e)
    })
    // js事件会冒泡 可以通过监听父级元素来拦截事件 从事件中可得到触发事件的元素本体 不管是不是新增的 都能正常监听
    document.getElementById('list-wrapper').addEvenlistener('click', function(e) {
    console.log(e.target || e.serElement)
    })

    上述代码为纯手敲,难免手残,有错误可以指出

    文章参考

    使用原生 JS 实现事件委托

    jQuery事件:bind、delegate、on的区别

  • JSON 相对于 XML 有什么优势 或者说下两者各自的优劣势

  • 数组去重
    方法很多 我就不献丑了 直接放链接
    六种方法实现JavaScript数组去重

  • 递归 尾递归
    递归的我就不说了 太常见了 随便一搜各种语言的实现都有 就放一篇尾递归优化的文章 还是阮一峰老师的
    尾调用优化

  • js隐式转换 (a == 1 && a == 2 && a == 3) 如何成立?
    你所忽略的js隐式转换

  • Event Loop (setTimeout Vue.$nextTick() XHR等异步操作

    JavaScript 运行机制详解:再谈Event Loop

  • Promise JQ的链式调用区别和实现
    链式调用实现上的区别: Promise是返回另一个Promise JQ是返回this
    Promise 对象

  • 原型链 继承
    完整原型链详细图解(构造函数、原型、实例化对象)

  • 不用loop(for循环)创建 n-m 的数组

    如何不使用loop循环,创建一个长度为100的数组,并且每个元素的值等于它的下标?

  • 判断一个变量是否是数组的方法 越多越好

    在JavaScript中,如何判断数组是数组?

  • 网络安全 WEB安全(JWT 的 T如何防止被钓鱼链接利用 CSRF攻击如何防范 XSS如何避免)

  • 跨域通信 跨Tab通讯 请求跨域 Cookies跨域

  • Cookies SessionStorage LocalStorage

  • 堆和栈的实现 区别

  • 基本类型和引用类型 分别在堆和栈中如何存放

  • 数据结构和算法(红黑 二叉)

  • 正则

  • HTML5 CSS3 ES6 新增的API

  • var let 区别

  • 动画

  • http状态码 头部和响应

  • http缓存 浏览器缓存机制

  • TCP/IP

框架相关

webpack gulp grunt 这几类打包工具 不分框架 都要掌握 至少能看能且能改配置 最好有自己从0到1的搭建过相应脚手架

Vuejs

Vue是我个人主要技术栈 可能这部分我整理的会多一点 毕竟我自己也出过面试题

  • Vue生命周期有哪些
  • Vue双向绑定的原理(基于js什么特性实现的)
  • Vue-router 有哪两种模式 分别基于什么实现的 如何实现动态加载
  • Vuex 是做什么的?描述一次有异步操作的完整数据流向
  • 说下 Vuex 的 module 和 plugin
  • Vue virtual dom 实现
  • Vue v-for 中 key 的作用
  • Vue 动态组件 <component is="component-name" />
  • Vue $nextTick() 原理是什么

推荐阅读:

这是我17年在公司推广Vue的时候准备的学习路线图 算是比较全面的整理了 欢迎补充: (教程中有涉及到API使用异常记得以官方文档为准)

Vue入门路线

源码分析 打算深入Vue框架内部实现原理的非常建议看这个

Vue逐行级别的源码分析

React

我虽然写过ReactNative 但是主要技术栈不是React 就不献丑了 给个知乎专栏链接 这部分我在面试的时候 有一半以上都命中了

React 常用面试题目与分析

Angular的我就没有资源啦~

大家在搜索框架对应面试题的时候 可以以 框架名+面试题 如: Vuejs面试题 来搜索 另外 用google

坚持原创技术分享,您的支持将鼓励我继续创作!