web前端面试题

你的名字 2022-08-07 07:44 289阅读 0赞

欢迎转载，但请注明出处： 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值最常用。
            
             *  Public指示响应可被任何缓存区缓存。  
                
             *  Private指示对于单个用户的整个或部分响应消息，不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息，此响应消息对于其他用户的请求无效。  
                
             *  no-cache指示请求或响应消息不能缓存  
                
             *  no-store用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。  
                
             *  max-age指示客户机可以接收生存期不大于指定时间（以秒为单位）的响应。  
                
             *  min-fresh指示客户机可以接收响应时间小于当前时间加上指定时间的响应。  
                
             *  max-stale指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值，那么客户机可以接收超出超时期指定值之内的响应消息。
         *  Last-Modified / If-Modified-Since：配合Cache-Control使用。  
            
            
             *  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 / If-None-Match：也要配合Cache-Control使用。注意，Etag优先级比Last-Modified高，服务器会优先比对Etag。  
            
            
             *  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中的各级标题如H1等等，我们当然可以用div、span加上各种样式来实现，但是，那相当于用拖拉机载客，能实现，但是臃肿不实用。同样的例子还有header，footer等标签。
     *  作用：
        
         *  首先是对维护者友好，维护你代码的人，能通过你的HTML代码轻松理解你的意图；
         *  其次是对搜索引擎友好，搜索引擎不会抓取你的CSS属性，所以，语义化能让搜索引擎更好的抓到你想表达的东西，更容易让搜索引擎理解你的网站架构；
         *  另外就是对用户友好，当然大部分用户都只是用眼睛看你的网站，所以可以通过CSS样式来达到这个目的。但是，盲人是没法看到的，他们只能通过辅助设备来实现，但同样的，这些设备只能识别语义化的HTML。
 *  ajax怎么实现？
    
     *  通过浏览器的XMLHttpRequest（非IE）或ActiveXObject（IE）对象，异步发送数据，并执行回调。具体实现代码如下：（代码来源：http://www.jb51.net/article/23858.htm）
     *      function ajaxFunction(){ 
                var http_request; 
                if (window.XMLHttpRequest) { 
                    http_request = new XMLHttpRequest(); 
                } else if (window.ActiveXObject) { 
                // IE 
                    try { 
                        http_request = new ActiveXObject("Msxml2.XMLHTTP"); 
                    } catch (e) { 
                        try { 
                            http_request = new ActiveXObject("Microsoft.XMLHTTP"); 
                        } catch (e) { 
                            alert("您的浏览器不支持Ajax"); 
                            return false; 
                        } 
                    } 
                }
                http_request.onreadystatechange = alertContents; 
                http_request.open('GET', url, true); 
                http_request.send(null); 
            } 
            function alertContents() { 
                if (http_request.readyState == 4) { 
                    if (http_request.status == 200) { 
                       alert(http_request.responseText); 
                    } else { 
                        alert('There was a problem with the request.'); 
                    } 
                } 
            }
 *  字符串拼接改良方案
    
     *  把要拼接的字符串写入数组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：canvas、表单验证、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 下分别使用不同颜色  
    
    
     *  以下分别用条件注释和属性前缀法实现
     *      /* 只在IE6下生效 */
            
            
            /* 只在IE7下生效 */
            
            
            /* 在非IE下生效 */
            
     *      color: #67f;    // firefox, IE6, IE7
            *color: #667; // IE6,IE7
            _color: #666; // IE6 only

# 项目规划题： #

*  假如你是项目负责人，你会如何规划整个项目的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）： ##

总体思路：点击框框时，修改状态为可拖拽。检测鼠标移动，根据鼠标移动来修改框框位置。当鼠标放开时，修改状态为不可拖拽。

不多说，上代码：

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>元素拖拽</title>
            <style type="text/css">
                #drag {
                    position: absolute;
                    top: 1px;
                    left: 1px;
                    width: 100px;
                    height: 400px;
                    background-color: #ccc;
                    cursor: move;
                }
            </style>
        </head>
        <body>
            <div id="drag">
                
            </div>
        </body>
        <script type="text/javascript">
            var isDraged = false,
                offsetX = 0,
                offsetY = 0;
            function addEvent(node, event, callback) {
                if(document.addEventListener) {
                    node.addEventListener(event, callback);
                } else {
                    node.attachEvent("on" + event, callback);
                }
            }
            var dragNode = document.getElementById("drag");
            addEvent(dragNode, "mousedown", function(event) {
                isDraged = true;
                var left = dragNode.style.left ? dragNode.style.left : 0;
                var top = dragNode.style.top ? dragNode.style.top : 0;
                offsetX = event.pageX - parseInt(left);
                offsetY = event.pageY - parseInt(top);
            })
            addEvent(document, "mousemove", function(event) {
                if(isDraged) {
                    dragNode.style.left = event.pageX - offsetX + "px";
                    dragNode.style.top = event.pageY - offsetY + "px";
                }
            })
            addEvent(document, "mouseup", function() {
                isDraged = false;
            })
    
        </script>
    </html>

## 右键自定义菜单 ##

总体思路：屏蔽浏览器邮件菜单，将自己写的菜单隐藏，当检测到右键点击时显示菜单，否则隐藏菜单。

上代码：

<!DOCTYPE html>
    <html>
        <head>
            <meta charset='utf-8'>
            <title>右键菜单</title>
            <style type="text/css">
                #menu {
                    position: absolute;
                    display: none;
                    width: 100px;
                    height: 200px;
                    left: 0;
                    top: 0;
                    background-color: green;
                }
            </style>
        </head>
        <body>
            <div id="menu">
                
            </div>
        </body>
        <script type="text/javascript">
            var menuNode = document.getElementById("menu");
            document.oncontextmenu = function() {
                return false;
            }
            document.onmousedown = function(event) {
                if(event.button === 2) {
                    var pageX = event.pageX,
                        pageY = event.pageY;
                    menuNode.style.display = "block";   
                    menuNode.style.top = pageY + "px";
                    menuNode.style.left = pageX + "px";
                } else {
                    menuNode.style.display = "none";
                }
            }
    
    
        </script>
    </html>

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

（备注：该公司所有域名为\*\*\*.xx.com，或xx.com）

思路：正则判断

var exp = new RegExp(/^(.+\.)*qq.com(\W[\s\S]*$|$)/);
    var hostName = window.location.hostname;
    exp.test(hostName);

## 文章高频词检索 ##

说明：英文文章

思路：用空格分割成数组，注意分隔符（引号，句号等），将单词转化为小写作为key值，存进hash数组，最后统计。

代码不上了，写的太丑。

## 高精度加法 ##

说明：两个数相加，这两个数非常大（接近Number.MAX\_VALUE），求相加后的结果。

思路：字符串输入，字符串输出，从低位到高位，一位位相加，注意进位。

代码同样不上了。

# 主观问题： #

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

*  自我介绍
    
     *  这个就不用我说了，时间不是重点，但要尽量涵盖所有时间轴。
 *  你从之前的学习/做项目中，学到了什么？
    
     *  能说出来就行，不需要太具体，比如学到了原型继承blabla的，HR会很郁闷的
 *  你想在之后的工作中学到什么？
    
     *  你觉得你能学到什么就说什么吧，团队协作能力，交际能力，都是可以的
 *  你对工作地点、部门有什么要求？
    
     *  看你自己咯
 *  你觉得你最大的优点和缺点是什么？
    
     *  回答”我最大的优点就是没有缺点，我最大的缺点就是没有缺点“这种作死的就没必要去参加面试了。
     *  优点要说实话，但可以挑好的说，比如优点可以说自己善良什么的，不需要具体，比如你说优点是人走关灯之类的就没必要了（可以往大说环保意识强）
     *  缺点可以说实话，但要保留，并且要善于将缺点描述转化为优点描述
 *  其他