前端面试题（一）

归子莫

发布于：2020年9月22日

前端面试题（一）

博客说明

文章所涉及的资料来自互联网整理和个人总结，意在于个人学习和经验汇总，如有什么地方侵权，请联系本人删除，谢谢！

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

在ES5中可以通过Object.defineProperty来实现已有属性的监听

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

缺点：如果id不在user对象中，则不能监听id的变化

在ES6中可以通过Proxy来实现

1	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	不同域名	不允许