前端面试刷题优化

问个简单点的,z-index失效是怎么回事，同是定位元素

闭包都知道原理吧，用在哪些业务场景下

浅拷贝，深拷贝，这个面试常问，实现扁平化数组，递归实现深拷贝，冒泡排序，选择排序，多种方法实现去重，原型和原型链的区别，这些都是基础，不是很难

HTML

HTML语义化的作用

正确的标签做正确的事情。让页面看起来更加结构化。利于SEO

H5的新特性

• 语义化标签header，footer，nav，section

• 新特性的表单：time，email，date

• 新的媒体标签audio和video

• canvas画布

• 新的协议：websocket

• 本例离线存储localStorage，sessionStorage

localStorage和cookie的区别

• localStorage存储比cookie大

CSS

CSS盒模型

盒模型分为两种：

1. W3C标准盒模型，他的width和height只包含content，不包括border和padding

2. IE盒模型，他的width和height是包括了content和padding和border

那么有没有办法让其进行统一呢

1. 声明DOCTYPE
2. 使用CSS属性box-sizing:border-box

BFC

BFC（块级可视化上下文），规定了文档中盒子与盒子之间的关系

触发BFC的条件：

1. float不为none
2. position为absolute或者fixed
3. overflow不为visible

BFC的作用：

1. 解决margin塌陷的问题
2. 清除浮动

选择器

标签选择器，id选择器，类选择器，伪类选择器，兄弟选择器，后代选择器，属性选择器

CSS3有哪些新特性

• 新增各种CSS选择器
• 圆角border-radius
• 动画，transform
• 伪类：
  • first-of-type
  • last-of-type
  • only-of-type

relative和absolute的区别

relative是根据自身定位

absolute是根据带有定位的父元素进行定位，若父元都没有定位，则以body为准

Sass是什么

Sass是CSS的预处理语言，他能用来清晰的，结构化的描述文件样式，比普通CSS更加强大

Sass有什么功能

• 嵌套
• 定义变量
• 函数
• 计算
• 继承
• Mixin
• 颜色函数

flex，grid布局是什么

• flex布局就是我们称之为的弹性布局，他是以轴为主的布局方式

• gird布局就是我们称之为的网格布局，他是以行和列为主的布局方式

Javascript

闭包

闭包指的就是，有权访问其他函数内部变量的函数

闭包的作用

隐藏变量，延长作用域

原型链

原型链就是当我们去访问一个对象上的属性或者是方法的时候，如果该对象本身没有这个方法或者是属性，则他就会从他的原型链上找，一直找到Object对象

AJAX是用来做什么的

AJAX用来异步的请求数据的，做到页面不刷新也能跟新网页

AJAX有几种请求方式（追问）

• get：主要用于请求数据

• post：主要用于提交数据

• delete：主要用于删除服务器上的某些数据

• put：

• options：用来查看当前URL支持的请求方式

• head：用来请求HTTP头部

也就是说，如果是更新，并不会产生新的数据，新的数据会覆盖老的数据，用put，如果是创建，会产生新的数据，则用post

get和post有什么区别

1. get会把提交的数据放在url地址栏中，post提交数据会放在请求体内，会比get安全
2. Get传输的数据量小，主要是因为它受约于URL长度的限制，而Post可以传输大量的数据，所以我们在传文件的时候会用Post

this的指向

this指向的是事件的直接调用者

如果是在全局下调用this则指向的是window，如果是严格模式下，那么指向的是undefined

改变this的指向

1. 我们可以通过箭头函数的方式将this指向当前作用域

2. 我们可以通过new关键字来改变this的指向

3. 我们可以通过call，apply，bind三个方法来改变this的指向

call，apply，bind的区别

1. 当使用call，apply时会调用，bind则不会

2. apply第二个参数传入的是数组

兼容性问题

1. IE低版本要拿到事件的event对象需要通过window.event对象来获取

ES6有哪些新特性

• 箭头函数，函数参数的默认值
• 字符串模板
• promise
• 新定义变量的方法let，const
• 新增数组方法some，every
• 结构赋值
• 展开运算符
• 定义类的新关键字class

let和const和var的区别

• const定义是常量
• 没有变量提升

事件模型（事件流）

主要分为两种：

• 冒泡：冒泡是从被触发元素一直冒泡到根元素
• 捕获：捕获是从根元素一直触发到目标元素

如何解决跨域问题

通过JSONP跨域

通过CORS跨域，CORS跨域需要浏览器和服务器同时支持才可以

JSONP是如何做到跨域

1. 首先他会动态的创建一个script
2. 将script标签里的src属性指向与需要跨域的地址
3. 我们定义一个同样名字的回调函数
4. 从回调函数中获取相应的数据即可

节流防抖

防抖是为了防止事件一直触发

节流是以一个时间段为基准的

• 节流就是在一个时间内只能触发一次，如果这段时间内多次触发函数，则只生效一次

• 防抖就是在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

  • 也就是说多次触发以最后一次为准

应用：百度搜索框

移动端

移动端你们一般采用什么布局？移动端设计稿是多大的尺寸？

• 定宽布局

• 一般移动端设计稿是640或者750的尺寸

移动端的适配

1. 我们可以通过rem来作为单位进行布局
   • 1rem = HTML标签下font-size的大小
   • 使用rem可以配合一个第三方的库来进行适配flexible.js
2. 我们可以通过百分比布局+CSS3中的媒体查询功能来进行适配

rem和em的区别

• em是相对于父元素的font-size来决定的

• rem是由html标签的font-size来决定的

为什么会有300ms的延迟

移动端怎么固定横屏显示？

检测手机竖屏的时候，元素给元素添加90deg的旋转

检测手机横屏的时候，元素给元素的旋转再改为0

Jquery

Vue

Vue第一次渲染会触发哪些生命周期

• beforeCreate
• created
• beforeMount
• mounted

Vue中DOM渲染是在那个钩子就已经完成了

• beforeMount：在这一步的时候模板已经编译好，但是害没有挂载到页面上
• mounted：这一步才将模板挂载到页面上，才能开始操作DOM

这题的陷阱，两个都给他答上即可

Vue的生命周期有哪些

• beforeCreate

• created

• beforeMount：在这一步的时候模板已经编译好，但是害没有挂载到页面上

• mounted：这一步才将模板挂载到页面上，才能开始操作DOM

• beforeUpdate

• updated

• beforeDestory

• destoryed

Vue中computed和watch

• computed是是计算属性，主要就是对数据的一些过滤和包装

• watch是对数据监听，数据发生变化触发相对应的事件

Vue中传递参数

• 父组件向子组件传递参数，在子组件以一个属性绑定进去就可以了

• 父组件绑定一个方法，子组件通过this.$emit来向父组件从传值

• 兄弟组件传值

v-if和v-show的区别

• v-show是控制元素上的display属性来做到隐藏和显示
• v-if是把元素从DOM树里删除和添加做到的显示和隐藏

如果一个元素需要频繁的切换，那么就是用v-show

nextTtck的作用

就是把该回调函数中，放到下一次DOM更新时调用。

如果想在created生命周期中操作DOM，那么久可以放在该函数（不推荐）

Vue如何让CSS只在当前文件生效

可以通过Vue文件中的style标签添加scoped属性

Vuex是干嘛的，有哪些主要对象

Vuex使用来对vue项目进行统一的数据管理

Vuex是Vue的

• state：存放数据的
• Getter：Vuex里的计算属性
• Mutation：修改状态的
• Action：异步的修改状态
• Module：模块化