1、jq的核心架构是什么？事件委托是怎么做的？插件机制是什么？---jq的博客总结

2、vue源码--网上源码分析博客

3、遇到过什么问题？怎么解决的？思路是什么？

4、npm的常用指令

5、页面布局

6、css盒模型

7、DOM事件

8、    HTTP协议  https httpto

9、面向对象

10、原型链

11、通信/安全/算法

Const定义的变量不可修改，而且必须初始化。

Var定义的变量可以修改，如果不初始化会输出undefind，不会报错

Let是块级作用域，函数内部使用let定义后，对函数外部无影响

深拷贝—先判断是null或者不是对象或者不是数组，

              再判断是数组还是对象，如果是数组，则定义一个result=[],如果是对象则定义result={},

              再进行循环，循环每一项之后还要判断是不是原型上的，赋值的时候递归，防止深层次的对象

12、三栏布局：float，flaxBox，绝对定位，表格布局，网格布局

13、CSS盒模型：标准模型和IE模型---

1)区别：高度和宽度计算不同

box-sizing:content-box盒模型，浏览器默认

box-sizing:border-box

2)JS如何拿到模型的宽和高

dom.sty.width/height(只有内联样式可以获得)

dom.currentStyle.width/height只有ie浏览器支持

window.getComputedStyle(dom).width/height

3)边距重叠问题

4)BFC或者RFC

       概念

       原理

       如何创建

       使用场景

14、1）DOM事件的级别

2）DOM事件模型：冒泡和捕获

3）DOM事件流

4）描述DOM事件捕获的具体流程

document.documentElement是专门获取html这个标签的

document.body是专门获取body这个标签的。

5）Event对象的常见应用

分别对应：

1.

阻止默认事件

2.

阻止事件冒泡

3.

设置事件优先级。阻止事件冒泡并且阻止相同事件的其他侦听器被调用。如果有多个相同类型事件的事件监听函数绑定到同一个元素，当该类型的事件触发时，它们会按照被添加的顺序执行。如果其中某个监听函数执行了 event.stopImmediatePropagation() 方法，则当前元素剩下的监听函数将不会被执行

4.往往用于事件委托中，获取当前被点击的元素（事件代理）

5.

当前所绑定的事件对象，如事件委托中所绑定的父级对象。

6）自定义事件

通过new Event创建自定义事件

dispatchEvent

来触发事件。

二、类型转换

值类型和引用类型

1、原始类型：Boolean 、 Null 、 Undefined 、Number、String、Symbol（ES6中出现）

2、对象Object

值类型和引用类型的区别：

显示类型转换BooleanNullUndefinedNumberStringSymbol对象Object

Numbe函数True：1，

False：0

0NaN原来的值如果 纯数字则为数字，否则转化为 NaN。空字符串转化为0 先调用ValueOf()，如果返回原始类型则返回Number 原始类型的值，如果返回的不是原始类型，继续调用 toString（）方法后再执行 number【先调 valueof，再调 toString】

String 函数true 转化为“true，false 转化为“false”false”“null”’“undefind”转化为相应的字符串原来的值 先调toString 再调  valueOf，如果 valueOf 返回的是复合类型的值，则报错

Boolean 函数除了undefined、null、-0、0、NaN、‘‘’空字符串转化为false

其他的都转化为 true—空对象空数组都是true

3、隐式转换

4、typeof

三、HTTP 协议类

1、主要特点

       简单快速

       灵活

       无连接

       无状态

2、报文组成部分

       请求报文：请求行、请求头、空行、请求头

响应报文：响应行、响应头、空行、响应行

3、方法

       get

       post

       put：更新资源

       DELETE

       HEAD

4、POST 和 GET 的区别

       get在浏览器回退时是无害的，而post 会再次提交请求

       get生产的 url 地址可以被收藏，而 post 不可以

       get请求会被浏览器主动缓存，而 post 不会，除非手动设置

       get请求只能进行 url 编码，而 POST 支持多种编码方式

       get请求参数会被完整的保留在浏览器历史里，而 post 中的参数不会被保留

       get在请求 url 中传送的参数有长度限制而 post 没有

       get比 post 更不安全，，因为参数直接暴露在 url 中不能用来传递敏感信息

       get 参数通过 url 传递，post 参数放在 Request body 中

5、状态码

       1**：提示信息-表示已接受，继续处理

       2**：成功-表示请求已被成功接收

       3**

       4**

       5**  

       200 -服务器成功返回网页

404

- 请求的网页不存在

503

- 服务不可用

6、什么是持久连接

       Keep-Alive保持持久连接

7、什么是管线化’

       打包发送三个请求，打包返回三个响应

四、原型链

1、创建对象有几种方法

       字面量

       构造函数

       Object.create  ’

2、什么是原型

3、构造函数  protoype  constryctor

4、实例_proto_

5、原型链instanceof 

6、instanceof 的原理：判断实例是否某个构造函数产生的实例

       constryctor判断比 instanceof 更严谨

7、new 运算符

五、面向对象类

1、类与实例

       类的声明

       生成的实例

2、类与继承

       如何实现与继承

       Class构建一个实例

       继承的几种方式  call与 apply，原型链继承

              构造函数方式实现继承无法继承原型链上的方法

              原型链继承的缺点：改变一个另一个也改变

              组合方式：父函数实例化的过程需要多次

              组合继承的优化方式：使用 object.create()创建对象隔离父类和子类

六、通信类

       1、什么是同源策略及限制

              从一个源加载的文档或脚本如何与来自另一个源的资源进行交互

              （源：协议，域名，端口这三个构成源，有一个不一样就是源不一样））

              限制：1）cookie、localStorage和 indexDB 无法获取

                       2）DOM 无法获取

                       3）AJAX 请求不能发送 

       2、前后端如何通信

              1）AJAX  同源 

              2）WebStorket 不受同源限制

              3)  CORS支持跨域也支持同源

       3、如何创建Ajax

              1）XMLHttpRequest 对象的工作流程

              2）兼容性处理（XMLHttpRequest  Ie浏览器不支持）

              3）事件触发条件

              4）事件的触发顺序

       4、跨域通信的几种方式

              JSONP

              Hash(Hash改变页面不刷新)

              postMessage(html5中的)

              WebSocket

              CORS

七、安全类

       1、分类：CSRF、XSS

       2、攻击原理

              1）CSRF：跨站请求伪造  原因： 网站中有缺口，用户在注册网站登录过，

2）XSS：跨站脚本攻击，利用渠道插入脚本去允许

       3、防御措施

              CSRF：1）Token 验证

                            2）Referer 验证

                            3）隐藏令牌 

XSS

八、算法类

       1、排序

       2、堆栈、队列、链表

       3、递归

       4、波兰式和逆波兰式

渲染机制—JS 运行制-页面性能-错误监控

九、渲染机制

       1、什么是 DOCTYPE 及作用

              用来声明文档类型和DTD 规范的，一个主要的用途便是文件的合法性检测

              HTML 5

              HTML 4.01有严格模式和非严格过程

       2、浏览器渲染过程

       3、重排Reflow

              触发：  增加、删除、修改 DOM 节点时，会导致 Reflow 和Repaint

                            移动 DOM 的位置，或者搞个动画

                            修改 CSS样式

                            Resize窗口的时候（移动端没有这个问题），滚动的时候

                            修改网页默认字体的时候

              如何避免Reflow？

       4、重绘Repaint

              触发： DOM改动

                            CSS改动

              如何尽量降低Repaint？一次性去添加节点

       4、布局Layout

十、运行机制类

       1、JS是单线程的

       2、JS任务队列

       3、同步任务console.log为同步任务

       4、异步任务setTimeout为异步任务、steInterval、DOM 事件、ES6中的Promise

       5、异步任务的放入时间和执行时间

       5、什么是 Event Loop事件循环

先处理同步任务，同步任务处理完成后再执行异步任务

十一、页面性能类

[if !supportLists]1、  [endif]资源压缩合并，减少 HTTP 请求

[if !supportLists]2、  [endif]非核心代码异步加载-异步加载方式-异步加载区别

[if !supportLists]a)       [endif]加载方式：

[if !supportLists]                                          i.           [endif]动态脚本加载

[if !supportLists]                                         ii.           [endif]defer

[if !supportLists]                                        iii.           [endif]async

[if !supportLists]b)       [endif]区别

[if !supportLists]                                          i.           [endif]defer 是在解析完之后才会执行，如果是多个，按照加载的顺序依次执行

[if !supportLists]                                         ii.           [endif]anync 是在加载完之后立即执行，如果是多个，执行顺序和加载顺序无关

[if !supportLists]3、  [endif]利用浏览器缓存-缓存的分类-缓存的原理

[if !supportLists]a)       [endif]强缓存

[if !supportLists]b)       [endif]协商缓存

[if !supportLists]4、  [endif]使用CDN

[if !supportLists]5、  [endif]预解析DNS

[if !supportLists]a)       [endif]

[if !supportLists]b)       [endif]强制打开与解析

[if !supportLists]                                          i.           [endif]

十二、错误监控

[if !supportLists]1、  [endif]前端错误的分类

[if !supportLists]a)       [endif]即时运行错误：代码错误

[if !supportLists]                                i.           [endif]捕获方式：

[if !supportLists]1.        [endif]try..catch

[if !supportLists]2.        [endif]window.onerror

[if !supportLists]b)       [endif]资源加载错误

[if !supportLists]                                i.           [endif]object.onerror 不支持冒泡

[if !supportLists]                               ii.           [endif]performance.getEntries()，所有资源减去已经加载的资源，就是没有加载完的

[if !supportLists]                              iii.           [endif]Error事件捕获

[if !supportLists]2、  [endif]错误的捕获方式

[if !supportLists]3、  [endif]上报错误的基本原理

[if !supportLists]a)       [endif]采用 AJAX 通信方式上报

[if !supportLists]b)       [endif]利用 image 对象上报

十三、MVV 框架类

[if !supportLists]1、  [endif]了解MVVM 框架吗

[if !supportLists]a)       [endif]vue.js

[if !supportLists]b)       [endif]React.js

[if !supportLists]c)       [endif]Angular.js

[if !supportLists]2、  [endif]谈谈对 MVVM 的认识

[if !supportLists]a)       [endif]MVC model-view-controller

[if !supportLists]b)       [endif]Model view ViewModel

[if !supportLists]3、  [endif]双向绑定是什么原理

[if !supportLists]a)       [endif]大大减轻开发负担

[if !supportLists]b)       [endif]双向指页面和数据双向绑定

[if !supportLists]c)       [endif] 

[if !supportLists]4、  [endif]使用了什么设计模式

[if !supportLists]5、  [endif]生命周期是什么

[if !supportLists]6、  [endif]源码’

Vue.JS  不支持低版本IE浏览器

1、直接用<script>引入

2、 

1）v-on 绑定事件，v-on:click---@click

2）v-model

3）v-for   ng-repert

4）v-bind

5）v-test

6）v-html

7）compute计算属性，值为函数，有缓存属性，计算过的值没有改变将不会重新计算一次

       Get

       Set

8)methos：使用方法进行计算步入compute有效

9）watch监听器，如果依赖的值没有改变，缓存值不会改变

22、angular 的数据绑定采用什么机制？脏检查机制

           Angular在 scope 模型上设置了一个 监听队列，用来监听数据变化并更新 view 。每次绑定一个东西到 view 上时 AngularJS 就会往 $watch 队列里插入一条$watch，用来检测 它监视的 model 里是否有变化的东西。当浏览器接收到可以被 angular context 处理的事件时，$digest 循环就会触发，遍历所有的$watch，最后更新 dom

23、父子控制器之间传值

       1）在子 controller 中向父 controller 触发（$emit）一个事件，然后在父 controller 中监听（$on）事件，再广播（$broadcast）给子 controller ，这样通过事件携带的参数，实现了数据经过父 controller，在同级 controller 之间传播。

       2）第二种是借助 $rootScope。

27、清除浮动：父级定高、overflow:hidden、clear:both

28、cookies

sessionStorage和localstorage

相同点：都存储在客户端

不同点：1.存储大小

· cookie数据大小不能超过4k。

· sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

2.有效时间

· localStorage    存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；

· sessionStorage  数据在当前浏览器窗口关闭后自动删除。

· cookie  设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

3. 数据与服务器之间的交互方式

· cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端

· sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

29、xml和json的区别，请用四个词语来形容

· JSON相对于XML来讲，数据的体积小，传递的速度更快些

· JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互

· XML对数据描述性比较好；

· JSON的速度要远远快于XML

30、px绝对单位，em相对单位

28.优雅降级和渐进增强

渐进增强（Progressive Enhancement）：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。

优雅降级（Graceful Degradation）：一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览

29、你对vuex的理解？

vuex可以理解为一种开发模式或框架。比如PHP有thinkphp，java有spring等。

通过状态（数据源）集中管理驱动组件的变化（好比spring的IOC容器对bean进行集中管理）。

应用级的状态集中放在store中； 改变状态的方式是提交mutations，这是个同步的事物；异步逻辑应该封装在action中。

1.与AngularJS的区别

相同点：

都支持指令：内置指令和自定义指令。

都支持过滤器：内置过滤器和自定义过滤器。

都支持双向数据绑定。

都不支持低端浏览器。

不同点：

1.AngularJS的学习成本高，比如增加了Dependency Injection特性，而Vue.js本身提供的API都比较简单、直观。

2.在性能上，AngularJS依赖对数据做脏检查，所以Watcher越多越慢。

Vue.js使用基于依赖追踪的观察并且使用异步队列更新。所有的数据都是独立触发的。

对于庞大的应用来说，这个优化差异还是比较明显的。

14.分别简述computed和watch的使用场景

答：computed:

当一个属性受多个属性影响的时候就需要用到computed

最典型的栗子：购物车商品结算的时候

watch:

当一条数据影响多条数据的时候就需要用watch

栗子：搜索数据

21.v-if和v-for的优先级

答：当 v-if 与 v-for 一起使用时，v-for具有比 v-if 更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for 循环中。所以，不推荐v-if和v-for同时使用。

如果v-if和v-for一起用的话，vue中的的会自动提示v-if应该放到外层去

26. 引进组件的步骤

答: 在template中引入组件；

在script的第一行用import引入路径；

用component中写上组件名称。

27.delete和Vue.delete删除数组的区别

答：delete只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。Vue.delete 直接删除了数组 改变了数组的键值。

28、多页面应用和单页面应用

       多页面应用：优点—首屏时间快，SEO效果好；缺点—页面切换缓慢

       单页面应用：优点——页面切换快 缺点——首屏时间稍慢，SEO差

29、移动端300毫秒点击事件延迟---fastclick

my name is lvshan ，My

major is computer science，so，i

am a Web developers，

I have three years of relevant work

experience，

Most of the work is in the development of

OA related websites，

In terms of technology, I master the  JS, angular JS, vue，HTML,CSS, etc  etˈset(ə)rə

In terms of character, I am more neutral,

not optimistic [ˌɒptɪˈmɪstɪk] or introverted [ˈɪntrəvɜːtɪd]

When writing code, can communicateeffectively with colleagues

Thank you！

Animate.css动画效果

Appear-active-class第一次内容显示增加动画

Type=“transition”当有transition动画和animated动画时长以transition为主

动画钩子：

Befor-enter

Enter

After-enter

Done（）

Tranasition-group