json和xml区别
(1).可读性方面。
JSON和XML的数据可读性基本相同，JSON和XML的可读性可谓不相上下，一边是建议的语法，一边是规范的标签形式，XML可读性较好些。
(2).可扩展性方面。
XML天生有很好的扩展性，JSON当然也有，没有什么是XML能扩展，JSON不能的。
(3).编码难度方面。
XML有丰富的编码工具，比如Dom4j、JDom等，JSON也有json.org提供的工具，但是JSON的编码明显比XML容易许多，即使不借助工具也能写出JSON的代码，可是要写好XML就不太容易了。
(4).解码难度方面。
XML的解析得考虑子节点父节点，让人头昏眼花，而JSON的解析难度几乎为0。这一点XML输的真是没话说。
(5).流行度方面。
XML已经被业界广泛的使用，而JSON才刚刚开始，但是在Ajax这个特定的领域，未来的发展一定是XML让位于JSON。到时Ajax应该变成Ajaj(Asynchronous Javascript and JSON)了。
(6).解析手段方面。
JSON和XML同样拥有丰富的解析手段。
(7).数据体积方面。
JSON相对于XML来讲，数据的体积小，传递的速度更快些。
(8).数据交互方面。
JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互。
(9).数据描述方面。
JSON对数据的描述性比XML较差。
(10).传输速度方面。
JSON的速度要远远快于XML。
js设计模式
举例说一下构造器模式、工厂模式、模块化模式
//构造器模式
// function Person(name,age){
// this.name = name
// this.age = age
// return '对象初始化成功。。。'
// }
// var p1 = new Person('xiaohong',20)
// var p2 = new Person('xiaohong',30)
// console.log(typeof p1)
// console.log(p1 instanceof Array)
// console.log(p1.constructor())
//module模式,模块化开发
// var User = {
// add:function(msg){
// console.log('添加成功')
// }
// }
// function User(name){
// return {
// add:function(msg){
// console.log('用户'+name+msg)
// },
// delete:function(msg){
// console.log('用户'+name+msg)
// },
// update:function(msg){
// console.log('用户'+name+msg)
// },
// find:function(msg){
// console.log('用户'+name+msg)
// }
// }
// }
// User('张三').add('添加一个用户')
// User('张三').delete('删除一个用户')
//factory模式，工厂模式，根据你传的值判断走向
function User(idcard){
if(idcard){
return function(){
return 'vip'
}
}else{
return function(){
return '普通用户'
}
}
}
var p1 = User('sjsa')
console.log(p1())
垃圾回收机制有哪几种，原理是什么
https://www.cnblogs.com/zhwl/p/4664604.html
事件代理或者事件委托，写代码
- 111
- 222
- 333
- 444
//用事件委托
window.onload = function(){
var oul = document.getElementById('ul1')
var btn = document.getElementById('add')
var num = 4
//鼠标移入li上变红，移出变白
oul.onmouseover = function(ev){
var ev = ev||window.event
var target = ev.target || ev.srcElement
if(target.nodeName.toLowerCase() == 'li'){
target.style.background = 'red'
}
}
oul.onmouseout = function(ev){
var ev = ev||window.event
var target = ev.target || ev.srcElement
if(target.nodeName.toLowerCase() == 'li'){
target.style.background = '#FFFFFF'
}
}
//添加新节点
btn.onclick = function(){
num++
var oli = document.createElement('li')
oli.innerHTML = 111*num
oul.appendChild(oli)
}
}
事件循环
https://www.cnblogs.com/dong-xu/p/7000163.html
语义化标签有哪些
语义化HTML：用最恰当的HTML元素标记的内容。
优点：
1 提升可访问性；
2 SEO；
3 结构清晰，利于维护；
title、header、nav（标记导航）、main、article、section、aside、footer、video、canvas
作用域
https://blog.csdn.net/whd526/article/details/70990994
变量的作用域无非就是两种：全局变量和局部变量。
全局作用域： 最外层函数定义的变量拥有全局作用域，即对任何内部函数来说，都是可以访问
局部作用域： 和全局作用域相反，局部作用域一般只在固定的代码片段内可访问到，而对于函数外部是无法访问的，最常见的例如函数内部
需要注意的是，函数内部声明变量的时候，一定要使用var命令。如果不用的话，你实际上声明了一个全局变量！
作用域链
根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，想要知道js怎么链式查找，就得先了解js的执行环境（参考上一节作用域的文档）
原型
原型链
变量提升
再来看一个代码：
第一个输出居然是undefined，原本以为它会访问外部的全局变量(scope=”global”)，但是并没有。这可以算是javascript的一个特点，只要函数内定义了一个局部变量，函数在解析的时候都会将这个变量“提前声明”：
java设计模式
页面模板引擎（原生写法）
vue的生命周期
ajax的生命周期
ajax创建过程
ajax：在不切换页面的情况下完成异步的HTTP请求
(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象.
(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
(3)设置响应HTTP请求状态变化的函数.
(4)发送HTTP请求.
(5)获取异步调用返回的数据.
(6)使用JavaScript和DOM实现局部刷新.
rem和px的区别
http://www.runoob.com/w3cnote/px-em-rem-different.html
前端性能和安全
慕课网https://www.imooc.com/learn/580
多平台兼容和适配
需要补充一些思路
了解SVG、canvas动画
补充代码实例
搜索引擎优化vue父组件和子组件直接的传参、组件和组件之间的传参
补充代码实例
js内存管理
https://www.cnblogs.com/zhutty/p/5341572.html
dom有哪些操作
https://juejin.im/post/5b444f7ce51d4519962e9147
MVC、MVP、MVVM的区别以及各自的代表框架
前端性能优化的看法雅虎性能优化军规怎么优化网络请求get/post的区别，在数据传输及强度及传输数据类型方面？还有其他区别吗？tcp三次握手和四次挥手浏览器崩掉有哪些原因写出一个vue模板闭包输出问题函数声明和函数定义输出问题es6里面的promise/let/回调等新特性同步和异步的区别，实际情景举例回调函数
产生浮动的情况以及怎么清除浮动
首先我们要知道，css中的块级元素在页面中是独占一行的，自上而下排列，也就是我们所说的流，通常我们称之为标准流。
div是独自占用一行的，这是在标准流中的理论，但是，有些时候，我们的需求不仅仅是这样，我们想着如何在一行中显示多个div元素，所以，标准流已经不能满足我们的需求，这个时候我们就需要用到浮动，我们这样理解，浮动就是让这个div元素脱离标准流，漂浮在标准流的上面。
清除浮动：1、在需要清除浮动的元素前面添加一个空的div，给这个div添加一个css属性，clear：both；
2、浮动产生外层div(没有设置高度的)高度塌陷：给外面的div添加overflow：hidden或auto
3、公共的样式-用来清除样式：就是利用伪类元素来清除有浮动的标签，也就定义一个公共的类clearfix，给这个类添加css属性，在里面进行清除浮动的操作，只要哪里需要清除浮动，就在哪里添加一个清除浮动的类
.clearfix:after{
content:"";
display:table;
height:0;
visibility:both;
clear:both;
}
.clearfix{
*zoom:1; /* IE/7/6*/
}
apply和call的定义和区别
外边距重叠及其影响
闭包的概念
截取url参数，写代码
对jsonp理解
产生随机数并排序
在不知道div宽度的情况下如何居中
什么是盒子模型
内容(content)、填充(padding)、边框(border)、边界(margin)，CSS盒子模式都具备这些属性。
HTML行内元素、块状元素、行内块状元素的区别
HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。首先需要说明的是，这三者是可以互相转换的，使用display属性能够将三者任意转换：
(1)display:inline;转换为行内元素
(2)display:block;转换为块状元素
(3)display:inline-block;转换为行内块状元素
行内元素和块级元素
空元素：br、meta、hr、link、input、img（空元素是在开始标签中关闭的）
请描述一下cookies，sessionStorage和localStorage的区别？
sessionStorage和localStorage统称为web storage
web storage和cookie的区别
Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。
除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生。
sessionStorage和localStorage区别
sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
什么是渐进增强（progressive enhancement）、优雅降级（graceful degradation）呢？
渐进增强progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。
css命名规范
什么是BEM呢？其实它就是css类的一种命名方式，由Yandex团队提出的，不过也有一些大牛们不喜欢这种命名方式，认为他过于复杂，冗余，降低了编码效率，不过基于存在即合理，我们还是有必要了解一下他的命名规则。
首先来理解一下什么是
B：即block，这个block不是css中样式的block，而是模块的意思，将所有的样式类分成一些模块，有点类似于语义化的html，比如将样式列分为header，section，footer等。
E:Element，元素，比如说这个组件是按钮，即可将元素名起为btn，BEM的命名中只包含三个部分，元素名只占其中一部分，所以不能出现多个元素名的情况。
M:modefiy，修饰器名。在编写前端页面代码的时候我们经常会遇到以下的状态：比如写一个下拉菜单，我们通常会编一个.active用来表示当前点击的项，那么，在BEM中，这个就可以放在modefiy中。
总结的来说，BEM的命名规则就是：block-name_element-name--modefiy-name。
同步和异步的区别
同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去；异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。
js创建对象的几种方式
https://blog.csdn.net/dinglang_2009/article/details/7913866
（1） 简单对象的创建 使用对象字面量的方式{} 创建一个对象（最简单，好理解，推荐使用）
（2）用function(函数)来模拟class (无参构造函数)创建一个对象，相当于new一个类的实例
可以使用有参构造函数来实现，这样定义更方便，扩展性更强（推荐使用）
（3）使用工厂方式来创建（Object关键字）
（4）使用原型对象的方式 prototype关键字
（5）混合模式(原型和构造函数)
（6）动态原型的方式(可以看作是混合模式的一种特例)
Ajax解决浏览器的缓存问题
今天做项目，几乎所有的提交都是通过ajax来提交，我测试的时候发现，每次提交后得到的数据都是一样的，调试可以排除后台代码的问题，所以问题肯定是出在前台。每次清除缓存后，就会得到一个新的数据，所以归根到底就是浏览器缓存问题。纠结了很久，终于解决了，在这里总结一下。我们都知道ajax能提高页面载入的速度主要的原因是通过ajax减少了重复数据的载入，也就是说在载入数据的同时将数据缓存到内存中，一旦数据被加载其中，只要我们没有刷新页面，这些数据就会一直被缓存在内存中，当我们提交 的URL与历史的URL一致时，就不需要提交给服务器，也就是不需要从服务器上面去获取数据，虽然这样降低了服务器的负载提高了用户的体验，但是我们不能获取最新的数据。为了保证我们读取的信息都是最新的，我们就需要禁止他的缓存功能
解决方案有如下几种：
1、在ajax发送请求前加上 anyAjaxObj.setRequestHeader("If-Modified-Since","0")。
2、在ajax发送请求前加上 anyAjaxObj.setRequestHeader("Cache-Control","no-cache")。
3、在URL后面加上一个随机数： "fresh=" + Math.random();。
4、在URL后面加上时间搓："nowtime=" + new Date().getTime();。
5、如果是使用jQuery，直接这样就可以了$.ajaxSetup({cache:false})。这样页面的所有ajax都会执行这条语句就是不需要保存缓存记录。