前端面试题（一）
前端面试题（一）
博客说明
文章所涉及的资料来自互联网整理和个人总结，意在于个人学习和经验汇总，如有什么地方侵权，请联系本人删除，谢谢！
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头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功，还是应该失败。
同源策略
| URL | 说明 | 是否允许通信 |
|---|---|---|
| http://www.a.com/a.js http://www.a.com/b.js | 同一域名下 | 允许 |
| http://www.a.com/lab/a.js http://www.a.com/script/b.js | 同一域名下不同文件夹 | 允许 |
| http://www.a.com:8000/a.js http://www.a.com/b.js | 同一域名，不同端口 | 不允许 |
| http://www.a.com/a.js https://www.a.com/b.js | 同一域名，不同协议 | 不允许 |
| http://www.a.com/a.js http://70.32.92.74/b.js | 域名和域名对应ip | 不允许 |
| http://www.a.com/a.js http://script.a.com/b.js | 主域相同，子域不同 | 不允许 |
| http://www.a.com/a.js http://a.com/b.js | 同一域名，不同二级域名（同上） | 不允许（cookie这种情况下也不允许访问） |
| http://www.cnblogs.com/a.js http://www.a.com/b.js | 不同域名 | 不允许 |
如何产生闭包
当一个嵌套的内部(子)函数引用了嵌套的外部(父)函数的变量(函数)时，产生闭包
HTTP 2.0 给我们带了很多新的特性，简单总结一下：
- 二进制分帧
- 多路复用
- 首部压缩
- 流量控制
- 请求优先级
- 服务器推送
感谢
