1.document.write 和 innerHTML 的区别
document.write 是直接写入到页面的内容流，会导致页面被重写。
innerHTML 将内容写入某个 DOM 节点，不会导致页面全部重绘；
2.jQuery 库中的 $() 是什么？
() 函数用于将任何对象包裹成 jQuery 对象，接着你就被允许调用定义在 jQuery 对象上的多个不同方法。你可以将一个选择器
字符串传入 $() 函数，它会返回一个包含所有匹配的 DOM 元素数组的 jQuery 对象。
3.$(document).ready()方法和 window.onload 有什么区别？
(1)、window.onload 方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行的。
(2)、$(document).ready() 方法可以在 DOM 载入就绪时就对其进行操纵，并调用执行绑定的函数。
4.行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
行内元素：a、b、span、img、input、strong、select、label、em、button、textarea 块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote 空元素：即系没有内容的 HTML 元素，例如：br、meta、hr、link、input、img
5.你为什么要使用 jquery？
因为 jQuery 是轻量级的框架，大小不到 30kb,它有强大的选择器，出色的 DOM 操作的封装，有可靠的事件处理机制(jQuery 在处
理事件绑定的时候相当的可靠)，完善的 ajax(它的 ajax 封装的非常的好，不需要考虑复杂浏览器的兼容性和 XMLHttpRequest 对象的创
建和使用的问题。) 出色的浏览器的兼容性。而且支持链式操作，隐式迭代。行为层和结构层的分离，还支持丰富的插件，jquery 的文
档也非常的丰富。
6.jquery 中的选择器 和 css 中的选择器有区别吗？
jQuery 选择器支持 CSS 里的选择器，jQuery 选择器可用来添加样式和添加相应的行为
CSS 中的选择器是只能添加相应的样式
7.web 前端开发，如何提高页面性能优化？
内容方面：
1.减少 HTTP 请求 (Make Fewer HTTP Requests)
2.减少 DOM 元素数量 (Reduce the Number of DOM Elements)
3.使得 Ajax 可缓存 (Make Ajax Cacheable)
针对 CSS：
1.把 CSS 放到代码页上端 (Put Stylesheets at the Top)
2.从页面中剥离 JavaScript 与 CSS (Make JavaScript and CSS External)
3.精简 JavaScript 与 CSS (Minify JavaScript and CSS)
4.避免 CSS 表达式 (Avoid CSS Expressions)
针对 JavaScript ：
- 脚本放到 HTML 代码页底部 (Put Scripts at the Bottom)
- 从页面中剥离 JavaScript 与 CSS (Make JavaScript and CSS External)
- 精简 JavaScript 与 CSS (Minify JavaScript and CSS)
- 移除重复脚本 (Remove Duplicate Scripts)
面向图片(Image)：
1.优化图片
2 不要在 HTML 中使用缩放图片
3 使用恰当的图片格式
4 使用 CSS Sprites 技巧对图片优化
8.什么是 Bootstrap？以及为什么要使用 Bootstrap？
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
Bootstrap 具有移动设备优先、浏览器支持良好、容易上手、响应式设计等优点，所以 Bootstrap 被广泛应用。
9.对于各类尺寸的设备，Bootstrap 设置的 class 前缀分别是什么？
超小设备手机（<768px）：.col-xs- 小型设备平板电脑（>=768px）：.col-sm- 中型设备台式电脑（>=992px）：.col-md- 大型设备台式电脑（>=1200px）：.col-lg-
10.什么是 Bootstrap 网格系统（Grid System）？
Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。
它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。
响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。
11.Bootstrap 网格系统列与列之间的间隙宽度是多少？
间隙宽度为 30px（一个列的每边分别是 15px）。
12.Vue.js 介绍
Vue.js 是一个轻巧、高性能、可组件化的 MVVM 库，同时拥有非常容易上手的 API；
Vue.js 是一个构建数据驱动的 Web 界面的库。
Vue.js 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关
注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和 Vue 生态系统
支持的库开发的复杂单页应用。数据驱动+组件化的前端开发。
简而言之：Vue.js 是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和
组合的视图组件。核心是一个响应的数据绑定系统。
13.使用 Vue 的好处
vue 两大特点：响应式编程、组件化
vue 的优势：轻量级框架、简单易学、双向数据绑定、组件化、视图、数据和结构的分离、虚拟 DOM、运行速度快
14.MVVM 定义
MVVM 是 Model-View-ViewModel 的简写。即模型-视图-视图模型。【模型】指的是后端传递的数据。【视图】指的是所看到的页
面。【视图模型】mvvm 模式的核心，它是连接 view 和 model 的桥梁。它有两个方向：一是将【模型】转化成【视图】，即将后端传
递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。
实现的方式是：DOM 事件监听。这两个方向都实现的，我们称之为数据的双向绑定。总结：在 MVVM 的框架下视图和模型是不能直
接通信的。它们通过 ViewModel 来通信，ViewModel 通常要实现一个 observer 观察者，当数据发生变化，ViewModel 能够监听到数据
的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel 也能监听到视图的变化，然后通知数据做改动，这
实际上就实现了数据的双向绑定。并且 MVVM 中的 View 和 ViewModel 可以互相通信
15.Vue 的生命周期
beforeCreate（创建前） 在数据观测和初始化事件还未开始
created（创建后） 完成数据观测，属性和方法的运算，初始化事件，$el 属性还没有显示出来
beforeMount（载入前） 在挂载开始之前被调用，相关的 render 函数首次被调用。实例已完成以下的配置：编译模板，把 data 里
面的数据和模板生成 html。注意此时还没有挂载 html 到页面上。
mounted（载入后） 在 el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的 html内容替换 el 属性指向的 DOM 对象。完成模板中的 html 渲染到 html 页面中。此过程中进行 ajax 交互。
beforeUpdate（更新前） 在数据更新之前调用，发生在虚拟 DOM 重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。updated（更新后） 在由于数据更改导致的虚拟 DOM 重新渲染和打补丁之后调用。调用时，组件 DOM 已经更新，所以可以执行依赖于 DOM 的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。beforeDestroy（销毁前） 在实例销毁之前调用。实例仍然完全可用。destroyed（销毁后） 在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。
