前端面试题总结(暂时先写到这里了)

前言:金三银四,开始面试,以下记录了几天下来被问到的各种面试题:

1. http存储方式有哪几种(浏览器缓存机制) ?  状态码分别是 ?

① 强缓存:

  通过Expires(HTTP/1.0)和Cache-control(HTTP/1.1)两种响应头实现; 两者用于表示过期时间,Expires表示的是绝对时间, Cache-Control表示的是相对时间,其中后者比前者优先级要高.

   Cache-Control:  no-cache: 实际上可以缓存在本地, 但是在与服务端再次进行新鲜度验证之前,不能提供给客户端使用.

   Cache-Control:  no-store: 不缓存到本地.

   Cache-Control: public: 可以被所有用户缓存.

   Cache-Control: private: 只能被终端浏览器缓存(私有), 不能被中继服务器缓存.

   

② 协商缓存:

当浏览器对某个资源没有命中强缓存,则发送请求到服务器,验证协商缓存是否命中,如果命中协商,则返回304状态码,并且显示 ' Not Modified '

过程: 

① 当加载资源时,根据这两个请求头判断是否命中强缓存, 是则直接从缓存读取资源, 不发送请求到服务器; 200

② 如果不是则发送请求到浏览器,通过 [last-modified, etag] 判断是否命中协商缓存, 是则服务器将此请求返回,但是不返回此资源的数据,依然从缓存中读取资源. 304

③ 如果都没命中, 则从服务器加载资源.

相同: 都从客户端缓存加载资源.

不同:  强缓存不发请求到服务器, 协商缓存发请求到服务器.

 

2. 清除浮动的几种方式

① 标签结尾处添加一个块标签div, 绑定类并设置clear:both, 将盒子撑开. 如:

     

<template>
<div class="father"></div> 
...
...
...
<span class="child"></span>
<div class="clear"></div>  
</template>
<style>
  .child {
     float: left;
   }

  .clear {
     clear: both;
   } 
</style>

②  使用伪类

<template>
<div class="father"></div> 
...
...
...
<span class="child"></span>
  
</template>
<style>
  .child {
     float: left;
   }

  .father:after {
     display: block;
     clear: both;
     content: '';
     visibility: hidden;
     height: 0; 
   }

  .father: {
     zoom: 1;  // ie专有
   }

</style>

③ 父级使用overflow: hidden / auto

<template>
    <div class="father"></div> 
    <span class="child"></span>
</template>

// 使用 hidden
<style>
  .child {
     float: left;
   }

  .father: {
     overflow: hidden;
   }

</style>


// 使用 auto
<style>
  .child {
     float: left;
   }

  .father: {
     overflow: auto;
   }

</style>

 

3. 重绘和回流 ( 重排 ) : 回流必然引起重绘, 重绘不一定回流

① 重绘: 元素的样式(如修改颜色、display: none)发生改变时,不影响它在文档流的位置时, 浏览器重新渲染新样式,叫做重绘;

② 回流:  首次渲染、浏览器窗口大小调整、内容或字体大小变化、添加或者删除DOM节点、伪类元素激活等都会引起回流.

 

4. 有没有遇到过跨域,在哪里设置 ?

- 原因: 跨域是由于不满足浏览器同源策略引起的( 出现Access-Control-Allow-Origin ), 即: 

① 域名相同

② 协议相同

③ 端口相通

- 方法:  vue中使用proxy进行跨域, 原理是:

① 将域名发送给本地的服务器( 一般为启动vue的本地localhost )

② 由本地服务器请求真正的服务器

~ 在config/index.js中设置如下:

proxy: {
         'api': { //匹配所有以'api'开头的请求路径
                   target: 'xxx',       // 真正的后台路径
                   changeOrigin: true,  // 允许跨域
                   pathRewrite: {                   
                     '^/api': ''        // 重写路径   
                   }
               }
        }

~ 在创建axios实例时设置 baseURL:'/api'

 

5. 闭包是什么? 使用场景, 优缺点?

概念: 闭包就是内部存在自由变量的函数, 简单来讲就是函数可以访问到其他函数作用域的数据就叫做闭包.

使用场景: 定时器

优点: 

① 变量长期保存在内存中

② 避免污染全局变量

③ 存在私有成员

缺点: 

① 常驻内存, 造成内存使用增加

② 内存泄漏

 

6. css垂直和水平居中方式

① 已知宽度和高度: 父元素设置为相对定位, 子元素设置绝对定位

<template>
   <div class="father">
       <div class="child"></div>
   </div>
</template>

// 第1种方式: 上-右-下-左为0, margin:0
<style>
.father {
  height: 500px;
  width: 500px;
  position: relative;  

}
.child {
  height: 100px;
  width: 100px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
</style>


// 第2种方式: left、top为50%, margin-left、margin-top为元素宽度、元素高度的一半
<style>
.father {
  height: 500px;
  width: 500px;
  position: relative;  

}
.child {
  height: 100px;
  width: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -50px;
  margin-top: -50px;
}
</style>

② 未知宽度和高度: 

<template>
   <div class="father">
       <div class="child"></div>
   </div>
</template>

// 第1种方式: 父元素为相对定位,子元素为绝对定位
<style>
.father {
  height: 500px;
  width: 500px;
  position: relative;  

}
.child {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}
</style>


// 第2种方式: 设置父元素为flex定位
<style>
.father {
  height: 500px;
  width: 500px;
  display: flex;
  justify-content: center;  // 水平
  align-items: center;   // 垂直 
}
.child {
  background: #green;
}
</style>

注: 对于水平居中, 如果父级元素是块级元素, 则只需设置text-align: center ;  如果不是, 则需设置父级元素为块级元素 display: block; text-align: center.

 

7. 401、403、301、302状态码是什么?

① 401(Unauthorized) 未授权: 客户端在访问资源之前对自己进行认证, 客户端发送的请求没有认证信息, 服务器返回401拒绝请求.

② 403(Forbidden) 拒绝请求: 服务器理解了本次请求但是拒绝执行该任务, 可理解为没有权限访问.

③ 301(Permanently Moved) 永久转移: 重定向,浏览器拿到服务器返回的状态码后会自动跳转到新的URL地址, 旧地址的资源被永久性的删除.

④ 302(Temporarily Moved )  暂时性转移: 重定向, 浏览器拿到服务器返回的状态码后会自动跳转到新的URL地址, 浏览器抓取新的内容,而旧地址的资源会被保存.

 

8. Tree shaking是什么? 传统dec和Tree shaking对比? (优化)

简单来讲是用于清除无用代码以达到缩小打包体积的, 减少用户等待时间.

传统dec: 从代码中找出已有代码删除

Tree shaking: 寻找真正有用的代码

 

9. vdom是什么以及结构

virtual dom: 即用JS模拟的DOM结构, 将对DOM的操作放在JS层面来对比操作.

结构: 

{
  tag: '',
  attrs: {},
  children: [
     {
       tag: '',
       attrs: {},
       children: []
     }
  ]
}

原因: 将对DOM的直接操作放到JS来操作, 可以减少不必要的重回, 提高效率.

 

10. em和rem是什么? 区别?

注: em和rem都是相对长度单位

① em: 继承父级字体大小

② rem: 继承浏览器默认字体大小

区别: rem总是相对于根元素(root), em使用级联的方式计算; rem兼容IE9及以上.

 

11. 箭头函数、普通函数中this指向?

① 箭头函数: this指向父级作用域执行上下文中.

② 普通函数: 谁调用了就指向谁.

 

12. 判断是否是数组的方式

① a instanceof Array

② a.constructor === Array

③ Object.prototype.toString().call === ' [Object Array] '

④ Array.isArray(a)

 

13. 创建Vue2脚手架命令

npm install --global vue-cli

 

14.  变量提升怎么体现的? 块级作用域如何体现?

① 变量提升: 将变量提升到它所在作用域最开始的地方.

② 块级作用域: {}

 

15. vue.delete和delete ? 

① delete: 被删除的元素变成了empty或undefined,不影响其他元素

② vue.delete: 改变了数组的长度

 

16. vue-router 和 location-href的区别?

① vue-router使用pushState进行跳转, 页面不会重新加载; 而location.href会触发浏览器重新加载.

② vue-router是路由跳转或者同页面跳转; 而location.href是在不同页面之间跳转.

③ vue-router使用异步加载获取URL, location.href使用同步加载.

④ vue-router使用Diff算法

 

17. 深拷贝

  function copy(object) {
    let res = object instanceof Array ? [] : {}
    for (const [k, v] of object) {
      res[k] = typeof v == 'object' ? copy(v) : v
    }
    return res
  }

 

18. BFC是什么(块格式化上下文)?

内容: 用于形成独立的渲染区域,内部元素的渲染不会影响外界;

形成条件:  ① position: absolute/fixed   ② overflow   ③ flex/ inline-block

应用场景: 清除浮动

 

19. v-on 和 v-bind

v-on(@):    用于绑定事件, 一般写在methods中

v-bind(:): 用于绑定属性, 一般写在data中

 

20. vue中, 为什么data必须是一个函数?

① 因为JS本身的特性, 只有函数的{}构成作用域

② Object本身是引用数据类型, 只有函数返回的Object的内存地址是相互独立的,也就是说每个组件的data的内存地址不同,不会相互影响

 

21. v-for和v-if的优先级

一般来讲v-for > v-if

 

22.单页面应用和多页面应用的不同

① 单页面应用跳转刷新局部资源, 多页面跳转刷新全部资源

② 单页面应用公共资源(js、css)仅需加载一次, 多页面应用选择性重新加载

 

23. 使用全局变量有什么问题

① 命名冲突

② 难以复用,破坏代码封装

③ 不知道何时被修改了

 

24.  css选择器优先级

优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器