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

已于 2022-12-12 22:34:02 修改
阅读量2k 收藏 3
点赞数 2
分类专栏： 前端面试 文章标签： 面试
于 2020-10-30 10:50:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32682301/article/details/109190070
版权

文章目录

笔记来源于课程：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来，不要当场放弃、要勇于尝试面对未知
    • 要积极、必须要有收获
程序边界
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
专栏目录
高级前端高频面试笔记整理
02-20
高级前端高频面试笔记整理
学会这些前端程序员的面试技巧，提升面试成功率
maomaodaren1的博客
03-11 851
前端程序员是近年来非常热门且追求的职业，很多公司都在招聘这样的岗位。如何在众多竞争者中脱颖而出，成为一名优秀的前端程序员，成为许多求职者关心的问题。在面试过程中，合理的技巧能够帮助你表现出自己的最佳状态，以便最大限度地展现出你的能力和实力。本文将为大家分享前端程序员面试的一些技巧，以便应聘者在面试过程中的能够更好的展现自己。
前端面试宝典-技巧篇
m0_54803288的博客
04-05 3340
纯纯的干货，请大家认真恰饭！大家好，我是小埋，今天分享全攻略前端面试宝典，收集了全方位的资料，来与大家分享面试宝典，下面分享一张图前端面试需要会的知识。 二、面试技巧 面试一般分为技术面和 hr 面，形式上很少有群面，少部分企业可能会有一个交叉面，不过总的来说，技术面基本就是考察你的专业技术水平的， hr 面主要是看这个人的综合素质以及家庭情况符不符合公司要求，一般来讲，技术招聘，只要通过了技术面， hr 面基本上是没有问题（也有少数企业 hr 面会刷很多人）。 那我们主...
前端面试官经验总结 | 前端面试小技巧
BYGFJ的博客
08-11 2400
一、面试官总结 首先，咳咳，哈哈，嗯，严肃，我来谈一下我这个初级面试官对技术面试官的一些认知吧。我认为一个好的面试官提问应该是一针见血，问题不在于多，而在于精。我一开始面试的时候，由于没有经验，又怕对应聘者的能力评测有所疏漏，所以往往会在提问罗里吧嗦，尽量方方面面都考察到。但是，面试的多了也就找到了点感觉，实际上有时候应聘者对A问题答复的很到位，就没必要再浪费时间去问B\C\D问题了。其次，也学会了针对不同段位的FE Developer抛出不同的面试题。最经典的一个例子就是，一开始我想考察应聘者对HTTP状
前端面试必备技能(持续更新)
hchguu的博客
10-08 711
答:var会挂载到window，会存在全局变量污染，会存在变量提升，而let、const不会let、const同一作用域内不可声明同变量、var可以 (特别说明，let其实也会变量提升，但是提升之后会存在一个暂时性死区，虽然提升了但是不可以使用)const声明的是一个常量声明之后值不可以修改，如果声明的是一个对象，属性值是可以改变的答：三者的主要作用都是改变this的指向，就是在用法上有所区别，call和apply是立即执行的，主要区别是在传递参数上不同，call后面传递的参数是以逗号的形式分开的，app
前端面试技巧
狗哥的博客
10-29 3507
9月底秋招结束后，一直玩到今天。这篇博客在9月份就想写来着，可那段时间太忙了，一天最多做过四个笔试，面试三家公司，确实没有精力再写博客了。这篇博客主要针对前端面试高频问题，网上关于前端面试的题目有很多，但是很多题目过于陈旧，并不会被问到。以下内容是我亲身经历面试时经常被问到的点和如何回答的，希望给以后找工作的同学一点参考。在此也要感谢慕课网的《前端跳槽面试必备技巧》这门课程，如果有兴趣的同学可以...
10- 前端面试常见问题集锦-个人总结详细笔记
最新发布
10-13
前端面试常见问题前端面试常见问题前端面试常见问题前端面试常见问题前端面试常见问题前端面试常见问题前端面试常见问题前端面试常见问题前端面试常见问题前端面试常见问题前端面试常见问题前端面试常见问题前端面试...
前端大厂面试题笔记.pdf
02-23
前端大厂面试题笔记.pdf
前端学习（一）——H5学习笔记
08-09
HTML入门
前端面试最新最全面经（带个人笔记）
05-23
包含近几年高频前端开发工程师面试题，每个题目都有详细答案和个人笔记。1.JavaScript章节包括：基础知识、ES6、原型与原型链、作用域链闭包、异步编程等。 2.Vue章节包括：Vue基础、生命周期、组件通信、路由、Vuex...
前端面试小技巧
lovepink527的博客
12-09 411
方法 简历有亮点、知识有亮点 拿到面试题，要看到考点 以不变应万变（题可变，考点不变） 对待题目（题目到知识点，再到题目） 前端知识体系 高效学习三部曲：找准知识体系；刻意练习；及时反馈 知识体系：结构化的知识范围 涵盖所有知识点；结构化、有组织、易扩展 从哪些方面梳理 w3c标准 ECMA 262标准 开发环境 运行环境 知识体系 JS基础语法 JS-Web-API 开发环境 运行环境 ...
web前端面试准备
QaiDd的博客
04-20 1443
准备个非qq邮箱掌握git基本使用成为github用户克隆几个流行的轮子demo 推荐vue的搭建github 博客，写点学习笔记(可以看利用hexo搭建github个人博客遇到的坑及解决)找点cs丛书，记一点专业基础，算法，数据结构相关注册 stackoverfolw segment 账号 发点帖子。知乎关注一些前端大v 再扫扫所有面试经典笔试题 希望你的面试官有
慕课网 前端JS面试技巧 笔记
gloria_chenjing的博客
06-02 2848
前言关于面试前端水平的三个层次基层工程师-基础知识高级工程师-项目经验架构师- 解决方案几个面试题题目很多，做具有代表的题目，举一反三js 中使用 typeof 能得到哪些类型 （==js 变量类型==）何时使用 === 何时使用 == ？ （==强制类型转换==）window.onload 和 DOMContentLoaded 的区别 （==浏览器渲染过程==）用 js 连续创建 10 个 ...
【资源】前端优质资源收集
程序边界
06-05 366
文章目录一、官网&文档二、学习网站三、Git&Blog 一、官网&文档 Node.js、webpack、Babel、ESLint、jQuery、Bootstrap 二、学习网站 阿西河前端教程丨一个助你成为全栈开发的公益网站 三、Git&Blog 染陌的主页-云栖社区-阿里云 《阿里云前端技术周刊》第一期-云栖社区-阿里云 … cucygh (舒克·贝塔)——Bytedance Inc.bytedance cucygh/fe-material: 整理收集最有趣
前端工程师面试套路
忽尔明了
02-13 932
前端工程师面试套路   每到年后，便是换工作的高峰期，很多同学会开始面试马拉松。当然也会有一批人选择年前面试年后入职。今天，我决定聊聊关于面试的话题，以及前端工程师的面试套路. （ps：这篇文章摘自 医小生与程序猿 的微信订阅号）。 简历的细节 作为一个标准的理科生，我也曾大大咧咧，不修边幅。但这毕竟是找工作，尤其是前端工程师，对于细节一定不能忽视。虽说面试以技术为
前端开发面试问题及答案整理
飞鸟Blog
11-08 5075
说说你对闭包的理解 使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。 闭包有三个特性: 1.函数嵌套函数 2.函数内部可以引用外部的参数和变量 3.参数和变量不会被垃圾回收机制回收 请你谈谈Cookie的弊端 cookie虽然在持久保存客户端数据提供了方便，分担了服务器
前端求职初学者面试技巧（上）
小胡谈前
02-09 534
一、前言 我是一名前端开发，从2016年6月毕业到如今步入工作，期间也面试了一些公司，参考过一些面试文档，学习了一些面试宝典，掌握了一些面试、笔试技巧和经验，所以就总结了一些优质的前端面试题以及面试要点，初学者阅后也要用心钻研其中的原理，重要知识需要系统学习，透彻学习，才能形成自己的知识链，以不变应万变，万不可投机取巧，只求面试过关哦！ 二、面试注意点 面试题目： 根据你的...
spark学习笔记(1)——spark概述
06-28
### 回答1： Spark是一个开源的大数据处理框架，它提供了高效的数据处理能力和易用的API，支持多种数据处理模式，包括批处理、流处理和机器学习等。Spark的核心是分布式计算引擎，它可以在集群中运行，利用多台计算机的计算能力来处理大规模数据。Spark的优势在于其高效的内存计算和强大的数据处理能力，可以在处理大规模数据时提供更快的计算速度和更高的性能。Spark的生态系统也非常丰富，包括Spark SQL、Spark Streaming、MLlib和GraphX等组件，可以满足不同的数据处理需求。 ### 回答2： Spark是一种大规模数据处理引擎，可以较快地处理大数据。Spark并不是单独的一种工具，而是一系列的工具和库的整合。它具备高效的内存计算功能，能够在数秒或数分钟内完成数据处理任务。 Spark的核心是分布式计算引擎，通过将数据分成多个部分进行处理，缩短了计算时间。Spark基于RDD（弹性分布式数据集）进行数据处理，RDD是一种可缓存、可重用和容错的数据结构。RDD抽象了数据分布和分区，提供了简单的API。 Spark的架构包括四个组件：Driver、Cluster manager、Worker、和 Executor。其中Driver是Spark应用程序的主程序，Cluster manager通过Master节点来管理各个Worker节点，Worker节点包含了整个Spark集群的计算资源，Executor执行计算任务。 Spark支持多种编程语言，包括Scala、Java、Python和R。其中Scala是Spark的主要语言，因为它能够将Spark的API最大程度地利用。 除了分布式计算引擎外，Spark还提供了多种库和工具，包括Spark SQL、Spark Streaming、MLlib和GraphX。Spark SQL是一种用于结构化数据处理的库，能够使用SQL语句进行数据查询；Spark Streaming可以实时处理数据流，包括文本和图像等；MLlib是实现了多种机器学习算法的库，包括分类、回归、聚类和协同过滤；GraphX可以用于图计算和图分析领域。 总之，Spark是一种强大的大数据处理引擎，能够通过分布式计算架构实现快速的数据处理。它提供了多种语言支持和众多的库和工具，方便用户处理各类数据。 ### 回答3： Spark是一款开源的、分布式的大数据处理框架，它的出现将大数据处理的速度提升到了一个全新的水平。Spark的特点在于它的内存计算引擎，这使得Spark的运行速度比传统的MapReduce处理速度要快很多，同时也比传统的Hadoop更加灵活。 Spark可以用于处理各种大数据应用场景，包括批处理、交互式查询、实时流处理等等。同时，Spark的生态系统非常丰富，有众多的开源库和工具可以使用，例如：Spark SQL、Spark Streaming、GraphX、MLlib等等。 Spark的运行环境需要一个集群，因为Spark是分布式的，它可以通过在集群中多个节点上并行执行任务来提升处理速度，而且Spark支持多种集群管理和资源调度工具，例如：Apache Mesos、Hadoop YARN、Spark自带的资源调度程序等等。 Spark的编程接口非常灵活，可以使用Scala、Java、Python等多种编程语言来编写Spark程序。无论是使用哪种编程语言，Spark都提供了相应的API和工具，例如：Spark SQL、Spark Streaming等。 总之，Spark是一个非常强大的大数据处理框架，它的出现是对传统的Hadoop框架的一种补充和升级，不仅可以处理海量的数据，而且可以提供更快速的数据处理速度和更强大的数据处理能力。因此，Spark已经成为现代大数据处理和机器学习领域中非常重要的工具之一。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序边界

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值