2021 面试题归类

115 阅读6分钟

年前离职啦, 趁着金三银四投了波简历, 以下是对面试题的一些归类。希望对你们有所帮助鸭!! 对咯, 我是以两年工作经验出去面试的哈 !!!

答案是我自己的回答,你们可以结合自身的情况回答的哈

1. 你的职业规划是什么样的(这个比较问的多)

码农/管理/全栈

2. 你们前端有什么规范吗

github.com/195440/java…

3.js基本数据类型有哪几种

六种简单数据类型:String、Number、Boolean、undefined、Null、symbol(es6新增)

一种复杂数据类型:obeject

4.对盒子模型的理解

  • 盒子总宽度/高度=width/height+padding+border+margin box-sizing:border-box——将采用怪异模式解析计算,盒子的总宽度和高度是包含内边距padding和边框border宽度在内的
  • 盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin; 也即是说 width = 内容区宽度 + padding + border

5.this的指向

谁调用指向谁

6.npm安装插件时,-S和-D是什么意思

  • -S或者--save——表示安装到生产环境,即将保存配置信息到pacjage.json的dependencies节点中
  • -D或者--save-dev——表示安装到开发环境,即将保存配置信息到pacjage.json的devDependencies节点中

7.改变指针方向的用法

  • call和apply都是立即执行,而bind则是返回一个函数,需要加上括号去执行
  • call和apply的参数可以直接放入,
  • apply的参数必须是数组

8.v-if和v-show的区别

  • v-if:有较高的切换性能消耗
  • v-show:为该元素添加css--display:none,dom元素还在,但是不占据页面位置。有较高的初始渲染消耗

9.深拷贝和浅拷贝(常问)

浅拷贝 只拷贝指针,深拷贝就是拷贝他的值,重新生成的对像

10.vue双向绑定原理/MVVM的实现方式

这个问题你们自行搜索理解一下哈

11.手写promise

   setTimeout(() => {
        resolve(1);
      }, 500);
    }).then(res => {
      console.log(res);        //1
    }).catch(err=>{
        console.log(err);  
         reject();
    });

12.HTML5的新特性

  1. 新的内容标签:header main nav content footer article aside
  2. 更好的单元格体系:
  3. 音频、视频API:video radio
  4. 画布(Canvas) API
  5. 地理(Geolocation) API
  6. 网页存储(Web storage) API:localStorage,sessionStorage
  7. 拖拽释放(Drag and drop) API

13.CSS水平垂直居中的方法

  • position+margin
  • position+transform
  • flex布局

14.CSS3新增伪类有那些

www.zhihu.com/question/41…

15.清除浮动的方法

  1. 添加新的元素 、应用 clear:both;
  2. 父级div定义 overflow: hidden;
  3. 利用:after和:before来在元素内部插入两个元素块,从面达到清除浮动的效果。

16.css画三角形

  • width: 0;
  • height: 0;
  • border-left: 50px solid transparent;
  • border-right: 50px solid transparent;
  • border-bottom: 100px solid red;

17.0.5px的像素如何实现

transform

18.localstorage和sessionstorage的区别

  • LocalStorage:浏览器关闭之后数据依然可以保存下来,并可用于所有同源(相同的域名,协议和端口)窗口,永久存储,永不失效,除非手动删除;
  • sessionStorage:数据存储在窗口对象中,窗口关闭后对应的窗口对象消失,存储的数据也丢失,就是浏览器窗口关闭后就失效了。 作用域: sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面,localStorage在所有同源窗口中都是共享的。 sessionStorage都可以用Localstorage来代替。

19.watch跟computed的区别

  • watch中的函数是不需要调用的
  • computed内部的函数调用的时候不需要加()
  • watch 属性监听 监听属性的变化
  • computed:计算属性通过属性计算而得来的属性

20.屏幕设配的方法

  1. 百分比与固定高度布局方案
  2. 横向百分比 + 纵向高度固定
  3. 弹性盒子+高度固定布局
  4. rem布局方式
  5. 媒体查询改变根元素的字体大小

21.如何优化seo/对待页面做什么处理

  • 优化html标签
  • meta描述
  • css,js文件数量及大小的优化
  • 背景图片数量及大小的优化
  • 关于减少http请求数
  • 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作

22.在浏览器地址栏输入地址到页面渲染完成发生了什么

  1. 浏览器(客户端)进行地址解析
  2. 将解析出的域名进行dns解析
  3. 通过ip寻址和arp,找到目标(服务器)地址
  4. 进行tcp三次握手,建立tcp连接
  5. 浏览器发送数据,等待服务器响应
  6. 服务器处理请求,并对请求做出响应
  7. 浏览器收到服务器响应,得到html代码

23.关于vue的一些指令

  • v-for 可以做一些循环操作
  • v-if 是否显示影藏
  • v-show 是否显示影藏
  • v-bind 用于绑定属性的指令
  • v-html 可以解析出HTMl标签
  • v-on 是事件绑定机制。简写形式为@
  • v-model 双向数据绑定

24.GET和POST的区别

  • get请求是可以被缓存的,post不可以
  • post的安全性要比get的安全性高
  • get请求刷新浏览器或者回退是没有影响post回退是会重新提交数据请求
  • get请保留在浏览器历史记录中, post请求不会保留在浏览器历史记录中
  • get提交,请求的数据会附在URL之后,(就是把数据放置在HTTP协议头中), 以 ? 分割URL和数据传输,多个参数用 & 链接, post提交,把提交的数据放置在是HTM包的包体中,

25.原型链继承

prototype

26.什么是跨域

跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的

27.跨域解决方案

  1. 通过jsonp跨域
  2. document.domain + iframe跨域
  3. location.hash + iframe
  4. window.name + iframe跨域
  5. postMessage跨域
  6. 跨域资源共享(CORS)
  7. nginx代理跨域
  8. nodejs中间件代理跨域
  9. WebSocket协议跨域

28.说说let const var 的区别

  • et不支持预解析,也就是变量提升的区别
  • var可以重复定义同一个变量,但是let不可以
  • var定义的全局变量会挂载到window对象上,使用window可以访问,let定义的全局变量则不会挂载到window对象上
  • const是用来定义常量的,常量定义之后是不允许改变的。

29.父子间的传值

  • 父传子 prop
  • 子传父 $emit
  • 兄弟之间的传值

30.切换页面避免数据重新渲染

keep-alive

大致整理到这里啦啦啦啦 加油冲冲冲!!!