前端经典面试题.docx

1、前端经典面试题1， html和xml有什么区别html是超文本标记语言 xml是可扩展标记语言html语法宽松，xml语法严谨html使用固有标记，xml没有固有标记html标签预定义，xml标签可扩展，可定义html是用来显示数据的，xml是用来描述和存储数据的2， css有哪几种选择器权重的优先级第一种为 属性选择器第二种为 id选择器第三种为 class选择器第四种为 伪类选择器第五种是 后代选择器第六种是 标签选择器第七种是 通用选择器第八种是 伪元素选择器1.第一等：代表内联样式，如: style=”，权值为1000。2.第二等：代表ID选择器，如：#content，权值为0100。

2、3.第三等：代表类，伪类和属性选择器，如.content，权值为0010。4.第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。5.通配符、子选择器、相邻选择器等的。如*、+,权值为0000。6.继承的样式没有权值。3， 网页有哪几部分组成结构层：html表示层：css行为层：js和dom4， 一个200*200的div在不同分辨率屏幕上下左右居中，用css实现Divposition: absolute; width: 200px; height: 200px; top: 50%; left: 50%; margin-top: -100px; margin-left: -10

3、0px;5， 阐述清楚浮动的几种方式第一种 父级div定义高度height 适合高度固定的布局第二种 父级div定义 overflow：hidden第三种 结尾处加空标签 clear： both 让父级自动获取高度第四种 父级div定义 伪类:after 和 zoom6， 解释css sprites，如何使用CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出

4、背景图片的位置。CSS Sprites为一些大型的网站节约了带宽，让提高了用户的加载速度和用户体验，不需要加载更多的图片7， 如何用原生js给一个按钮绑定两个onclick事件Var btn1 =document. getElementsById(“btn”);(“click”,”hello1);(“click”,”hello2);function hello1()alert(“hello1”);function hello2()alert(“hello2”);8, 拖曳会用到哪些事件DragstartDragenterDragoverDragleaveDragDropDragend9, 请列

5、举jQuery中选择器1， 基本选择器ID，class，元素之类的2， 层级选择器返回的是jQuery对象才可以进行的链式操作如 后代元素，子元素，兄弟元素，相邻元素3， 过滤选择器基本过滤, 内容过滤, 可见性过滤, 属性过滤, 子元素过滤和表单对象属性过滤选择器10，JavaScript中有哪些定时器，他们的区别和用法是什么SetTimeout 只会执行一次SetInterval 会一直重复执行方式都为：settimeout（函数，时间）11，请描述一下cookies sessionstorage 和localstorage区别相同点：都储存在客户端上不同点：1 储存大小 Cookies

6、数据大小不能超过4k Sessionstorage和Localstorage 比cookies大 ，可以达到5m或更多 2有效时间 Localstorage 储存持久数据，浏览器关闭后也不会丢失，除非主动删除数据 Sessionstorage 数据在关闭游览器之后自动删除 Cookies 设置的cookies过期时间之前一直有效，即使窗口和游览器关闭。 3数据与服务器之间的交互方式 Cookies的数据会自动的传递到服务器，服务器端也可以写cookies到客户端 Sessionstorage和localstorage 不会上传到服务器，仅在本地保存12，计算一个数组arr所有元素的和alue;

7、来获取输入框中的值function sum2() var arr1=1,2,3,4,5,6,7,8,9; var sum1=0; for (var i=0;i=;i+) if (typeof arr1i=number) sum1+=arr1i; (sum1);13，编写一个方法去掉数组里的重复内容 var arr=1,2,3,4,5,1,2,3function arr1() var arr2 = 1,2,3,4,5,1,2,3; var s= ; for(i= 0;i;i+) if(arr2i) = -1) (arr2i); (s);14，和innerHTML的区别是什么是直接写入到页面的内容

8、流，如果之前没有调用。那么浏览器会自动调用open，页面被重写innerHTML将内容写入某个DOM节点，不会导致页面全部重绘。精准。15，ajax的步骤Ajax 异步JavaScript和xml 能够局部刷新网页数据而不是重新加载整个网页第一步，创建xmlhttprequest对象，var xmlhttp = new XmlHTTPrequest（）；Xmlhttprequest对象用来和服务器交换数据Var xhttp；If esize(function()$(.myblock).css(position: absolute,left: ($(window).width() - $(.my

9、block).outerWidth()/2,top: ($(window).height() - $(.myblock).outerHeight()/2 ); );此外在页面载入时，就需要调用resize()方法$(function()$(window).resize(););19，三个盒子，左右定宽，中间自适应的方法有几个第一种方法：左右采用浮动 中间采用margin-left和margin-right的方法代码： 11 33 22 第二种方法：左右采用绝对定位，中间采用margin-left和margin-right代码： 11 33 22 第三种方法 负margin值main conte

10、ntleft contentright#main float:left;width:100%;#mainContainer margin:0 230px;height:200px;background:green;#left float:left;margin-left:-100%;width:230px#right float:left;margin-left:-230px;width:230px;#left .inner,#right .inner background:orange;margin:0 10px;height:200px;20，js有几种数据类型其中基本数据类型有哪些基本数

11、据类型有 Boolean，undefined，null，number，string应用类型有 object，array，function21，undefined和null的区别Null 代表空值，代表一个空对象指针，一个特殊的对象值Undefined 是未定义，类型也是undefined22，http和https有什么区别如何灵活运用Http是http运行在TCP之上，传输内容是明文，客户端和服务器无法验证对方身份。HTTPS是http运行在SSL/tls之上，SSL/tls运行在TCP上，所有内容都是经过加密。加密采用对称加密，但是秘钥用服务器证书进行非对称加密。服务器和客户端都是可以互相验

12、证身份。23，常见的Http状态码2开头，请求成功，表示成功处理了请求的状态代码3开头，请求重定向，表示完成请求，需要进一步操作，一般是重定向4开头，请求错误，表示请求出错，妨碍了服务器的处理5开头，这些状态码表示服务器在尝试处理请求时发生内部错误，服务器本身出错而不是请求出错24，如何进行网站性能的优化原因：用户角度 加载速度提高，更好的交互体验 服务商角度 减少页面请求，降低带宽，节省资源方法：1，JavaScript优化和打包2，按需加载资源3，在使用DOM操作库时用上array-ids4，缓存5，启用HTTP/26，应用性能分析7，使用负载均衡方案8，同构9，使用索引加快数据库查询10

13、，使用更快的转译方案11，避免因JavaScript和css的使用而阻塞渲染12，图片编码优化25，react和vue有哪些不同，说说你对这两个框架的看法相同点：都支持服务器渲染 都有virtual DOM，组件化开发，通过props参数进行父子组件数据的传递，都实现了webComponent规范 数据驱动视图 都支持native方案，react的react native 和vue的weex不同点：react严格上只针对MVC的view层，vue则是mvvm模式 Virtual DOM不一样，vue会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树，而对于react来说，每次应用状态被改变，

14、全部组件都会被重新渲染，所以react需要shouldComponentUPdate这个生命周期函数来进行控制。 组件的写法不一样。 数据绑定，vue是双向的，react是单向的 State对象在react应用中不可变的，需要使用setstate方法更新状态，在vue中state对象对象不是必须的，数据由data属性在vue对象中管理26，什么是mvvm mvc 有什么区别，原理 1，MVC（model-view-controller）MVC是比较直观的架构模式，用户模式-view(负责接收用户的操作输入)-controller(业务逻辑处理)-view(将结果反馈给view)2，MVVM（m

15、odel-view-viewmodel）将”数据模型数据双向绑定”的思想作为核心，因此model和view没有什么关系，之后痛过viewmodel进行交互，而model和viewmodel之间的交互是双向的，因此数据的视图的变化会同时修改数据源，而数据源的数据变化也会立刻反应view。27，px和em的区别Px表示像素，是一个绝对单位，不会因为其他元素而改变Em表示相对于父元素的字体大小，em是相对单位，会受到其他元素的影响28，优雅降级和渐进增强渐进增强（向上兼容）：一开始就针对低版本浏览器进行构筑界面，完成基本功能，然后在针对高级浏览器进行效果，交互，追加功能达到更好的体验优雅降级（向下兼

16、容）：一开始就构建站点的完整功能，然后针对浏览器测试和修复。29，eval()的作用把字符串参数解析成JS代码并运行，并返回执行的结果；例如：eval(“2+3”);varul=(parentUl);2.=function(event)3.vare=event|,4.source=|;if=li)alert;7.8.stopPropagation(e);10.functionaddElement()11.varli=(li);12.=我是新孩子;13.(li);14.34，css样式覆盖规则规则一：由于继承而发生样式冲突时，最近祖先获胜（就近原则）；规则二：继承样式和直接指定的样式冲突时，直接

17、指定的样式获胜规则三：直接指定样式发生冲突时，样式权值高的获胜；规则四：样式权值相等时，后者获胜。规则五：！important的样式不被覆盖。35，请简要描述margin重合问题以及解决方式1，同向margin重叠这时候重叠之后的margin值由发生重叠两片的最大值决定；如果其中一个出现负值，则由最大的正边距减去绝对值最大的负边距，如果没有最大正边距，则由0减去绝对值最大的负边距。解决方法：（1） 在最外层的div中加入overflow：hidden；zoom：1；（zoom这个属性是ie专有属性，除了设置或者检索对象的缩放比例之外，它还有可以触发ie的haslayout属性，清除浮动，清除m

18、argin重叠等作用。）（2） 在最外层加入padding：1px；（3） 在最外层加入：border：1px solid #000000;2,异向重叠问题：Float：left（ie6专属，或解决ie8+等浏览器的同向重叠问题）36，position的值,relativeabsolutefixed分别相对于进行谁定位Absolute：绝对定位 相对于最近一级Fixed：绝对定位 相对于浏览器窗口或frame进行定位Relative：相对定位 相对于其在普通流的位置Static：默认值 没有定位Sticky：粘性定位 文档位置根据正常文档流计算得出37，什么是闭包，如何使用，为什么使用闭包就是

19、在函数内定义一个函数。优点：可以读取函数内部的变量 这些变量的值始终保存在内存中缺点：内存消耗大且容易造成内存泄漏 闭包会在父函数外部，改变父函数内部变量的值38，请解释一下jsonp的工作原理，以及它为什么不是真正的ajax。Jsonp是一个简单的跨域方式；HTML中的script标签可以加载并执行其他域的javascript，于是我们可以通过script标记来动态加载其他域的资源JSONP易于实现，但是也会存在一些安全隐患，如果第三方的脚本随意地执行，那么它就可以篡改页面内容，截获敏感数据。但是在受信任的双方传递数据，JSONP是非常合适的选择。AJAX是不跨域的，而JSONP是一个是跨域

20、的，还有就是二者接收参数形式不一样39，请解释一下JavaScript的同源政策。同源政策规定跨域之间的脚本是隔离的，一个域的脚本不能访问和操作另外一个域的绝大部分属性和方法。当两个域具有相同的协议，相同的端口，相同的host，那么我们就可以认为是相同的域。40，怎样添加，移除，移动，复制，创建和查找节点1， 创建新节点Createdocumentfragment（） ind( click, function( e ) );（2），live定义和用法：主要用于给选择到的元素上绑定特定事件类型的监听函数；语法：live(type, data, fn);特点：(1)、live方法并没有将监听器绑定

21、到自己(this)身上，而是绑定到了上了。(2)、live正是利用了事件委托机制来完成事件的监听处理，把节点的处理委托给了document，新添加的元素不必再绑定一次监听器。(3)、使用live（）方法但却只能放在直接选择的元素后面，不能在层级比较深，连缀的DOM遍历方法后面使用，即$(“ul”).live.可以，但$(body).find(ul).live.不行；实例如下：$( document ).on( click, #members li a, function( e ) );（3），delegate定义和用法：将监听事件绑定在就近的父级元素上语法：delegate(selector,

22、type,data,fn)特点：(1)、选择就近的父级元素，因为事件可以更快的冒泡上去，能够在第一时间进行处理。(2)、更精确的小范围使用事件代理，性能优于.live()。可以用在动态添加的元素上。实例如下：$(#info_table).delegate(td,click,function()/*显示更多信息*/);$(table).find(#info).delegate(td,click,function()/*显示更多信息*/);（4），on定义和用法：将监听事件绑定到指定元素上。语法：on(type,selector,data,fn)实例如下：$(#info_table).on(cli

23、ck,td,function()/*显示更多信息*/);参数的位置写法与delegate不一样。说明：on方法是当前JQuery推荐使用的事件绑定方法，附加只运行一次就删除函数的方法是one()。总结：.bind(), .live(), .delegate(), .on()分别对应的相反事件为：.unbind(),.die(), .undelegate(),.off()43，浏览器的内核分别是什么IE：trident内核Firefox：gecko内核Safari：webkit内核Opera：现在blink内核Chrome：blink内核44，浏览器是如何渲染画面的渲染的流程如下：1， 解析HT

24、ML文件，创建dom树自上而下，遇到任何样式和脚本都会阻塞2， 解析css。优先级：浏览器默认设置用户设置外部样式内联样式HTML中的style样式；3， 将css和DOM合并，构建渲染树4， 布局和绘制，重绘和重排45，css3新增了很多属性，一起分析一下新增的属性：边框：border-radius：CSS3圆角边框。在 CSS2 中添加圆角矩形需要技巧，我们必须为每个圆角使用不同的图片，在 CSS3 中，创建圆角是非常容易的，在 CSS3 中，border-radius 属性用于创建圆角。border：1px solid;box-shadow：CSS3边框阴影。在 CSS3 中，box-s

25、hadow 用于向方框添加阴影。box-shadow:10px 10px 5px #888888;border-image：CSS3边框图片。通过 CSS3 的 border-image 属性，您可以使用图片来创建边框。border-image：url 30 30 round;背景：background-size： 属性规定背景图片的尺寸。在 CSS3 之前，背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。您能够以像素或百分比规定尺寸。如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度。background-or

26、igin ：属性规定背景图片的定位区域。背景图片可以放置于 content-box、padding-box 或 border-box 区域。文字效果：text-shadow：在 CSS3 中，text-shadow 可向文本应用阴影。text-shadow:5px 5px 5px #FFFFFF;word-wrap :单词太长的话就可能无法超出某个区域，允许对长单词进行拆分，并换行到下一行：pword-wrap:break-word; 2D转换：transform：通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。translate()：元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：transform：translate（50px,100px）;值 translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素。rotate()：元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。transform:rotate(30deg);值 rotate(30deg) 把元素顺时针旋转 30 度。scale():元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：transform:scale(2,4);值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把