前端 JS 中级面试

前端面试进阶内容。

面试环节:

  • 一面:基础知识 html css3 js
  • 二面/三面(高级工程师):基础延伸(根据简历上自己的项目)、技术原理 优点 缺点
  • 三面/四面(业务负责人):项目中担任的角色,起的作用,业务处理
  • 终面(HR):性格、沟通、潜能、规划

面试准备:

  • 职位描述分析
    • 通过了解招聘公司的岗位描述和要求,搞清楚需要了解那些技术点,然后查阅资料搞懂
    • 深入分析,弄清侧重的技术点
  • 业务分析或实战模拟
    • 了解公司是哪个方向的业务,可以访问官网,查看源码了解技术栈
    • 比如:对于Jquery,了解下jQuery模板引擎、jQuery事件委托、事件代理、waifer延迟等
  • 技术栈准备
    • jQuery:核心架构 事件委托 插件机制
    • Vue React AngularJs NodeJs less sass grunt gulp npm webpack
    • 可以事先准备些自己熟知的项目、例子、技术点,将面试官往这方面引导
  • 自我介绍
    • 简历:基本信息、学历、工作经历、开源项目
      • 基本信息:姓名、年龄、手机、邮箱、籍贯
      • 学历:博士-硕士-本科
      • 工作经历:时间-公司-岗位-职责-技术栈-业绩
      • 开源项目:github和说明
    • 自我陈述
      • 把握面试的沟通方向
      • 豁达、自信的适度发挥
      • 自如谈兴趣、巧妙示实例、适时讨疑问
      • 节奏要适宜、切忌小聪明

一面二面

  • 页面布局
  • CSS盒模型
    • 标准模型和IE模型概念
    • 上述之间区别:content-box border-box
    • CSS如何设置上述两种模型
    • JS如何设置 获取盒模型的宽和高 IE: ele.currentStyle.width/heigh
    • 根据盒模型解释边距重叠
    • BFC(边距重叠解决方案)
      • BFC基本概念:块级格式化上下文
      • 原理,也就是BFC的渲染规则
        • BFC元素垂直方向的边距会发生重叠
        • BFC元素的区域不会与浮动元素的Box重叠
        • BFC在页面是一个独立的容器,外面的元素不会影响里面的元素反之亦然
        • 计算BFC高的时,浮动元素也会参与计算
      • 如何创建:
        • overflow: hidden/auto等, 不是visible
        • float的值不为none
        • position的值不为static 或者relative
        • display 是 table table-cell
      • 使用场景:
  • DOM事件

    • 基本概念:DOM事件的级别
      image
    • DOM事件模型
      • 捕获和冒泡
    • DOM事件流
      • 三个阶段
        第一阶段:从window对象传导到目标节点,称为“捕获阶段”(capture phase)。
        第二阶段:在目标节点上触发,称为“目标阶段”(target phase)。
        第三阶段:从目标节点传导回window对象,称为“冒泡阶段”(bubbling phase)。
    • DOM事件的捕获具体流程
    • Event对象的常见应用
      event.target:事件最初发生的节点
      event.currentTarget:事件当前所在的节点
      event.preventDefault()
      event.stopPropagation()
      event.stopImmediatePropagation():阻止同一个事件的其他监听函数被调用
    • 自定义事件
      // 新建事件实例 如果需要传递数据则需要CustomEvent
      var event = new Event('build');

      // 添加监听函数
      elem.addEventListener('build', function (e) { ... }, false);

      // 触发事件
      elem.dispatchEvent(event);
  • Http协议类

    • HTTP协议的主要特点
      简单快速:URL对应一个资源
      灵活:传个类型,就是请求对应文件类型的资源
      无连接:连接一次就会断掉
      无状态:不能区分两次连接的身份
    • HTTP报文的组成部分
      请求报文:请求行、请求头、空行、请求体
      image
      相应报文:状态行、响应头、空行、响应体
      image
    • HTTP的方法
      image
    • POST和GET的区别
      image
      记住三到四个
    • HTTP状态码
      image
      image
      image
    • 什么是持久连接
      image
    • 什么是管线化
      image
      image
  • 原型链类
    • 创建对象几种方法
      image
    • 原型、构造函数、实例、原型链
      image
    • instanceof的原理
      image
    • new运算符
      image
  • 面向对象
    • 类与实例
      类的声明
      生成实例
    • 类与继承
      如何实现继承
      继承的几种方式
  • 通信类
    • 什么是同源策略及限制
    • 前后端如何通信
    • 如何创建Ajax
    • 跨域通信的几种方式
  • 安全类
    • CSRF
      基本概念:跨站请求伪造
      攻击原理
      image
      防御措施:TOKEN验证、Referer验证(页面内来源验证)、隐藏令牌
    • XSS
      基本概念:跨域脚本攻击
      攻击原理:不需要登录验证,根据合法渠道,注入脚本
      防范措施:
  • 算法类
    • 排序
      image
      image
    • 堆栈、队列、链表
      image
    • 递归
      image
    • 波兰式和逆波兰式
      image
      先理解题目(问面试官给个提示,说自己知道用了什么技术点,自己说一下。。)

二面/三面

面试技巧:

  • 知识面要广
  • 理解要深刻
  • 内心要诚实
  • 态度要谦虚
  • 回答要灵活
  • 要学会赞美
  1. 渲染机制

什么是DOCTYPE及作用
image

浏览器渲染过程
image

重排Reflow

重绘

布局

  1. JS运行机制
    image

  2. 页面性能
    image

缓存:
image

  1. 错误监控
    image
    image

三面四面

面试技巧:

  • 准备要充分
  • 描述要演练(模拟演练)
  • 引导找时机(引导说出自己优势,做过的项目啥的)
  • 优势要发挥
  • 回答要灵活

考查能力:

  • 业务能力
    • 主动描述或被动回答
      5-1 mp4_20180806_111002 553
  • 团队协作能力
    up1
  • 事务推动能力
    5-2 mp4_20180806_111758 024
  • 带人能力
    5-2 mp4_20180806_111833 048
  • 其他能力
    • 组织能力
    • 学习能力
    • 行业经验

最终面

面试技巧:

  • 乐观积极
  • 主动沟通
  • 逻辑顺畅
  • 上进有责任心
  • 有主张,做事果断

考察问题:

  • 职业竞争力
    6-1 mp4_20180806_112528 128
  • 职业规划
    6-2 mp4_20180806_112910 520
amenzai wechat
扫一扫上面二维码,获取更多内容。
欢迎各位老板打赏