2018前端面试常考题

总结 专栏收录该内容
1 篇文章 0 订阅

前端面试常考题

HTML

HTML 在社招面试总体考得比较少,重要性不高,但是实习生和校招面试考得比较多。相对常考题型有以下几个,顺序是按照重要性排名的。

Canvas/SVG/WebGL

了解其区别和优劣,最好自己写一些小的 Demo 。
如果能有空了解一下可视化的框架对部分岗位会加分很多。这些框架有 Echarts/highcharts/antd/D3.js/SpriteJS/Three.js

参考 https://www.cnblogs.com/gh0408/p/6123430.html

HTML 语义化的概念和意义(网站SEO)

有几次被问到 HTML5 新增标签,与 DIV 等标签的区别,还会结合 SEO 考。

CSS

CSS 相对 HTML 考得比较多,也比较复杂。

CSS 盒模型

让画盒模型,然后会问 box-sizing,也会问各个浏览器 box-sizing 的默认值。

BFC

BFC 的概念,如何触发 BFC,以及 marigin折叠如何计算与处理,参考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

块级元素和内联元素

会考他们的区别,也会让你手写常见的块级元素与内联元素有哪些。

float 和 position

float 的作用、position 属性的所有值和区别(文档流的概念),会结合布局去考,布局是 CSS 里重点中的重点,常考的题有:左边宽度固定右边宽度自适应布局的实现、两列等高布局的实现。

垂直左右居中

垂直左右居中的实现,有很多种方法,兼容性各不相同。有3种一定要记,一个是兼容性最高的 table 的实现,一个是 CSS3 的top left 50%,translate(-50%, -50%) 的实现、一种是 flex 的实现。

其中 flex 的实现一定要了解,因为 flex 经常会被单独问到。

CSS3 选择器

比较可能会考选择器优先级相关知识

重排和重绘

可以先去了解浏览器渲染的整个流程,再去了解重排和重绘的概念以及发生的时机,然后是优化。

前者可以参考 https://juejin.im/entry/590801780ce46300617c89b8
后者可以参考 https://www.cnblogs.com/ranyonsue/p/8328120.html

JS 相关

JS 是大头,《JavaScript 高级程序设计》尽量刷一遍,http://es6.ruanyifeng.com/ ES6 多刷几遍。

this

this 非常非常重要,会结合 let、const、var、变量提升 等知识考。

闭包

考的概率极大,先考概念,然后极大可能问循环闭包的代码题,可以百度搜“循环闭包”查看

JS 数据类型

包括 ES6 新增的数据类型,都需要记忆。考题一般是变量类型的判断,需要对数据类型非常了解,因为后面在深拷贝中要遇到。而深拷贝在生产环境太常见了。

深拷贝浅拷贝

深拷贝的所有方法以及区别,用JSON.parse(JSON.stringify)/Object.assign()/jQuery.extend() 实现的拷贝是深拷贝吗。如果用原生的for循环+变量判断实现要怎么实现。

可以参考 https://segmentfault.com/a/1190000014336441

对象的属性

Configurable、Enumerale、Writable、Value等,最重要的是 Enumerale,会考到各种循环方式因为对 Enumerale 的判断逻辑不一样导致不一样的循环结果。这些循环方式主要有:Object.assign/for…in/Object.keys/forEach/map/reduce。比如我被问到过 forEach/map 的区别。

原型链

原型链的概念,JS 如何实现原型链的,即对 prototype 和 proto 和 constructor 的理解。非常重要。参考 https://www.jianshu.com/p/dee9f8b14771

JS 的继承

《JS高级程序设计》里有讲继承的实现、劣势、升级,最后什么样的继承成了相对最理想的继承。这个过程都要理解,我被考过2次了。然后就是 ES6 里的 Class 做了什么,如何继承,super 的作用,super 里 this 的指向等要弄得很清楚。

也可以参考 https://segmentfault.com/a/1190000013253890

跨域问题

跨域问题是什么,如何解决跨域问题,CORS/script 怎么解决跨域问题。

ajax 的原理,用 XMLHttpRequest 实现 ajax。

Promise/async await

结合 task 和 micro task 考,会有很多内容。和 setTimeout / async await 结合考。async await 如何用 Promise去实现。Promise 的实现原理。Deferred 是什么,和 Promise 的比较。参考https://www.cnblogs.com/dong-xu/p/7000139.html https://www.cnblogs.com/webFrontDev/p/3265568.html

事件机制

冒泡和捕获的概念。以及实现一个通用的事件监听函数或者实现事件委托。参考 https://blog.csdn.net/qq_21859119/article/details/77374475

函数式编程

了解其概念和作用,一般会考 函数的合并 和 珂里化,后者非常重要。可以参考我的总结 https://blog.csdn.net/LeeSirbupt/article/details/80834700

防抖和节流

校招生面试遇到概率低,社招考到的概率为90%。参考 https://segmentfault.com/a/1190000012066399

正则表达式

正则表达式被考到的概率很高。常见的题目有 日期格式化、金钱格式化。

常用设计模式的 JS 实现

设计模式在一些大公司面试中也会被考到。可以看曾探的《JavaScript设计模式与开发实践》,也可以找网上的总结来看。

React 和 Vue

作为当前最火的两个前端框架,一定要熟练了解。下面归纳一些常考的题。

Vue 双向数据绑定

Vue 双向数据绑定是怎么实现的,要能自己手写一个。涉及到 get/set 方法和 Object.defineProperty 知识。参考 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

虚拟 DOM

虚拟 DOM 的概念,React 是怎么实现的。推荐 React 系列教程 https://www.cnblogs.com/SamWeb/p/6740448.html 后续文章在 https://zzk.cnblogs.com/s?w=blog%3ASamWeb%20react 里面。

生命周期

两者的生命周期都需要记忆。被问过几次生命周期,然后会抽部分生命周期考察其中的操作,比如 React 的 shouldComponentUpdate 函数一般会在里面做什么操作,会比较数据,根据比较的结果再去判断是否更新。然后就又问到了比较的方法,以及深拷贝。

vuex 和 redux

他们解决了什么问题,没有他们的时候,是怎么实现父子、子组件之间的通信的。

他们的实现原理,以及区别。

vue-router 和 react-router

他们解决了什么问题,没有他们的时候,是怎样实现 router 的。

他们的实现原理,以及区别。

会涉及到 HTML5 history pushState/replaceState 的知识,推荐 https://www.zhangxinxu.com/wordpress/2013/06/html5-history-api-pushstate-replacestate-ajax/

Node、NPM以及构建工具

CommonJS/AMD/CMD/ES module

他们的区别以及使用方法,对应到 Nodejs/requirejs/seajs/ES module 。

NPM

NPM 的原理,很重要。如何进行包管理。

webpack/gulp/grunt

webpack 一定要了解,gulp/grunt 已濒临淘汰,可以适当了解 gulp。最新的 rollup 打包工具也可以了解。

常考的是 webpack 与 gulp 的区别,webpack 打包原理。

算法

外企和头条必考算法,另外 BAT 和部分公司会考基本的算法。如果有面试外企和头条的打算建议刷 leetcode。作为前端工程师,必备的算法基础有如下几个。

排序

常见的排序算法:冒泡排序、选择排序、直接插入排序以及快速排序。其中快排是一些公司拔高必考前端的一道题,而且曾经在网上引起一个风波,因为很多人的博客都是抄袭ruanyifeng 的快排博客,但是他写的快排其实是有问题的,事件可以参考 https://weibo.com/1196343093/Gg2HYaDgX?type=comment。正确的快排可以参考刚刚这条微博里我偶像寒冬 winter 的回复 https://gist.github.com/wintercn/c30464ed3732ee839c3eeed316d73253 (需要翻墙)

数组合并、去重

两个数组,合并并去重。拔高一点的话,数组里可能有数组或者对象元素的情况。

数组乱序

将一个数组打乱顺序。

计算机基础知识

浏览器地址栏输入网址到显示网页发生了什么

常考题,主要是了解对 Web 的架构的了解程度,可以去记忆一下。也经常会转去考缓存策略,包括 DNS CDN Redis 等的一些知识。

Chrome 调试工具的使用

考到的概率比较小。拔高的话会考 Performance 的使用。更小概率会考到移动端 injecter 如何使用。

git

git 和 github 的使用,低概率会考到。

常见 shell 命令

低概率考到。

数据库知识

极低概率考到。要考的话会考 NoSQL 的概念,常见数据库框架有什么,区别是什么。

HTTP 知识

HTTP 会对校招生和实习生考一下基本知识,主要是 HTTP 状态码,TCP 三次握手、浏览器地址栏输入链接到打开网页发生了什么等问题。社招会有拔高,主要会考缓存。

GET 和 POST 的区别

可以参考我写的 https://blog.csdn.net/LeeSirbupt/article/details/80778474

HTTP 状态码

难点是重定向部分,考的概率比较大,会和缓存策略结合起来考

缓存相关

月影有讲过,HTTP 的正常缓存策略。但是现在生产环境一般通过 webpack 这样的打包程序修改静态文件的名字消除缓存。需要去了解

TCP 三次握手

校招生面试比较小的概率会考三次握手,建议记忆。

  • 10
    点赞
  • 2
    评论
  • 84
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值