前端面试题

Q:什么情况下会碰到跨域问题?有哪些解决方法?

跨域问题是这是浏览器为了安全实施的同源策略导致的,同源策略限制了来自不同源的document、脚本,同源的意思就是两个URL的域名、协议、端口要完全相同。 script标签jsonp跨域、nginx反向代理、node.js中间件代理跨域、后端在头部信息设置安全域名、后端在服务器上设置cors。

Q:如何判断一个变量是对象还是数组? 判断数组和对象分别都有好几种方法,其中用prototype.toString.call()兼容性最好。 function isObjArr(variable){ if (Object.prototype.toString.call(value) === "[object Array]") { console.log('value是数组'); }else if(Object.prototype.toString.call(value)==='[object Object]'){//这个方法兼容性好一点 console.log('value是对象'); }else{ console.log('value不是数组也不是对象') } }

Q:html中title属性和alt属性的区别? 这个问题被问了一次,当时我只记得,alt属性是用于img标签的,当图片失效的时候会出现alt属性里面的内容,title用来标记页面的title,当时面试官问我还有没有其他的区别。我。。。 然后我就找了一篇文章来看,涨了点姿势: 1.<img src="#" alt="alt信息" /> //1.当图片不输出信息的时候,会显示alt信息 鼠标放上去没有信息,当图片正常读取,不会出现alt信息 2.<img src="#" alt="alt信息" title="title信息" /> // 2.当图片不输出信息的时候,会显示alt信息 鼠标放上去会出现title信息 //当图片正常输出的时候,不会出现alt信息,鼠标放上去会出现title信息

另外还有一些关于title属性的知识: title属性可以用在除了base,basefont,head,html,meta,param,script和title之外的所有标签 title属性的功能是提示。额外的说明信息和非本质的信息请使用title属性。title属性值可以比alt属性值设置的更长 title属性有一个很好的用途,即为链接添加描述性文字,特别是当连接本身并不是十分清楚的表达了链接的目的。

Q:标准盒子模型与IE怪异盒子模型 这个问题主要会出现在笔试题上面,比如:

<div style="width:100px;height="100px;border:10px;padding:10px;"></div>

这个盒子在w3c标准盒子模型和IE的怪异盒子模型下面它的宽度分别是多少? 标准盒子模型:总宽度=content100px+border 10px2+padding 10px2 //140px 怪异盒子模型: 总宽度=content60px+ border 10px2+padding 10px2 //100px

ps: box-sizing: content-box || border-box;//css3 box-sizing设置为border-box将使用怪异盒子模型 当怪异盒子的宽度小于border+padding的宽度的时候,content width将变为0,盒子的宽度会被border和padding的总宽度撑开

Q:你知道哪些http状态码? 1xx:1开头的是信息状态码 2xx:2开头的是请求成功 3xx:3开头的是重定向 4xx:4开头的是客户端错误 5xx:5开头的是服务器错误

Q:垂直居中有哪些方法?

单行文本的话可以使用height和line-height设置同一高度。 position+margin:设置父元素:position: relative;,子元素height: 100px; position:absolute;top: 50%; margin: -50px 0 0 0;(定高) position+transform:设置父元素position:relative,子元素:position: absolute;top: 50%;transform: translate(0, -50%);(不定高) 百搭flex布局(ie10+),设置父元素display:flex;align-items: center;(不定高)

Q:JS事件流? 输入图片说明

一个完整的JS事件流是从window开始,最后回到window的一个过程。

事件流被分为三个阶段(1~ 5)捕获过程、(5~ 6)事件触发过程、(6~ 10)冒泡过程。

有了解作用域吗?怎么预防作用域污染

其实网上有很多作用域的文章,参差不齐,个人觉得的话,作用域无非就是js当做对于function函数声明会提升到其他声明语句前执行,以及对于某个 {}里面的作用域如果找不到某个属性,就会在该 {}上下文当中查找属性,如果还找不到的话,进而类似。

作用域污染,无非就是闭包了吧,个人理解。

说说闭包

网上关于闭包的说明实在是太多,但是很多又讲的不明不白的,标题党太多,这里我建议还是直接看看js高级教程第三版里面的书本吧。

其实闭包也就是指有权访问另一个函数作用域的函数而已。常用的创建闭包的方法就是在函数内部创建另一个函数。

function a(){ var a; // ... return function(){ // 这里可以引用a函数里面的作用域,也就是可以使用a // 而且a函数作用域无法使用这里的值。 }}

了解前端的缓存吗?缓存分为几类?

前端的缓存无非就Cookie,LocalStorge,SessionStorge这三个吧。

个人就简单的介绍一下这三个吧,更详细可以自己去百度百度一下。

Cookie,存储容量小,仅仅4kb左右,在网络请求的时候可以发送,不建议存储重要数据,因为会被网络诈骗就是把本地的cookie发到别人的服务器上,进而获取你的账户密码。

LocalStorge,SessionStorge都是本地缓存的主要用的,两者的用法都很简单,都有各自的Set和get方法。主要的区别就是LocalStorge是一种持久化的存储方式,也就是说如果不手动清除,数据就永远不会过期。而SessionStorge关闭浏览器就清空数据。

猜你喜欢

转载自my.oschina.net/selinp/blog/1647003