1、清除浮动，什么时候需要清除浮动，清除浮动都有哪些方法
浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。
a、使用空标签清除浮动。
这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。
b、使用overflow
给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6
c、使用after伪对象清除浮动。
该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0，否则该元素会比实际高出若干像素；
2、讲一下 prototype 是什么东西，原型链的理解，什么时候用 prototype
prototype是函数对象上面预设的对象属性
原型链：实例对象的原型__proto__指向new该实例对象的构造函数原型prototype，再指向原始的对象原型Object.prototype，再指向null，形成原型链。
使用prototype的好处是不会产生额外的内存，所有实例化后的对象都会从原型上继承这个属性或方法。当一个子类需要拥有父类的某些属性或方法，该属性或方法可以覆盖，又可以添加自己的属性和方法，这个操作不影响父类，这个时候使用prototype。
3、apply和 call 什么含义，什么区别?
apply：传参的时候是把参数作为一个数组传进去
call：传参的时候是扁平的把每个参数传进去
4：什么是闭包。
闭包就是能够读取其他函数内部变量的函数
闭包的用途:闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。
5、ajax 跨域有哪些方法，jsonp 的原理是什么。
实现方式一：使用jQuery中的$.getJSON方法获取数据
实现方式二：使用jQuery中的$.Ajax方法获取数据
实现方式三：使用原生JS实现JSONP
Jsonp（json with padding）是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。
Jsonp是为了解决ajax跨域发送http请求出现的，利用Script标签的特性跨域。浏览器由于安全考虑，在编写ajax程序时，httprequest/xmlhttp都不能发送非本域的http请求，是被浏览器所禁止的。所以ajax本身是无法跨域的。而jsonp就是利用了<script>标签可以链接到不同源的js脚本，来达到跨域目的。
6、谈谈你对MVVM开发模式的理解
MVVM分为Model、View、ViewModel三者。
Model 代表数据模型，数据和业务逻辑都在Model层中定义；
View 代表UI视图，负责数据的展示；
ViewModel 负责监听 Model 中数据的改变并且控制视图的更新，处理用户交互操作；
Model 和 View 并无直接关联，而是通过 ViewModel 来进行联系的，Model 和 ViewModel 之间有着双向数据绑定的联系。因此当 Model 中的数据改变时会触发 View 层的刷新，View 中由于用户交互操作而改变的数据也会在 Model 中同步。
这种模式实现了 Model 和 View 的数据自动同步，因此开发者只需要专注对数据的维护操作即可，而不需要自己操作 dom。
7、v-if 和 v-show 有什么区别？
v-show 仅仅控制元素的显示方式，将 display 属性在 block 和 none 来回切换；而v-if会控制这个 DOM 节点的存在与否。当我们需要经常切换某个元素的显示/隐藏时，使用v-show会更加节省性能上的开销；当只需要一次显示或隐藏时，使用v-if更加合理。
8、简述Vue的响应式原理
当一个Vue实例创建时，vue会遍历data选项的属性，用 Object.defineProperty 将它们转为 getter/setter并且在内部追踪相关依赖，在属性被访问和修改时通知变化。
每个组件实例都有相应的 watcher 程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新。
9、Vue中如何监控某个属性值的变化？
10、谈谈你对前端性能优化的理解
a、请求数量：合并脚本和样式表，CSS Sprites，拆分初始化负载，划分主域
b. 请求带宽：开启GZip，精简JavaScript，移除重复脚本，图像优化，将icon做成字体
c. 缓存利用：使用CDN，使用外部JavaScript和CSS，添加Expires头，减少DNS查找，配置ETag，使AjaX可缓存
d. 页面结构：将样式表放在顶部，将脚本放在底部，尽早刷新文档的输出
e. 代码校验：避免CSS表达式，避免重定向
11、线程与进程的区别
a. 一个程序至少有一个进程，一个进程至少有一个线程
b. 线程的划分尺度小于进程，使得多线程程序的并发性高
c. 进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率
d. 每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制
e. 多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用，来实现进程的调度和管理以及资源分配
12.请说出三种减少页面加载时间的方法
a. 尽量减少页面中重复的HTTP请求数量
b. 服务器开启gzip压缩
c. css样式的定义放置在文件头部
d. Javascript脚本放在文件末尾
e. 压缩合并Javascript、CSS代码
f. 使用多域名负载网页内的多个文件、图片
13.解释CSS Sprites, 以及你要如何使用?
用”background-position”来实现背景图片的定位技术,这种技术可以成为css
sprites技术，又称为css精灵。
精灵图其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。
好处：
1、通过对图片的整合来减少对服务器的请求次数，从而页面的加载速度；
3、通过图片整合可以减小图片的体积
14、单行文本溢出显示省略号的写法
1、容器宽度：width：value；
2、强制文本在一行内显示:white-space：nowrap;
3、溢出内容为隐藏：overflow：hidden；
4、溢出文本显示省略号：text-overflow：ellipsis;
15、src和href的区别
src
指向外部资源的位置, 用于替换当前元素, 比如js脚本, 图片等元素
href
指向网络资源所在的位置, 用于在当前文档和引用资源间确定联系,加载css
16、 什么是响应式布局:
响应式布局就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。
优点：灵活性强 能解决多设备显示问题
缺点：不兼容所有浏览器，一定程度改变布局结构
17、frame的优缺点？
优点：
1.解决加载缓慢的第三方内容如图标和广告等的加载问题
2.并行加载脚本
3.重载页面时不需要重载整个页面，只需要重载页面中的一个框架页(减少了数据的传输，增加了网页下载速度)
4.方便制作导航栏
缺点：
1.iframe会阻塞主页面的Onload事件
2.即时内容为空，加载也需要时间
3.没有语意
4.会产生很多页面，不容易管理
5.浏览器的后退按钮无效
6.代码复杂,无法被一些搜索引擎索引到
7.多框架的页面会增加服务器的http请求
18、原生JS 的window.onload与Jquery的 $(document).ready(function(){})有什么不同 ？
window.onload()方法是必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是 DOM 结构绘制完毕后就执行，不必等到加载完毕。
19、为什么利用多个域名来存储网站资源会更有效？
CDN缓存更方便
突破浏览器并发限制
节约cookie带宽
节约主域名的连接数，优化页面响应速度
防止不必要的安全问题
20、css中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器可视范围内？
设置display属性为none，或者设置visibility属性为hidden
设置宽高为0，设置透明度为0，设置z-index位置在-1000
21、为什么要初始化样式？
用于浏览器默认css样式的存在并且不同浏览器对相同HTML标签的默认样式不同，若不初始化会造成不同浏览器之间的显示差异。
22、Doctype作用? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?
1、<!DOCTYPE>声明位于文档中的最前面，处于<html> 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。
2、严格模式的排版和 JS 运作模式是,以该浏览器支持的最高标准运行。
3、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
4、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
23、Css定位方式有哪些？区别？
1、static：默认值，无特殊定位，对象遵循HTML原则；
2、absolute：
绝对定位，将对象从文档流中拖离出来，使用left/right/top/bottom属性相对
其最接近的一个并有定位设置的父元素进行绝对定位；如果不存在这样的父
对象，则依据html对象(浏览器)，而其层叠通过z-index属性定义，此属性
仅仅作用于 position 属性值为 absolute/relative/fixed 的对象。
3、relative：
相对定位，相对于标签原来的位置进行定位，对依据right，top，left，bottom
（相对定位）等属性在正常文档流中偏移位置；
4、fixed：固定定位：相对于浏览器定位，脱离文档流；
24、post与get区别
1、GET请求，请求的数据会附加在URL之后，以?分割URL和传输数据，多个 参数用&连接。URL的编码格式采用的是ASCII编码，而不是uniclde，即是说 所有的非ASCII字符都要编码之后再传输。 POST请求：POST请求会把请求的数据放置在HTTP请求包的包体中。上面的 item=bandsaw就是实际的传输数据。 因此，GET请求的数据会暴露在地址栏中，而POST请求则不会。
2、传输数据的大小 在HTTP规范中，没有对URL的长度和传输的数据大小进行限制。但是在实际开 发过程中，对于GET，特定的浏览器和服务器对URL的长度有限制。因此，在使 用GET请求时，传输数据会受到URL长度的限制。 对于POST，由于不是URL传值，理论上是不会受限制的，但是实际上各个服务 器会规定对POST提交数据大小进行限制，Apache、IIS都有各自的配置。
3、安全性 POST的安全性比GET的高。这里的安全是指真正的安全，而不同于上面GET提 到的安全方法中的安全，上面提到的安全仅仅是不修改服务器的数据。比如，在 进行登录操作，通过GET请求，用户名和密码都会暴露再URL上，因为登录页面 有可能被浏览器缓存以及其他人查看浏览器的历史记录的原因，此时的用户名和 密码就很容易被他人拿到了。除此之外，GET请求提交的数据还可能会造成 Cross-site request frogery攻击。
4、HTTP中的GET，POST，SOAP协议都是在HTTP上运行的
