关于java:前端面试题一

前端面试题（一）

<!-- more -->

博客阐明

文章所波及的材料来自互联网整顿和集体总结，意在于集体学习和教训汇总，如有什么中央侵权，请分割自己删除，谢谢！

1、请你讲一下js监听对象属性的扭转具体是怎么实现的，它们各自有什么特点？

• 在ES5中能够通过Object.defineProperty来实现已有属性的监听

Object.defineProperty(user,'name',{ set：function(key,value){ } })

毛病：如果id不在user对象中，则不能监听id的变动

• 在ES6中能够通过Proxy来实现

var  user = new Proxy({}，{ set：function(target,key,value,receiver){ } })

这样即便有属性在user中不存在，通过user.id来定义也同样能够这样监听这个属性的变动

2、如果要画一条0.5px的线，你会怎么去实现呢？讲讲你的办法

• 先画1px的，而后transform:scaleY(0.5)
• 利用hr标签，设置元素属性为0.5px

3、浅谈CSS3中的content-box和border-box的区别

• content-box是合乎w3c规范的盒模型，也是默认的盒模型
• border-box是不合乎w3c规范的盒模型，也称为怪异盒子

他们二者有什么区别呢？

content-box是先依据设定的款式确定元素content的宽高，有border和padding的状况下再额定减少盒子的宽高，内容宽高不受影响，设定多少就是多少。

border-box是先依据设定的款式固定盒子的宽高，如果有border和padding的状况下，再依据盒子的宽高减去border或者padding，内容的宽高会受到影响，会被减去border或者padding。

4、display:none;visibility:hidden;和opacity:0;的区别

• display:none;
• visibility:hidden;
• opacity:0;

它们都能够让元素暗藏掉，然而它们之间还是有区别的

• display:none;暗藏后不占空间，而另外两个尽管暗藏了元素，然而还是占据着空间
• 而transition对于display:none;和visibility:hidden;是有效的，然而对于opacity:0;是无效的

5、状态码301，302，304不同

301示意永恒重定向（301 moved permanently），示意申请的资源分配了新url，当前应应用新url。

302示意临时性重定向（302 found），申请的资源长期调配了新url，本次申请暂且应用新url。302与301的区别是，302示意临时性重定向，重定向的url还有可能还会扭转。

303 示意申请的资源门路产生扭转，应用GET办法申请新url。她与302的性能一样，然而明确指出应用GET办法申请新url。

304 not modified

客户端发送附带条件的申请时（if-matched,if-modified-since,if-none-match,if-range,if-unmodified-since任一个）服务器端容许申请拜访资源，但因产生申请未满足条件的状况后，间接返回304Modified（服务器端资源未扭转，可间接应用客户端未过期的缓存）。

304状态码返回时，不蕴含任何响应的主体局部。304尽管被划分在3xx类别中，然而和重定向没有关系。

6、Vue的v-model的原理，Vue实例是怎么拿到data属性的

在vue中v-model这个语法糖可能很不便的实现表单和数据之间的绑定，v-model实现的原理封装了一些逻辑例如：在input上绑定Message,并通过input事件获取以后事件的target.value,并赋值给message。
应用v-model的组件会主动监听Input事件，并把这个input事件所携带的值，传递给v-model所绑定的属性。这样组件外部的值就给到了父组件中

7、CSS动画，transition和animation，哪一个性能更好

其次要区别在于：transition须要触发一个事件才会随着工夫扭转其CSS属性；animation在不须要触发任何事件的状况下，也能够显式的随工夫变动来扭转元素CSS属性，达到一种动画的成果

transition是使一个或多个属性值产生过渡成果，animation则作用于元素自身，强调流程与管制，是关键帧动画的领域。简略的成果能够用animation，简单的或想要更自在地掌控应该抉择transition。我认为transition会更占资源一些。

8、Vue-router 中hash模式和history模式的区别

hash模式url外面永远带着#号，咱们在开发当中默认应用这个模式。那么什么时候要用history模式呢？如果用户思考url的标准那么就须要应用history模式，因为history模式没有#号，是个失常的url适宜推广宣传。当然其性能也有区别，比方咱们在开发app的时候有分享页面，那么这个分享进来的页面就是用vue或是react做的，咱们把这个页面分享到第三方的app里，有的app外面url是不容许带有#号的，所以要将#号去除那么就要应用history模式，然而应用history模式还有一个问题就是，在拜访二级页面的时候，做刷新操作，会呈现404谬误，那么就须要和后端人配合让他配置一下apache或是nginx的url重定向，重定向到首页路由上。

hash原理

比方在用超链接制作锚点跳转的时候，就会发现，url前面跟了"#id"，hash值就是url中从"#"号开始到完结的局部。hash值变动浏览器不会从新发动申请，然而会触发window.hashChange事件，如果咱们在hashChange事件中获取以后的hash值，并依据hash值来批改页面内容，则达到了前端路由的目标。

history原理

history模式原理能够这样了解，首先咱们要革新咱们的超链接，给每个超链接减少onclick办法，阻止默认的超链接跳转，改用history.pushState或history.replaceState来更改浏览器中的url，并批改页面内容。因为通过history的api调整，并不会向后端发动申请，所以也就达到了前端路由的目标

Koa和Express的区别，以及Koa两头键的原理

9、用JS实现一个sleep函数

//办法一function sleep1(ms,callback){  setTimeout(callback,ms)}sleep1(1000,()=>{  console.log(1000)})//办法二function sleep2(ms){  return new Promise(function(resolve,reject){    setTimeout(resolve,ms)  })}sleep2(2000).then(()=>{  console.log(2000)})//办法三function sleep3(ms){  return new Promise(function(resolve,reject){    setTimeout(resolve,ms)  })}async function init(    await sleep3(3000))init().then(()=>{  console.log(3000)})

10、bootstrap实现响应式布局原理

Bootstrap的官网解释：Bootstrap提供了一套响应式、挪动设施优先的流式栅格零碎，随着屏幕或视口（viewport）尺寸的减少，零碎会主动分为做12列。

11、浏览器的重排和重绘是什么意思？重绘的触发条件？如何防止重绘重排？

当 DOM 元素的属性发生变化 (如 color) 时, 浏览器会告诉 render 从新描述相应的元素, 此过程称为 repaint。

如果该次变动波及元素布局 (如 width), 浏览器则摈弃原有属性, 从新计算并把后果传递给 render 以从新描述页面元素, 此过程称为 reflow

缩小重绘重排

1.拆散读写操作

2.款式集中扭转

能够增加一个类，款式都在类中扭转

3.能够应用absolute脱离文档流。

4.应用 display:none ，不应用 visibility，也不要扭转 它的 z-index

5.能用css3实现的就用css3实现。

跨域问题

JSONP

Hash

postMessage(HTML5)

WebSocket

CORS(反对跨域通信的Ajax)

CORS背地的思维，就是应用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定申请或响应是应该胜利，还是应该失败。

同源策略

如何产生闭包

当一个嵌套的外部(子)函数援用了嵌套的内部(父)函数的变量(函数)时，产生闭包

HTTP 2.0 给咱们带了很多新的个性，简略总结一下：

• 二进制分帧
• 多路复用
• 首部压缩
• 流量管制
• 申请优先级
• 服务器推送

感激

浅述函数防抖和函数节流

以及勤奋的本人，集体博客，GitHub