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 倍,把
copyright@ 2008-2022 冰豆网网站版权所有
经营许可证编号:鄂ICP备2022015515号-1