前端面试题总结

1.你为什么要使用jquery？

答：因为jQuery是轻量级的框架，大小不到30kb,它有强大的选择器，出色的DOM操作的封装，有可靠的事件处理机制(jQuery在处理事件绑定的时候相当的可靠)，完善的ajax(它的ajax封装的非常的好，不需要考虑复杂浏览器的兼容性和XMLHttpRequest对象的创建和使用的问题。) 出色的浏览器的兼容性。而且支持链式操作，隐式迭代。行为层和结构层的分离，还支持丰富的插件，jquery的文档也非常的丰富。

2．解释下浮动和它的工作原理？清除浮动的技巧

.使用空标签清除浮动。 这种方法是在所有浮动标签后面添加一个空标签 定义cssclear:both. 弊端就是增加了无意义标签；使用overflow。给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6；.使用after伪对象清除浮动。

优先级为: !important > id > class > tag

3. javascript对象的几种创建方式

1，工厂模式 2，构造函数模式 3，原型模式 4，混合构造函数和原型模式5，动态原型模式 6，寄生构造函数模式 7，稳妥构造函数模式

4. javascript继承的6种方法

1，原型链继承 2，借用构造函数继承 3，组合继承(原型+借用构造) 4，原型式继承 5，寄生式继承 6，寄生组合式继承

5.ajax过程

(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象.(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息. (3)设置响应HTTP请求状态变化的函数. (4)发送HTTP请求. (5)获取异步调用返回的数据. (6)使用JavaScript和DOM实现局部刷新.

6.javascript里面的继承怎么实现，如何避免原型链上面的对象共享

用构造函数和原型链的混合模式去实现继承，避免对象共享可以参考经典的extend()函数，很多前端框架都有封装的，就是用一个空函数当做中间变量

7.Javascript无阻塞加载具体方式

将脚本放在底部。<link>还是放在head中，用以保证在js加载前，能加载出正常显示的页面。<script>标签放在</body>前。

成组脚本：由于每个<script>标签下载时阻塞页面解析过程，所以限制页面的<script>总数也可以改善性能。适用于内联脚本和外部脚本。

非阻塞脚本：等页面完成加载后，再加载js代码。也就是，在window.onload事件发出后开始下载代码。

（1）defer属性：支持IE4和fierfox3.5更高版本浏览器

（2）动态脚本元素：文档对象模型（DOM）允许你使用js动态创建HTML的几乎全部文档内容。

8.JavaScript原型，原型链 ? 有什么特点？作用域链

* 原型对象也是普通的对象，是对象一个自带隐式的 __proto__ 属性，原型也有可能有自己的原型，如果一个原型对象的原型不为null的话，我们就称之为原型链。 * 原型链是由一些用来继承和共享属性的对象组成的（有限的）对象链。

作用域链的作用是保证执行环境里有权访问的变量和函数是有序的，作用域链的变量只能向上访问，变量访问到window对象即被终止，作用域链向下访问变量是不被允许的。

9. Node.js的适用场景？

高并发、聊天、实时消息推送

10. 你知道jquery中的选择器吗，请讲一下有哪些选择器？好处

答：选择器大致分为:基本选择器，层次选择器，过滤选择器，表单选择器。简单的写法  $('ID') 来代替document.getElementById()函数；支持CSS1 到CSS3 选择器；完善的处理机制(就算写错了id也不会报错)

11.jquery对象和dom对象是怎样转换的？

答：jquery转DOM对象:jQuery 对象是一个数组对象，可以通过[index]的丰富得到相应的DOM对象；还可以通过get[index]去得到相应的DOM对象。DOM对象转jQuery对象:$(DOM对象)

13.在jquery中你是如何去操作样式的？jquery中的load方法一般怎么用的？

答: addClass() 来追加样式；removeClass() 来删除样式；toggle() 来切换样式。load方法一般在载入远程HTML代码并插入到DOM中的时候用，通常用来从Web服务器上获取静态的数据文件。如果要传递参数的话，可以使用$.get() 或 $.post()

14. 你在ajax中使用过JSON吗，你是如何用的？

答:使用过，在$.getJSON()方法的时候就是。因为 $.getJSON() 就是用于加载JSON文件的。

在网页中每个id名称只能用一次，class可以允许重复使用

15. jQuery 能做什么？

答：获取页面的元素，，修改页面的外观，改变页面大的内容，响应用户的页面操作，为页面添加动态效果，无需刷新页面，即可以从服务器获取信息，简化常见的javascript任务

16.你知道jQuery中的事件冒泡吗，它是怎么执行的，何如来停止冒泡事件？

答 : 知道, 事件冒泡是从里面的往外面开始触发。在jQuery中提供了stopPropagation()方法可以停止冒泡。

17. 什么叫优雅降级和渐进增强？

渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

区别：

a. 优雅降级是从复杂的现状开始，并试图减少用户体验的供给

b. 渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要

c. 降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带

18.JS怎样添加、移除、移动、复制、创建和查找节点？

1）创建新节点 ：createDocumentFragment()//创建一个DOM片段

createElement() //创建一个具体的元素   createTextNode() //创建一个文本节点

2）添加、移除、替换、插入

appendChild() //添加  removeChild() //移除replaceChild() //替换  insertBefore() //插入

3）查找

getElementsByTagName() //通过标签名称  getElementsByName() //通过元素的Name属性的值     getElementById() //通过元素Id，唯一性

19.在Javascript中什么是伪数组？如何将伪数组转化为标准数组？

伪数组（类数组）：无法直接调用数组方法或期望length属性有什么特殊的行为，但仍可以对真正数组遍历方法来遍历它们。典型的是函数的argument参数，还有像调用getElementsByTagName,document.childNodes之类的,它们都返回NodeList对象都属于伪数组。可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象。

20.行内元素有哪些？块级元素有哪些？ 空(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

21.什么是CSSHack?

一般来说是针对不同的浏览器写不同的CSS,就是 CSS Hack。IE浏览器Hack一般又分为三种，条件Hack、属性级Hack、选择符Hack（详细参考CSS文档：css文档）。

22. HTML5新特性

用于绘画的 canvas 元素；用于媒介回放的 video 和 audio 元素对本地离线存储的更好的支持；新的特殊内容元素，比如 article、footer、header、nav、section；新的表单控件，比如 calendar、date、time、email、url、search

23.为什么要初始化CSS样式。

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。最简单的初始化方法就是： * {padding: 0; margin: 0;} （不建议）

24. 请说出三种减少页面加载时间的方法。

1.优化图片2.图像格式的选择（GIF：提供的颜色较少，可用在一些对颜色要求不高的地方）

3.优化CSS（压缩合并css，如margin-top,margin-left...)4.网址后加斜杠（如www.campr.com/目录，会判断这个“目录是什么文件类型，或者是目录。）5.标明高度和宽度（如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断地调整页面。这不但影响速度，也影响浏览体验。

25. 谈谈你对webpack的看法

WebPack 是一个模块打包工具，你可以使用WebPack管理你的模块依赖，并编绎输出模块们所需的静态文件。它能够很好地管理、打包Web开发中所用到的HTML、JavaScript、CSS以及各种静态文件（图片、字体等），让开发过程更加高效。

26. 谈谈性能优化问题

代码层面：少用全局变量；用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能；用setTimeout来避免页面失去响应；缓存DOM节点查找的结果；避免全局查询；多个变量声明合并；避免图片和iFrame等的空Src。空Src会重新加载当前页面，影响速度和效率；尽量避免写在HTML标签中写Style属性

27.ES6的了解

ES6将promise对象纳入规范，提供了原生的Promise对象。增加了let和const命令，用来声明变量。增加了块级作用域。let命令实际上就增加了块级作用域。ES6规定，var命令和function命令声明的全局变量，属于全局对象的属性；let命令、const命令、class命令声明的全局变量，不属于全局对象的属性。还有就是引入module模块的概念

28. 说说你对闭包的理解

使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。在js中，函数即闭包，只有函数才会产生作用域的概念

29.常见兼容性问题？

png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.也可以引用一段脚本处理.

浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。

30. DOM操作——怎样添加、移除、移动、复制、创建和查找节点。

1）创建新节点

 createDocumentFragment() //创建一个DOM片段  createElement() //创建一个具体的元素

createTextNode()   //创建一个文本节点

2）添加、移除、替换、插入

appendChild()；emoveChild()；replaceChild()；insertBefore()

3）查找

getElementsByTagName()    //通过标签名称getElementsByName()    //通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)

getElementById()  //通过元素Id，唯一性

31.ajax的缺点和在IE下的问题？

ajax不支持浏览器back按钮；安全问题 AJAX暴露了与服务器交互的细节；对搜索引擎的支持比较弱；破坏了程序的异常机制；不容易调试。

32.html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和HTML5？

新特性：HTML5已经不是SGML的子集；新增关于图像，地理位置，缓存，多任务等多个功能；用于媒体回放的Video和Audio；语义化更好的标签，利于SEO优化；新的表单控件

移除的元素：纯表现的元素 basefont font big s strike tt u；影响页面的元素 frameframeset noframe

如何处理HTML5新标签的浏览器兼容问题：

对于浏览器不支持的标签可以使用document.createElement方法产生标签，但是需要自己填写默认样式；使用成熟的技术框架比如html5shim

如何区分html和HTML5？

根据文档DOCTYPE申明，查看有无新增元素

33.简述一下你对HTML语义化的理解？

正确的标签做正确的事情；爬虫可以根据文档结构来确定上下文，有利于SEO优化；在无网络情况下不至于排版过于混乱；结构化代码便于开发人员的开发和维护

34.对web标准化(或网站重构)知道哪些相关的知识,简述几条你知道的Web标准?

网页主要有三部分组成：结构（Structrue）、表现（presentation）和行为（Behavior）。对应的网站标准也分为三方面：结构化标准语言，主要包括XHTML和XML；表现标准主要包括css；行为标准主要包括对象模型（如W3C  DOM）、ECMAScript等

35. 谈谈垃圾回收机制方式及内存管理

回收机制方式

1、定义和用法：垃圾回收机制(GC:GarbageCollection),执行环境负责管理代码执行过程中使用的内存。

2、原理：垃圾收集器会定期（周期性）找出那些不在继续使用的变量，然后释放其内存。但是这个过程不是实时的，因为其开销比较大，所以垃圾回收器会按照固定的时间间隔周期性的执行。

javascript面向对象中继承实现？

面向对象的基本特征有：封闭、继承、多态。在JavaScript中实现继承的方法：

原型链（prototype chaining）；. call()/apply()；混合方式(prototype和call()/apply()结合)；对象冒充