工作中总结的一些比较重要的前端技能,觉得在面试中比较合适提问,即能查看出面试者的技术功底,又能考察其知识体系的广度。适用于应届生和工作年限两年下的同学,掌握下面的知识基本满足工作需求了。更高年限的开发工程师则应该更注重架构能力而不是具体的技术细节。
HTML5
语义化标签,meta元数据标签,考察其对语义化的理解。
draggale属性的api,dragstart, drop, dataTransfer等内容,考察其对新技术的使用。
CSS3
盒子模型以及常用的盒子属性offsetHeight/offsetTop/clientHeight
等。
选择器实现原理以及其权重和最右匹配的概念。
圣杯布局(大屏幕分为顶部、底部和中间三个纵向容器,小屏幕时横列为5项)的几种实现方式(同时考察@media媒体查询)。
bootstrap框架的响应式布局实现原理,考察viewport视口,媒体查询的边界条件。
垂直居中对齐的方式,考察元素的文字基线。
bootstrap输入框组怎么实现,考察:first-child等伪元素和垂直居中对齐。
Javascript
Js包含的基础类型,string/object/null/undefined/boolean/Symbol
。array
, function
, object
实例和原型链对应关系。
数组的常用函数,如unshift/slice/map/forEach/filter/some/every/reduce
,同时考察哪些返回新的,哪些修改了原数组。
尝试给数组添加一个通用方法makeIndexObj,使得可以根据某个参数作为key值重构为对象。考察defineProperty和原型的enumerable, configurable, writable, value属性,同时考察原型中的this对象指向,以及深度复制和功能体边界检测。
浅拷贝和深度拷贝的实现,考察Object.assign(), for in遍历, $.extend()等。
let, var, const的区别和优劣,考察变量提升,常量实现方式,同时深入考察如何实现真正的不可修改的对象。
cookie,localstorage, sessionstorage的区别,考察空间限制,哪些和服务器交互,常见应用场景。
es6箭头函数 => 的简化写法和作用,考察对参数的要求和自动返回值以及this强制绑定运行环境。
事件捕获和冒泡的方式,考察addEventListener和attachEvent事件,以及jQuery on/bind/off/die/live等常用方法的区别和关系。
兄弟元素内容互相覆盖,事件如何触发。考察与冒泡的混淆,以及元素碰撞检测。
Promise异步编程,考察其基本用法,常用race/all方法,异常捕获方式。
异步编程Generator的考察,其关键字yield的使用,与Promise的关系,同时可以深入考察js总共有几种异步编程的方式。
this对象的绑定方式,总共包含有默认绑定、隐含绑定、明确绑定、new绑定,每种的应用场景阐述和内部原理。
闭包,闭包如何产生以及其作用和副作用。
Vue MVVM框架
MVVM框架解决了什么问题,带来了什么问题。考察Vue的特性,如双向数据绑定、模块化、组件化、模板语言等优势,隐藏实现细节、不利于问题追查、过度封装影响性能的弊端。是否使用过官方vue devtools开发工具调试。
双向数据绑定如何实现,考察es5 getter/setter方法,以及其对数组对象等完全重写,深入考察设计模式
的观察者模式和订阅者模式的方式以及区别。
如何追踪数据变化,数组的哪些改变方式不能被检测到,如直接改变length,元素索引修改,同时还有对象的属性修改。为什么这些不能被检测到,因为现有js语言层面不支持,只能对既有方法进行重写。
nextTick的使用场景,为什么会使用nextTick,事件驱动,同一个执行周期内去重回调事件提高效率减少资源消耗。
组件的优势,模块封装有什么优劣,组件如何进行模块化:props down, events up。
单页面复杂应用应该new多少个vue对象,不同vue对象数据如何传递,公有函数如何声明。考察模块的封装和耦合以及其取舍,引入vuex.js。
vuex和vue-router是否使用过,都解决了什么问题。不深究第三方库,只考察广度和技术栈以及其理解程度。
综合知识
url从输入到返回都经历了什么过程?考察范围非常恐怖:
- 浏览器读取最近浏览,自动推荐网址.
- 拿到url,尝试读取缓存。
- 缓存不存在,构建响应头,发起请求。其中包括dns解析,tcp建连,发起http请求。
- 服务器接收到客户端请求,解析并处理返回数据。
- 浏览器接收到响应头,读取状态码等信息,进行缓存或读取缓存或再次发起请求。
- 读取响应体,检测数据类型,进行解析。
- 渲染页面。
在这些过程中,每一个都可以深入询问,如: - 网络通信方向dns解析的过程,一共分为几次,根域名服务器、权威服务器、代理服务器等概念。
- tcp建连的过程,三次握手,
syn, ack+syn, ack
,以及断开连接的wait time state
的作用。 - 如何进行缓存和格式的控制,请求头和响应头的主体参数的作用。
- 常见的状态码的含义,如200、304、404、500等,不同分段指向什么错误。
- 浏览器的请求控制,对同一个域名下最多保持6个请求,如何复用连接,keep-alive的作用。
- 渲染页面的过程,DOM、BOM、ECMAScript的关系,什么为阻塞,什么非阻塞。document.ready是准备好了什么。
页面性能优化
图片合并、异步加载、js压缩、CDN加速等
兼容性
常见的滚轮事件、事件对象等,主要看个人遇到的问题,不要挑偏僻的问。对兼容性的历史遗留过程的了解
算法相关
都了解什么排序算法,插入排序和快速排序和冒泡排序的事件复杂度,快速排序的思想,手写快排,快排的最优情况和最差情况。js使用了什么排序算法,深入考察for i++和[].forEach的效率,为什么。
想了解更多关于前端面试方面的试题,可以点击昵称关注下我或者私信给我。分享更全方面的试题和资料给你。