前端面试题总结

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()结合);对象冒充

猜你喜欢

转载自blog.csdn.net/dan_jay/article/details/80047390