前端工程师面试题汇总+部分答案
前端⼯程师⾯试题汇总+部分答案
想当时刚⾯试的时候，出的⼀些前端题⽬，都是靠着经验回答，没有⽐较官⽅形式的答案，现整理⼀份，即使⽤不到100%，也多少会有作⽤。
1. html&CSS1. 常⽤那⼏种浏览器测试？有哪些内核(Layout Engine)?
(Q1) 浏览器：IE，Chrome，FireFox，Safari，Opera。
(Q2) 内核：Trident，Gecko，Presto，Webkit。
2. 说下⾏内元素和块级元素的区别？⾏内块元素的兼容性使⽤？（IE8 以下）
(Q1) ⾏内元素：会在⽔平⽅向排列，不能包含块级元素，设置width⽆效，height⽆效(可以设置line-height)，margin上下⽆效，padding上下⽆效。
块级元素：各占据⼀⾏，垂直⽅向排列。从新⾏开始结束接着⼀个断⾏。
(Q2) 兼容性：display:inline-block;*display:inline;*zoom:1;
(Q1)
（1）⽗级div定义height。
（2）结尾处加空div标签clear:both。
（3）⽗级div定义伪类:after和zoom。
（4）⽗级div定义overflow:hidden。
（5）⽗级div定义overflow:auto。
（6）⽗级div也浮动，需要定义宽度。
（7）⽗级div定义display:table。
（8）结尾处加br标签clear:both。
蓝湛(Q2) ⽐较好的是第3种⽅式，好多⽹站都这么⽤。
.clearfix:after{
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
zoom: 1;
}
4. box-sizing常⽤的属性有哪些？分别有什么作⽤？
(Q1)box-sizing: content-box|border-box|inherit;
(Q2)content-box：宽度和⾼度分别应⽤到元素的内容框。在宽度和⾼度之外绘制元素的内边距和边框(元素默认效果)。
border-box：元素指定的任何内边距和边框都将在已设定的宽度和⾼度内进⾏绘制。通过从已设定的宽度和⾼度分别减去边框和内边距才能得到内容的宽度和⾼度。
5. Doctype作⽤？标准模式与兼容模式各有什么区别?
(Q1) <!DOCTYPE>告知浏览器的解析器⽤什么⽂档标准解析这个⽂档。DOCTYPE不存在或格式不正确会导致⽂档以兼容模式呈现。
(Q2) 标准模式的排版和JS运作模式都是以该浏览器⽀持的最⾼标准运⾏。在兼容模式中，页⾯以宽松的向后兼容的⽅式显⽰，模拟⽼式浏览器的⾏为以防⽌站点⽆法⼯作。
6. HTML5 为什么只需要写 <!DOCTYPE HTML>？
HTML5不基于 SGML，因此不需要对DTD进⾏引⽤，但是需要doctype来规范浏览器的⾏为（让浏览器按照它们应该的⽅式来运⾏）。
⽽HTML4.01基于SGML，所以需要对DTD进⾏引⽤，才能告知浏览器⽂档所使⽤的⽂档类型。
7. 页⾯导⼊样式时，使⽤link和@import有什么区别？
（1）link属于XHTML标签，除了加载CSS外，还能⽤于定义RSS, 定义rel连接属性等作⽤；⽽@import是CSS提供的，只能⽤于加载CSS;（2）页⾯被加载的时，link会同时被加载，⽽@import引⽤的CSS会等到页⾯被加载完再加载;
（3）import是CSS2.1 提出的，只在IE5以上才能被识别，⽽link是XHTML标签，⽆兼容问题。
8. 介绍⼀下你对浏览器内核的理解？
主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和js引擎。
渲染引擎：负责取得⽹页的内容（HTML、XML、图像等等）、整理讯息（例如加⼊CSS等），以及计算⽹页的显⽰⽅式，然后会输出⾄显⽰器或打印机。浏览器的内核的不同对于⽹页的语法解释会有不同，所以渲染的效果也不相同。所有⽹页浏览器、电⼦邮件客户端以及其它需要编辑、显⽰⽹络内容的应⽤程序都需要内核。
JS引擎则：解析和执⾏javascript来实现⽹页的动态效果。
最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独⽴，内核就倾向于只指渲染引擎。
9. html5有哪些新特性？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
(Q1)
HTML5 现在已经不是 SGML 的⼦集，主要是关于图像，位置，存储，多任务等功能的增加。
(1)绘画 canvas;
(2)⽤于媒介回放的 video 和 audio 元素;
(3)本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;
(4)sessionStorage 的数据在浏览器关闭后⾃动删除;
(5)语意化更好的内容元素，⽐如 article、footer、header、nav、section;
(6)表单控件，calendar、date、time、email、url、search;
(7)新的技术webworker, websocket, Geolocation;
(Q2)
IE8/IE7/IE6⽀持通过ateElement⽅法产⽣的标签，
可以利⽤这⼀特性让这些浏览器⽀持HTML5新标签，
浏览器⽀持新标签后，还需要添加标签默认的样式。
当然也可以直接使⽤成熟的框架、⽐如html5shim，
<!--[if lt IE 9]>
<![endif]-->
10. 简述⼀下你对HTML语义化的理解？
⽤正确的标签做正确的事情。
html语义化让页⾯的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
即使在没有样式CSS情况下也以⼀种⽂档格式显⽰，并且是容易阅读的;
搜索引擎的爬⾍也依赖于HTML标记来确定上下⽂和各个关键字的权重，利于;
使阅读源代码的⼈对⽹站更容易将⽹站分块，便于阅读维护理解。
JavaScript
1. 介绍js的基本数据类型
Undefined、Null、Boolean、Number、String
2. js有哪些内置对象？
数据封装类对象：Object、Array、Boolean、Number 和 String
其他对象：Function、Arguments、Math、Date、RegExp、Error
3. this对象的理解
this总是指向函数的直接调⽤者（⽽⾮间接调⽤者）；
如果有new关键字，this指向new出来的那个对象；
在事件中，this指向触发这个事件的对象，特殊的是，IE中的attachEvent中的this总是指向全局对象Window。
4. eval是做什么的？
它的功能是把对应的字符串解析成JS代码并运⾏；
应该避免使⽤eval，不安全，⾮常耗性能（2次，⼀次解析成js语句，⼀次执⾏）。
由JSON字符串转换为JSON对象的时候可以⽤eval，var obj =eval('('+ str +')')。
5. DOM怎样添加、移除、移动、复制、创建和查节点
// 创建新节点
createDocumentFragment() //创建⼀个DOM⽚段
createElement() //创建⼀个具体的元素
createTextNode() //创建⼀个⽂本节点
// 添加、移除、替换、插⼊
appendChild()
removeChild()
replaceChild()
insertBefore() //在已有的⼦节点前插⼊⼀个新的⼦节点
// 查
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值(IE容错能⼒较强，会得到⼀个数组，其中包括id等于name值的)
getElementById() //通过元素Id，唯⼀性
6. null和undefined的区别？
null是⼀个表⽰"⽆"的对象，转为数值时为0；undefined是⼀个表⽰"⽆"的原始值，转为数值时为NaN。
undefined：
（1）变量被声明了，但没有赋值时，就等于undefined。
（2) 调⽤函数时，应该提供的参数没有提供，该参数等于undefined。
（3）对象没有赋值的属性，该属性的值为undefined。
（4）函数没有返回值时，默认返回undefined。
null：
（1）作为函数的参数，表⽰该函数的参数不是对象。
（2）作为对象原型链的终点。
7. new操作符具体⼲了什么呢?
（1）创建⼀个空对象，并且 this 变量引⽤该对象，同时还继承了该函数的原型。
（2）属性和⽅法被加⼊到 this 引⽤的对象中。
（3）新创建的对象由 this 所引⽤，并且最后隐式的返回 this 。
8. JSON 的了解？
JSON(JavaScript Object Notation) 是⼀种轻量级的数据交换格式。它是基于JavaScript的⼀个⼦集。数据格式简单, 易于读写, 占⽤带宽⼩。格式：采⽤键值对，例如：{'age':'12', 'name':'back'}
9. call() 和 apply() 的区别和作⽤？
apply()函数有两个参数：第⼀个参数是上下⽂，第⼆个参数是参数组成的数组。如果上下⽂是null，则使⽤全局对象代替。
如：function.apply(this,[1,2,3]);
call()的第⼀个参数是上下⽂，后续是实例传⼊的参数序列。
如：function.call(this,1,2,3);
10. 如何获取UA？
function whatBrowser() {
document.Browser.Name.value=navigator.appName;
document.Browser.Version.value=navigator.appVersion;
document.Browser.Code.value=navigator.appCodeName;
document.Browser.Agent.value=navigator.userAgent;
}
其他
1. HTTP状态码知道哪些？
100 Continue 继续，⼀般在发送post请求时，已发送了http header之后服务端将返回此信息，表⽰确认，之后发送具体参数信息
200 OK 正常返回信息
201 Created 请求成功并且服务器创建了新的资源
202 Accepted 服务器已接受请求，但尚未处理
301 Moved Permanently 请求的⽹页已永久移动到新位置。
302 Found 临时性重定向。
303 See Other 临时性重定向，且总是使⽤ GET 请求新的 URI。
304 Not Modified ⾃从上次请求后，请求的⽹页未修改过。
400 Bad Request 服务器⽆法理解请求的格式，客户端不应当尝试再次使⽤相同的内容发起请求。
401 Unauthorized 请求未授权。
403 Forbidden 禁⽌访问。
404 Not Found 不到如何与 URI 相匹配的资源。
500 Internal Server Error 最常见的服务器端错误。
503 Service Unavailable 服务器端暂时⽆法处理请求（可能是过载或维护）。
2. 你有哪些性能优化的⽅法？
（1）减少http请求次数：CSS Sprites, JS、CSS源码压缩、图⽚⼤⼩控制合适；⽹页Gzip，CDN托管，data缓存，图⽚服务器。
（2）前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端⽤变量保存ajax请求结果，每次操作本地变量，不⽤请求，减少请求次数
（3）⽤innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
（4）当需要设置的样式很多时设置className⽽不是直接操作style。
（5）少⽤全局变量、缓存DOM节点查的结果。减少IO读取操作。
（6）避免使⽤CSS Expression（css表达式)⼜称Dynamic properties(动态属性)。
（7）图⽚预加载，将样式表放在顶部，将脚本放在底部加上时间戳。
3. 什么叫优雅降级和渐进增强？
优雅降级：web站点在所有新式浏览器中都能正常⼯作，如果⽤户使⽤的是⽼式浏览器，则代码会检查以确认它们是否能正常⼯作。由于IE 独特的盒模型布局问题，针对不同版本的 IE的hack实践过优雅降级了，为那些⽆法⽀持功能的浏览器增加候选⽅案，使之在旧式浏览器上以某种形式降级体验却不⾄于完全失效。
渐进增强：从被所有浏览器⽀持的基本功能开始，逐步地添加那些只有新式浏览器才⽀持的功能，向页⾯增加⽆害于基础浏览器的额外样式和功能的。当浏览器⽀持时，它们会⾃动地呈现出来并发挥作⽤。
4. 哪些常见操作会造成内存泄漏？
内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。
垃圾回收器定期扫描对象，并计算引⽤了每个对象的其他对象的数量。如果⼀个对象的引⽤数量为 0（没有其他对象引⽤过该对象），或对该对象的惟⼀引⽤是循环的，那么该对象的内存即可回收。
举杯邀明月对影成三人setTimeout 的第⼀个参数使⽤字符串⽽⾮函数的话，会引发内存泄漏。
闭包、控制台⽇志、循环（在两个对象彼此引⽤且彼此保留时，就会产⽣⼀个循环）。
5. 线程与进程的区别
⼀个程序⾄少有⼀个进程,⼀个进程⾄少有⼀个线程。
线程的划分尺度⼩于进程，使得多线程程序的并发性⾼。
另外，进程在执⾏过程中拥有独⽴的内存单元，⽽多个线程共享内存，从⽽极⼤地提⾼了程序的运⾏效率。
线程在执⾏过程中与进程还是有区别的。每个独⽴的线程有⼀个程序运⾏的⼊⼝、顺序执⾏序列和程序的出⼝。但是线程不能够独⽴执⾏，必须依存在应⽤程序中，由应⽤程序提供多个线程执⾏控制。
从逻辑⾓度来看，多线程的意义在于⼀个应⽤程序中，有多个执⾏部分可以同时执⾏。但操作系统并没有将多个线程看做多个独⽴的应⽤，来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别。
HTML
Doctype作⽤？严格模式与混杂模式如何区分？它们有何意义?
HTML5 为什么只需要写 <!DOCTYPE HTML>？
⾏内元素有哪些？块级元素有哪些？空(void)元素有那些？
页⾯导⼊样式时，使⽤link和@import有什么区别？
介绍⼀下你对浏览器内核的理解？
常见的浏览器内核有哪些？
html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
简述⼀下你对HTML语义化的理解？
HTML5的离线储存怎么使⽤，⼯作原理能不能解释⼀下？
浏览器是怎么对HTML5的离线储存资源进⾏管理和加载的呢？
请描述⼀下 cookies，sessionStorage 和 localStorage 的区别？
iframe有那些缺点？
Label的作⽤是什么？是怎么⽤的？（加 for 或包裹）
HTML5的form如何关闭⾃动完成功能？
如何实现浏览器内多个标签页之间的通信? (阿⾥)
webSocket如何兼容低浏览器？(阿⾥)
页⾯可见性（Page Visibility）API 可以有哪些⽤途？
如何在页⾯上实现⼀个圆形的可点击区域？
实现不使⽤ border 画出1px⾼的线，在不同浏览器的Quirksmode和CSSCompat模式下都能保持同⼀效果。
⽹页验证码是⼲嘛的，是为了解决什么安全问题？
介绍⼀下标准的CSS的盒⼦模型？与低版本IE的盒⼦模型有什么不同的？
CSS选择符有哪些？哪些属性可以继承？
CSS优先级算法如何计算？
css3新增伪类有那些？
如何居中div？如何居中⼀个浮动元素？如何让绝对定位的div居中？
display有哪些值？说明他们的作⽤。
position的值relative和absolute定位原点是？
CSS3有哪些新特性？
请解释⼀下CSS3的Flexbox（弹性盒布局模型），以及适⽤场景？
最强地震⽤纯CSS创建⼀个三⾓形的原理是什么？
端午节手抄报内容简短20字
⼀个满屏品字布局如何设计?
常见兼容性问题？
li与li之间有看不见的空⽩间隔是什么原因引起的？有什么解决办法？
经常遇到的浏览器的兼容性有哪些？原因，解决⽅法是什么，常⽤hack的技巧？
为什么要初始化CSS样式。
absolute的containing block计算⽅式跟正常流有什么不同？
CSS⾥的visibility属性有个collapse属性值是⼲嘛⽤的？在不同浏览器下以后什么区别？
position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？
对BFC规范(块级格式化上下⽂：block formatting context)的理解？
CSS权重优先级是如何计算的？
请解释⼀下为什么会出现浮动和什么时候需要清除浮动？清除浮动的⽅式
移动端的布局⽤过媒体查询吗？
使⽤ CSS 预处理器吗？喜欢那个？
CSS优化、提⾼性能的⽅法有哪些？
浏览器是怎样解析CSS选择器的？
在⽹页中的应该使⽤奇数还是偶数的字体？为什么呢？
margin和padding分别适合什么场景使⽤？
抽离样式模块怎么写，说出思路，有⽆实践经验？[阿⾥航旅的⾯试题]
元素竖向的百分⽐设定是相对于容器的⾼度吗？
全屏滚动的原理是什么？⽤到了CSS的那些属性？
什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？
视差滚动效果，如何给每页做不同的动画？（回到顶部，向下滑动要再次出现，和只出现⼀次分别怎么做？）
::before 和 :after中双冒号和单冒号有什么区别？解释⼀下这2个伪元素的作⽤。
如何修改chrome记住密码后⾃动填充表单的黄⾊背景？
你对line-height是如何理解的？
为了爱情我也背叛了所有设置元素浮动后，该元素的display值是多少？（⾃动变成display:block）
怎么让Chrome⽀持⼩于12px 的⽂字？
让页⾯⾥的字体变清晰，变细⽤CSS怎么做？（-webkit-font-smoothing: antialiased;）
font-style属性可以让它赋值为“oblique” oblique是什么意思？
position:fixed；在Android下⽆效怎么处理？
如果需要⼿动写动画，你认为最⼩时间间隔是多久，为什么？（阿⾥）
display:inline-block 什么时候会显⽰间隙？(携程)
overflow: scroll时不能平滑滚动的问题怎么处理？
如何灭老鼠有⼀个⾼度⾃适应的div，⾥⾯有两个div，⼀个⾼度100px，希望另⼀个填满剩下的⾼度。
png、jpg、gif 这些图⽚格式解释⼀下，分别什么时候⽤。有没有了解过webp？
什么是Cookie 隔离？（或者说：请求资源的时候不要让它带cookie怎么做）
style标签写在body后与body前有什么区别？
介绍JavaScript的基本数据类型。
说说写JavaScript的基本规范？
JavaScript原型，原型链 ? 有什么特点？
JavaScript有⼏种类型的值？（堆：原始数据类型和栈：引⽤数据类型），你能画⼀下他们的内存图吗？
Javascript如何实现继承？
Javascript创建对象的⼏种⽅式？
Javascript作⽤链域?
谈谈This对象的理解。
eval是做什么的？
什么是window对象? 什么是document对象?
null，undefined的区别？
写⼀个通⽤的事件侦听器函数(机试题)。
[“1”, “2”, “3”].map(parseInt) 答案是多少？
关于事件，IE与⽕狐的事件机制有什么区别？如何阻⽌冒泡？
什么是闭包（closure），为什么要⽤它？
javascript 代码中的”use strict”；是什么意思 ? 使⽤它区别是什么？
如何判断⼀个对象是否属于某个类？
new操作符具体⼲了什么呢?
⽤原⽣JavaScript的实现过什么功能吗？
Javascript中，有⼀个函数，执⾏时对象查时，永远不会去查原型，这个函数是？
对JSON的了解？
[].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16) }) 能解释⼀下这段代码的意思吗？
js延迟加载的⽅式有哪些？
Ajax 是什么? 如何创建⼀个Ajax？
同步和异步的区别?
如何解决跨域问题?
页⾯编码和被请求的资源编码如果不⼀致如何处理？
模块化开发怎么做？
AMD（Modules/Asynchronous-Definition）、CMD（Common Module Definition）规范区别？
requireJS的核⼼原理是什么？（如何动态加载的？如何避免多次加载的？如何缓存的？）
让你⾃⼰设计实现⼀个requireJS，你会怎么做？

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。