前端面试题汇总

牛客前端工程师求职经验

一些基础面试题：

1、cookies，sessionStorage和 localStorage的区别？
cookie是网站为了标示用户身份而储存在用户本地终端上的数据；cookie数据始终在同源的http请求中携带（即使不需要），也会在浏览器和服务器间来回传递。
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存；
存储大小：
cookie数据大小不能超过4ksessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
有效时间：
localStorage存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
sessionStorage数据在当前浏览器窗口关闭后自动删除；
cookie设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

2、垂直居中有哪些方法？

• 单行文本的话可以使用height和line-height设置同一高度。
• position+margin：
  设置父元素:position: relative;子元素height: 100px;position:absolute;top: 50%; margin: -50px 0 0 0;（定高）
• position+transform：
  设置父元素position:relative,子元素：position: absolute; top: 50%;transform: translate(0, -50%);（不定高）
• 百搭flex布局(ie10+)
  设置父元素display:flex;align-items: center;（不定高）

3、水平居中的方法有哪些？
元素为行内元素，设置父元素text-align:center
如果元素宽度固定，可以设置左右margin为auto;
如果元素为绝对定位，设置父元素position为relative，元素设left:0;right:0;margin:auto;
使用flex-box布局，指定justify-content属性为center
display设置为tabel-ceil

4、HTML全局属性(global attribute)有哪些？
class:为元素设置类标识
data-*: 为元素增加自定义属性
draggable: 设置元素是否可拖拽
id: 元素id，文档内唯一
lang: 元素内容的的语言
style: 行内css样式
title: 鼠标在上方时提示信息

5、简述制作一个网页的工作流程
内容分析：分清展现在网络中内容的层次和逻辑关系
结构设计：写出合理的html结构代码
布局设计：使用html+css进行布局
样式设计：首先要使用reset.css
交互设计：鼠标特效
行为设计：js代码，ajax页面行为和从服务器获取数据
测试兼容性；优化性能。

6、position有哪些值？有什么作用？
static。默认值，不脱离文档流，top，right，bottom，left等属性不生效。
relative。不脱离文档流，依据自身位置进行偏离，当子元素设置absolute，将依据它进行偏离。
absolute。脱离文档流，依据top，right，bottom，left等属性在正常文档流中偏移位置。
fixed。通过浏览器窗口进行定位，出现滚动条的时候，不会随之滚动。

7．减少页面加载时间的方法有哪些？
1.减少HTTP请求；
2.合并压缩Js/css文件；
3.使用缓存manifest；
4.服务器端开启gzip；
5.使用CDN，用户可以就近获取所需要的资源，访问速度有保障，稳定性也有保障
6.外部JS和CSS放底下
7.尽可能少的操作DOM，某些需要重复操作的DOM可以放变量里

8. margin和padding分别适合什么场景使用？
margin是用来隔开元素与元素的间距；需要在border外侧添加空白;空白处不需要背景色;上下相连的两个盒子之间的空白，需要相互抵消时。
padding是用来隔开元素与内容的间隔;需要在border内侧添加空白;空白处需要背景颜色;上下相连的两个盒子的空白，希望为两者之和。

9、v-if 和 v-show 有什么区别，它们的应用场景是什么？
v-show 仅仅控制元素的显示方式，将 display 属性在 block 和 none 来回切换；而v-if会控制这个 DOM 节点的存在与否。
当我们需要经常切换某个元素的显示/隐藏时，使用v-show会更加节省性能上的开销；当只需要一次显示或隐藏时，使用v-if更加合理。

10、单页面应用和多页面应用区别及优缺点
单页面应用（SPA），是指只有一个主页面的应用，浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候，还是会分开写（页面片段），然后在交互的时候由路由程序动态载入，单页面的页面跳转，仅刷新局部资源。多应用于pc端。
多页面（MPA），就是指一个应用中有多个页面，页面跳转时是整页刷新
单页面的优点：
用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小；前后端分离；页面效果会比较炫酷（比如切换页面内容时的专场动画）。
单页面缺点：
不利于seo；导航不可用，如果一定要导航需要自行实现前进、后退。（由于是单页面不能用浏览器的前进后退功能，所以需要自己建立堆栈管理）；初次加载时耗时多；页面复杂度提高很多。

11、什么是js的冒泡？Vue中如何阻止冒泡事件？
js冒泡概念：当父元素内多级子元素绑定了同一个事件，js会依次从内往外或者从外往内执行每个元素的该事件，从而引发冒泡。
js解决冒泡：event.stopPropagation()
vue解决冒泡： 事件.stop,例如：@click.stop="" ,@mouseover.stop=""

12、Vue组件间通信的技术有哪些？
父组件与子组件传值
父组件传给子组件：子组件通过props方法接受数据;
子组件传给父组件：$emit方法传递参数
非父子组件间的数据传递，兄弟组件传值用eventBus，就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。也可使用vuex

promise和async/await的区别
async/await是异步代码的新方式，以前的方法有回调函数和Promise。
async/await是基于Promise实现的，它不能用于普通的回填函数。
async/await与Promise一样，是非阻塞的。
async/await使得异步代码看起来像同步代码，这正是它的魔力所在之处。
async/await的函数前面多了一个async关键字。await关键字只能用于async定于的函数内。async函数会隐式地返回一个Promise,该promise的resolve值就是return的值。其中await有限制(不允许出现在箭头函数中；不允许出现在同步函数声明中；不允许出现在同步函数表达式中;如果在同步函数中使用await就会抛出SyntaxError。

promise工作原理
Promise中的三种状态：pending（进行中）、resoved（成功后）、rejected（失败后）
Promise.prototype.then ： 当promise的状态返回resove时，则调用then（）方法
Promise.prototype.catch ：当promise的状态返回reject时，则调用catch（）方法

vue生命周期
Vue 实例从创建到销毁的过程，就是生命周期。 从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。

如何封装一个组件，比如现在要封装一个模态框怎么做
模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。
将html标签语句放置在了body体内，而将组件封装成了一个js文件，当调用时，去调用这个js文件的方法，然后采用插入节点的方式，将弹窗呈现。

JS数据类型
值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。
引用数据类型：对象(Object)、数组(Array)、函数(Function)。

事件循环
Event Loop（事件循环）：js引擎遇到一个异步事件后并不会一直等待其返回结果，而是会将这个事件挂起，继续执行执行栈中的其他任务。当一个异步事件返回结果后，js会将这个事件加入与当前执行栈不同的另一个队列，我们称之为事件队列。被放入事件队列不会立刻执行其回调，而是等待当前执行栈中的所有任务都执行完毕， 主线程处于闲置状态时，主线程会去查找事件队列是否有任务。如果有，那么主线程会从中取出排在第一位的事件，并把这个事件对应的回调放入执行栈中，然后执行其中的同步代码…，如此反复，这样就形成了一个无限的循环。这就是这个过程被称为“事件循环

new构造函数时，JS做了什么事
创建一个新的对象
将构造函数的作用域赋给新对象
执行构造函数中的代码，为这个新对象添加属性
将新建的对象作为返回值返回

用过哪些数组的方法
toString() 把数组转换为数组值（逗号分隔）的字符串
join() 方法也可将所有数组元素结合为一个字符串，它的行为类似 toString()，但是您还可以规定分隔符
Popping 和 Pushing 指的是：从数组弹出项目，或向数组推入项目。
pop() 方法从数组中删除最后一个元素
push() 方法（在数组结尾处）向数组添加一个新的元素
…
js数组方法

forEach和map区别
forEach () 方法不会返回执行结果，而是 undefined 。 也就是说， forEach () 会修改原来的数组。 而 map () 方法会得到一个新的数组并返回。

用过哪些git命令
git remote add origin git@github.com:yeszao/dofiler.git # 配置远程git版本库
git pull origin master # 下载代码及快速合并
git push origin master # 上传代码及快速合并
git fetch origin # 从远程库获取代码
git branch # 显示所有分支
git checkout master # 切换到master分支
git checkout -b dev # 创建并切换到dev分支
git commit -m “first version” # 提交
git status # 查看状态
git log # 查看提交历史
git config --global core.editor vim # 设置默认编辑器为vim（git默认用nano）
git config core.ignorecase false # 设置大小写敏感
git config --global user.name “YOUR NAME” # 设置用户名
git config --global user.email “YOUR EMAIL ADDRESS” # 设置邮箱
…
git命令