xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
Babel默认只转换新的JavaScript句法（syntax），而不转换新的API，
postMessage(data,origin)方法接受两个参数
- 性能优化
- 请求包大小
- 懒加载,预加载
- 图片压缩, sprite
- cdn 缓存
- http请求和响应的四部分
- readystate和status 1open2send3ing4ed
1xx消息这一类型的状态码，代表请求已被接受，需要继续处理
3xx重定向需要客户端采取进一步的操作才能完成请求
4xx客户端错误代表了客户端看起来可能发生了错误，妨碍了服务器的处理
5xx服务器错误服务器无法完成明显有效的请求
所有状态码 - http缓存控制 e-tag
ETag是HTTP协议提供的若干机制中的一种Web缓存验证机制，并且允许客户端进行缓存协商。这就使得缓存变得更加高效，而且节省带宽。如果资源的内容没有发生改变，Web服务器就不需要发送一个完整的响应
Cache-Control: max-age=<seconds> - https
- get和post 可不可以在表单中用delete
GET产生一个TCP数据包；POST产生两个TCP数据包。
GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）；
而对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据）
POST表示可能修改变服务器上的资源的请求
GET在浏览器回退时是无害的，而POST会再次提交请求。
GET产生的URL地址可以被Bookmark，而POST不可以。
GET请求会被浏览器主动cache，而POST不会，除非手动设置。
GET请求只能进行url编码，而POST支持多种编码方式。
GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
GET请求在URL中传送的参数是有长度限制的，而POST么有。
对参数的数据类型，GET只接受ASCII字符，而POST没有限制。
GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。
GET参数通过URL传递，POST放在Request body中。
POST比GET安全，因为数据在地址栏上不可见
GET使用URL或Cookie传参，而POST将数据放在BODY中。
-
GET方式提交的数据有长度限制，则POST的数据则可以非常大。
-
POST比GET安全，因为数据在地址栏上不可见。
-
xss crsf攻击和防御 eval 转义
-
跨域的方法 ,跨域会带cookie么
-
mvc和mvvm及原理
-
类数组的操作及转化
-
发布订阅和事件中心
-
jpg等图片的差别
image.png
-
防抖//用户名校验
在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。 -
节流//滚动页面
规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。 -
正则实现trim()
-
缓存和304
强缓存是利用http头中的Expires和Cache-Control两个字段来控制的，用来表示资源的缓存时间。强缓存中，普通刷新会忽略它，但不会清除它，需要强制刷新。浏览器强制刷新，请求会带上Cache-Control:no-cache和Pragma:no-cache
Etag和If-None-Match
Last-Modify/If-Modify-Since当浏览器再次请求该资源时，request的请求头中会包含If-Modify-Since，该值为缓存之前返回的Last-Modify。服务器收到If-Modify-Since后，根据资源的最后修改时间判断是否命中缓存。
协商缓存就是由服务器来确定缓存资源是否可用，所以客户端与服务器端要通过某种标识来进行通信，从而让服务器判断请求资源是否可以缓存访问。
普通刷新会启用弱缓存，忽略强缓存。只有在地址栏或收藏夹输入网址、通过链接引用资源等情况下，浏览器才会启用强缓存，这也是为什么有时候我们更新一张图片、一个js文件，页面内容依然是旧的，但是直接浏览器访问那个图片或文件，看到的内容却是新的。
如果使用了缓存基本上是两种情况: status code: 200 ok (from cache)和 status code 304 Not Modified。
上面两种方式有什么区别呢？简单地说，第一种方式是不向浏览器发送请求，直接使用本地缓存文件。第二种方式，浏览器虽然发现了本地有该资源的缓存，但是不确定是否是最新的，于是想服务器询问，若服务器认为浏览器的缓存版本还可用，那么便会返回 304。
- 媒体查询和动态rem
@media screen （max-width: 300px）and（） //only and or(,) not - 虚拟dom
- vuex及用法
- 委托和代理
- 作用域链 原型 冒泡捕获
- 继承
- class
- 闭包
- this
- 重流和重绘
- async await
- promise all race
- ajax
- cookie sessin localstorage sessionstorage indexedDB
-
vue :key原理 diff
-
base64 gzip
-
css3 h5
-
居中方式
-
visibility元素在页面消失后，其占据的空间依旧会保留着，所以它只会导致浏览器重绘而不会重排和none元素设置为display:none后，元素在页面上将彻底消失，元素本来占有的空间就会被其他元素占有，也就是说它会导致浏览器的重排和重绘。
-
flex
-
网页展示过程 三次握手和四次挥手
-
算法
-
canvas svg box-shadow
在Canvas中一旦图形被绘制完成，它就不会得到浏览器的关注，一旦其位置发生变化，那么整个场景需要重新绘制，包括任何已被该图形覆盖了的图形。
Canvas是使用JavaScript程序绘图(动态生成)，SVG是使用XML文档描述来绘图。SVG是基于矢量的，所有它能够很好的处理图形大小的改变。Canvas是基于位图的图像，它不能够改变大小，只能缩放显示
Canvas提供的功能更原始，适合像素处理，动态渲染和大数据量绘制
SVG功能更完善，适合静态图片展示，高保真文档查看和打印的应用场景
anvas是通过javascript来绘制2D图像的；
Canvas是逐像素进行渲染的；
微信截图_20181201172742.png
使用场景举例
svg
1.静态图像
2.高保真文档(用于展示和打印)
canvas
1.处理视频
2.复杂场景、实时复杂数学动画
3.基于图像位置的快速计算处理 -
vue 钩子通信
-
双向绑定
-
methods和computed
-
对象深复制
-
polyfill和bable
-
defer和async
-
v-model
-
自动登录和登出
-
vue-router 钩子
-
数组的各种api
-
sass grid webpack
-
HTML 语义化
-
meta viewport 是做什么用的，怎么写
-
盒模型
-
bfc
-
清除浮动
-
立即执行函数
-
js
-
宏事件和微事件 setImmediate
HTML5新特性(新增的标签, API等)，如localstorage的用法以及与cookie的区别，如何理解web语义化
CSS3新特性，如动画等
CSS特性，如position的用法，如何实现居中，bootstrap源代码的理解，盒模型(W3C和IE)，flex的使用
- 如何实现懒加载(跟预加载的区别)
REM和EM的父元素的font-size也是采用em表示，那么子元素的font-size怎么计算等。
浏览器一边下载 HTML 网页，一边开始解析。也就是说，不等到下载完，就开始解析。
解析过程中，浏览器发现<script>元素，就暂停解析，把网页渲染的控制权转交给 JavaScript 引擎。
如果<script>元素引用了外部脚本，就下载该脚本再执行，否则就直接执行代码。
JavaScript 引擎执行完毕，控制权交还渲染引擎，恢复往下解析 HTML 网页。
给基本类型数据添加属性，不报错，但取值时是undefined
input.split('').reverse().join('')
keyframes animation
image.png
CORS：跨源资源共享 Cross-Origin Resource Sharing(CORS)，通常服务器设置，若带cookie请求，则前后端都需要设置 后端常见设置 response.setHeader("Access-Control-Allow-Origin", "http://www.domain1.com"); // 若有端口需写全（协议+域名+端口），允许那些外源请求 response.setHeader("Access-Control-Allow-Credentials", "true"); //是否需要验证
首先将页面上的图片的 src 属性设为空字符串，而图片的真实路径则设置在data-original属性中，
当页面滚动的时候需要去监听scroll事件，在scroll事件的回调中，判断我们的懒加载的图片是否进入可视区域,如果图片在可视区内将图片的 src 属性设置为data-original 的值，这样就可以实现延迟加载。
预加载简单来说就是将所有所需的资源提前请求加载到本地，这样后面在需要用到时就直接从缓存取资源
使用HTML标签
使用Image对象 从script中引入
使用XMLHttpRequest对象,虽然存在跨域问题，但会精细控制预加载过程
PreloadJS库
URL到界面显示发生了什么
- DNS解析 先本地缓存找，在一层层找 将常见的地址解析成唯一对应的ip地址基本顺序为：本地域名服务器->根域名服务器->com顶级域名服务器依次类推下去,找到后记录并缓存下来如www.google.com为
. -> .com -> google.com. -> www.google.com. - TCP连接 三次握手，只要没收到确认消息就要重新发
- 主机向服务器发送一个建立连接的请求（您好，我想认识您）；
- 服务器接到请求后发送同意连接的信号（好的，很高兴认识您）；
- 主机接到同意连接的信号后，再次向服务器发送了确认信号（我也很高兴认识您），自此，主机与服务器两者建立了连接。
- 发送HTTP请求 浏览器会分析这个url，并设置好请求报文发出。请求报文中包括请求行、请求头、空行、请求主体。https默认请求端口443， http默认80。 常见的http请求如下
POST / HTTP1.1
Host:www.wrox.com
User-Agent:Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 2.0.50727; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022)
Content-Type:application/x-www-form-urlencoded
Content-Length:40
Connection: Keep-Alive
name=Professional%20Ajax&publisher=Wiley
第一部分：请求行，第一行说明是post请求，以及http1.1版本。
第二部分：请求头部，第二行至第六行。
第三部分：空行，第七行的空行。
第四部分：请求数据，第八行。
4\. 服务器处理请求并返回HTTP报文
后端处理返回http报文如下
HTTP/1.1 200 OK
Date: Fri, 22 May 2009 06:07:21 GMT
Content-Type: text/html; charset=UTF-8
<html>
<head></head>
<body>
<!--body goes here-->
</body>
</html>
第一行为状态行，（HTTP/1.1）表明HTTP版本为1.1版本，状态码为200，状态消息为（ok）
第二行和第三行为消息报头，
Date:生成响应的日期和时间；Content-Type:指定了MIME类型的HTML(text/html),编码类型是UTF-8
第三部分：空行，消息报头后面的空行是必须的
第四部分：响应正文，服务器返回给客户端的文本信息。
空行后面的html部分为响应正文。
- 浏览器解析渲染页面
- 通过HTML解析器解析HTML文档，构建一个DOM Tree，同时通过CSS解析器解析HTML中存在的CSS，构建Style Rules，两者结合形成一个Attachment。
- 通过Attachment构造出一个呈现树（Render Tree）
- Render Tree构建完毕，进入到布局阶段（layout/reflow），将会为每个阶段分配一个应出现在屏幕上的确切坐标。
- 最后将全部的节点遍历绘制出来后，一个页面就展现出来了。 遇到script会停下来执行，所以通常把script放在底部
- 连接结束
渲染引擎遇到 script 标签会停下来，等到执行完脚本，继续向下渲染
defer 是“渲染完再执行”，async 是“下载完就执行”，defer 如果有多个脚本，会按照在页面中出现的顺序加载，多个async 脚本不能保证加载顺序
加载 es6模块的时候设置 type=module，异步加载不会造成阻塞浏览器，页面渲染完再执行，可以同时加上async属性，异步执行脚本（利用顶层的this等于undefined这个语法点，可以侦测当前代码是否在 ES6 模块之中）
先自我介绍一下，说一下项目的技术栈，以及项目中遇到的一些问题
从整体中，看你对项目的认识，框架的认识和自己思考
项目中有没有遇到什么难点，怎么解决
如果你在创业公司你怎么从0开始做（选择什么框架，选择什么构建工具）
说一下你项目中用到的技术栈，以及觉得得意和出色的点，以及让你头疼的点，怎么解决的
一个业务场景，面对产品不断迭代，以及需求的变动该怎么应对，具体技术方案实现
你的学习来源是什么
你觉得哪个框架比较好，好在哪里
你觉得最难得技术难点是什么
你见过的最好的代码是什么
1.mvvm
model view view-model的缩写。
model是数据模型，负责数据管理。
view是ui组件，负责将数据模型转化为视图
view-model负责数据的双向传输和绑定。
当Model的属性改变时，我们不用再自己手动操作Dom元素来改变View的变化，而是改变其属性后，该属性对应的View层数据会自动改变
MVVM (Model-View-ViewModel) 是一种用于把数据和 UI 分离的设计模式。
MVVM 中的 Model 表示应用程序使用的数据，比如一个用户账户信息(名字、头像、电子邮件等)。Model 保存信息，但通常不处理行为，不会对信息进行再次加工。数据的格式化是由View 处理的。行为一般认为是业务逻辑，封装再 ViewModel 中。
View 是与用户进行交互的桥梁。
ViewModel 充当数据转换器，讲 Model 信息转换为 View 的信息，讲命令从 View 传递到 Model。
<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。 // 结合<component v-bind:is> 使用</component>
当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行
2.vue实例从创立到销毁的全部过程，期间暴露出钩子函数。
beforecreate 初始化实例，数据没有加载，el 属性目前不可见。
beforemount 首次调用 render()函数 将数据和html模版生成虚拟dom树
在挂载开始之前被调用：相关的 render 函数首次被调用。
该钩子在服务器端渲染期间不被调用。
mounted 挂载点挂载
el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。
注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 [vm.nextTick(){....}
beforeupdate
数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行。
updated
由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。计算属性watcher进行相应状态改变
beforedestroye
实例销毁之前调用。在这一步，实例仍然完全可用。
destroyted
Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
actived
keep-alive 组件激活时调用。
该钩子在服务器端渲染期间不被调用。
deactived
keep-alive 组件停用时调用。
该钩子在服务器端渲染期间不被调用。
errorCaptured
当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。
3 双向数据绑定采用的发布订阅模式，通过Object.defineProperty 进行数据的拦截达到数据获取和设置。通过get 方法view获取model中的数据，当数据更新时，触发set 达到更改数据的目的，从而实现view向model传递数据
4 prop
event 获取传递的值 或者 v-on监听emit的事件触发xxx方法，xxx方法的参数就是要获取的值 也就是直接通过回调函数的参数获取。
eventBus
ref <base-input ref="usernameInput"></base-input> this.refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向子组件实例
<!-- `vm.$refs.child` will be the child component instance -->
<child-component ref="child"></child-component>
vuex
listeners 属性，它是一个对象，里面包含了作用在这个组件上的所有监听器 ，配合 v-on="$listeners" 将所有的事件监听器指向这个组件的某个特定的子元素
6 全局守卫 beforeEach
路由守卫 beforeEnter AfterEach
组件守卫 beforeRouteEnter beforeRouteLeave beforeRouteUpdate
7 缓存动态组件的当前状态。
8 | filters ， mixins:[]
9 computed 当且仅当依赖的数据缓存发生变化时重新计算
method 每次执行都会重新进行计算。
watch deep
10 维护一个全局的store
通过commit，mutations 来改变store中的state（相当于data），不能直接改变states，、、？？？？
mutations（相当于同步的methods）中执行的是同步操作，dispatch actions进行异步的数据操作
getters 相当于computed
computed 和 watch 的差异：
都是以 Vue 的依赖追踪机制为基础，当某个依赖数据发生变化时，所有依赖这个数据的相关数据或函数都会自动发生变化或调用
computed 是计算一个新的属性，并将该属性挂载到 vm（Vue 实例）上，而 watch 是监听已经存在且已挂载到 vm 上的数据，所以用 watch 同样可以监听 computed 计算属性的变化（其它还有 data、props）
computed 本质是一个惰性求值的观察者，具有缓存性，只有当依赖变化后，第一次访问 computed 属性，才会计算新的值，而 watch 则是当数据发生变化便会调用执行函数
从使用场景上说，computed 适用一个数据被多个数据影响，而 watch 适用一个数据影响多个数据；
计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。
watch适合监听单个依赖的属性，数据变化时执行异步或开销较大的操作。
computed适合监听多个依赖的属性
key：Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。
v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
而言之，就是先转化成AST树，再得到的render函数返回VNode（Vue的虚拟DOM节点）
详情步骤：
首先，通过compile编译器把template编译成AST语法树（abstract syntax tree 即 源代码的抽象语法结构的树状表现形式），compile是createCompiler的返回值，createCompiler是用以创建编译器的。另外compile还负责合并option。
然后，AST会经过generate（将AST语法树转化成render funtion字符串的过程）得到render函数，render的返回值是VNode，VNode是Vue的虚拟DOM节点，里面有（标签名、子节点、文本等等）
支持双向通信，实时性更强；
可以发送文本，也可以二进制文件；
协议标识符是 ws，加密后是 wss ；
较少的控制开销。连接创建后，ws客户端、服务端进行数据交换时，协议控制的数据包头部较小。在不包含头部的情况下，服务端到客户端的包头只有2~10字节（取决于数据包长度），客户端到服务端的的话，需要加上额外的4字节的掩码。而HTTP协议每次通信都需要携带完整的头部；
支持扩展。ws协议定义了扩展，用户可以扩展协议，或者实现自定义的子协议。（比如支持自定义压缩算法等）
无跨域问题。
v-model ：searchText === v-bind：value=searchText；v-on:input="searchText = event"
v-enter-active v-enter-to v-leave-active v-leave-to enter-active-class
enter-to-class leave-active-class
leave-to-class
组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。
过滤器可以用在两个地方：双花括号插值和 v-bind 表达式
v-demo:foo.a.b="message"
Vue.directive('demo', {
bind: function (el, binding, vnode) {
var s = JSON.stringify
el.innerHTML =
'name: ' + s(binding.name) + '
' +
'value: ' + s(binding.value) + '
' +
'expression: ' + s(binding.expression) + '
' +
'argument: ' + s(binding.arg) + '
' +
'modifiers: ' + s(binding.modifiers) + '
' +
'vnode keys: ' + Object.keys(vnode).join(', ')
}
})
new Vue({
el: '#hook-arguments-example',
data: {
message: 'hello!'
}
})
网友评论