前端面试题目

1.5个IE8csshack兼容(1)、图片间隙A)div中的图片间隙(该bug出现在IE6及更低版本中)描述：在div中插入图片时，图片会将div下方撑大三像素。hack1:将/div与img写在一行上；hack2:将img转为块状元素，给img添加声明：display:block;dt中图片间隙（IE6）hack:将img转为块状元素，给img添加声明：display:block;C)li中图片间隙hack1:img转为块元素；hack2:给ul设置font-size:0；hack3:给img设置margin-bottom:-5px;(2)、双倍浮向（双倍边距）描述：当Ie6及更低版本浏览器在解析浮动元素时，会错误地把浮向边界加倍显示。hack:给浮动元素添加声明：display:inline;(3)、默认高度（IE6）描述：在IE6及以下版本中，部分块元素拥有默认高度（低于18px高度）hack1：给元素添加声明：font-size:0;hack2：给元素添加声明：overflow:hidden;(4)、表单元素行高不一致(IE,MOZ,C,O,S)描述：表单元素行高对齐方式不一致hack:给表单元素添加声明：float:left;(5)、按钮元素默认大小不一描述：各浏览器中按钮元素大小不一致hack1：统一大小/（用a标记模拟）hack2：在input上写按钮的样式，一定要把input的边框去掉。hack3：如果这个按钮是一个图片，直接把图片作为按钮的背景图即可。(6)、百分比bug描述：在IE6及以下版本中在解析百分比时，会按四舍五入方式计算从而导致50%加50%大于100%的情况。hack:给右面的浮动元素添加声明：clear:right;意思：清除右浮动。clear:left:清除左浮动clear:both:清除两边的浮动(7)、鼠标指针bug描述：cursor属性的hand属性值只有IE浏览器识别，其它浏览器不识别该声明，cursor属性的pointer属性值IE6.0以上版本及其它内核浏览器都识别该声明。hack:如统一某元素鼠标指针形状为手型，应添加声明：cursor:pointer;8)、透明属性IE浏览器写法：filter:alpha(opacity=value);取值范围1-100兼容其他浏览器写法：opacity:value;(value的取值范围0-1,0.1,0.2,0.3-----0.9)(9）、li里a加display：block；出现行高不一致；hack1：给a加display：inline-block；hack2：给a加display：inline;//2、ajax有什么优点有什么缺点一、ajax的优点Ajax的给开发者带来的好处大家基本上都深有体会，如下：1、最大的一点是页面无刷新，在页面内与服务器通信，给用户的体验非常好。2、使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。3、可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。4、基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。二、ajax的缺点1、ajax干掉了back按钮，即对浏览器后退机制的破坏。后退按钮是一个标准的web站点的重要功能，但是它没法和js进行很好的合作。这是ajax所带来的一个比较严重的问题，因为用户往往是希望能够通过后退来取消前一次操作的。那么对于这个问题有没有办法？答案是肯定的，用过Gmail的知道，Gmail下面采用的ajax技术解决了这个问题，在Gmail下面是可以后退的，但是，它也并不能改变ajax的机制，它只是采用的一个比较笨但是有效的办法，即用户单击后退按钮访问历史记录时，通过创建或使用一个隐藏的IFRAME来重现页面上的变更。（例如，当用户在GoogleMaps中单击后退时，它在一个隐藏的IFRAME中进行搜索，然后将搜索结果反映到Ajax元素上，以便将应用程序状态恢复到当时的状态。）但是，虽然说这个问题是可以解决的，但是它所带来的开发成本是非常高的，和ajax框架所要求的快速开发是相背离的。这是ajax所带来的一个非常严重的问题。2、安全问题技术同时也对IT企业带来了新的安全威胁，ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。ajax的逻辑可以对客户端的安全扫描技术隐藏起来，允许黑客从远端服务器上建立新的攻击。还有ajax也难以避免一些已知的安全弱点，诸如跨站点脚步攻击、SQL注入攻击和基于credentials的安全漏洞等。3、对搜索引擎的支持比较弱。4、破坏了程序的异常机制。至少从目前看来，像ajax.dll，ajaxpro.dll这些ajax框架是会破坏程序的异常机制的。5、另外，像其他方面的一些问题，比如说违背了url和资源定位的初衷。例如，有一个url地址，如果采用了ajax技术，也许在该url地址下面看到的和别人在这个url地址下看到的内容是不同的。这个和资源定位的初衷是相背离的。6、一些手持设备（如手机、PDA等）现在还不能很好的支持ajax，如手机的浏览器上打开采用ajax技术的网站时，它目前是不支持的。ajax的全称：AsynchronousJavascriptAndXML。异步传输+js+xml。所谓异步，在这里简单地解释就是：向服务器发送请求的时候，我们不必等待结果，而是可以同时做其他的事情，等到有了结果它自己会根据设定进行后续操作，与此同时，页面是不会发生整页刷新的，提高了用户体验。(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息(3)设置响应HTTP请求状态变化的函数(4)发送HTTP请求(5)获取异步调用返回的数据(6)使用JavaScript和DOM实现局部刷新3、如何使用c3创建一个三角形把上、左、右三条边隐藏掉（颜色设为transparent）#demo{width:0;height:0;border-width:20px;border-style:solid;border-color:transparenttransparentredtransparent;}4、Canvas如何绘制一个矩形圆形三角形5、Webkit和v8引擎有什么区别Webkit：解析cssV8：解析js浏览器如何渲染页面？6、会不会nodejs？7、标签语义化用正确的标签做正确的事情。html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。8、创建对象的几种方式？答：工厂方式，构造函数方式，原型模式，混合构造函数原型模式，动态原型方式9、原型链和原型的区别？原型对象也是普通的对象，是对象一个自带隐式的__proto__属性，原型也有可能有自己的原型，如果一个原型对象的原型不为null的话，我们就称之为原型链原型链是由一些用来继承和共享属性的对象组成的（有限的）对象链10、事件流？描述的是从页面中接收事件的顺序。11、事件委托？答：将子元素的事件委托给父级来完成（利用事件冒泡）12、Call和applyApply（）方法有两个参数，分别是运行函数的作用域，另一个是参数数组（可以使array，也可以是arguments），Call()方法第一个参数和apply（）参数一样，其他参数就是调用函数的参数13、：before和：：before的区别14、Transition和animation有什么区别？15、setTimeout（function（）{alert（123）}，0）；Alert（222）16、清除浮动的几种方式答：有三种方法。①给父元素添加声明overflow:hidden②在浮动元素下方添加空div，并给该元素添加声明：clear:both;height:0;overflow:hidden;font-size:0;③万能清除浮动法：:afert{content:’’;display:block;height:0;visibility:hidden;clear:both;}17、Ajax同源策略和跨越的方式？18、Xmlhttprequest和$.ajax和jsonp有什么区别？19、同步异步？同步的概念应该是来自于OS中关于同步的概念:不同进程为协同完成某项工作而在先后次序上调整(通过阻塞,唤醒等方式).同步强调的是顺序性.谁先谁后.异步则不存在这种顺序性.同步：浏览器访问服务器请求，用户看得到页面刷新，重新发请求,等请求完，页面刷新，新内容出现，用户看到新内容,进行下一步操作。异步：浏览器访问服务器请求，用户正常操作，浏览器后端进行请求。等请求完，页面不刷新，新内容也会出现，用户看到新内容。20、什么是前端工程化？Gulp||webpack21、Gulp如何创建一个命令？答：对项目管理，进行打包合并22、如何获取div当前的fontsize23、描述下闭包？闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域，将函数内部的变量和方法传递到外部。闭包的特性：1.函数内再嵌套函数2.内部函数可以引用外层的参数和变量3.参数和变量不会被垃圾回收机制回收//li节点的onclick事件都能正确的弹出当前被点击的li索引ulid=testULliindex=0/liliindex=1/liliindex=2/liliindex=3/li/ulscripttype=text/javascriptvarnodes=document.getElementsByTagName(li);for(i=0;inodes.length;i+=1){nodes[i].onclick=function(){console.log(i+1);//不用闭包的话，值每次都是4}(i);}/script执行say667()后,say667()闭包内部变量会存在,而闭包内部函数的内部变量不会存在使得Javascript的垃圾回收机制GC不会收回say667()所占用的资源因为say667()的内部函数的执行需要依赖say667()中的变量这是对闭包作用的非常直白的描述functionsay667(){//Localvariablethatendsupwithinclosurevarnum=666;varsayAlert=function(){alert(num);}num++;returnsayAlert;}varsayAlert=say667();sayAlert()//执行结果应该弹出的66724、Window.onload和$(function(){})区别答：window.onload：①只能加载一次，如果写多个，后面的覆盖前面的；②页面加载完成（包括图片）$(function(){})：①可以编写多个；②页面加载完成（不包括图片）25、$(‘div’).get(0)和$(‘div’).eq(0)有什么区别？答：$（‘div’）.get(0)：返回dom$(‘div’).eq(0)：返回jq26、cookiestorage答:WebStorage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要