目录
前言
本文总结了一些优质的前端面试题(多数源于网络),初学者阅后也要用心钻研其中的原理,重要知识需要系统学习,透彻学习,形成自己的知识链。万不可投机取巧,只求面试过关是错误的!
面试需要注意几点
- 面试题目: 根据你的等级和职位变化,入门级到专家级:范围↑、深度↑、方向↑。
- 题目类型: 技术视野、项目细节、理论知识题,算法题,开放性题,案例题。
- 进行追问: 可以确保问到你开始不懂或面试官开始不懂为止,这样可以大大延展题目的区分度和深度,知道你的实际能力。
- 因为这种关联知识是长时期的学习,绝对不是临时记得住的。
- 回答问题再棒,面试官(可能是你的直接领导面试),会考虑我要不要这个人做我的同事?所以态度很重要。(感觉更像是相亲)
- 资深的工程师能把absolute和relative弄混,这样的人不要也罢,因为团队需要的你这个人具有可以依靠的才能(靠谱)。
前端开发面试知识点大纲
HTML&CSS:
对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端适应
JavaScript:
数据类型、面向对象、继承、闭包、插件、作用域、跨域、原型链、模块化、自定义事件、内存泄漏、事件机制、异步装载回调、模板引擎、Nodejs、JSON、ajax等。
其他:
HTTP、安全、正则、优化、重构、响应式、移动端、团队协作、可维护、SEO、UED、架构、职业生涯
作为一名前端工程师,无论工作年头长短都应该必须掌握的知识点:
- DOM结构 —— 两个节点之间可能存在哪些关系以及如何在节点之间任意移动。
- DOM操作 ——如何添加、移除、移动、复制、创建和查找节点等。
- 事件 —— 如何使用事件,以及IE和标准DOM事件模型之间存在的差别。
- XMLHttpRequest —— 这是什么、怎样完整地执行一次GET请求、怎样检测错误。
- 严格模式与混杂模式 —— 如何触发这两种模式,区分它们有何意义。
- 盒模型 —— 外边距、内边距和边框之间的关系,及IE8以下版本的浏览器中的盒模型
- 块级元素与行内元素 —— 怎么用CSS控制它们、以及如何合理的使用它们
- 浮动元素——怎么使用它们、它们有什么问题以及怎么解决这些问题。
- HTML与XHTML——二者有什么区别,你觉得应该使用哪一个并说出理由。
- JSON —— 作用、用途、设计结构。
备注:
根据自己需要选择性阅读,面试题是对理论知识的总结,让自己学会应该如何表达。
资料答案不够正确和全面,欢迎补充答案、题目;最好是现在网上没有的。
格式不断修改更新中。
HTML面试题
- Doctype作用? 严格模式与混杂模式如何区分?它们有何意义?
- 行内元素有哪些?块级元素有哪些? 空(void)元素有那些?
- 介绍一下CSS的盒子模型?
- link 和@import 的区别是?
- CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算? CSS3新增伪类有那些?
- 如何居中div?如何居中一个浮动元素?
- 浏览器的内核分别是什么?
- html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和
HTML5? - 语义化的理解?
- HTML5的离线储存?
- (写)描述一段语义的html代码吧。
- iframe有那些缺点?
- Label的作用是什么?是怎么用的?(加 for)
- 请描述一下 cookies,sessionStorage 和 localStorage 的区别?
- 如何实现浏览器内多个标签页之间的通信? (阿里)
- webSocket如何兼容低浏览器?(阿里)
- 你是怎么切图的?
CSS面试题
- 列出display的值,说明他们的作用。position的值, relative和absolute定位原点是?
- CSS3有哪些新特性?
- 一个满屏 品 字布局 如何设计?
- 经常遇到的浏览器的兼容性有哪些?原因,解决方法是什么,常用hack的技巧 ?
- 为什么要初始化CSS样式。
- absolute的containing block计算方式跟正常流有什么不同?
- position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样?
- 对BFC规范的理解?
- css定义的权重?
- 解释下浮动和它的工作原理?清除浮动的技巧
- 用过媒体查询,针对移动端的布局吗?
- 使用 CSS 预处理器吗?喜欢那个?
- CSS 优化、提高性能的方法有哪些?
- 浏览器是怎样解析CSS选择器的?
- 在网页中的应该使用奇数还是偶数的字体?为什么呢?
- margin和padding分别适合什么场景使用?
- 你对line-height是如何理解的?
- 怎么让Chrome支持小于12px 的文字?
- 如果需要手动写动画,你认为最小时间间隔是多久,为什么?(阿里)
- display:inline-block 什么时候会显示间隙?(携程)
JavaScript面试题
- 用原生JS的写过东西吗?
- JavaScript原型,原型链 ? 有什么特点?
- eval是做什么的?
- null,undefined 的区别?
- 写一个通用的事件侦听器函数。
- Node.js的适用场景?
- 介绍js的基本数据类型。
- Javascript如何实现继承?
- [“1”, “2”, “3”].map(parseInt) 答案是多少?
- 如何创建一个对象? (画出此对象的内存图)
- 谈谈This对象的理解。
- 事件、IE与火狐的事件机制有什么区别? 如何阻止冒泡?
- 什么是闭包(closure),为什么要用它?
- “use strict”;是什么意思 ? 使用它的好处和坏处分别是什么?
- 如何判断一个对象是否属于某个类?
- new操作符具体干了什么呢?
- Javascript中,有一个函数,执行时对象查找时,永远不会去查找原型,这个函数是?
- JSON 的了解?
- js延迟加载的方式有哪些?
- ajax 是什么?
- 同步和异步的区别?
- 如何解决跨域问题?
- 模块化怎么做?
- AMD(Modules/Asynchronous-Definition)、CMD(Common Module Definition)规范区别?
- 异步加载的方式有哪些?
- .call() 和 .apply() 的区别?
- Jquery与jQuery UI 有啥区别?
- JQuery的源码看过吗?能不能简单说一下它的实现原理?
- jquery 中如何将数组转化为json字符串,然后再转化回来?
- 针对 jQuery 的优化方法?
- JavaScript中的作用域与变量声明提升?
- 如何编写高性能的Javascript?
- 那些操作会造成内存泄漏?
- JQuery一个对象可以同时绑定多个事件,这是如何实现的?
- 如何判断当前脚本运行在浏览器还是node环境中?(阿里)
其他问题
- 你遇到过比较难的技术问题是?你是如何解决的?
- 常使用的库有哪些?常用的前端开发工具?开发过什么应用或组件?
- 页面重构怎么操作?
- 列举IE 与其他浏览器不一样的特性?
- 99%的网站都需要被重构是那本书上写的?
- 什么叫优雅降级和渐进增强?
- WEB应用从服务器主动推送Data到客户端有那些方式?
- 对Node的优点和缺点提出了自己的看法?
- 你有哪些性能优化的方法?
- http状态码有那些?分别代表是什么意思?
- 一个页面从输入 URL 到页面加载显示完成,这个过程中都发生了什么?(流程说的越详细越好)
- 除了前端以外还了解什么其它技术么?你最最厉害的技能是什么?
- 你常用的开发工具是什么,为什么?
- 对前端界面工程师这个职位是怎么样理解的?它的前景会怎么样?
- 你怎么看待Web App 、hybrid App、Native App?
- 加班的看法?
- 平时如何管理你的项目?
- 如何设计突发大规模并发架构?
- 说说最近最流行的一些东西吧?常去哪些网站?
- 移动端(Android IOS)怎么做好用户体验?
- 你在现在的团队处于什么样的角色,起到了什么明显的作用?
- 你认为怎样才是全端工程师(Full Stack developer)?
- 介绍一个你最得意的作品吧?
- 你常去那些技术博客?
- 最近在学什么?能谈谈你未来3,5年给自己的规划吗?
有趣的问题
###A、B两人分别在两座岛上。B生病了,A有B所需要的药。C有一艘小船和一个可以上锁的箱子。C愿意在A和B之间运东西,但东西只能放在箱子里。只要箱子没被上锁,C都会偷走箱子里的东西,不管箱子里有什么。如果A和B各自有一把锁和只能开自己那把锁的钥匙,A应该如何把东西安全递交给B?
答案:A把药放进箱子,用自己的锁把箱子锁上。B拿到箱子后,再在箱子上加一把自己的锁。
箱子运回A后,A取下自己的锁。箱子再运到B手中时,B取下自己的锁,获得药物。
这里有一些问题的回答,不保证完全正确,仅供参考:
问题答案参考