• 让创新无法想象。咨询热线:022-60709568
  • 关注我们

Web前端面试题目汇总

阅读:318 2019-03-19 14:43:29 来源:新网

以下是收集一些面试中经常会遇到的经典面试题以及自己面试过程中有一些未解决的问题,通过对知识的整理以及经验的总结,重新巩固自身的前端基础知识,如有错误或更好的答案,欢迎指正,水平有限,望各位不吝指教。:)

html/css部分1、什么是盒子模型?

在网页中,一个元素占有空间的大小由几个部分构成,其中包括元素的内容(content),元素的内边距(padding),元素的边框(border),元素的外边距(margin)四个部分。这四个部分占有的空间中,有的部分可以显示相应的内容,而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。

行内元素:a、b、span、img、input、strong、select、label、em、button、textarea块级元素:div、ul、li、dl、dt、dd、p、h1-h6、blockquote空元素:即系没有内容的html元素,例如:br、meta、hr、link、input、img

一道经典的问题,实现方法有很多种,以下是其中一种实现:html结构:

="wrapper">="content">

css:

.wrapper{position:relative;width:500px;height:500px;background-color:#ddd;}.content{background-color:#6699ff;width:200px;height:200px;position:absolute;//父元素需要相对定位top:50%;left:50%;margin-top:-100px;//二分之一的height,widthmargin-left:-100px;}4、简述一下src与href的区别

href是指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,用于超链接。

src是指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求src资源时会将其指向的资源下载并应用到文档内,例如js脚本,img图片和frame等元素。当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

一般来说是针对不同的浏览器写不同的css,就是csshack。ie浏览器hack一般又分为三种,条件hack、属性级hack、选择符hack(详细参考css文档:css文档)。例如:

//1、条件hack//2、属性hack.test{color:#0909;/*forie8+*/*color:#f00;/*forie7andearlier*/_color:#ff0;/*forie6andearlier*/}//3、选择符hack*html.test{color:#090;}/*forie6andearlier*/*+html.test{color:#ff0;}/*forie7*/6、简述同步和异步的区别

同步是阻塞模式,异步是非阻塞模式。同步就是指一个进程在执行某个请求的时候,若该请求需要一段时间才能返回信息,那么这个进程将会一直等待下去,直到收到返回信息才继续执行下去;异步是指进程不需要一直等下去,而是继续执行下面的操作,不管其他进程的状态。当有消息返回时系统会通知进程进行处理,这样可以提高执行的效率。

px和em都是长度单位,区别是,px的值是固定的,指定是多少就是多少,计算比较容易。em得值不是固定的,并且em会继承父级元素的字体大小。浏览器的默认字体高都是16px。所以未经调整的浏览器都符合:1em=16px。那么12px=0.75em,10px=0.625em

渐进增强progressiveenhancement:针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级gracefuldegradation:一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。

区别:

a.优雅降级是从复杂的现状开始,并试图减少用户体验的供给

b.渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要

c.降级(功能衰减)意味着往回看;而渐进增强则意味着朝前看,同时保证其根基处于安全地带

ie:trident内核firefox:gecko内核safari:webkit内核opera:以前是presto内核,opera现已改用googlechrome的blink内核chrome:blink(基于webkit,google与operasoftware共同开发)

1)创建新节点createdocumentfragment()//创建一个dom片段createelement()//创建一个具体的元素createtextnode()//创建一个文本节点

2)添加、移除、替换、插入appendchild()//添加removechild()//移除replacechild()//替换insertbefore()//插入

3)查找getelementsbytagname()//通过标签名称getelementsbyname()//通过元素的name属性的值getelementbyid()//通过元素id,唯一性

/***对象克隆*支持基本数据类型及对象*递归方法*/functionclone(obj){varo;switch(typeofobj){case"undefined":break;case"string":o=obj+"";break;case"number":o=obj-0;break;case"boolean":o=obj;break;case"object"://object分为两种情况对象(object)或数组(array)if(obj===null){o=null;}else{if(object.prototype.tostring.call(obj).slice(8,-1)==="array"){o=[];for(vari=0;i=clone(obj[k]);}}}break;default:o=obj;break;}returno;}如何消除一个数组里面重复的元素?< p="">

//方法一:vararr1=[1,2,2,2,3,3,3,4,5,6],arr2=[];for(vari=0,len=arr1.length;i<0){arr2.push(arr1[i]);}}document.write(arr2); 1,2,3,4,5,6在javascript中什么是伪数组?如何将伪数组转化为标准数组?<="" p="">

伪数组(类数组):无法直接调用数组方法或期望length属性有什么特殊的行为,但仍可以对真正数组遍历方法来遍历它们。典型的是函数的argument参数,还有像调用getelementsbytagname,document.childnodes之类的,它们都返回nodelist对象都属于伪数组。可以使用array.prototype.slice.call(fakearray)将数组转化为真正的array对象。

functionlog(){varargs=array.prototype.slice.call(arguments);//为了使用unshift数组方法,将argument转化为真正的数组args.unshift('(app)');console.log.apply(console,args);};javascript中callee和caller的作用?

caller是返回一个对函数的引用,该函数调用了当前函数;

callee是返回正在被执行的function函数,也就是所指定的function对象的正文。

sessionstorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionstorage不是一种持久化的本地存储,仅仅是会话级别的存储。而localstorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。

webstorage和cookie的区别

webstorage的概念和cookie相似,区别是它是为了更大容量存储设计的。cookie的大小是受限的,并且每次你请求一个新的页面的时候cookie都会被发送过去,这样无形中浪费了带宽,另外cookie还需要指定作用域,不可以跨域调用。除此之外,webstorage拥有setitem,getitem,removeitem,clear等方法,不像cookie需要前端开发者自己封装setcookie,getcookie。但是cookie也是不可以或缺的:cookie的作用是与服务器进行交互,作为http规范的一部分而存在,而webstorage仅仅是为了在本地“存储”数据而生。

varstr="aaaabbbccccddfgh";varobj={};for(vari=0;i==v){obj[v].count=++obj[v].count;}else{obj[v]={};obj[v].count=1;obj[v].value=v;}}for(keyinobj){document.write(obj[key].value+'='+obj[key].count+' '); a="4b=3c=4d=2f=1g=1h=1}jquery的事件委托方法on、live、delegate之间有什么区别?如何理解闭包?跨域请求资源的方法有哪些?谈谈垃圾回收机制方式及内存管理开发过程中遇到的内存泄露情况,如何解决的?http一次完整的http事务是怎样的一个过程?

基本流程:

a.域名解析

b.发起tcp的3次握手

c.建立tcp连接后发起http请求

d.服务器端响应http请求,浏览器得到html代码

e.浏览器解析html代码,并请求html代码中的资源

f.浏览器对页面进行渲染呈现给用户

关于快排算法的详细说明,可以参考阮一峰老师的文章快速排序"快速排序"的思想很简单,整个排序过程只需要三步:(1)在数据集之中,选择一个元素作为"基准"(pivot)。(2)所有小于"基准"的元素,都移到"基准"的左边;所有大于"基准"的元素,都移到"基准"的右边。(3)对"基准"左边和右边的两个子集,不断重复第一步和第二步,直到所有子集只剩下一个元素为止。参考代码:

varquicksort=function(arr){if(arr.length<=1){returnarr;}varpivotindex=math.floor(arr.length/2);varpivot=arr.splice(pivotindex,1)[0];varleft=[];varright=[];for(vari=0;i< p="">

二分法查找,也称折半查找,是一种在有序数组中查找特定元素的搜索算法。查找过程可以分为以下步骤:(1)首先,从有序数组的中间的元素开始搜索,如果该元素正好是目标元素(即要查找的元素),则搜索过程结束,否则进行下一步。(2)如果目标元素大于或者小于中间元素,则在数组大于或小于中间元素的那一半区域查找,然后重复第一步的操作。(3)如果某一步数组为空,则表示找不到目标元素。参考代码:

//非递归算法functionbinary_search(arr,key){varlow=0,high=arr.length-1;while(low<=high){varmid=parseint((high+low)/2);if(key==arr[mid]){returnmid;}elseif(key>arr[mid]){low=mid+1;}elseif(key=[1,2,3,4,5,6,7,8,9,10,11,23,44,86];varresult=binary_search(arr,10);alert(result); 9返回目标元素的索引值<="" p="">

//递归算法functionbinary_search(arr,low,high,key){if(low>high){return-1;}varmid=parseint((high+low)/2);if(arr[mid]==key){returnmid;}elseif(arr[mid]>key){high=mid-1;returnbinary_search(arr,low,high,key);}elseif(arr[mid]=[1,2,3,4,5,6,7,8,9,10,11,23,44,86];varresult=binary_search(arr,0,13,10);alert(result); 9返回目标元素的索引值<="" p="">

(1)xss(cross-sitescripting,跨站脚本攻击):指通过存在安全漏洞的web网站注册用户的浏览器内运行非法的html标签或者javascript进行的一种攻击。(2)sql注入攻击(3)csrf(cross-siterequestforgeries,跨站点请求伪造):指攻击者通过设置好的陷阱,强制对已完成的认证用户进行非预期的个人信息或设定信息等某些状态更新。

functiontrim(str){if(str&&typeofstr==="string"){returnstr.replace(/(^s*)|(s*)$/g,"");//去除前后空白符}}使用正则表达式验证邮箱格式

varreg=/^(w)+(.w+)*@(w)+((.w{2,3}){1,3})$/;varemail="example@qq.com";console.log(reg.test(email));//true

a.前端是最贴近用户的程序员,前端的能力就是能让产品从90分进化到100分,甚至更好

b.参与项目,快速高质量完成实现效果图,精确到1px;

c.与团队成员,ui设计,产品经理的沟通;

d.做好的页面结构,页面重构和用户体验;

e.处理hack,兼容、写出优美的代码格式;

f.针对服务器的优化、拥抱最新前端技术。

分享

相关文章
{{ v.title }}
{{ v.description||(cleanHtml(v.content)).substr(0,100)+'···' }}
你可能感兴趣
推荐阅读 更多>
推荐商标

{{ v.name }}

{{ v.cls }}类

立即购买 联系客服