现在位置首页 / 程序员成长系列 /正文

最新 web前端面试题

作者: IT小兵 | 2015年3月24日| 热度:℃ | 评论: |参与:

欢迎转载,但请注明出处:http://blog.csdn.net/sysuzjz/article/details/44562467

以下各问题来自于本人在各公司应聘时被提问的问题,特地整理出来,有错误或不同意见的欢迎评论指出。因各大公司面试还未结束,本文不透露题目具体出处,且会打乱顺序。

另注:问方和答方均默认所问浏览器为主流浏览器(IE,chrome,firefox,Safari,Opera)

 技术问答题:


  • HTTP常见的状态码有哪些?分别表示什么意思?

    • 200:OK,一切正常

    • 302:重定向

    • 304:未修改

    • 403:服务器禁止访问

    • 404:找不到请求的资源

    • 500:服务端错误

  • HTTP状态码中,4**和5**有什么区别?

    • 4**是请求错误,例如未经授权的请求(403),错误的请求地址(404),错误的请求方法(405)

    • 5**是服务端错误,例如脚本运行出错(500)

  • JS DOM中,如何绑定和移除事件?

    • 所有添加:domNode.onevent = function,例如document.onclick = function() { }

    • 所有移除:domNode.onevent = null; 例如document.onclick = null;

    • 非IE添加:domNode.addEventListener("event", function() { }),例如document.addEventListener("click", function() { })

    • 非IE移除:domNode.removeEventListener("event", function() { }),例如document.removeEventListener("click", function() { })

    • IE添加:domNode.attachEvent("on" + "event", function() {}),例如document.attachEvent("onclick", function() { })

    • IE移除:domNode.detachEvent("on" + "event", function() {}),例如document.detachEvent("onclick",function() {})

  • 浏览器的缓存机制是怎样的?通过报头的哪个字段来实现?

    • Expires:服务器允许浏览器在这个时间前使用该资源缓存

    • Cache-control:作用和Expires类似,但优先级更高,且可选值更多。值可以是public、private、no-cache、no- store、no-transform、must-revalidate、proxy-revalidate、max-age。其中,max-age值最常用。

    • Last-Modified / If-Modified-Since:配合Cache-Control使用。

    • Etag / If-None-Match:也要配合Cache-Control使用。注意,Etag优先级比Last-Modified高,服务器会优先比对Etag。

    • Public指示响应可被任何缓存区缓存。

    • Private指示对于单个用户的整个或部分响应消息,不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息,此响应消息对于其他用户的请求无效。

    • no-cache指示请求或响应消息不能缓存

    • no-store用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。

    • max-age指示客户机可以接收生存期不大于指定时间(以秒为单位)的响应。

    • min-fresh指示客户机可以接收响应时间小于当前时间加上指定时间的响应。

    • max-stale指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值,那么客户机可以接收超出超时期指定值之内的响应消息。

    • Last-Modified:标示这个响应资源的最后修改时间。web服务器在响应请求时,告诉浏览器资源的最后修改时间。

    • If-Modified-Since:当资源过期时(使用Cache-Control标识的max-age),发现资源具有Last-Modified声明,则再次向web服务器请求时带上头 If-Modified-Since,表示请求时间。web服务器收到请求后发现有头If-Modified-Since则与被请求资源的最后修改时间进行比对。若最后修改时间较新,说明资源又被改动过,则响应整片资源内容(写在响应消息包体内),HTTP 200;若最后修改时间较旧,说明资源无新修改,则响应HTTP 304 (无需包体,节省浏览),告知浏览器继续使用所保存的cache。

    • Etag:web服务器响应请求时,告诉浏览器当前资源在服务器的唯一标识(生成规则由服务器觉得)。Apache中,ETag的值,默认是对文件的索引节(INode),大小(Size)和最后修改时间(MTime)进行Hash后得到的。

    • If-None-Match:当资源过期时(使用Cache-Control标识的max-age),发现资源具有Etage声明,则再次向web服务器请求时带上头If-None-Match (Etag的值)。web服务器收到请求后发现有头If-None-Match 则与被请求资源的相应校验串进行比对,决定返回200或304。

    • 请求资源前,先查看缓存中是否有未过期且未修改的相同资源,如果有,直接在缓存中获取而不是向服务器索求;如果没有,并且服务器允许缓存,则将资源缓存在本地。

    • 相关字段及作用:

    • HTML语义化是什么意思?有什么作用?

      • 首先是对维护者友好,维护你代码的人,能通过你的HTML代码轻松理解你的意图;

      • 其次是对搜索引擎友好,搜索引擎不会抓取你的CSS属性,所以,语义化能让搜索引擎更好的抓到你想表达的东西,更容易让搜索引擎理解你的网站架构;

      • 另外就是对用户友好,当然大部分用户都只是用眼睛看你的网站,所以可以通过CSS样式来达到这个目的。但是,盲人是没法看到的,他们只能通过辅助设备来实现,但同样的,这些设备只能识别语义化的HTML。

      • 简单的来说,语义化就是让该做某件事的东西来做那件事。比如,HTML中的各级标题如H1等等,我们当然可以用div、span加上各种样式来实现,但是,那相当于用拖拉机载客,能实现,但是臃肿不实用。同样的例子还有header,footer等标签。

      • 作用:

    • ajax怎么实现?

      • 通过浏览器的XMLHttpRequest(非IE)或ActiveXObject(IE)对象,异步发送数据,并执行回调。具体实现代码如下:(代码来源:http://www.jb51.net/article/23858.htm)

      • [javascript] view plaincopy
      1. function ajaxFunction(){   

      2.     var http_request;   

      3.     if (window.XMLHttpRequest) {   

      4.         http_request = new XMLHttpRequest();   

      5.     } else if (window.ActiveXObject) {   

      6.     // IE   

      7.         try {   

      8.             http_request = new ActiveXObject("Msxml2.XMLHTTP");   

      9.         } catch (e) {   

      10.             try {   

      11.                 http_request = new ActiveXObject("Microsoft.XMLHTTP");   

      12.             } catch (e) {   

      13.                 alert("您的浏览器不支持Ajax");   

      14.                 return false;   

      15.             }   

      16.         }   

      17.     }  

      18.     http_request.onreadystatechange = alertContents;   

      19.     http_request.open('GET', url, true);   

      20.     http_request.send(null);   

      21. }   

      22. function alertContents() {   

      23.     if (http_request.readyState == 4) {   

      24.         if (http_request.status == 200) {   

      25.            alert(http_request.responseText);   

      26.         } else {   

      27.             alert('There was a problem with the request.');   

      28.         }   

      29.     }   

      30. }  

    • 字符串拼接改良方案

      • 把要拼接的字符串写入数组arr,然后调用arr.join("");

    • title和alt的区别?

      • 都是提示词。简单的说,title给人看,alt给引擎看

    • CSS选择器有哪些?

      • 通配选择器(*),标签选择器(tag),类选择器(.class),id选择器(#id),属性选择器(selector[attr="val"]),后代选择器(selector1 selector2),子代选择器(selector1 > selector2),相邻选择器(selector1 ~ selector2),伪元素(selector:first-child等),伪类(selector:hover等)。叫法可能不大一样,所以举出一些例子供参考。

    • function foo(){ console.log(this); }; foo.call(null);

      • window。call第一个参数为null,所以调用者为全局,也就是window,而this指向调用者

    • DOCTYPE作用及意义

      • 为了告诉浏览器以什么标准来解析文档。这是因为部分网页并没有遵循标准,或者遵循的是旧版本的标准。

      • 具体用法,可以参考:http://www.jb51.net/web/34217.html

    • readyState有哪些值?各代表什么?

      • 0 - (未初始化)还没有调用send()方法

      • 1 - (载入)已调用send()方法,正在发送请求

      • 2 - (载入完成)send()方法执行完成,已经接收到全部响应内容

      • 3 - (交互)正在解析响应内容

      • 4 - (完成)响应内容解析完成,可以在客户端调用了

    • js闭包概念

      • js函数里声明的局部变量会在退出函数时被销毁。而闭包则是保留对局部变量的引用,使其久居内存。

    • HTML5和HTML4相比多出哪些功能?CSS3和CSS2相比多出哪些功能?

      • HTML5:表单验证、websocket、语义化标签等等

      • CSS3:动画,计算,新的属性

    • less是什么?有什么特点?如何判断less的兼容性

      • less是一种CSS预编译器,在CSS原有基础上引入了变量、函数等元素,使得CSS更容易维护、扩充。

      • less是靠less.js来解析的,所以,与浏览器没有关系。IE6+和其他主流浏览器都可以使用less

    • JS的属性可以直接在构造函数中定义,也可以在原型中定义。两者有什么不同?

      • 前者定义是写在内存中,而后者是写在硬盘中

    • Array(6).join('a')结果是多少?

      • "aaaaa"。join是指数组每一项用join的参数隔开。

    • 123456['toString']['length'];

      • 1。Number.toString是一个函数,长度为1

    • {}+'a'<{}+'b';

      • false。{}+"a"会转化成数字相加,结果为NaN。NaN与NaN比较永远返回false

    • var arr = [1,2,3,4,5,6];arr.splice(1,3);arr.toString();

      • 156。splice(index, length)。第一个参数表示开始切割的下标,第二个是切割的长度。注意这个切割是从原数组中去除

    • var arr = [1,2,3,4,5,6];arr.slice(1,3)['toString']();

      • 23。和上例不同,slice(index1, index2)第一个参数表示开始切割的下标,第二个参数是结束切割的下标(不含)。且这个切割返回切除部分。

    • ({a:1,b:2,c:3})[['b']];

      • 2

    • 写一个hack样式实现 IE6、IE7、firefox 下分别使用不同颜色

      1. color#67f;    // firefox, IE6, IE7  

      2. *color#667; // IE6,IE7  

      3. _color#666; // IE6 only  

      1. /* 只在IE6下生效 */  

      2. <!--[if IE 6]>  

      3.     color#666;  

      4. <![endif]-->  

      5.   

      6. /* 只在IE7下生效 */  

      7. <!--[if IE 7]>  

      8.     color#777;  

      9. <![endif]-->  

      10.   

      11. /* 在非IE下生效 */  

      12. <!--[if !IE]>  

      13.     color#fff;  

      14. <![endif]-->  

    项目规划题:

    • 假如你是项目负责人,你会如何规划整个项目的CSS文件?

      • reset.css

      • public.css

      • 各模块按文件夹分配CSS,或直接以模块划分CSS

    • 如何在项目中避免和其他小组冲突?例如类名的命名?

      • 在类名中加模块前缀,例如登录的提交按钮命名可以为"login-btn-submit"(个人用法,不一样的欢迎提出来交流)

    逻辑题:

    • 七点四十五分的时候,时针和分针之间的角度是多少?

      • 37.5°

    • 给你N个苹果和一座天平,其中一个苹果比较重,其他苹果一样重。假设其他因素完全一样,假设天平两侧可以放无限个苹果。现在要找出那个较重的苹果,需要使用几次天平。求最差情况的最优解。(设计一种算法,让平均次数最少)

      • 想说二分的都准备挂吧2333,不信想一下N=8的情况。

      • 我能想到的最好方案是三分,即N/3并向上取整*2,剩下的作为第三堆。即每次天平称的时候两边是ceil(N/3)。例如上面说的,N=8的时候,按二分的思路,第一次称是4,4,第二次称的时候是2,2,第三次是1,1,总共三次。而用三分的思路,第一次是3,3,2,第二次(最坏)是1,1,1,只需要两次。

    代码实战题:

    拖拽效果实现(兼容IE跟chrome):

    总体思路:点击框框时,修改状态为可拖拽。检测鼠标移动,根据鼠标移动来修改框框位置。当鼠标放开时,修改状态为不可拖拽。
    不多说,上代码:
    1. <!DOCTYPE html>  

    2. <html>  

    3.     <head>  

    4.         <meta charset="utf-8">  

    5.         <title>元素拖拽</title>  

    6.         <style type="text/css">  

    7.             #drag {  

    8.                 position: absolute;  

    9.                 top: 1px;  

    10.                 left: 1px;  

    11.                 width: 100px;  

    12.                 height: 400px;  

    13.                 background-color: #ccc;  

    14.                 cursor: move;  

    15.             }  

    16.         </style>  

    17.     </head>  

    18.     <body>  

    19.         <div id="drag">  

    20.               

    21.         </div>  

    22.     </body>  

    23.     <script type="text/javascript">  

    24.         var isDraged = false,  

    25.             offsetX = 0,  

    26.             offsetY = 0;  

    27.         function addEvent(node, event, callback) {  

    28.             if(document.addEventListener) {  

    29.                 node.addEventListener(event, callback);  

    30.             } else {  

    31.                 node.attachEvent("on" + event, callback);  

    32.             }  

    33.         }  

    34.         var dragNode = document.getElementById("drag");  

    35.         addEvent(dragNode, "mousedown", function(event) {  

    36.             isDraged = true;  

    37.             var left = dragNode.style.left ? dragNode.style.left : 0;  

    38.             var top = dragNode.style.top ? dragNode.style.top : 0;  

    39.             offsetX = event.pageX - parseInt(left);  

    40.             offsetY = event.pageY - parseInt(top);  

    41.         })  

    42.         addEvent(document, "mousemove", function(event) {  

    43.             if(isDraged) {  

    44.                 dragNode.style.left = event.pageX - offsetX + "px";  

    45.                 dragNode.style.top = event.pageY - offsetY + "px";  

    46.             }  

    47.         })  

    48.         addEvent(document, "mouseup", function() {  

    49.             isDraged = false;  

    50.         })  

    51.   

    52.     </script>  

    53. </html>  


    右键自定义菜单

    总体思路:屏蔽浏览器邮件菜单,将自己写的菜单隐藏,当检测到右键点击时显示菜单,否则隐藏菜单。
    上代码:
    1. <!DOCTYPE html>  

    2. <html>  

    3.     <head>  

    4.         <meta charset='utf-8'>  

    5.         <title>右键菜单</title>  

    6.         <style type="text/css">  

    7.             #menu {  

    8.                 position: absolute;  

    9.                 display: none;  

    10.                 width: 100px;  

    11.                 height: 200px;  

    12.                 left: 0;  

    13.                 top: 0;  

    14.                 background-color: green;  

    15.             }  

    16.         </style>  

    17.     </head>  

    18.     <body>  

    19.         <div id="menu">  

    20.               

    21.         </div>  

    22.     </body>  

    23.     <script type="text/javascript">  

    24.         var menuNode = document.getElementById("menu");  

    25.         document.oncontextmenu = function() {  

    26.             return false;  

    27.         }  

    28.         document.onmousedown = function(event) {  

    29.             if(event.button === 2) {  

    30.                 var pageX = event.pageX,  

    31.                     pageY = event.pageY;  

    32.                 menuNode.style.display = "block";     

    33.                 menuNode.style.top = pageY + "px";  

    34.                 menuNode.style.left = pageX + "px";  

    35.             } else {  

    36.                 menuNode.style.display = "none";  

    37.             }  

    38.         }  

    39.   

    40.   

    41.     </script>  

    42. </html>  


    判断一个域名是不是xx公司的

    (备注:该公司所有域名为***.xx.com,或xx.com)
    思路:正则判断
    [javascript] view plaincopy
    1. var exp = new RegExp(/^(.+\.)*qq.com(\W[\s\S]*$|$)/);  

    2. var hostName = window.location.hostname;  

    3. exp.test(hostName);  


    文章高频词检索

    说明:英文文章
    思路:用空格分割成数组,注意分隔符(引号,句号等),将单词转化为小写作为key值,存进hash数组,最后统计。
    代码不上了,写的太丑。

    高精度加法

    说明:两个数相加,这两个数非常大(接近Number.MAX_VALUE),求相加后的结果。
    思路:字符串输入,字符串输出,从低位到高位,一位位相加,注意进位。
    代码同样不上了。

    主观问题:

    主观问题是仁者见仁智者见智的,这里只是提供一点参考。需要提醒的是,这部分一般是人力面,而人力一般不懂多少技术,所以就不要抓着技术大谈特谈了
    • 自我介绍

      • 这个就不用我说了,时间不是重点,但要尽量涵盖所有时间轴。

    • 你从之前的学习/做项目中,学到了什么?

      • 能说出来就行,不需要太具体,比如学到了原型继承blabla的,HR会很郁闷的

    • 你想在之后的工作中学到什么?

      • 你觉得你能学到什么就说什么吧,团队协作能力,交际能力,都是可以的

    • 你对工作地点、部门有什么要求?

      • 看你自己咯

    • 你觉得你最大的优点和缺点是什么?

      • 回答”我最大的优点就是没有缺点,我最大的缺点就是没有缺点“这种作死的就没必要去参加面试了。

      • 优点要说实话,但可以挑好的说,比如优点可以说自己善良什么的,不需要具体,比如你说优点是人走关灯之类的就没必要了(可以往大说环保意识强)

      • 缺点可以说实话,但要保留,并且要善于将缺点描述转化为优点描述

    • 其他


    点击阅读本文所属分类的更多文章: 程序员成长系列 。和高手一起交流:346717337
    友荐云推荐

    未注明转发、原文均为本站原创。分享本文请注明 原文链接

    给您更多信息和帮助

    在这里您可以找到更多:

    技术交流群:346717337 Jquery插件交流

    投稿:suchso@vip.qq.com

    承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

    抢天猫双11红包
    推荐使用阿里云服务器
    echarts教程系列
    本月最热文章

    微信扫一扫,徜徉悠嘻网,您的休闲乐园

    微信公众号:快乐每一天

    随机文章
    标签

    技术交流群:346717337

    投稿:suchso@vip.qq.com

    专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询