Web前端面试题目汇总阅读目录HTML/CSS部分JavaScript部分HTTP算法相关Web安全前端性能设计模式正则表达式职业规划以下是收集一些面试中经常会遇到的经典面试题以及自己面试过程中有一些未解决的问题，通过对知识的整理以及经验的总结，重新巩固自身的前端基础知识，如有错误或更好的答案，欢迎指正，水平有限，望各位不吝指教。:）一、HTML/CSS部分1、什么是盒子模型？在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。2、行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？行内元素：a、b(粗体）、span、img、input、strong（强调文本）、select、label、em（强调文本、button、textarea块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote（标记）空元素：即系没有内容的HTML元素，例如：br、meta、hr、link、input、img3、CSS实现垂直水平居中一道经典的问题，实现方法有很多种，以下是其中一种实现：HTML结构：
&div class="wrapper"&
&div class="content"&&/div& &/div& CSS：
.wrapper {
width: 500
height: 500
background-color: #
background-color:#6699FF;
height:200
//父元素需要相对定位
left: 50%;
margin-top:-100
//二分之一的height，width
margin-left: -100
} 4、什么是CSS Hack?一般来说是针对不同的浏览器写不同的CSS,就是 CSS Hack。IE浏览器Hack一般又分为三种，条件Hack、属性级Hack、选择符Hack（详细参考CSS文档：css文档）。例如：
// 1、条件Hack
&!--[if IE]&
.test{color:}
&![endif]--&
// 2、属性Hack
color:#090\9; /* For IE8+ */
*color:#f00;
/* For IE7 and earlier */
_color:#ff0;
/* For IE6 and earlier */
// 3、选择符Hack
* html .test{color:#090;}
/* For IE6 and earlier */
* + html .test{color:#ff0;}
/* For IE7 */5、简述同步和异步的区别同步是阻塞模式，异步是非阻塞模式。同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去；异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。6、px和em的区别px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小。浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em7、什么叫优雅降级和渐进增强？渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。区别：a. 优雅降级是从复杂的现状开始，并试图减少用户体验的供给b. 渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要c. 降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带8、浏览器的内核分别是什么?IE: trident内核Firefox：gecko内核Safari：webkit内核Opera：以前是presto内核，Opera现已改用Google Chrome的Blink内核Chrome：Blink(基于webkit，Google与Opera Software共同开发)二、JavaScript部分怎样添加、移除、移动、复制、创建和查找节点？1）创建新节点createDocumentFragment() //创建一个DOM片段createElement() //创建一个具体的元素createTextNode() //创建一个文本节点2）添加、移除、替换、插入appendChild() //添加removeChild() //移除replaceChild() //替换insertBefore() //插入3）查找getElementsByTagName() //通过标签名称getElementsByName() //通过元素的Name属性的值getElementById() //通过元素Id，唯一性实现一个函数clone，可以对JavaScript中的5种主要的数据类型（包括Number、String、Object、Array、Boolean）进行值复制。
* 对象克隆
* 支持基本数据类型及对象
* 递归方法
function clone(obj) {
switch (typeof obj) {
case "undefined":
case "string":
o = obj + "";
case "number":
o = obj - 0;
case "boolean":
case "object": // object 分为两种情况 对象（Object）或数组（Array）
if (obj === null) {
if (Object.prototype.toString.call(obj).slice(8, -1) === "Array") {
for (var i = 0; i & obj.length; i++) {
o.push(clone(obj[i]));
for (var k in obj) {
o[k] = clone(obj[k]);
如何消除一个数组里面重复的元素？// 方法一：
var arr1 =[1,2,2,2,3,3,3,4,5,6],
arr2 = [];
for(var i = 0,len = arr1.length; i& len; i++){
if(arr2.indexOf(arr1[i]) & 0){
arr2.push(arr1[i]);
document.write(arr2); // 1,2,3,4,5,6
在Javascript中什么是伪数组？如何将伪数组转化为标准数组？伪数组（类数组）：无法直接调用数组方法或期望length属性有什么特殊的行为，但仍可以对真正数组遍历方法来遍历它们。典型的是函数的argument参数，还有像调用getElementsByTagName,document.childNodes之类的,它们都返回NodeList对象都属于伪数组。可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象。function log(){
var args = Array.prototype.slice.call(arguments);
//为了使用unshift数组方法，将argument转化为真正的数组
args.unshift('(app)');
console.log.apply(console, args);
Javascript中callee和caller的作用？caller是返回一个对函数的引用，该函数调用了当前函数；callee是返回正在被执行的function函数，也就是所指定的function对象的正文。请描述一下cookies，sessionStorage和localStorage的区别sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。web storage和cookie的区别Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生。统计字符串中字母个数或统计最多字母数。var str = "aaaabbbccccddfgh";
for(var i=0;i&str.length;i++){
var v = str.charAt(i);
if(obj[v] && obj[v].value == v){
obj[v].count = ++ obj[v].count;
obj[v] = {};
obj[v].count = 1;
obj[v].value = v;
for(key in obj){
document.write(obj[key].value +'='+obj[key].count+'&'); // a=4
JavaScript基础数据类型JavaScript数据类型包括原始类型和引用类型，原始类型有五个:Number（数值） String（字符串） Boolean（布尔） Null（空） Undefined（未定义）引用类型有一个：Object（对象）通过typeof(x)可以返回一个变量x的数据类型“number”、“string”、“boolean”、“undefined”、”object”，这里要注意一点：typeof运算符对于null类型返回的是object。^ 《JavaScript高级程序设计》： 这实际上是JavaScript最初实现中的一个错误，后来被ECMAScript沿用了。现在null被认为是对象的占位符，从而解释了这一矛盾。但是从技术上来说，它仍然是原始值。谈一谈JavaScript作用域链当执行一段JavaScript代码（全局代码或函数）时，JavaScript引擎会创建为其创建一个作用域又称为执行上下文（Execution Context），在页面加载后会首先创建一个全局的作用域，然后每执行一个函数，会建立一个对应的作用域，从而形成了一条作用域链。每个作用域都有一条对应的作用域链，链头是全局作用域，链尾是当前函数作用域。作用域链的作用是用于解析标识符，当函数被创建时（不是执行），会将this、arguments、命名参数和该函数中的所有局部变量添加到该当前作用域中，当JavaScript需要查找变量X的时候（这个过程称为变量解析），它首先会从作用域链中的链尾也就是当前作用域进行查找是否有X属性，如果没有找到就顺着作用域链继续查找，直到查找到链头，也就是全局作用域链，仍未找到该变量的话，就认为这段代码的作用域链上不存在x变量，并抛出一个引用错误（ReferenceError）的异常。如何理解JavaScript原型链JavaScript中的每个对象都有一个prototype属性，我们称之为原型，而原型的值也是一个对象，因此它也有自己的原型，这样就串联起来了一条原型链，原型链的链头是object,它的prototype比较特殊，值为null。原型链的作用是用于对象继承，函数A的原型属性(prototype property)是一个对象，当这个函数被用作构造函数来创建实例时，该函数的原型属性将被作为原型赋值给所有对象实例，比如我们新建一个数组，数组的方法便从数组的原型上继承而来。当访问对象的一个属性时, 首先查找对象本身, 找到则返回; 若未找到, 则继续查找其原型对象的属性(如果还找不到实际上还会沿着原型链向上查找, 直至到根). 只要没有被覆盖的话, 对象原型的属性就能在所有的实例中找到，若整个原型链未找到则返回undefined；如何理解类的闭包/创建/继承？
闭包官方”的解释是：闭包是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。相信很少有人能直接看懂这句话，因为他描述的太学术。其实这句话通俗的来说就是：JavaScript中所有的function都是一个闭包。不过一般来说，嵌套的function所产生的闭包更为强大，也是大部分时候我们所谓的“闭包”。看下面这段代码：function a() {
var i = 0;
function b() { alert(++i); }
var c = a();
这段代码有两个特点：1、函数b嵌套在函数a内部；2、函数a返回函数b。引用关系如图：　　这样在执行完var c=a()后，变量c实际上是指向了函数b，再执行c()后就会弹出一个窗口显示i的值(第一次为1)。这段代码其实就创建了一个闭包，为什么？因为函数a外的变量c引用了函数a内的函数b，就是说：当函数a的内部函数b被函数a外的一个变量引用的时候，就创建了一个闭包。　　让我们说的更透彻一些。所谓“闭包”，就是在构造函数体内定义另外的函数作为目标对象的方法函数，而这个对象的方法函数反过来引用外层函数体中的临时变量。这使得只要目标 对象在生存期内始终能保持其方法，就能间接保持原构造函数体当时用到的临时变量值。尽管最开始的构造函数调用已经结束，临时变量的名称也都消失了，但在目 标对象的方法内却始终能引用到该变量的值，而且该值只能通这种方法来访问。即使再次调用相同的构造函数，但只会生成新对象和方法，新的临时变量只是对应新 的值，和上次那次调用的是各自独立的。sessionStorage 、localStorage 和 cookie 之间的区别1.cookie:存储在用户本地终端上的数据。有时也用cookies，指某些网站为了辨别用户身份，进行session跟踪而存储在本地终端上的数据，通常经过加密。一般应用最典型的案列就是判断注册用户是否已经登过该网站。2.HTML5 提供了两种在客户端存储数据的新方法：()...两者都是仅在客户端（即浏览器）中保存，不参与和服务器的通信；localStorage - 没有时间限制的数据存储,第二天、第二周或下一年之后，数据依然可用。sessionStorage - 针对一个 session 的数据存储,当用户关闭浏览器窗口后，数据会被删除。3、区别共同点：都是保存在浏览器端，且同源的。区别：cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递；cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。跨域请求资源的方法有哪些？谈谈垃圾回收机制方式及内存管理开发过程中遇到的内存泄露情况，如何解决的？原生js发送ajax请求一般经历哪些步骤说说get和post请求的区别1. get是从服务器上获取数据，post是向服务器传送数据。2. get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。3. 对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。4. get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80KB，IIS5中为100KB。5. get安全性非常低，post安全性较高。但是执行效率却比Post方法好。建议：1、get方式的安全性较Post方式要差些，包含机密信息的话，建议用Post数据提交方式；2、在做数据查询时，建议用Get方式；而在做数据添加、修改或删除时，建议用Post方式。三、HTTP一次完整的HTTP事务是怎样的一个过程？基本流程：a. 域名解析b. 发起TCP的3次握手c. 建立TCP连接后发起http请求d. 服务器端响应http请求，浏览器得到html代码e. 浏览器解析html代码，并请求html代码中的资源f. 浏览器对页面进行渲染呈现给用户HTTP的状态码有哪些？HTTPS是如何实现加密？四、算法相关手写数组快速排序关于快排算法的详细说明，可以参考阮一峰老师的文章快速排序"快速排序"的思想很简单，整个排序过程只需要三步：（1）在数据集之中，选择一个元素作为"基准"（pivot）。（2）所有小于"基准"的元素，都移到"基准"的左边；所有大于"基准"的元素，都移到"基准"的右边。（3）对"基准"左边和右边的两个子集，不断重复第一步和第二步，直到所有子集只剩下一个元素为止。参考代码： var quickSort = function(arr) {
　　if (arr.length &= 1) { }
　　var pivotIndex = Math.floor(arr.length / 2);
　　var pivot = arr.splice(pivotIndex, 1)[0];
　　var left = [];
　　var right = [];
　　for (var i = 0; i & arr. i++){
　　　　if (arr[i] & pivot) {
　　　　　　left.push(arr[i]);
　　　　} else {
　　　　　　right.push(arr[i]);
　　return quickSort(left).concat([pivot], quickSort(right));
JavaScript实现二分法查找二分法查找，也称折半查找，是一种在有序数组中查找特定元素的搜索算法。查找过程可以分为以下步骤：（1）首先，从有序数组的中间的元素开始搜索，如果该元素正好是目标元素（即要查找的元素），则搜索过程结束，否则进行下一步。（2）如果目标元素大于或者小于中间元素，则在数组大于或小于中间元素的那一半区域查找，然后重复第一步的操作。（3）如果某一步数组为空，则表示找不到目标元素。参考代码:
// 非递归算法
function binary_search(arr, key) {
var low = 0,
high = arr.length - 1;
while(low &= high){
var mid = parseInt((high + low) / 2);
if(key == arr[mid]){
}else if(key & arr[mid]){
low = mid + 1;
}else if(key & arr[mid]){
high = mid -1;
return -1;
var arr = [1,2,3,4,5,6,7,8,9,10,11,23,44,86];
var result = binary_search(arr,10);
alert(result); // 9 返回目标元素的索引值
// 递归算法
function binary_search(arr,low, high, key) {
if (low & high){
return -1;
var mid = parseInt((high + low) / 2);
if(arr[mid] == key){
return mid;
}else if (arr[mid] & key){
high = mid - 1;
return binary_search(arr, low, high, key);
}else if (arr[mid] & key){
low = mid + 1;
return binary_search(arr, low, high, key);
var arr = [1,2,3,4,5,6,7,8,9,10,11,23,44,86];
var result = binary_search(arr, 0, 13, 10);
alert(result); // 9 返回目标元素的索引值
五、Web安全你所了解到的Web攻击技术（1）XSS（Cross-Site Scripting，跨站脚本攻击）：指通过存在安全漏洞的Web网站注册用户的浏览器内运行非法的HTML标签或者JavaScript进行的一种攻击。（2）SQL注入攻击（3）CSRF（Cross-Site Request Forgeries，跨站点请求伪造）：指攻击者通过设置好的陷阱，强制对已完成的认证用户进行非预期的个人信息或设定信息等某些状态更新。前端性能如何优化图像、图像格式的区别？浏览器是如何渲染页面的？六、设计模式对MVC、MVVM的理解七、正则表达式写一个function，清除字符串前后的空格。（兼容所有浏览器）function trim(str) {
if (str && typeof str === "string") {
return str.replace(/(^\s*)|(\s*)$/g,""); //去除前后空白符
使用正则表达式验证邮箱格式
var reg = /^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/;
var email = "";
console.log(reg.test(email));
八、职业规划对前端工程师这个职位你是怎么样理解的？a. 前端是最贴近用户的程序员，前端的能力就是能让产品从 90分进化到 100 分，甚至更好b. 参与项目，快速高质量完成实现效果图，精确到1px；c. 与团队成员，UI设计，产品经理的沟通；d. 做好的页面结构，页面重构和用户体验；e. 处理hack，兼容、写出优美的代码格式；f. 针对服务器的优化、拥抱最新前端技术。151 条评论分享收藏院领导集体
web前端面试题
上海科技大学
上合马拉松系列赛启动通过马拉松推动经济联盟
侠客岛：首家共享web前端面试题单车企业倒闭，下一个会是谁？
中置后驱布局雪佛兰科尔维特C8路试谍照
山东盗墓web前端面试题贼家被抄搜出25件国宝文物
《欢迎来到熊仁镇》热web前端面试题拍王亮朱亚文演争钱戏码
《变形金刚5》预售过亿将成暑期档好莱坞猛片
瓦伦VS马竞web前端面试题前瞻：剑指连胜格列兹曼禁赛缺席
web前端面试题:腾讯评测自驾出游小能手全自动帐篷
我要分享 &
文章来源：中国科学院&&&&发布时间：日 15:05&&【字号：&&&&&&】
后车在后视镜中影像的位置可以大体判断出后车离本车的距离。和通过目测测量前车距离一样，不同车型判断后车距离的标准不一样，需要车主根据自己车辆的实际情况来确剑表示，国足已经拿到最好的结果，“故事就是这么个故事，乌兹别克斯坦和韩国终场哨音结束后，仅仅不到三十秒之后，叙利亚进球扳平，从而获得附加赛资格，当然这是属于人家的故事。国足最后一战已经拿到了最好的结果，我们也不是打不了硬仗，下一次，我依然坚定的站在你们身边心和未来所在。”去年下半年，领克和魏的先后发布，给予了刘良深刻的启示，它们的出现恰好反证了观致走的新高端品牌的路没有、2-乔丹-贾维斯、3-丹尼尔-加迪亚、5-杰雷米亚-洛查、7-儒内尔-巴蒂斯塔、9-迪米特里-林伯、11-朱利安-克拉里诺、13-约书亚-乔曼、17-杰米-程、18-罗伯托-科萨姆、21-杰雷米亚-博视频有原文内容无关，仅供延伸阅官网报道，开拓者球星CJ-麦科勒姆如今正在纽约进行训练，与他一起进行训练的还有卡梅隆-安东尼、伊内斯-坎特等议经销商不要仅将目光放在一二线城市等重点市场上，而是先“占领”一个城市或一个省，聚焦有效市场。“我们并不是放弃重点市场，只是时间先后问题罢了0真要长期驻扎德国参加比赛，各俱乐部又该愁U23用人对于同级车而言有着较大优web前端面试题势，宽敞的空间表现为驾乘者提供了舒适的乘坐氛国摄影家协会信息资骷髅岛》全网朝鲜驻印度大使的这段表态，美国CNBC电视台报道称，平壤官员的表态，增加了朝web前端面试题美会谈的可能性，这也是朝鲜罕见地在这一敏感问题上表现出立场松动的迹上，宜人贷的第二季度业绩拥有不少亮点。当季该公司促成的贷款总额同比增长了80%，环比增长了18%，延续了其令人惊叹的增长。营收则同比增长60%，环比增长16%，这让宜人贷促成的贷款额和获得的营收均超出了其此前预RAV4实就像我们的运动生涯web前端面试题，有起有伏，不会总是一帆风顺。所以这样的表达，挺合适的。”说到为何选取以天鹅为主题，当晚回到酒店，与体育面对面的文婷姐妹，说得云淡风清，“能表现到内心的一些感受就好意沉伏着，英女王伊丽莎白二世将任命获胜党的党魁出任首相，组建内阁。新的议会成员将在6月13日召开会议，选出新的议长，并宣誓就职。议会将在19日正式启动。脱欧谈判也将在6月19日那周展开。(，阿金费耶夫的国家队出场数就已经达到98场，距离百场咫尺之遥。而作为俄罗斯的web前端面试题头号门神，小组赛前2轮对阵新西兰与葡萄牙，他悉数以首发身份出战，如愿以偿的上演国家队生涯的百场，小米的整个生态链也是开放的，也欢迎更多人，我们一起推动新国货的进萌趣怪物强势月4日电8月27日，在日本北海道钏路市海岸发现的女性遗体被确认为失联中国女教师危秋洁。据中国驻札幌总领馆网站消息，8月31日晚，危秋洁家属一行抵达北海道钏路机场，随即赴钏路市警察署确认遗体。9月1日上午，危秋洁遗体在钏路市殡仪馆火化。9月2日，危秋洁家属一行乘飞机回
（责任编辑：王绍辉）没有更多推荐了，
不良信息举报
举报内容：
[面试官说] 如何面试Web前端开发工程师
举报原因：
原文地址：
原因补充：
最多只允许输入30个字
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！前端面试中的自我介绍, 面试官想听到的是什么? - 知乎270被浏览<strong class="NumberBoard-itemValue" title="7分享邀请回答575 条评论分享收藏感谢收起162 条评论分享收藏感谢收起}