前端面试题

HTML,CSS
2.请简述css盒子模型
一个css盒子从外到内可以分成四个部分：margin（外边距），border（边框），padding（内边距），content（内容）
盒子真正的宽应该是：内容宽度+左右填充+左右边距+左右边框
盒子真正的高应该是：内容高度+上下填充+上下边距+上下边框

4.HTML5新增的内容有哪些

新增语义化标签
新增表单类型
表单元素
表单属性
表单事件
多媒体标签

5.Html5 新增的语义化标签有哪些

语义化标签优点：
1.提升可访问性 2.seo 3.结构清晰，利于维护

Header页面头部
main页面主要内容
footer页面底部
Nav导航栏
aside侧边栏
article加载页面一块独立内容
Section相当于div figure加载独立内容（上图下字） figcaption figure的标题
Hgroup标题组合标签 mark高亮显示 dialog 加载对话框标签（必须配合open属性）
Embed加载插件的标签 video加载视频 audio加载音频（支持格式ogg，mp3，wav）

8.定位的属性值有何区别

Position有四个属性值：relative absolute fixed static
Relative相对定位 不脱离文档流，相对于自身定位
Absolute 绝对定位，脱离文档流 相对于父级定位
Fixed 固定定位，脱离文档流，相对于浏览器窗口定位
Static 默认值，元素出现在正常的流中

javascript

数据类型

面试官：JavaScript中什么是基本数据类型什么是引用数据类型？以及各个数据类型是如何存储的？⭐⭐⭐⭐⭐

答：
基本数据类型有

Number
String
Boolean
Null
Undefined
Symbol(ES6新增数据类型)
bigInt
引用数据类型统称为Object类型，细分的话有

Object
Array
Date
Function
RegExp
基本数据类型的数据直接存储在栈中；而引用数据类型的数据存储在堆中，每个对象在堆中有一个引用地址。引用类型在栈中会保存他的引用地址，以便快速查找到堆内存中的对象。

顺便提一句，栈内存是自动分配内存的。而堆内存是动态分配内存的，不会自动释放。所以每次使用完对象的时候都要把它设置为null，从而减少无用内存的消耗

什么是DOM事件流？什么是事件委托⭐⭐⭐⭐⭐

DOM事件流
分为三个阶段
捕获阶段
目标阶段
冒泡阶段
在addeventListener()的第三个参数(useCapture)设为true，就会在捕获阶段运行，默认是false冒泡
事件委托
利用冒泡原理(子向父一层层穿透)，把事件绑定到父元素中，以实现事件委托

事件模型
事件捕获：当某个元素触发某个事件（如onclick），顶层对象document就会发出一个事件流，随着DOM树的节点向目标元素节点流去，直到到达事件真正发生的目标元素。在这个过程中，事件相应的监听函数是不会被触发的。

事件目标：当到达目标元素之后，执行目标元素该事件相应的处理函数。如果没有绑定监听函数，那就不执行。

事件冒泡：从目标元素开始，往顶层元素传播。途中如果有节点绑定了相应的事件处理函数，这些函数都会被一次触发。
　　
事件委托：通过监听一个父元素，来给不同的子元素绑定事件，减少监听次数，从而提升速度。

面试官：判断数据类型有几种方法⭐⭐⭐⭐⭐

答：
typeof
缺点：typeof null的值为Object，无法分辨是null还是Object
instanceof
缺点：只能判断对象是否存在于目标对象的原型链上
constructor
Object.prototype.toString.call()

一种最好的基本类型检测方式 Object.prototype.toString.call() ;它可以区分 null 、 string 、

boolean 、 number 、 undefined 、 array 、 function 、 object 、 date 、 math 数据类型。

缺点：不能细分为谁谁的实例

面试官：什么是作用域，什么是作用域链？⭐⭐⭐⭐

答：

规定变量和函数的可使用范围称作作用域
每个函数都有一个作用域链，查找变量或者函数时，需要从局部作用域到全局作用域依次查找，这些作用域的集合称作作用域链。

null和undefined的区别？

null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。

当声明的变量还未被初始化时，变量的默认值为undefined。
null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象。

undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。

面试官：HTTP的结构⭐⭐⭐⭐

请求行 请求头 空行 请求体
请求行包括 http版本号，url，请求方式
响应行包括版本号，状态码，原因

跨域问题

可以参考https://segmentfault.com/a/1190000011145364，写的非常好
一、 通过jsonp跨域
通常为了减轻web服务器的负载，我们把js、css，img等静态资源分离到另一台独立域名的服务器上，在html页面中再通过相应的标签从不同域名下加载静态资源，而被浏览器允许，基于此原理，我们可以通过动态创建script，再请求一个带参网址实现跨域通信。

六、 跨域资源共享（CORS）
后端进行解决，前端不需要解决
2、 vue框架的跨域（1次跨域）
代理接口跨域，webpack.config.js部分配置：

module.exports = {
    entry: {},
    module: {},
    ...
    devServer: {
        historyApiFallback: true,
        proxy: [{
            context: '/login',
            target: 'http://www.domain2.com:8080',  // 代理跨域目标接口
            changeOrigin: true,
            secure: false,  // 当代理某些https服务报错时用
            cookieDomainRewrite: 'www.domain1.com'  // 可以为false，表示不修改
        }],
        noInfo: true
    }
}

常见的行内元素和块级元素都有哪些？⭐⭐⭐⭐⭐

行内元素 inline
不能设置宽高，不能自动换行
span、input、img、textarea、label、select
块级元素block
可以设置宽高，会自动换行
p、h1/h2/h3/h4/h5、div、ul、li、table
inline-block
可以设置宽高，会自动换行

HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。首先需要说明的是，这三者是可以互相转换的，使用display属性能够将三者任意转换：
　　(1)display:inline;转换为行内元素
　　(2)display:block;转换为块状元素
　　(3)display:inline-block;转换为行内块状元素

行内元素特征：

(1)设置宽高无效
(2)对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间
(3)不会自动进行换行

块状元素特征：

div，其他如p、nav、aside、header、footer、section、article、ul-li、address等等
(1)能够识别宽高
(2)margin和padding的上下左右均对其有效
(3)可以自动换行
(4)多个块状元素标签写在一起，默认排列方式为从上至下

行内块状元素特征：

(1)不自动换行
(2)能够识别宽高
(3)默认排列方式为从左到右

JavaScript

节流
节流可以控制事件触发的频率，节流就跟小水管一样，如果不加节流的话，水就会哗啦啦啦啦啦啦的流出来，但是一旦加了节流阀，你就可以自己控制水的流速了，加了节流后水可以从哗啦啦啦变成滴答滴答滴答，放到我们的函数事件里面说就是可以让事件触发变慢，比如说事件触发可以让它在每一秒内只触发一次，可以提高性能。

function throttle(fn, wait) {
    let prev = +new Date()
    return function() {
        let now = +new Date()
        /*当下一次事件触发的时间和初始事件触发的时间的差值大于
			等待时间时才触发新事件 */
        if(now - prev > wait) {
            fn.apply(this, arguments)
        }
        //重置初始触发时间
        prev = +new Date()
    }
}

防抖
防抖就是可以限制事件在一定时间内不能多次触发，比如说你疯狂按点击按钮，一顿操作猛如虎，不加防抖的话它也会跟着你疯起来，疯狂执行触发的方法。但是一旦加了防抖，无论你点击多少次，他都只会在你最后一次点击的时候才执行。 防抖常用于搜索框或滚动条等的监听事件处理，可以提高性能。

function debounce(fn, wait = 50) {
    //初始化一个定时器
    let timer
    return function() {
        //如果timer存在就将其清除
        if(timer) {
            clearTimeout(timer)
        }
        //重置timer
        timer = setTimeout(() => {
            //将入参绑定给调用对象
            fn.apply(this, arguments)
        }, wait)
    }
}

Webpack

webpack常用的几个对象及解释⭐⭐⭐⭐

entry 入口文件
output 输出文件
一般配合node的path模块使用

// 入口文件
    entry:"./src/index.js",
    output:{
        // 输出文件名称
        filename:"bundle.js",
        // 输出的路径(绝对路径)
        path:path.resolve(__dirname,"dist") //利用node模块的path 绝对路径
    },
    // 设置模式
    mode:"development"

mode 设计模式
module(loader)
里面有一个rules数组对某种格式的文件进行转换处理(转换规则)
use数组解析顺序是从下到上逆序执行的

module:{
       // 对某种格式的文件进行转换处理(转换规则)
       rules:[
           {
               // 用到正则表达式
               test:/\.css$/,      //后缀名为css格式的文件
               use:[
                   // use数组解析顺序是从下到上逆序执行的
                   // 先用css-loader 再用style-loader
                   // 将js的样式内容插入到style标签里
                   "style-loader",
                   // 将css文件转换为js
                   "css-loader"
               ]
           }
       ]
   }
 
// -----------------------------------------------------vue的
module.exports={
    module:{
        rules:[
            {
                test: /\.vue$/,
                use:["vue-loader"]
            }
        ]
    }
}

resolve
配置路径规则
alias 别名

module.exports= {
	resolve:{
		//如果导入的时候不想写后缀名可以在resolve中定义extensions
		extensions:['.js','.css','.vue']
		//alias:别名
		alias:{
			//导入以vue结尾的文件时，会去寻找vue.esm.js文件
			'vue$':"vue/dist/vue.esm.js"
		}
	}
}

loader和plugin的区别是什么？⭐⭐⭐

loader
loader是用来解析非js文件的，因为Webpack原生只能解析js文件，如果想把那些文件一并打包的话，就需要用到loader，loader使webpack具有了解析非js文件的能力
plugin
用来给webpack扩展功能的，可以加载许多插件

请写出饿了么5个组件

<el-alert>弹窗</el-alert>
<el-dialog>对话</el-dialog>
<el-calender>日历表</el-calender>
<el-progress:percentage="0">进度条<el-progrees>
<el-switch>开关</el-switch>

Vue

vue的双向绑定：

数据劫持： vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者，触发相应的监听回调

阐述一下你所理解的MVVM响应式原理⭐⭐⭐⭐⭐

vue是采用数据劫持配合发布者-订阅者的模式的方式，通过Object.defineProperty()来劫持各个属性的getter和setter，在数据变动时，发布消息给依赖收集器(dep中的subs)，去通知(notify)观察者，做出对应的回调函数，去更新视图
MVVM作为绑定的入口，整合Observer,Compile和Watcher三者，通过Observer来监听model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer，Compile之间的通信桥路，达到数据变化=>视图更新；视图交互变化=>数据model变更的双向绑定效果。

面试官：说说vue的生命周期⭐⭐⭐⭐⭐

beforeCreate
创建之前，此时还没有data和Method
Created
创建完成，此时data和Method可以使用了
在Created之后beforeMount之前如果没有el选项的话那么此时生命周期结束，停止编译，如果有则继续
beforeMount
在渲染之前
mounted
页面已经渲染完成，并且vm实例中已经添加完$el了，已经替换掉那些DOM元素了(双括号中的变量)，这个时候可以操作DOM了(但是是获取不了元素的高度等属性的，如果想要获取，需要使用nextTick())
beforeUpdate
data改变后，对应的组件重新渲染之前
updated
data改变后，对应的组件重新渲染完成
beforeDestory
在实例销毁之前，此时实例仍然可以使用
destoryed
实例销毁后

Vue中的nextTick⭐⭐⭐⭐⭐

nextTick
解释
nextTick：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
应用
想要在Vue生命周期函数中的created()操作DOM可以使用Vue.nextTick()回调函数
在数据改变后要执行的操作，而这个操作需要等数据改变后而改变DOM结构的时候才进行操作，需要用到nextTick

面试官：Vue优化方式⭐⭐⭐⭐⭐

v-if 和v-show
使用Object.freeze()方式冻结data中的属性，从而阻止数据劫持
组件销毁的时候会断开所有与实例联系，但是除了addEventListener，所以当一个组件销毁的时候需要手动去removeEventListener
图片懒加载
路由懒加载
为减少重新渲染和创建dom节点的时间，采用虚拟dom

面试官：Vue-router的模式⭐⭐⭐⭐⭐

hash模式
利用onhashchange事件实现前端路由，利用url中的hash来模拟一个hash，以保证url改变时，页面不会重新加载。
history模式
利用pushstate和replacestate来将url替换但不刷新，但是有一个致命点就是，一旦刷新的话，就会可能404，因为没有当前的真正路径，要想解决这一问题需要后端配合，将不存在的路径重定向到入口文件。

Vuex里面的属性有：

state
存储数据的
获取数据最好推荐使用getters
硬要使用的话可以用MapState， 先引用，放在compute中…mapState([‘方法名’,‘方法名’])
getters
获取数据的
this.$store.getters.xxx也可使用mapGetters先引用，放在compute中，...mapGetters({[}^{\prime }方法{名}^{\prime }{,}^{\prime }方法{名}^{\prime }])mutations同步操作数据的this.$store.commit(“方法名”,数据)
也可使用mapMutations ，使用方法和以上一样
actions
异步操作数据的
this.$store.dispatch(“方法名”,数据)
也可使用mapActions ，使用方法和以上一样
modules
板块，里面可以放多个vuex

Vue-router有哪几种钩子函数⭐⭐⭐⭐⭐

beforeEach
参数有
to(Route路由对象)
from(Route路由对象)
next(function函数) 一定要调用才能进行下一步
afterEach
beforeRouterLeave

Vue的Key的作用 ⭐⭐⭐⭐

key
key主要用在虚拟Dom算法中，每个虚拟节点VNode有一个唯一标识Key，通过对比新旧节点的key来判断节点是否改变，用key就可以大大提高渲染效率，这个key类似于缓存中的etag。

29、说下vue组件之间的通信？

答：
非父子组件间通信，Vue 有提供 Vuex，以状态共享方式来实现同信，对于这一点，应该注意考虑平衡，从整体设计角度去考量，确保引入她的必要。

父传子: this.$refs.xxx 子传父: this.$parent.xxx

还可以通过$emit方法出发一个消息，然后$on接收这个消息

3、vue-router有哪几种导航钩子？

答：三种，一种是全局导航钩子：router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。第二种：组件内的钩子；第三种：单独路由独享组件

微信小程序
微信小程序

uni-app

promise面试题

一个 Promise 对象有三个状态，并且状态一旦改变，便不能再被更改为其他状态。
pending，异步任务正在进行。
resolved (也可以叫fulfilled)，异步任务执行成功。
rejected，异步任务执行失败。