2019前端经典面习题

2019前端经典面习题2019前端经典面习题21/212019前端经典面习题1，html和xml有什么差异html是超文本标记语言xml是可扩展标记语言html语法宽松，xml语法慎重html使用固有标记，xml没有固有标记html标签预定义，xml标签可扩展，可定义html是用来显示数据的，xml是用来描述和储藏数据的2，css有哪几种选择器权重的优先级第一种为属性选择器第二种为id选择器第三种为class选择器第四种为伪类选择器第五种是后代选择器第六种是标签选择器第七种是通用选择器第八种是伪元素选择器第一等：代表内联样式，如:style=””，权值为1000。第二等：代表ID选择器，如：#content，权值为0100。第三等：代表类，伪类和属性选择器，如.content，权值为0010。4.第四等：代表种类选择器和伪元素选择器，如divp，权值为0001。5.通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。继承的样式没有权值。3，网页有哪几部分组成结构层：html表示层：css行为层：js和dom4，一个200*200的div在不一样分辨率屏幕上下左右居中，用css实现Div{position:absolute;width:200px;height:200px;top:50%;left:50%;margin-top:-100px;margin-left:-100px;}5，阐述清楚浮动的几种方式第一种父级div定义高度height合适高度固定的布局第二种父级div定义overflow：hidden第三种结尾处加空标签clear：both让父级自动获取高度第四种父级div定义伪类:after和zoom6，讲解csssprites，怎样使用CSSSprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background-repeat”，“background-position”的组合进行背景定位，background-position能够用数字能精准的定位出背景图片的地址。CSSSprites为一些大型的网站节约了带宽，让提高了用户的加载速度和用户体验，不需要加载更多的图片7，怎样用原生js给一个按钮绑定两个onclick事件Varbtn1=document.getElementsById(“btn”);(“click”,”hello1);(“click”,”hello2);functionhello1(){alert(“hello1”);}functionhello2(){alert(“hello2”);}8,拖曳会用到哪些事件DragstartDragenterDragoverDragleaveDragDropDragend9,请列举jQuery中选择器1，基本选择器ID，class，元素之类的2，层级选择器返回的是jQuery对象才能够进行的链式操作如后代元素，子元素，兄弟元素，相邻元素3，过滤选择器基本过滤,内容过滤,可见性过滤,属性过滤,子元素过滤和表单对象属性过滤选择器10，JavaScript中有哪些准时器，他们的差异和用法是什么SetTimeout只会执行一次SetInterval会素来重复执行方式都为：settimeout（函数，时间）11，请描述一下cookiessessionstorage和localstorage差异相同点：都储蓄在客户端上不一样点：

1储蓄大小Cookies数据大小不能够高出4kSessionstorage和Localstorage

比

cookies

大，能够达到

5m或更多2有效时间Localstorage储蓄长远数据，阅读器关闭后也不会扔掉，除非主动删除数据Sessionstorage数据在关闭旅游器此后自动删除Cookies设置的cookies过期时间从前素来有效，即使窗口和旅游器关闭。3数据与服务器之间的交互方式Cookies

的数据会自动的传达到服务器，服务器端也能够写

cookies

到客户端Sessionstorage

和

localstorage

不会上传到服务器，仅在当地保留12，计算一个数组arr全部元素的和alue;来获取输入框中的值functionsum2(){vararr1=[1,2,3,4,5,6,7,8,9];varsum1=0;for(vari=0;i<=;i++){if(typeofarr1[i]=="number"){sum1+=arr1[i];}}(sum1);}13，编写一个方法去掉数组里的重复内容vararr=[1,2,3,4,5,1,2,3]functionarr1(){vararr2=[1,2,3,4,5,1,2,3];vars=[];for(i=0;i<;i++){if(arr2[i])==-1){(arr2[i]);}}(s);}14，和innerHTML的差异是什么是直接写入到页面的内容流，若是从前没有调用。那么阅读器会自动调用open，页面被重写innerHTML将内容写入某个DOM节点，不会以致页面全部重绘。精准。15，ajax的步骤Ajax

异步

JavaScript

和

xml

能够局部刷新网页数据而不是重新加载整个网页第一步，创办

xmlhttprequest

对象，

varxmlhttp=newXmlHTTPrequest

（）；Xmlhttprequest对象用来和服务器交换数据Varxhttp；If{esize(function(){$(".myblock").css({position:"absolute",left:($(window).width()-$(".myblock").outerWidth())/2,top:$(".myblock").outerHeight())/2

($(window).height()});

-});其他在页面载入时，就需要调用resize()方法$(function(){$(window).resize();});19，三个盒子，左右定宽，中间自适应的方法有几个第一种方法：左右采用浮动中间采用margin-left和margin-right的方法代码：<divstyle="width:100%;margin:0auto;"><divstyle="width:200px;float:right;background-color:#000000;">11</div><divstyle="width:200px;float:left;background-color:red;">33</div><divstyle="margin-left:200px;margin-right:200px;background-color:green;">22</div></div>第二种方法：左右采用绝对定位，中间采用margin-left和margin-right代码：<divstyle="width:100%;margin:0auto;"><divstyle="width:200px;position:absolute;left:0px;background-color:#000000;">11</div><divstyle="width:200px;position:absolute;right:0px;background-color:red;">33</div><divstyle="margin-left:200px;margin-right:200px;background-color:green;">22</div></div>第三种方法负margin值<divid="main"><divid="mainContainer">maincontent</div></div><divid="left"><divid="leftContainer"class="inner">leftcontent</div></div><divid="right"><divid="rightContainer"class="inner">right</div></div>#main{float:left;width:100%;}#mainContainer{margin:0230px;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:010px;height:200px;}20，js有几种数据种类其中基本数据种类有哪些基本数据种类有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上，全部内容都是经过加密。加密采用对称加密，但是秘钥用服务器证书进行非对称加密。服务器和客户端都是能够互相考据身份。23，常有的Http状态码开头，央求成功，表示成功办理了央求的状态代码开头，央求重定向，表示完成央求，需要进一步操作，一般是重定向开头，央求错误，表示央求出错，阻挡了服务器的办理开头，这些状态码表示服务器在试一试办理央求时发生内部错误，服务器自己出错而不是请求出错24，怎样进行网站性能的优化原因：用户角度加载速度提高，更好的交互体验服务商角度减少页面央求，降低带宽，节约资源方法：1，JavaScript优化和打包2，按需加载资源3，在使用DOM操作库时用上array-ids4，缓存5，启用HTTP/26，应用性能解析7，使用负载均衡方案8，同构9，使用索引加快数据库盘问10，使用更快的转译方案11，防备因JavaScript和css的使用而拥塞衬着12，图片编码优化25，react和vue有哪些不一样，说说你对这两个框架的看法相同点：都支持服务器衬着都有virtualDOM，组件化开发，经过props参数进行父子组件数据的传达，都实现了webComponent规范数据驱动视图都支持native方案，react的reactnative和vue的weex不一样点：react严格上只针对MVC的view层，vue则是mvvm模式VirtualDOM不一样样，vue会追踪每一个组件的依赖关系，不需要重新衬着整个组件树，而关于react来说，每次应用状态被改变，全部组件都会被重新衬着，因此react需要shouldComponentUPdate这个生命周期函数来进行控制。组件的写法不一样样。。。数据绑定，vue是双向的，react是单向的State对象在react应用中不能够变的，需要使用setstate方法更新状态，在vue中state对象对象不是必定的，数据由data属性在vue对象中管理26，什么是mvvmmvc有什么差异，原理1，MVC（model-view-controller）MVC是比较直观的架构模式，用户模式->view(负责接收用户的操作输入)->controller(业务逻辑办理)->view(将结果反响给view)2，MVVM（model-view-viewmodel）将”数据模型数据双向绑定”的思想作为核心，因此model和view没有什么关系，之后痛过viewmodel进行交互，而model和viewmodel之间的交互是双向的，因此数据的视图的变化会同时更正数据源，而数据源的数据变化也会立刻反响view。27，px和em的差异Px表示像素，是一个绝对单位，不会由于其他元素而改变Em表示有关于父元素的字体大小，em是相对单位，会碰到其他元素的影响28，优雅降级和渐进增强渐进增强（向上兼容）：一开始就针对低版本阅读器进行修筑界面，完成基本功能，尔后在针对高级阅读器进行收效，交互，追加功能达到更好的体验优雅降级（向下兼容）：一开始就成立站点的完满功能，尔后针对阅读器测试和修复。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样式覆盖规则规则一：由于继承而发生样式矛盾时，近来祖先获胜（就近原则）；规则二：继承样式和直接指定的样式矛盾时，直接指定的样式获胜规则三：直接指定样式发生矛盾时，样式权值高的获胜；规则四：样式权值相等时，后者获胜。规则五：！important的样式不被覆盖。35，请简要描述margin重合问题以及解决方式1，同向margin重叠这时候重叠此后的margin值由发生重叠两片的最大值决定；若是其中一个出现负值，则由最大的正边距减去绝对值最大的负边距，若是没有最大正边距，则由0减去绝对值最大的负边距。解决方法：（1）在最外层的div中加入overflow：hidden；zoom：1；（zoom这个属性是ie专有属性，除了设置也许检索对象的缩放比率之外，它还有能够触发ie的haslayout属性，除去浮动，除去margin重叠等作用。）（2）在最外层加入padding：1px；（3）在最外层加入：border：1pxsolid#000000;2,异向重叠问题：Float：left（ie6专属，或解决ie8+等阅读器的同向重叠问题）36，position的值,relative\absolute\fixed分别有关于进行谁定位Absolute：绝对定位有关于近来一级Fixed：绝对定位有关于阅读器窗口或frame进行定位Relative：相对定位有关于其在一般流的地址Static：默认值没有定位Sticky：粘性定位文档地址依照正常文档流计算得出37，什么是闭包，怎样使用，为什么使用闭包就是在函数内定义一个函数。优点：能够读取函数内部的变量这些变量的值向来保留在内存中缺点：内存耗资大且简单造成内存泄漏闭包会在父函数外面，改变父函数内部变量的值38，请讲解一下jsonp的工作原理，以及它为什么不是真切的ajax。Jsonp是一个简单的跨域方式；HTML中的script标签能够加载并执行其他域的javascript，于是我们能够经过script标记来动向加载其他域的资源JSONP易于实现，但是也会存在一些安全隐患，若是第三方的脚本随意地执行，那么它即可以篡改页面内容，截获敏感数据。但是在受相信的双方传达数据，JSONP是特别合适的选择。AJAX是不跨域的，而JSONP是一个是跨域的，还有就是二者接收参数形式不一样样39，请讲解一下JavaScript的同源政策。同源政策规定跨域之间的脚本是隔断的，一个域的脚本不能够接见和操作其他一个域的绝大部分属性和方法。当两个域拥有相同的协议，相同的端口，相同的host，那么我们就可以认为是相同的域。40，怎样增加，移除，搬动，复制，创办和查找节点1，创办新节点Createdocumentfragment（）ind("click",function(e){});2），live定义和用法：主要用于给选择到的元素上绑定特定事件种类的监听函数；语法：live(type,[data],fn);特点：(1)、live方法并没有将监听器绑定到自己(this)身上，而是绑定到了上了。(2)、live正是利用了事件委托体系来完成事件的监听办理，把节点的办理委托给了document，新增加的元素不用再绑定一次监听器。(3)、使用live（）方法但却只能放在直接选择的元素后边，不能够在层级比较深，连缀的DOM遍历方法后边使用，即$(“ul”").live...能够，但$("body").find("ul").live...不能够；实比以下：$(document).on("click","#memberslia",function(e){});3），delegate定义和用法：将监听事件绑定在就近的父级元素上语法：delegate(selector,type,[data],fn)特点：、选择就近的父级元素，由于事件能够更快的冒泡上去，能够在第一时间进行办理。(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("click","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，解析HTML文件，创办dom树自上而下，碰到任何样式和脚本都会拥塞2，解析css。优先级：阅读器默认设置<用户设置<外面样式<内联样式<HTML中的style样式；3，将css和DOM合并，成立衬着树4，布局和绘制，重绘和重排45，css3新增了好多属性，一起解析一下新增的属性：边框：·border-radius：CSS3圆角边框。在CSS2中增加圆角矩形需要技巧，我们必定为每个圆角使用不一样的图片，在CSS3中，创办圆角是特别简单的，在CSS3中，border-radius属性用于创办圆角。border：2pxsolid;box-shadow：CSS3边框阴影。在CSS3中，box-shadow用于向方框增加阴影。box-shadow:10px10px5px#888888;·border-image：CSS3边框图片。经过CSS3的border-image属性，您能够使用图片来创办边框。border-image：url3030round;背景：·background-size：属性规定背景图片的尺寸。在CSS3从前，背景图片的尺寸是由图片的实质尺寸决定的。在CSS3中，能够规定背景图片的尺寸，这就赞同我们在不一样的环境中重复使用背景图片。您能够以像素或百分比规定尺寸。若是以百分比规定尺寸，那么尺寸有关于父元素的宽度和高度。background-origin：属性规定背景图片的定位地区。背景图片能够搁置于content-box、padding-box或border-box地域。文字收效：·text-shadow：在CSS3中，text-shadow可向文本应用阴影。text-shadow:5px5px5px#FFFFFF;word-wrap:单词太长的话即可能无法高出某个地域，赞同对长单词进行拆分，并换行到下一行：p{word-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倍，把高度变换为原始高x()3D变换：·rotateX()：元素围绕其X轴以给定的度数进行旋转。transform：rotateX(120deg);·rotateY()：元素围绕其Y轴以给定的度数进行旋转。transform：rotateY(120deg);过渡：当元素从一种样式变换为另一种样式时为元素增加收效。动画：经过CSS3，我们能够创办动画，这能够在好多网页中取代动画图片、Flash动画以及JavaScript。多列：·column-count：属性规定元素应该被分开的列数。·column-gap：属性规定列之间的间隔。·column-rule：属性设置列之间的宽度、样式和颜色规则。用户界面：resize：属性规定可否可由用户调整元素尺寸。box-sizing：属性赞同您以确实的方式定义适应某个地域的详尽内容。outline-offset：属性对轮廓进行偏移，并在高出边框边缘的地址绘制轮廓。46，从输入url到显示页面，都经历了什么1、第一，在阅读器地址栏中输入url2、阅读器先查察阅读器缓存-系统缓存-路由器缓存，若是缓存中有，会直接在屏幕中显示页面内容。若没有，则跳到第三步操作。3、在发送http央求前，需要域名解析(DNS解析)(DNS（域名系统，DomainNameSystem）是互联网的一项核心服务，它作为能够将域名和IP地址互相照射的一个分布式数据库，能够令人更方便的接见互联网，而不用去记住IP地址。)，解析获取