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(内容)- 盒子的内容，显示文本和图像。
为了正确设置元素在所有浏览器中的宽度和高度，你需要知道的盒模型是如何工作的。
最终元素的总宽度计算公式是这样的：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
7.你能解释一下渐进增强和优雅降级和不同吗？
渐进增强（progressive enhancement）：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。（从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能，向页面添加无害于基础浏览器的额外样式和功能。当浏览器支持时，它们会自动地呈现出来并发挥作用。）
优雅降级（graceful degradation）：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。（Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了，为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效。）
区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的、能够起作用的版本开始，并不断扩充，以适应未来环境的需要。
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 实例。
在JS中，绑定的事件默认的执行时间是在冒泡阶段执行，而非在捕获阶段，必须要理解
不过我们可以通过绑定事件时，指定事件执行时间是在冒泡阶段还是捕获阶段。
obj.addEventListener(event,function(){},bool)
bool:false，代表冒泡阶段执行
bool:true，代表捕获阶段执行
JS在默认情况下获取事件后，就开始从根元素开始捕获所有该事件的监听对象，然后在冒泡阶段逐一执行。捕获阶段是在冒泡阶段前面
阻止冒泡
w3c的方法是e.stopPropagation()，IE则是使用e.cancelBubble = true；
阻止默认行为
w3c的方法是e.preventDefault()，IE则是使用e.returnValue = false;
关于JS 事件冒泡和onclick,click,on()事件触发顺序
onclick,click,on()的优先关系：onclick>click>on()；
onclick和click绑定的事件，彼此之间遵守事件冒泡规则，从内到外触发；
on()绑定的事件，总是晚于onclick和click绑定的事件触发；
前端工程化面临的问题
要解决前端工程化的问题，可以从两个角度入手：开发和部署。
从开发角度，要解决的问题包括：
提高开发生产效率；
降低维护难度。
这两个问题的解决方案有两点：
制定开发规范，提高团队协作能力；
分治。软件工程中有个很重要的概念叫做模块化开发其中心思想就是分治。
从部署角度，要解决的问题主要是资源管理，包括：
代码审查；
压缩打包；
增量更新；
单元测试；
要解决上述问题，需要引入构建/编译阶段。
2.1 开发规范
开发规范的目的是统一团队成员的编码规范，便于团队协作和代码维护。开发规范没有统一的标准，每个团队可以建立自己的一套规范体系。
值得一提的是JavaScript的开发规范，尤其是在ES2015越来越普及的局面下，保持良好的编码风格是非常必要的。笔者推荐Airbnb的eslint规范。
2.2 模块/组件化开发
2.2.1 模块还是组件？
很多人会混淆模块化开发和
网友评论