1、什么是w3c标准，谈谈对w3c的理解？
如果从WEB技术角度，可以分为三个方面的标准：结构、表现、行为。结构主要指(X)HTML标准，包括各种标签的名字、属性、语义及其他相关标准。表现主要指CSS，包括各种定位、颜色、大小等方面的标准。行为主要指Javascript，其实主要由ECMA国际制定的标准，但由于在万维网上广泛应用，开发人员也要关注。Javascript的词法、表达式、语句等方面也有一系列的标准。 Javascript没有像Java JDK那样的现成二进制文件，只有文档标准，具体的实现交给了各浏览器，所以在开发过程中，各浏览器的兼容性问题会是一个问题，我们在处理的时候可以遵循鸭式辨型原则去处理。
参考：浅谈w3c标准
2、Doctype作用是什么？严格模式与混杂模式如何区分？有何差异？
<!DOCTYPE>声明叫做文件类型定义（DTD），声明的作用为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档。<!DOCTYPE>声明必须在 HTML 文档的第一行，这并不是一个 HTML 标签。
严格模式：又称标准模式，是指浏览器按照 W3C 标准解析代码。
混杂模式：又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码。
如何区分：浏览器解析时到底使用严格模式还是混杂模式，与网页中的 DTD 直接相关。
1、如果文档包含严格的 DOCTYPE ，那么它一般以严格模式呈现。（严格 DTD ——严格模式）
2、包含过渡 DTD 和 URI 的 DOCTYPE ，也以严格模式呈现，但有过渡 DTD 而没有 URI （统一资源标识符，就是声明最后的地址）会导致 页面以混杂模式呈现。（有 URI 的过渡 DTD ——严格模式；没有 URI 的过渡 DTD ——混杂模式）
3、DOCTYPE 不存在或形式不正确会导致文档以混杂模式呈现。（DTD不存在或者格式不正确——混杂模式）
4、HTML5 没有 DTD ，因此也就没有严格模式与混杂模式的区别，HTML5 有相对宽松的语法，实现时，已经尽可能大的实现了向后兼容。（ HTML5 没有严格和混杂之分）
意义：严格模式与混杂模式存在的意义与其来源密切相关，如果说只存在严格模式，那么许多旧网站必然受到影响，如果只存在混杂模式，那么会回到当时浏览器大战时的混乱，每个浏览器都有自己的解析模式。
严格模式与混杂模式的语句解析不同点有哪些？
1）盒模型的高宽包含内边距padding和边框border
在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在IE5.5及以下的浏览器及其他版本的Quirks模式下，IE的宽度和高度还包含了padding和border。
2）可以设置行内元素的高宽
在Standards模式下，给span等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效。
3）可设置百分比的高度
在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置高度，子元素设置一个百分比的高度是无效的。
4）用margin:0 auto设置水平居中在IE下会失效
使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下却会失效,quirk模式下的解决办法，用text-align属性:
body{text-align:center};#content{text-align:left}
5）quirk模式下设置图片的padding会失效
6）quirk模式下Table中的字体属性不能继承上层的设置
7）quirk模式下white-space:pre会失效
来源：Doctype作用？严格模式与混杂模式如何区分？它们有何差异？
3、display：none和display：visibility的区别？
display：none和display：visibility都会隐藏某个元素，但是display：none隐藏的元素不会占据任何空间，从页面上消失，而display：visibility隐藏的元素仍想未隐藏的元素一样占据页面的空间。也就是说该元素被隐藏了，蛋仍会影响页面布局。
4、css选择器有哪些？那些css属性可以继承？
1、id选择器：#myid{background:black}
2、类选择器：.classname{}
3、标签选择器： div{}
4、通配选择器： *{}
5、相邻选择器：h1+div{}
6、子代选择器：h1>div{}
7、后代选择器：h1 div{}
8、属性选择器：a[attr=value]{}
9、伪类选择器：a:hover{}
可以被继承的属性有：
字体相关：line-height, font-family, font-size, font-style, font-variant, font-weight, font
文本相关： letter-spacing, text-align, text-indent, text-transform, word-spacing
列表相关：list-style-image, list-style-position, list-style-type, list-style
5、解释一下wiondow.onload和onDocumentReady和区别？
window.onload在页面所有元素（包括图片、引入的文件）夹子啊完成后执行，onDocument在html DOM和css DOM 加载后（部分图片可能没有加载完成）就可执行；
window.onload只能执行一次，如果定义多次，后者将覆盖前者，onDocument可定义多次，并且都能运行；
6、解释一下css盒模型？
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model)：
不同部分的说明：
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
为了正确设置元素在所有浏览器中的宽度和高度，你需要知道的盒模型是如何工作的。
最终元素的总宽度计算公式是这样的：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
参考:：菜鸟教程--css盒模型
7、http请求方式GET、POST、PUSH和DELETE的区别？
get请求：从服务端获取数据
特点：使用GET方法时，查询字符串（键值对）被附加在URL地址后面一起发送到服务器： sevice/getValue&name1=value1
GET请求能够被缓存
GET请求会保存在浏览器的浏览记录中
以GET请求的URL能够保存为浏览器书签
GET请求有长度限制
GET请求主要用以获取数据
post请求：提交数据给服务端处理，并返回响应
特点： 使用POST方法时，查询字符串在http请求头中单独存在
POST请求不能被缓存下来
POST请求不会保存在浏览器浏览记录中
以POST请求的URL无法保存为浏览器书签
POST请求没有长度限制
8、history和hash两种模式的区别？
9、javaScript中的数据类型有哪些？
Null 、Undefined、Boolean、String、Number、Array、 Object、Symbol
10、javaScript中join（）和split（）方法的区别？
join() : 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
split（）: 把字符串分割为字符串数组。
11、清除浮动的方法？为什么要清除浮动？什么原因导致的？
12、什么是html5 本地存储？
13、你能解释一下渐进增强和优雅降级和不同吗？
渐进增强（progressive enhancement）：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。（从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能，向页面添加无害于基础浏览器的额外样式和功能。当浏览器支持时，它们会自动地呈现出来并发挥作用。）
优雅降级（graceful degradation）：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。（Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了，为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效。）
区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的、能够起作用的版本开始，并不断扩充，以适应未来环境的需要。
14、javaScript中typeof（）方法都会返回哪些结果？
15、谈谈你对javaScript中this指向的理解？
16、如何理解JavaScript中的闭包？
17、如果处理AJAX请求返回的JSON数据？
18、网站前端性能优化的方法有哪几种？
19、javaScript中数组方法push() 、pop()、shift()和 unshift()的区别？
push（）方法可以接收任意个数的参数，吧它们逐一添加到到数组末尾。并返回修改后的数组长度；
pop（）方法从数组末尾最后一项，减少数组length值，并返回去除的那一项；
shift（）方法移除数组第一项，将这一项返回；
unshift（）方法能再数组前端添加任意个项，并返回新数组的长度
20、你能解释一下vue.js双向数据绑定的原理吗？
vue.js双向绑定就是指model层与view层的同步，两者之间任意一个发生变化都会同步更新到另一者。
View为视图层，Model为数据层，ViewModel为逻辑控制层。
vue.js采用数据劫持结合发布者-订阅者模式的方法，通过Object.defineProperty()劫持各个属性的setter，getter在数据变动时发布消息给订阅者，触发相应的监听回调。
更详细的内容请参考此页：vuejs双向数据绑定原理详解
21、说一下你对vue.js生命周期的理解？
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
比如 created 钩子可以用来在一个实例被创建之后执行代码，也有一些其它的钩子，在实例生命周期的不同阶段被调用，如 mounted、updated和 destroyed。生命周期钩子的 this 上下文指向调用它的 Vue 实例。
参考文章：vue中文文档---生命周期
22、Glup、Grunt和webpack的作用是什么？
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。webpack中文网
gulp.js - 基于流(stream)的自动化构建工具。Grunt 采用配置文件的方式执行任务，而 Gulp 一切都通过代码实现。
Grunt 是基于 Node.js 的项目构建工具。它可以自动运行你所设定的任务。Grunt 拥有数量庞大的插件，几乎任何你所要做的事情都可以用 Grunt 实现。
