资讯专栏INFORMATION COLUMN

前端面试题总结

wuyangnju / 2359人阅读

摘要:工作中总结的一些比较重要的前端技能,觉得在面试中比较合适提问,即能查看出面试者的技术功底,又能考察其知识体系的广度。异步编程的考察,其关键字的使用,与的关系,同时可以深入考察总共有几种异步编程的方式。

工作中总结的一些比较重要的前端技能,觉得在面试中比较合适提问,即能查看出面试者的技术功底,又能考察其知识体系的广度。适用于应届生和工作年限两年下的同学,掌握下面的知识基本满足工作需求了。更高年限的开发工程师则应该更注重架构能力而不是具体的技术细节。

HTML5

语义化标签,meta元数据标签,考察其对语义化的理解。

draggale属性的api,dragstart, drop, dataTransfer等内容,考察其对新技术的使用。

CSS3

盒子模型是什么,怎么计算的?
盒子模型指的是浏览器将文档流从视觉上渲染为不同矩形框的组合,每个元素都被渲染为一个矩形框,包含内容区域(文本、图片等真实内容的区域)和可选的margin/border/padding三个区域,中文名为外边距、边框和填充。包含关系为margin > border > padding > content
计算方式为自上而下,4个盒子区域的宽度和高度都支持固定值进行设置,同时margin/padding支持百分比,计算的高度和宽度值都依据父元素的content区域宽度,content区域也支持百分比,不过高度和宽度分别对应父元素content区域的高度和宽度,border不支持百分比。content区域的默认宽高由盒子类型和是否包含有其他盒子来进行计算,其余区域均为0。

盒子模型包含几种类型,怎么转换。

盒子模型相关的一些DOM属性offsetHeight/offsetTop/scrollHeight/clientHeight分别指什么?

offsetHeight: 包含border、padding和content区域的高度总和。
offsetTop: 元素border上边界到父元素content上边界的距离。
scrollHeight: 没有滚动条的情况下,元素的offsetHeight总高度。
clientHeight: 浏览器视口的高度。

选择器实现原理以及其权重和最右匹配的概念。

圣杯布局(大屏幕分为顶部、底部和中间三个纵向容器,小屏幕时横列为5项)的几种实现方式(同时考察@media媒体查询)。

bootstrap框架的响应式布局实现原理,考察viewport视口,媒体查询的边界条件。

垂直居中对齐的方式,考察元素的文字基线。

bootstrap输入框组怎么实现,考察:first-child等伪元素和垂直居中对齐。

Javascript

Js包含的基础类型,null/undefined/boolean/number/string/object/Symbolarray, function, object实例和原型链对应关系。

数组的常用函数,如unshift/slice/map/forEach/filter/some/every/reduce,同时考察哪些返回新的,哪些修改了原数组。

尝试给数组添加一个通用方法makeIndexObj,使得可以根据某个参数作为key值重构为新对象。

Object.defineProperty(Array.prototype, "makeIndexObj", {
value: function (key) {
    let result = {};
    this.forEach(item => {
        // 这里借用了jQuery的深度复制,可以考察其具体的实现
        result[item[key]] = $.extend(true, {}, item);
    });
return result;
}
});

考察对象的属性以及其特征,包括defineProperty和属性访问器定义属性的区别,以及属性的enumerable, configurable, writable, value, get, set特征,同时考察深度复制和功能体边界检测(支持多key值,输入的是一个数组或字符串)。

浅拷贝和深度拷贝的实现,考察Object.assign(), for in遍历, $.extend()等。

let, var, const的区别和优劣,考察变量提升,常量实现方式,同时深入考察如何实现真正的不可修改的对象。

cookie,localstorage, sessionstorage的区别,考察空间限制,哪些和服务器交互,常见应用场景。

es6箭头函数 => 的简化写法和作用,考察对参数的要求和自动返回值以及this强制绑定运行环境。

事件捕获和冒泡的方式,考察addEventListener和attachEvent事件,以及jQuery on/bind/off/die/live等常用方法的区别和关系。

兄弟元素内容互相覆盖,事件如何触发。考察与冒泡的混淆,以及元素碰撞检测。

AJAX的原理以及跨域原理和方法,可以考察浏览器和服务端HTTP通信。

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从输入到返回都经历了什么过程?考察范围非常恐怖:

 1. 浏览器读取最近浏览,自动推荐网址.
 2. 拿到url,尝试读取缓存。
 3. 缓存不存在,构建响应头,发起请求。其中包括dns解析,tcp建连,发起http请求。
 4. 服务器接收到客户端请求,解析并处理返回数据。
 5. 浏览器接收到响应头,读取状态码等信息,进行缓存或读取缓存或再次发起请求。
 6. 读取响应体,检测数据类型,进行解析。
 7. 渲染页面。

在这些过程中,每一个都可以深入询问,如:

 1. 网络通信方向dns解析的过程,一共分为几次,根域名服务器、权威服务器、代理服务器等概念。
 2. tcp建连的过程,三次握手,`syn, ack+syn, ack`,以及断开连接的`wait time state`的作用。
 3. 如何进行缓存和格式的控制,请求头和响应头的主体参数的作用。
 4. 常见的状态码的含义,如200、304、404、500等,不同分段指向什么错误。
 5. 浏览器的请求控制,对同一个域名下最多保持6个请求,如何复用连接,keep-alive的作用。
 6. 渲染页面的过程,DOM、BOM、ECMAScript的关系,什么为阻塞,什么非阻塞。document.ready是准备好了什么。

页面性能优化
图片合并、异步加载、js压缩、CDN加速等

兼容性
常见的滚轮事件、事件对象等,主要看个人遇到的问题,不要挑偏僻的问。对兼容性的历史遗留过程的了解。出现问题常用的解决方案,查文档常用的网站,如MDN、w3c、segmentfault、stackoverflow、github等官方文档和程序员交友社区,考察其善用搜索引擎的能力。

git仓库管理
如何构建新的分支和合并分支,出现冲突如何处理,如何回滚版本。主要考察合作开发代码的经验以及对仓库的理解。

算法相关
都了解什么排序算法,插入排序和快速排序和冒泡排序的事件复杂度,快速排序的思想,手写快排,快排的最优情况和最差情况。js使用了什么排序算法,深入考察for i++[].forEach的效率,为什么。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/91826.html

相关文章

  • 前端最强面经汇总

    摘要:获取的对象范围方法获取的是最终应用在元素上的所有属性对象即使没有代码,也会把默认的祖宗八代都显示出来而只能获取元素属性中的样式。因此对于一个光秃秃的元素,方法返回对象中属性值如果有就是据我测试不同环境结果可能有差异而就是。 花了很长时间整理的前端面试资源,喜欢请大家不要吝啬star~ 别只收藏,点个赞,点个star再走哈~ 持续更新中……,可以关注下github 项目地址 https:...

    wangjuntytl 评论0 收藏0
  • 前端开发面试链接

    摘要:手册网超级有用的前端基础技术面试问题收集前端面试题目及答案汇总史上最全前端面试题含答案常见前端面试题及答案经典面试题及答案精选总结前端面试过程中最容易出现的问题前端面试题整理腾讯前端面试经验前端基础面试题部分最新前端面试题攻略前端面试前端入 手册网:http://www.shouce.ren/post/index 超级有用的前端基础技术面试问题收集:http://www.codec...

    h9911 评论0 收藏0
  • 前端开发面试链接

    摘要:手册网超级有用的前端基础技术面试问题收集前端面试题目及答案汇总史上最全前端面试题含答案常见前端面试题及答案经典面试题及答案精选总结前端面试过程中最容易出现的问题前端面试题整理腾讯前端面试经验前端基础面试题部分最新前端面试题攻略前端面试前端入 手册网:http://www.shouce.ren/post/index 超级有用的前端基础技术面试问题收集:http://www.codec...

    snifes 评论0 收藏0
  • 前端面试 - 收藏集 - 掘金

    摘要:一基础接口的意义百度规范扩展回调抽象类的意义我的前端面试经历百度前端掘金博主就读于电子科技大学,大三狗一枚面试是个漫长的过程,从海投到收获电话面试,一面二面三面,一个步骤出错那么后面就宣告终结。 一道常被人轻视的前端 JS 面试题 - 前端 - 掘金 目录前言第一问第二问变量声明提升函数表达式第三问第四问第五问第六问构造函数的返回值第七问最后前言 年前刚刚离职了,分享下我曾经出过的一道...

    lpjustdoit 评论0 收藏0
  • 深入理解js

    摘要:详解十大常用设计模式力荐深度好文深入理解大设计模式收集各种疑难杂症的问题集锦关于,工作和学习过程中遇到过许多问题,也解答过许多别人的问题。介绍了的内存管理。 延迟加载 (Lazyload) 三种实现方式 延迟加载也称为惰性加载,即在长网页中延迟加载图像。用户滚动到它们之前,视口外的图像不会加载。本文详细介绍了三种延迟加载的实现方式。 详解 Javascript十大常用设计模式 力荐~ ...

    caikeal 评论0 收藏0
  • 求职准备 - 收藏集 - 掘金

    摘要:一基础接口的意义百度规范扩展回调抽象类的意义想不想通过一线互联网公司面试文档整理为电子书掘金简介谷歌求职记我花了八个月准备谷歌面试掘金原文链接翻译者 【面试宝典】从对象深入分析 Java 中实例变量和类变量的区别 - 掘金原创文章,转载请务必保留原出处为:http://www.54tianzhisheng.cn/... , 欢迎访问我的站点,阅读更多有深度的文章。 实例变量 和 类变量...

    cuieney 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<