【笔记】前端面试必备技巧——概述


笔记来源于课程:https://coding.imooc.com/class/129.html


虽然是几年前的课程了,但是大部分内容如今面试都还是会考到的。
先来几副官方宣传图感受一下:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

一、课程介绍

1.面试那些事儿~~

  • JD描述怎么看?
  • 项目怎么准备?
  • 简历怎么写?
  • 知识怎么复习?
  • 问题该怎么回答?
  • 和面试官怎么沟通?
  • HR印象怎么留?

2.面试准备~~

  • JD描述分析
  • 业务分析
  • 技术栈准备
  • 自我介绍

3.模拟一面~~

  • 面试技巧
  • 页面布局类
  • CSS盒模型
  • DOM事件类
  • HTTP协议类
  • 原型链类
  • 面向对象类
  • 通信类
  • 前端安全类
  • 前端算法类

4.模拟二面~~

  • 面试技巧
  • 渲染机制类
  • JS运行机制
  • 页面性能
  • 错误监控

5.模拟三面~~

  • 面试技巧
  • 业务能力
  • 团队协作能力
  • 带人能力

6.模拟终面~~

  • 面试技巧
  • 职业竞争力
  • 职业规划

如何看待面试?什么是面试?

答:面试是测查和评价人员能力素质的一种考试活动。具体地说,面试是一种经过组织者精心设计,在特定场景下,以考官对考生的面对面交谈与观察为主要手段,由表及里测评考生的知识、能力、经验等有关素质的一种考试活动。

面试技巧

  • 准备要充分
  • 知识要系统
  • 沟通要简洁
  • 内心要诚实
  • 态度要谦虚
  • 回答要灵活

二、面试准备

  • 职位描述(JD)分析
  • 业务分析或实战模拟
  • 技术栈准备
  • 自我介绍

(一)职位描述(JD)分析

京东金融前端岗位

在这里插入图片描述
根据职位描述列出要点:

  • PC端+移动端
  • hybrid
  • 数据mock
  • 前端组件库架构(难度体现:基本功扎实[原生js、css]、其他组件库源码、组件库创建经验)
  • 工作经验年限不要去较真
  • 追求新技术热点(github最新热门开源项目)
  • html语义化(用合适的标签做合适的事)
  • 掌握最常用web标准:eslint。。。
  • 考察实际项目经验:
    • 实际过程中遇到过哪些问题?
  • 架构分析与设计能力(砍掉1-2年只有业务能力的人):目录结构、复用性、模块化设计、自动化测试、性能监控和异常捕获…
  • 现场手写代码,易读、易维护(函数功能单一化,能抽象就抽象)
  • 用户体验性考察对产品和业务的整体把控、一点要体现项目过程中的逐步优化
  • grunt和gulp区别
  • 注意了解、熟悉、精通。。。

H5 手机 App 开发入门:概念篇 - 阮一峰的网络日志

艺龙酒店前端岗位

在这里插入图片描述

  • 前端动画:canvas(所有常用api)、svg、css3(过渡、翻转。。。)、js(动画帧、GPU加速)
  • 微信小程序、微信公众号开发、微信支付
  • 可用性、可访问性:前端性能监控(js即时运行错误、资源加载错误)

(二)业务分析和实战模拟

京东金融

  • 页面布局分析
  • 常用组件分析
  • 页面特效分析(css3、three.js…)
  • 通过f12调试页面,看Sources:head发现:
    • 需要兼容哪些浏览器:
      • <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
      • <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    • 双核浏览器webkit优先:<meta name="renderer" content="webkit">
    • 网站性能提升:
      • dns预解析:
        • <link rel="dns-prefetch" href="//static.360buyimg.com">
        • <link rel="dns-prefetch" href="//img30.360buyimg.com">
    • 看Application发现:
      • Local Storage、Session Storage使用
      • 字体文件、自定义字体、字体图标

艺龙旅行网

  • 常见控件编写:轮播图、多级导航栏、日期控件
    在这里插入图片描述

可以想想这种效果是怎样完成的
艺龙是使用js计算图片宽度
可以尝试使用纯css实现

  • 老项目,未重构:<html xmlns="http://www.w3.org/1999/xhtml">
  • script标签写在head里,但采用了async,实现异步(外链js异步加载有几种方式?区别?)
  • require.js模块加载机制(传统模块化处理机制有几种?现有框架、ES6是怎样处理模块化的?)、如何配制、与cds的区别

模块化机制

  • jquery模板引擎(handle bar、eds引擎、underscore templete)
  • jquery事件委托、事件代理

(三)技术栈准备

在这里插入图片描述

  • jQuery源码学习:核心架构、事件委托、插件机制
  • Vue/React/Angular源码学习
  • node.js
  • 前端工程化:环境搭建、 预编译、构建、打包
  • sass、less
  • gulp、grunt
  • npm(常见命令)
  • webpack

(四)自我介绍

1.简历

  • 基本信息:姓名、年龄、手机、邮箱、籍贯
  • 学历:博士、硕士、本科、专科
  • 工作经历:时间、公司、岗位、职责、技术栈、业绩
  • 开源项目:Github和说明
    例(简历内容涉及隐私,这里就不贴出了):

    • 多余内容:课程、论文题目、中学、题外话、自我评价

    • node.js:开发业务、上线、错误追踪/监控

2.自我陈述

  • 把握面试的沟通方向
    例:

    • 项目:项目功能(与本岗位的结合点、担任角色、做出哪些成绩)
    • 负责人(项目规模、团队人数、具体承担角色[项目/技术]、做出哪些成绩、团队协作、技术配合、技术难点)
  • 豁达、自信的适度发挥

  • 实例:

    • 自如谈兴趣、巧妙示实例、适时讨疑问(懂得收放自如、注意场合、never give up)
    • 节奏要适宜、切忌小聪明(面对简单题目或是列举类型题目要有耐心,多思考、务实、谦虚)
  • 实战:

    • 方向要对,过程要细
    • 胆子要大,心态要和
    • 确实没做过的事要能现场理出思路,说出个123来,不要当场放弃、要勇于尝试面对未知
    • 要积极、必须要有收获

猜你喜欢

转载自blog.csdn.net/qq_32682301/article/details/109190070
今日推荐