web前端面试题

1、请将冒泡排序和快速排序的算法写出来实现冒泡排序：[html]vartimes=0;varbubbleSort=function(arr){for(vari=0;iarr.length-1;i++){for(varj=i+1;jarr.length;j++){if(arr[i]arr[j]){//如果前面的数据比后面的大就交换vartemp=arr[i];arr[i]=arr[j];arr[j]=temp;}console.log(第+(++times)+次排序后：+arr);}}returnarr;}console.log(Theresultis:+bubbleSort(arr));实现快速排序：[javascript]vartimes=0;varquickSort=function(arr){//如果数组长度小于等于1无需判断直接返回即可if(arr.length=1){returnarr;}varmidIndex=Math.floor(arr.length/2);//取基准点varmidIndexVal=arr.splice(midIndex,1);//取基准点的值,splice(index,1)函数可以返回数组中被删除的那个数arr[index+1]varleft=[];//存放比基准点小的数组varright=[];//存放比基准点大的数组//遍历数组，进行判断分配for(vari=0;iarr.length;i++){if(arr[i]midIndexVal){left.push(arr[i]);//比基准点小的放在左边数组}else{right.push(arr[i]);//比基准点大的放在右边数组}console.log(第+(++times)+次排序后：+arr);}//递归执行以上操作,对左右两个数组进行操作，直到数组长度为=1；returnquickSort(left).concat(midIndexVal,quickSort(right));};console.log(quickSort(arr));2、position的值，relative和absolute分别是相对于谁进行定位的？absolute:生成绝对定位的元素，相对于最近一级的定位不是static的父元素来进行定位。fixed：（老IE不支持）生成绝对定位的元素，通常相对于浏览器窗口或frame进行定位。relative：生成相对定位的元素，相对于其在普通流中的位置进行定位。static：默认值。没有定位，元素出现在正常的流中sticky：生成粘性定位的元素，容器的位置根据正常文档流计算得出3、谈谈你对webpack的看法WebPack是一个模块打包工具，你可以使用WebPack管理你的模块依赖，并编绎输出模块们所需的静态文件。它能够很好地管理、打包Web开发中所用到的HTML、Javascript、CSS以及各种静态文件（图片、字体等），让开发过程更加高效。对于不同类型的资源，webpack有对应的模块加载器。webpack模块打包器会分析模块间的依赖关系，最后生成了优化且合并后的静态资源。webpack的两大特色：1.codesplitting（可以自动完成）2.loader可以处理各种类型的静态文件，并且支持串联操作webpack是以commonJS的形式来书写脚本滴，但对AMD/CMD的支持也很全面，方便旧项目进行代码迁移。webpack具有requireJs和browserify的功能，但仍有很多自己的新特性：1.对CommonJS、AMD、ES6的语法做了兼容2.对js、css、图片等资源文件都支持打包3.串联式模块加载器以及插件机制，让其具有更好的灵活性和扩展性，例如提供对CoffeeScript、ES6的支持4.有独立的配置文件webpack.config.js5.可以将代码切割成不同的chunk，实现按需加载，降低了初始化时间6.支持SourceUrls和SourceMaps，易于调试7.具有强大的Plugin接口，大多是内部插件，使用起来比较灵活8.webpack使用异步IO并具有多级缓存。这使得webpack很快且在增量编译上更加快4、javascript对象的几种创建方式1，工厂模式2，构造函数模式3，原型模式4，混合构造函数和原型模式5，动态原型模式6，寄生构造函数模式7，稳妥构造函数模式5、javascript继承的6种方法1，原型链继承2，借用构造函数继承3，组合继承(原型+借用构造)4，原型式继承5，寄生式继承6，寄生组合式继承6、说说你对作用域链的理解作用域链的作用是保证执行环境里有权访问的变量和函数是有序的，作用域链的变量只能向上访问，变量访问到window对象即被终止，作用域链向下访问变量是不被允许的。7、创建过程(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象.(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.(3)设置响应HTTP请求状态变化的函数.(4)发送HTTP请求.(5)获取异步调用返回的数据.8、栈和队列的区别?栈和堆的区别？栈的插入和删除操作都是在一端进行的，而队列的操作却是在两端进行的。队列先进先出，栈先进后出。栈只允许在表尾一端进行插入和删除，而队列只允许在表尾一端进行插入，在表头一端进行删除栈区（stack）—由编译器自动分配释放，存放函数的参数值，局部变量的值等。堆区（heap）—一般由程序员分配释放，若程序员不释放，程序结束时可能由OS回收。堆（数据结构）：堆可以被看成是一棵树，如：堆排序；栈（数据结构）：一种先进后出的数据结构。9、说说你对闭包的理解使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。在js中，函数即闭包，只有函数才会产生作用域的概念闭包有三个特性：1.函数嵌套函数2.函数内部可以引用外部的参数和变量3.参数和变量不会被垃圾回收机制回收具体请看：详解js闭包10、cookie和session的区别：1、cookie数据存放在客户的浏览器上，session数据放在服务器上。2、cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗考虑到安全应当使用session。3、session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能考虑到减轻服务器性能方面，应当使用COOKIE。4、单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。5、所以个人建议：将登陆信息等重要信息存放为SESSION其他信息如果需要保留，可以放在COOKIE中11、介绍一下box-sizing属性？box-sizing属性主要用来控制元素的盒模型的解析模式。默认值是content-box。content-box：让元素维持W3C的标准盒模型。元素的宽度/高度由border+padding+content的宽度/高度决定，设置width/height属性指的是content部分的宽/高border-box：让元素维持IE传统盒模型（IE6以下版本和IE6~7的怪异模式）。设置width/height属性指的是border+padding+content标准浏览器下，按照W3C规范对盒模型解析，一旦修改了元素的边框或内距，就会影响元素的盒子尺寸，就不得不重新计算元素的盒子尺寸，从而影响整个页面的布局。12、说说你对语义化的理解？1，去掉或者丢失样式的时候能够让页面呈现出清晰的结构2，有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；3，方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；4，便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。13、html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？HTML5现在已经不是SGML的子集，主要是关于图像，位置，存储，多任务等功能的增加。拖拽释放(Draganddrop)API语义化更好的内容标签（header,nav,footer,aside,article,section）音频、视频API(audio,video)画布(Canvas)API地理(Geolocation)API本地离线存储localStorage长期存储数据，浏览器关闭后数据不丢失；sessionStorage的数据在浏览器关闭后自动删除表单控件，calendar、date、time、email、url、search新的技术webworker,websocket,Geolocation移除的元素纯表现的元素：basefont，big，center，font,s，strike，tt，u；对可用性产生负面影响的元素：frame，frameset，noframes；支持HTML5新标签：IE8/IE7/IE6支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架!--[ifltIE9]scriptsrc=![endif]--如何区分：DOCTYPE声明\新增的结构元素\功能元素14、谈谈你对重构的理解网站重构：在不改变外部行为的前提下，简化结构、添加可读性，而在网站前端保持一致的行为。也就是说是在不改变UI的情况下，对网站进行优化，在扩展的同时保持一致的UI。对于传统的网站来说重构通常是：表格(table)布局改为DIV+CSS使网站前端兼容于现代浏览器(针对于不合规范的CSS、如对IE6有效的)对于移动平台的优化针对于SEO进行优化深层次的网站重构应该考虑的方面减少代码间的耦合让代码保持弹性严格按规范编写代码设计可扩展的API代替旧有的框架、语言(如VB)增强用户体验通常来说对于速度的优化也包含在重构中压缩JS、CSS、image等前端资源(通常是由服务器来解决)程序的性能优化(如数据读写)采用CDN来加速资源加载对于JSDOM的优化HTTP服务器的文件缓存15、HTTP状态码100Continue继续，一般在发送post请求时，已发送了httpheader之后服务端将返回此信息，表示确认，之后发送具体参数信息200OK正常返回信息201Created请求成功并且服务器创建了新的资源202Accepted服务器已接受请求，但尚未处理301MovedPermanently请求的网页已永久移动到新位置。302Found临时性重定向。303SeeOther临时性重定向，且总是使用GET请求新的URI。304NotModified自从上次请求后，请求的网页未修改过。400BadRequest服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。401Unauthorized请求未授权。403Forbidden禁止访问。404NotFound找不到如何与URI相匹配的资源。500InternalServerError最常见的服务器端错误。503ServiceUnavailable服务器端暂时无法处理请求（可能是过载或维护）。16、gitfetch和gitpull的区别gitpull：相当于是从远程获取最新版本并merge到本地gitfetch：相当于是从远程获取最新版本到本地，不会自动merge17、对前端界面工程师这个职位是怎么样理解的？它的前景会怎么样？首先要求我们的代码高复用低耦合，这样文件小，好维护，而且好扩展。前端是最贴近用户的程序员，比后端、数