关于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