deep的主要作用是css样式选择器作用域的提升
deep肯定是和scoped属性结合使用的，
SSR:服务端渲染，就是服务侧完成页面HTML结构拼接的页面处理技术，发送到浏览器，然后为其绑定状态与事件，成为完成可交互页面的过程
后端渲染出完整的首屏的dom结构返回，前端拿到的内容包括首屏及完整SPA结构，应用激活后依然按照spa方式运行。
SSR主要解决的问题：
1 seo
2 首屏呈现渲染 用户无需等待页面的js加载完成就可以看到页面视图，（压力到了服务器）
缺点：
1 复杂度 整个项目的复杂度
2 库的支持性，代码兼容
3 性能问题
选择SSR：
1 需要SEO的页面是否只是少数几个，这些是否可以使用预渲染实现（Prerender SPA Plugin）
2 首屏的请求响应逻辑是否复杂，数据集返回是否大量且缓慢
微任务 宏任务
axios是一个轻量的HTTP客户端
基于XMLHttpRequest服务来执行HTTP请求，支持丰富的配置，支持Promise，支持浏览器端和node.js端，
axios特性：
1 从浏览器中创建XMLHttpRequest
2 从node中创建HTTP请求
3 支持Promise API
4 拦截请求和响应
5 转换请求数据和相应数据
6 取消请求
6 自动转换JSON数据
7 客户端支持防御XSRF
axios二次封装
与后端协商好一些约定，请求头，状态码，请求超时时间。。。。
设置接口请求前缀： 利用node环境变量，用来区分 开发 测试 生产环境 process.env.NODE_ENV
本地设置devServer实现代理转发，实现跨域
请求头
const service = axios.create({
...
timeout: 30000, // 请求 30s 超时
headers: {
get: {
'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
// 在开发中，一般还需要单点登录或者其他功能的通用请求头，可以一并配置进来
},
post: {
'Content-Type': 'application/json;charset=utf-8'
// 在开发中，一般还需要单点登录或者其他功能的通用请求头，可以一并配置进来
}
},
})
状态码
请求方法
请求拦截器
响应拦截器
Vue.observable 让一个对象变成响应式数据
非父子组件之间通信，使用bus或是vuex，vuex太复杂，使用Vue.observable
SPA首屏加载
首屏时间指的是浏览器从响应用户输入网站地址，到首屏内容渲染完成的时间。
计算首屏时间，通过DOMContentLoad 或者performance
performance.getEntriesByName("first-contentful-paint")[0].startTime
加载慢的原因：
去网络延时问题
资源文件体积是否过大
资源是否重复发送请求去加载了
加载脚本的时候，渲染内容堵塞了
解决方案：
减少入口文件体积 常用手段 路由懒加载，vue-router配置路由的时候，采用动态加载路由的形式
静态资源本地缓存 后端返回资源问题：采用HTTP缓存，设置cache-control Last-Modified等响应头 前端localStorage
UI框架按需加载
图片资源的压缩
icon使用在线字体，或者雪碧图，减少http请求压力
组件重复打包 例如同一个文件多出引用，会被重复打包，在config中设置comonsChunkPlugin的配置，minChunks：3 使用3次以及以上的包抽离出来，放在公共依赖文件中，避免了重复加载组件
开启Gzip压缩
拆完包之后我们载使用compression-webpack-plugin 插件
使用SSR Nuxt.js
总结就是资源加载优化和页面渲染优化
vue和react区别
数据流向不同，react 单向数据流，vue双向数据流
数据变化的实现原理不同，react使用的是不可变数据，而Vue使用的是可变数据
组件化通信不同。react中通过使用回调函数来进行通信，Vue中子组件向父组件传递信息有两种方式 事件和回调函数
diff算法不同，react主要使用diff队列保存需要更新那些DOM,得到patch树，再统一操作批量更新DOM,Vue使用双向指针，边对比，边更新DOM
SPA 是一种网络应用程序或网站的模型，它通过动态重写当前页面来与用户交互，页面在任何时间点不会重新加载。
优点：
具有桌面应用的即时性，网站的可移植性和可访问性
用户体验好 快，内容的改变不需要重新加载整个页面
良好的前后端分离，分工更明确
缺点：
不利于搜索引擎的抓取
首次渲染速度相对较慢
原理
监听地址栏中的hash变化驱动界面变化
用pushstate记录浏览器的历史，驱动界面发送变化
实现
hash模式，核心是通过监听url中的hash来进行路由跳转
history
核心是借用HTML5 history api,api提供了丰富的router相关属性
history.pushState
history.replaceState
history.popState
SPA 做SEO
1 SSR 服务端渲染
2 静态化
3 使用Phantomjs针对爬虫处理
双向绑定
单项绑定 就是把model绑定到view，当我们用javascript代码更新model时，view就会自动更新
双向绑定。用户更新view，model的数据也自动被更新
原理：
由三个重要部分构成： MVVM
1 数据层 应用的数据以及业务逻辑
2 视图层 应用的展示效果，各类UI组件
3 业务逻辑层 viewModel 框架封装的核心，它负责将数据与视图关联起来
控制层的核心就是双向数据绑定
viewModel
数据变化后更新视图
视图变化后更新数据
还有两个主要的组成部分：
监听器(Observer):对所有数据的属性进行监听
解析器(Compiler) 对每个元素节点的指令进行扫描跟解析，根据指令模板替换数据，以及绑定相应的更新函数
实现双向绑定
1 new Vue() 执行初始化，对data执行响应化处理，这个过程发生Observe中
2 同时对模板执行编译。找到其中动态绑定的数据，从data中获取并初始化视图，这个过程发生在Compile中
3 同时定义一个更新函数和Watcher，将来对应数据变化时Watch会调用更新函数
4 由于data的某个key在一个视图中可能出现多次，所以每个key都需要一个管家Dep来管理多个Watcher
5 将来data中的数据一旦发生变化，会首先找到对应的Dep，通知所有的Watcher执行更新函数
vue的生命周期分为8个阶段
创建前后，载入前后，更新前后，销毁前后以及一些特殊场景的生命周期
https://mp.weixin.qq.com/s/uFjMz6BByA5eknBgkvgdeQ
常见的攻击 xss csrf sql注入
xss:攻击者在网页嵌入脚本，用户浏览网页触发恶意脚本执行
防范：
设置HttpOnly已避免cookie劫持
2 过滤，对诸如 scropt img a 等标签进行过滤
3 编码 对一些常见的符号，如<>在输入的时候要对齐进行转换编码
限制 对于一些可以预防的输入可以通过限制长度强制截断进行防御
csrf 跨站请求伪造
是一种劫持受信任用户向服务器发送非预期请求的攻击方式
防范：
验证HTTP Referer字段
请求地址中添加token并验证
HTTP头中自定义属性并验证
sql注入
在未授权的情况下，非法访问数据库的信息
防范：
1 杜绝用户提交的参数入库并且执行
2 在代码层，不准出现sql语句
3 在web输入参数时，对所有的参数做sql转义
4 上线测试，需要使用sql自动注入工具进行所有页面sql注入测试
模块
可以理解成实现特定功能的相互独立的一组方法
可维护性 可复用性 命名空间
Fullscreen API
提供了全屏模式显示特定元素的方法。
document.getElementById('#id').requestFullscreen()
判断浏览器是否支持Fullscreen
document.fullscreenEnabled
有用的处理程序：
onfullscreenchange 一个处理fullscreenchange事件的事件处理程序
onfullscreenerror 一个处理fullscreenerror事件的事件处理程序
Clipboard Async API 剪切板
剪切板是一些操作系统提供的一个缓冲区，用于短期存储，以及应用程序内部和应用程序之间的数据传输。
使用剪切板主要可以执行三种操作，copy cut paste。
复制内容到剪切板是开放的，不需要用户许可。但是粘贴到用户应用程序则需要授权， Permission API
注意：通过包含 Clipboard Async API,就可以不用document.execCommad()函数了
Broadcast Channel API
Broadcast Channel APIA允许浏览上下文(窗口 标签页 iframe)和同源worker之间进行通信。考虑这样一个用例，
在你从一个浏览器标签页中运行的应用程序注销时，你希望将其广播到同一个浏览器的其他标签中打开的应用程序实例。
https://mp.weixin.qq.com/s/TD8kYET3opwZ5_lVqnMBnw
隐藏所有选择的元素：
document.querySelectorAll('img').style.display='none';
判断指定元素是否包含某个class
document.querySelector('.demo').classList.contains('btn')
requestAnimationFrame 解决了浏览器不知道js动画什么时候开始，不知道最佳循环间隔时间的问题。
requestAnimationFrame的速度是由浏览器决定的，不同浏览器会自行决定最佳的帧效率
类似setTimeout，都是推迟某个函数的执行，不同之处在于，setTimeout需要指定推迟的时间，window.requestAnimationFrame则是推迟到浏览器下一次重流时执行，执行完之后才会进行下一次重绘。
接收一个回调函数作为参数
window,requestAnimationFrame(callback),callaback执行时，它的参数就是系统传入的一个高精度时间戳performance.now() 的返回值，单位是毫秒，表示距离网页加载的时间
返回值是一个整数，可以传入window.cancelAnimationFrame(),用来取消回调函数的执行。