web前端面试题

时间：2023-02-22 12:31:39 面试试题我要投稿

Web前端面试题目及答案推荐度：
相关推荐

web前端面试题

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

web前端面试题

　　另注：问方和答方均默认所问浏览器为主流浏览器(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 plaincopyprint?

　　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：表单验证、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 下分别使用不同颜色

　　以下分别用条件注释和属性前缀法实现

　　[css] view plaincopyprint?

　　color: #67f; // firefox, IE6, IE7

　　*color: #667; // IE6,IE7

　　_color: #666; // IE6 only

　　/* 只在IE6下生效 */

　　/* 只在IE7下生效 */

　　color: #777;

　　/* 在非IE下生效 */

　　项目规划题：

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

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

　　不多说，上代码：

　　[html] view plaincopyprint?