自己的一些面试题，从十月份中旬差不多，面试官问我的一些问题，也有些问题我也是没写，你们多多补充哈~哈哈哈哈
1. ajax的数据请求解析（js的数据对接）
2. ajax的状态
·200 表示请求成功
·304 自从上次请求过，请求页面未修改过
·401 请求要求身份验证
·403 请求失败，请求的资源未被服务器发现
·500 服务器代码出现错误
·504 超时
3. 对前端的化有什么好的优化(性能的优化)
-
- 减少http的请求
- 避免空的src和href
- 使用gzip压缩内容
- 把css放到顶部 js放到底部
- 避免使用css
- 精简css和js
4. 界面的优化（代码方面）
-
- 字符串的拼接尽量不用使用join
- 少使用全局变量
5. 图片的预加载
https://www.cnblogs.com/v10258/p/3376455.html
使用css+js进行图片的预加载，在css中设置background背景图
6. vue的生命周期
-
- beforeCreate
- Created
- beforeMount
- Mounted
- beforeUpdate
- Updated
- beforeDestory
- Destoryed
- deactivated
- activated
7. 怎么解决跨域
-
- 第一个：Jsonp解决跨域
- 动态创建script标签，src，回调函数
- jsonp只可以使用get不可以使用post请求
- 第二个： CORS
- 是跨域资源共享，根据php设置请求头就可以
8. es6中的模板字符串
-
- 用反引号（``）标识，用${}将变量括起来
- 使用模板字符串标识多行字符串，所有的空格和缩进都会被输出
- 模板字符串可以使用变量或者不是用变量也可以
9. es6中怎么定义类 class
有两种声明方式
-
- 类声明
Class personal{}
-
- 类表达式
var personal = Class {}
10. 用ajax怎么解决异步的问题
11. vue的全家桶
项目构建工具 路由 状态管理 http请求工具
vue vue-router vuex axios
12. h5的存储和区别
（sessionStorage，localStorage, cookie）
13. 前端的存储还有哪些
离线缓存 application cache
14. SPA PWA
-
- SPA 单页面应用
15. vue中的修饰符
.native 用在组件上的 .trim 去除空格 .stop/.prevent 阻止事件冒泡/阻止默认行为 .once 表示绑定事件只会被触发一次
16. 组件，通用型的组件
父传子 props 可以使用对象/数组
子传父 $emit
同级传参 $bus.$emit
17. vue有哪些不足，SEO，vue的服务端渲染
18. vuex， maxmin属性方法是一样的，用它就可以。
19. 做项目的时候遇到的问题
20. vue中不用自动建立的router，手动怎么弄
同36
21. vue的自定义事件
html:
<div id=’button-event’>
<button-counter></button-counter>
</div>
js:
Vue.component(‘button-counter’,{
Data:function() {},
Methods:function(){}
})
new Vue({
el:#button-event,
data: {}
})
22. js的面向对象的三个特性
23. 什么是面向对象
24. vue打包 npm build 一般情况下，开发环境，测试环境，正式环境，接口地址不一样，怎么在编译完会是开发环境，测试环境，正式环境。
这三个问题你们就自己个搜吧，
25. mvvm和mvc的区别
- 与任何语言是没有关系的, 是一种设计模式
- mvvm ： m –> model v –> view vm - > viewmodel 通信是双向
- mvc : m –> model v - > view c - > control 单向传输
- mvvm解决了mvc的大量dom操作页面渲染性能降低，加载速度变慢，影响用户体验。
26. token怎么传输的
- post
- 获取到的token值放入data中
这跟问题面试官问我，是我在做项目中有使用token
27. vue双向数据绑定的原理
- 数据劫持结合发布者订阅者模式实现的
- object.defineProperty 是控制对象属性的一些操作 属性有 get set
28. pc端的兼容问题
1. 在IE9下如果图片加a标签会有边框 解决： img{border: none}
2. rgba不支持ie8 解决: 换opacity
3. display: inline-block IE6不支持 解决：display:inline
29. vue-router怎么使用的
- 下载 vue-router
- 注册 Vue.use(router)
- export default new Router
- {path: ‘’”, component: “”}
- <router-linke ：to></router-linke> <router-view></router-view>
30. swiper插件用的时候有哪些问题
- 必须指定下载swiper插件的版本号，不然不显示分页器
- 要想有分页器显示，必须写solt=
- swiper虽然有自己的高度，但还是需要手动设置
31. vuex怎么使用的
什么是Vuex？
官方说法：Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
个人理解：Vuex是用来管理组件之间通信的一个插件
- 下载vuex –save
- 引入vuex Vue.use(vuex) import
- 建立新的文件夹和文件
const store = new Vuex.store({
state:{} // 存储数据，像data一样
mutations: {} // 递交更改 对state中属性数据进行更改
actions:{} // 递交异步更改，通过调用mutations实现对数据的更改
})
32. 获取到的状态怎么存储的
cookie， localStorage， sessionStorage
localStorage， sessionStorage 不会把数据发送给服务器，仅保存在本地
cookie 在浏览器请求头活ajax请求头中发送cookie内容
33. 打包的时候有的时候js文件太大，怎么解决
1.开启gzip，将文件打包成gzip格式
2. 按需加载js http请求
3. 将图片懒加载
34. for in 和for of的区别
-
- for in也可以遍历数组，但是会出现问题，使用for in可以遍历出所有数组可枚举属性，包括原型，所以还是尽可能的遍历对象而不是数组 遍历的是数组的索引
- for of遍历的只是数组内的元素，不会遍历原型 遍历的是数组的元素值
35. vuex是什么，在什么情况下为用到它
-
- vuex是状态管理，采用集中式存储管理应用的所有组件的状态，个人理解是管理组件之间通信的一个插件
36. keepAlive缓存实现的机制是什么
37. keepAlive的数据是存到什么地方的
38. localStorage怎么失效
像这些问题都很简单吧，自己组织语言吧，打字是在太累
39. h5的存储都适用哪些场景，都分别能用来做什么事情
使用场景：
-
- localStorage用来统计页面的访问次数
- sessionStorage 用来统计当前页面元素的点击次数
- cookie一般存储用户名密码相关信息，一般使用escape转移编码后储存
做什么事情：
·localStorage， sessionStorage 不会把数据发送给服务器，仅保存在本地
cookie 在浏览器请求头活ajax请求头中发送cookie内容
40. 怎么优化页面的加载速度，提升页面效率，性能
优化页面的加载速度：
-
- 启用gzip压缩
- 压缩css和js
- 把css文件放在页面顶部，js放在放在底部
- 使用雪碧图整合图像
提升页面效率和性能：
-
- 减少http请求 按需加载
- 避免css表达式
41. iframe
42. 遇到过跨域的问题么，什么情况下浏览器会禁止你有一些操作，用在什么标签，什么场景会遇到跨域
跨域：jsonp iframe cors 反向代理
什么场景会遇到跨域：
-
- 域名不同
- 二级域名相同，子域名不同 www.wuhan,yangwei.com www.shenzheng.yangwei.com
- 端口不同，协议不同
43. 响应式
-
- 响应式布局就是网页能够响应各种个样不同分辨率大小的设备，能够将网页很好的呈现给用户
44. js的闭包可以用来做什么事情，能用来干什么，解决什么问题
用来做什么事情：
-
- 匿名自执行函数
- 缓存
- 实现封装函数
解决什么问题：
-
- 一个变量长期存储在内存当中不会被垃圾机制回收
- 避免全局污染
- 安全性提高
45. http请求中post和get的区别
·get是从服务器上获取数据 放在url后面 get有大小的限制
·post是向服务器传送数据 放在虚拟载体里面
·安全问题
46. 简述一下es6
-
- 模版字面量 `${}` ``反引号表示，用${}将变量括起来
- 扩展运算符 …
- 箭头函数 =>
- 数组的去重 set
- 异步编程 promise
三种状态：进行中pending 已成功fulfilled resolved 已失败 rejected
promise也有缺点：无法取消，一旦新建它就会立即执行，无法中途取消，promise内部抛出的错误，不会影响到外部。
- const let 区别
const不可以不初始化变量 不可以重复定义，定义常量
let 是定义变量，用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。
47. 移动端遇到较多的兼容性问题
-
- 评论框
- 文本框圆角bug
- 动态获取中间内容
48. element-ui
49. vue的多页面，多页面的访问，配置（多页面访问单页面需要改写什么文件）
-
- https://www.jb51.net/article/124124.htm
- 下载glob，
- 修改build下的文件webpack.back.conf.js
50. history，hash，上线之后非history模式打包之后没办法正常访问的（JAVA后台语言）
·使用非history模式打包之后是无法正常访问的，所以都会使用hash模式就会避免这个问题
51. 什么是伪数组
·无法直接调用数组方法，但仍可用遍历数组的方法遍历
52. transform 变形 rotate scale skew
translate 移动 translatex translatey translatez
transiton 过渡 duration timing
53. Vue-router中的钩子函数(导航守卫)
可分为三类:
·beforeEach 有三个删除参数 to from next
Router.beforeEach((to,from,next))
·afterEach 不用传next()函数 单个路由里面的钩子
{
Path:’’,
Component:,
beforeEnter:(to,from,next)=>{}
}
·组件路由
BeforeRouter , beforeRouterUpdate, beforeRouteLeave
54. this.$route 和this.$router的区别
·$route是路由信息对象，包含了path，params，query，hash，fullPath，matched，name这些路由信息参数
·$router是路由实例对象包含了路由的一下跳转方法，钩子函数
55. Es6的模块化
·每一个模块只加载一次，每一个js只执行一次，如果下次再去加载同目录下同文件直接读取。一个模块就是一个单例，或者说是一个对象；
·每一个模块内声明的变量都是局部变量，不会污染全局作用域
·模块内部的变量或者函数可以通过export导出；
·一个模块可以导入别的模块
Export default {}
Export const sqrt = Math.sqrt
Export function square () {}
56. Try catch 是干什么的
Try catch是异常捕获
try{
有可能出现错误的代码写在这里
}catch{
出错后的处理
}
如果try中的代码没有出错，则程序正常运行try中的内容后，不会执行catch中的内容。
如果try中的代码一旦出现错误，程序立即跳入catch中去执行代码，那么try中出错代码后的所有代码就不会执行。
57. 数组都有哪些数组和方法，es6有哪些新增的数组方法
·Shift() 删除数组的开头 unshift() 添加数组的开头
Slice 开始到结束截取数组 splice() 通过删除/添加现有元素更改数组内容
Sort() 对数组进行排序，并返回数组
Reverse 数组中元素位置颠倒
58. es6中的数组方法
Foreach() 改变数组本身
Map() 不会改变原数组
Filter() 不会改变原数组
59. Es5和es6新增的数据类型
Symbol Number Null Underfined Boolean
60. 闭包的优缺点
·缺点：不会回收垃圾机制回收，造成内存溢出
·优点：一个变量长期驻扎在内存中不会被垃圾回收机制回收
避免全局的污染
安全性提高
61. 打包工具webpack的优化
https://blog.csdn.net/Amosssss/article/details/76474426
62. Less定义变量怎么定义，为什么会用less
·定义变量用@
·Less中的写法：
@ly_with:100px;
.box{ @ly_width}
·编译后的css中显示
.box{widht:100px}
·项目足够大，起码几十张页面，有公共的ui组件
63. 怎么引用相同的css到另一个组件中
https://blog.csdn.net/qq_19865749/article/details/52523178
extend
64. 怎么动态实现路由
https://segmentfault.com/a/1190000015419713
动态实现生成侧边栏
65. https和http的区别
http 是超文本传输协议，具有安全性的ssl加密传输协议。
https需要到ca申请证书，一般免费证书比较少，需要一定费用。
http的连接很简单，是无状态的；https协议是由ssl+http协议构建可进行加密传输，比http安全
66. http中的属性都有哪些并说出是什么
Url: 地址
Method：请求方式
Status code：状态码
Content-type:application/x-www-form-urlencoded/ multipart/form-data
Cookie
67. Display:inline-block和display:block的区别
display:block 转换成块元素，换行；
Display：inline-block；内联块元素，既不换行又可以使用块元素所拥有的属性
68. Js中的原型链
prototype
69. Display后面都有哪些参数
Flex block inline-block inline
70. 说一下异步和同步
一种是同步任务（synchronous），另一种是异步任务（asynchronous）。同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；异步任务指的是，不进入主线程、而进入"任务队列"（task queue）的任务，只有等主线程任务执行完毕，"任务队列"开始通知主线程，请求执行任务，该任务才会进入主线程执行
71. Let和var的区别
let的好处是当我们写代码比较多的时候可以避免在不知道的情况下重复声明变量
通过var定义的变量，作用域是整个封闭函数，是全域的 。通过let定义的变量，作用域是在块级或是子块中。
72. Typeof有哪些类型
Undefined null string number function Boolean 都是字符串
73. 怎么会让图片变小
图片上传的时候压缩，
我来新添加面试题了，这本不是我意... 我今天本想写一下我五个月之前用vue写的移动端遇到的问题，谁让我最近这脑子不好使，总是忘记把当初记在纸上的笔记拍下来，所以，我也是只能来补充一下面试题了，这次的面试题是2018年5月份的面试题，自己亲身经历的。
74. 遇到哪些移动端适配问题（8和8p）屏幕大小的问题
· 评论框 （弹出的虚拟框遮住了评论框）
75. http请求的过程（三次握手）
· http请求格式主要有四部分：请求行，请求头，空行，消息体
76. 浏览器加载html的过程
· 解析html结构（告知浏览器以什么方式解决）
· 加载外部脚本和样式表文件
· 解析执行脚本
· Dom树构建完成
· 加载图片等外部资源
· 页面加载完毕
77. 实现一个长宽相等的盒子（移动端）不给固定的宽和高
· 媒体查询
· width：100%；padding：10%；height:0；
78. css画三角形
width：0；height：0；border：10px solid transparent；border-top：50px solid green;
考点：top：向下，bottom：向上，left：向右，right：向左。
79. slice和splice的区别
slice 不改变原数组， splice 改变原数组
80. 设置空心的三角形
· 放一条线，旋转（rotate）三角形就是成为一个空心的三角形 （面试官给我的答案）
· 写一个实心的三角形，在写一个实心的三角形比上一个小的并添加白色背景图，覆盖到第一个三角形上 （我自己想的）
81. 垂直居中的方法
· line-height
· display：table-cell；vertical-align：middle ；
· margin：0 au出to；
· position：absolute；top：0；left：0；right：0；bottom：0；margin： auto；
82. 对象的浅拷贝和深拷贝
对象的拷贝也就是复制，浅拷贝是指只拷贝对象本身，而不考虑对象的引用指向的对象，而深拷贝则将对象中的引用指向的所有对象一起拷贝
当时面试官还给我出了浅拷贝和深拷贝的题，但是我没记住他出的题，就不展示了
83. 数组去重
· Set （es6）
Array.from(new Set(arrat))
· let arr = [1,2,3,4,5]
let crr = []
for (var i=0;i<arr.length;i++){
if(crr.indexOf(arr[i]) == -1) {
crr.push(arr[i])
}
}
84. map, filter, foreach 遍历数组
map 不会改变原数组
filter 不会改变原数组
foreach 改变原数组
85. 如何获取cookie上的值
jquery： $.cookie('img') img 是动态的
js： document.cookie
86. 怎么防止全局变量被污染？
· 定义全局变量命名空间
· 利用匿名函数将脚本包裹起来
87. 页面的性能优化（js，css性能优化）
· 减少http的请求
· 开启gzip压缩
· 将样式表放在页面上方 （网页从上往下执行，边下载边解析页面元素）
· 脚本放在底部（浏览器js下载是并行的，下载时会组织页面的一些加载顺序）
· 精简代码
88. history 对象
· 浏览器记录它走了几步
· history.go(-n) 回到历史记录的前n步（后退一步）
· history.go(n) 前进一步
· history.forward() 前进一步
· history.back() 前一个页面
89. window.location.search以外还有哪些
· location.href 返回当前加载页面完整url
· location.hash 返回url中的hash，如果不包含则返回空字符串
· location.host 返回当前url的主机名称和端口号
90. js的基本数据类型？判断数据类型使用哪个？
· 基本数据类型： undefined，null，string，number，boolean，一个复杂数据类型：object
· 判断数据类型：typeof
91. instanceof 和typeof两个有什么区别？
· typeof判断函数数据类型 -> typeof方法返回一个字符串，来表示数据的类型
· instanceof 判断构造函数原型 -> 判断一个构造函数的prototype属性所指向的对象是否存在另一个要检测对象的原型链上
92. instanceof 能判断出什么
判断函数的prototype属性所指向的对象是否存在另一个要检测对象的原型链上
93. webpack和gulp的区别
· gulp严格上来说，模块不是他强调的东西
· webpack更是强调模块化开发，而那些文件压缩合并，预处理等功能
94. webpcak使用的好处
· 最大的作用确实是把一切当成模块，以及模块打包能力
· 按需加载
· 处理文件的扩展名
· 加载器和插件
95. webpack打包过的包比较大，会怎样？
· 打出的包打后面进行按需加载
· 去除不必要的插件
· 代码的分割
· 代码压缩
累死人了，敲的这么多字！好难过，这不是我想要的那种结果~
一下午写了三篇，真的手都不知道该放哪里了。
现在17：00我还有一个小时就下班了，再看这篇文章的你们呢。
我曾经看过这样一句话，可以不吃生活中的苦，但不能不吃奋斗的苦。
不知道将来会发生什么样子的事情，不知道下一秒会出现什么问题，但做好当前的事情，避免出现更多不必要的事情。
其实我是一个多么活波爱说话的人，新入职这家人都不认识，每天说话都不会说太多，我很怀念我上一家的同桌（ios）~
2018-11-22/23