html、css 部分
1.语义化的作用？
答：1.解构清晰，增强可读性 2.方便搜索引擎优化（网络爬虫更好的解析有效信息）。
2.iframe 应用场景，优缺点？
场景：跨域通讯，广告位，邮箱应用
优点：不需要重载整个页面、模块分离便于重用
缺点：增加了http请求（需要引入外部资源）、搜索引擎无法解读页面，影响SEO。
3.0.5px 解决方案？
伪元素+缩放
:before {
content:''
transform-origin:0 0 设置原点位置
transform: scale(0.5,0.5)
}
4.css3 伪类/伪元素
css 伪类作用：用于向某些选择器添加特殊效果（依附于选择器）伪元素不存在与文档树中
css3 新增伪类主要是选择器伪类（筛选元素的） css 伪类常用的有 :hover :active :focus :before :after
css3常用：:nth-child(3) 选择父元素的第n个子元素 :not(p) 选择非p元素 :checked 单选框或复选框被选中
::before 和 :after中双冒号和单冒号 有什么区别？
伪元素和伪类之所以这么容易混淆,css3 为了区分两者已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。
伪类：用于向某些选择器添加特殊的效果
伪元素：用于将特殊的效果添加到某些选择器
它们的本质区别就是是否抽象创造了新元素
5.有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度？
答：父级高度100%； 头部50px; 剩余 box-flex:1;
6.创建一个两边固定宽度，中间自适应宽度的布局？
答：2边固定宽度，中间 display: flex1
7.如何用纯CSS画出一个三角形？
答：宽高设为0,利用边框效果 （正三角形）border-left:30px solid transparent border-right:30px solid transparent border-bottom:30px solid red;
8.有哪些方法实现移动端页面自适应布局？
答：1.百分比布局 2. @media查询断点 3. flexible 动态计算 4.弹性布局 display:flex; flex:1;
网络部分
1.post和get区别？
get是通过http协议的header发送请求，所以会将参数拼接在地址栏中，所以安全性很差； 大小2kb左右
post是通过http协议的body发送请求，地址栏中并不会出现，所以相对安全； 理论上不受限制
2.客户端在使用HTTPS方式与服务器建立连接时有哪几个步骤？
答：三次握手，四次断开
1.建立连接，等待服务器确认 （发送syn消息包）
2.服务器收到SYN包，返回ACK （向客户端返回ACK消息包）
3. 客户端收到ACK包，向服务器发送确认包（ACK）。 完成3次握手
完成三次握手，客户端与服务器开始传送数据
4. 建立连接
3.HTTP有哪些缓存机制？
答：代理服务器缓存，CDN缓存，浏览器缓存。
4.http2.0 有哪些新特性？
答：二进制分帧，首部压缩，流量控制，多路复用，请求优先级，服务器推送
二进制分帧：二进制分帧是为下文中的各种特性提供了基础。它能把一个数据划分封装为更小更便捷的数据。
首部压缩：HTTP2.0在客户端和服务端之间使用首部表来跟踪和存储之前发送的键值对。
多路复用：可以并行交错的发送请求和响应，这些请求和响应之间互不影响 只使用一个链接即可并行发送多个请求和响应
5.CDN工作原理是怎样的？
答：CDN 内容分发网络
将网站页面的内容缓存到节点多台服务器上，通过DNS负载均衡的技术，判断用户来源访问最近cache服务器的内容，使网民可就近取得所需内容,
解决Internet网络拥塞状况，实现网页、图片、视频、下载、游戏CDN加速
6.如何防止CDN缓存？
答：引入自动化构建工具（自动添加哈希值）、添加时间戳、crtl+F5 强制刷新
7.什么情况算是跨域？如何解决跨域问题？
答：跨域是浏览器同源策略造成的，是浏览器对js的安全限制。（不同域名之间的通讯就是跨域）
解决办法：jsonp 代理 iframe
js 部分
1.简述__proto__、prototype、constructor的含义和关系?
答：对象有属性__proto__,指向该对象的构造函数的原型对象
方法除了有属性__proto__,还有属性prototype，prototype指向该方法的原型对象。
2.js的new操作符做了哪些事情？
new 运算符用来实例化一个类，在内存中分配一个实例对象。
new存在的意义在于它实现了javascript中的继承，而不仅仅是实例化了一个对象！
3.Cookie、localStorage、sessionStorage的区别？
Cookie、localStorage、sessionStorage 都是在浏览器端存储的数据,且是同源的。
cookie: 存储小量数据（4k）， 与服务器通讯。
4.localStorage: 本地存储（一般5M），没有时间限制，所有窗口共享，浏览器中长存，除非手动清理，不能被爬虫抓取 （不参与服务器通讯）
sessionStorage: （一般5M）仅在当前浏览器窗口关闭前有效，不同浏览器不共享。（不参与服务器通讯）
5.什么是Event loop？
主线程从"任务队列"中读取事件，这个过程是循环不断的，所以整个的这种运行机制又称为Event Loop（事件循环）。
6.为什么0.1+0.2 != 0.3 ？
答：js 是弱类型语言，设计时没有浮点数有严格数据类型，导致精度误差。
7.事件代理的原理是什么？
答：事件代理就是利用事件的冒泡原理来实现的。在祖先级DOM元素绑定一个事件，当触发子孙级DOM元素的事件时，利用事件流的原理来触发绑定在祖先级DOM的事件，委托它们父级代为执行事件
8.简述浏览器渲染一个页面的过程？
答：1.解析html 页面 2.构建DOM树 3. DOM树与css样式渲染构建展示树模型 4.布局 5. 绘制
vue 部分
1.vue的优点是什么？
1低耦合 视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
2可重用性 你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。
3独立开发 开发人员可以专注于业务逻辑和数据的开发 ViewModel
4可测试 界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。
2.简述vue实现双向数据绑定的原理？
答：vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
3.Vue-router的Hash模式和History模式分别是什么原理？
hash —— 即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）
history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法
hash 模式和 history 模式都属于浏览器自身的特性,Vue-Router 只是利用了这两个特性来实现前端路由。
4.请列举出3个Vue中常用的生命周期钩子函数?
created: 实例已经创建完成之后调用,在这一步,实例已经完成数据观测, 属性和方法的运算, watch/event事件回调. 然而, 挂载阶段还没有开始, $el属性目前还不可见
mounted: el被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。
activated::keep-alive组件激活时调用
5.请详细说下你对vue生命周期的理解？
创建前/后： 在beforeCreate阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，el还没有。
载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。
更新前/后：当data变化时，会触发beforeUpdate和updated方法。
销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在
6.路由之间跳转？
声明式（标签跳转） < router-link :to="index" >
编程式（ js跳转） router.push('index')
7.什么是vue生命周期？
Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。
8.聊聊你对Vue.js的template编译的理解？
答：简而言之，就是先转化成AST树，再得到的render函数返回VNode（Vue的虚拟DOM节点）
9.vue-router有哪几种导航钩子？
第一种：是全局导航钩子：
router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。
to-即将要进入的目标 路由对象
from-当前导航正要离开的路由
next-这是一个必须需要调用的方法，而具体的执行效果则依赖 next 方法调用的参数
第二种：组件内的钩子
第三种：单独路由独享组件
10.vue-router实现原理？
答：vue-router就是WebApp的链接路径管理系统，是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。
SPA(single page application):单一页面应用程序，有且只有一个完整的页面；当它在加载页面的时候，不会加载整个页面的内容，而只更新某个指定的容器中内容。
单页面应用(SPA)的核心之一是:
1.更新视图而不重新请求页面;
2.vue-router在实现单页面前端路由时，提供了三种方式：Hash模式、History模式、abstract模式，根据mode参数来决定采用哪一种方式。
vue-router 提供了三种运行模式：
hash: 使用 URL hash 值来作路由。默认模式。
history: 依赖 HTML5 History API 和服务器配置。查看 HTML5 History 模式。
abstract: 支持所有 JavaScript 运行环境，如 Node.js 服务器端。
11.vue等单页面应用及其优缺点
优点：Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件，核心是一个响应的数据绑定系统。MVVM、数据驱动、组件化、轻量、简洁、高效、快速、模块友好。
缺点：不支持低版本的浏览器，最低只支持到IE9；第一次加载首页耗时相对长一些；不可以使用浏览器的导航按钮需要自行实现前进、后退。
12.axios是什么？
答：请求后台资源的模块。类似ajax, js中使用import进来，然后.get或.post。返回在.then函数中如果成功，失败则是在.catch函数中
13.vuejs与angularjs以及react的区别？
与AngularJS的区别
相同点：
都支持指令：内置指令和自定义指令；都支持过滤器：内置过滤器和自定义过滤器；都支持双向数据绑定；都不支持低端浏览器。
不同点：
AngularJS的学习成本高，比如增加了Dependency Injection特性，而Vue.js本身提供的API都比较简单、直观；在性能上，AngularJS依赖对数据做脏检查，所以Watcher越多越慢；
Vue.js使用基于依赖追踪的观察并且使用异步队列更新，所有的数据都是独立触发的
与React的区别
相同点：
React采用特殊的JSX语法，Vue.js在组件开发中也推崇编写.vue特殊文件格式，对文件内容都有一些约定，两者都需要编译后使用；中心思想相同：一切都是组件，组件实例之间可以嵌套；都提供合理的钩子函数，可以让开发者定制化地去处理需求；都不内置列数AJAX，Route等功能到核心包，而是以插件的方式加载；在组件开发中都支持mixins的特性。
不同点：
React采用的Virtual DOM会对渲染出来的结果做脏检查；Vue.js在模板中提供了指令，过滤器等，可以非常方便，快捷地操作Virtual DOM
14.keep-alive 是什么？
答：keep-alive是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。
15.vuex是什么？怎么使用？哪种功能场景使用它？
答：vue框架中状态管理。在main.js引入store，注入。新建了一个目录store，….. export 。场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车