做有温度的教育!
全国统一咨询热线:400-803-9399
北京
校区
新闻资讯> 行业新闻> web前端面试必备面试题整理

web前端面试必备面试题整理

时间:2021-02-24
浏览:988
发布:小骨头
赞:97

Web前端面试必备面试题!今天小编要跟大家分享的文章是关于Web前端面试必备面试题整理。准备参加Web前端面试的小伙伴们来和小编一起看一看吧,希望本篇文章能够对大家有所帮助。


1.如何理解闭包?

1、定义和用法:当一个函数的返回值是另外一个函数,而返回的那个函数如果调用了其父函数内部的其它变量,如果返回的这个函数在外部被执行,就产生了闭包。

2、表现形式:使函数外部能够调用函数内部定义的变量。

3、实例如下:

(1)、根据作用域链的规则,底层作用域没有声明的变量,会向上一级找,找到就返回,没找到就一直找,直到window的变量,没有就返回undefined。这里明显count 是函数内部的flag2 的那个count 。

var count=10; //全局作用域 标记为flag1function add(){

var count=0; //函数全局作用域 标记为flag2

return function(){

count+=1; //函数的内部作用域

alert(count);

}

}

var s = add()

s();//输出1

s();//输出2

4、变量的作用域

要理解闭包,首先必须理解Javascript特殊的变量作用域。

变量的作用域分类:全局变量和局部变量。

特点:

1、函数内部可以读取函数外部的全局变量;在函数外部无法读取函数内的局部变量。

2、函数内部声明变量的时候,一定要使用var命令。如果不用的话,你实际上声明了一个全局变量!

5、使用闭包的注意点

1)滥用闭包,会造成内存泄漏:由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。

2)会改变父函数内部变量的值。所以,如果你把父函数当作对象(object)使用,把闭包当作它的公用方法(Public Method),把内部变量当作它的私有属性(private value),这时一定要小心,不要随便改变父函数内部变量的值。


u=2094656878,2585258840&fm=26&gp=0.jpg


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

回收机制方式

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

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

3、实例如下:

function fn1() {

var obj = {name: 'hanzichi', age: 10};

}

function fn2() {

var obj = {name:'hanzichi', age: 10};

return obj;

}

var a = fn1();var b = fn2();

fn1中定义的obj为局部变量,而当调用结束后,出了fn1的环境,那么该块内存会被js引擎中的垃圾回收器自动释放;在fn2被调用的过程中,返回的对象被全局变量b所指向,所以该块内存并不会被释放。

4、垃圾回收策略:标记清除(较为常用)和引用计数。

标记清除:

定义和用法:当变量进入环境时,将变量标记"进入环境",当变量离开环境时,标记为:"离开环境"。某一个时刻,垃圾回收器会过滤掉环境中的变量,以及被环境变量引用的变量,剩下的就是被视为准备回收的变量。

到目前为止,IE、Firefox、Opera、Chrome、Safari的js实现使用的都是标记清除的垃圾回收策略或类似的策略,只不过垃圾收集的时间间隔互不相同。

引用计数:

定义和用法:引用计数是跟踪记录每个值被引用的次数。

基本原理:就是变量的引用次数,被引用一次则加1,当这个引用计数为0时,被视为准备回收的对象。


3.判断一个字符串中出现次数最多的字符,统计这个次数

var str = 'asdfssaaasasasasaa';

var json = {};

for (var i = 0; i < str.length; i++) {

if(!json[str.charAt(i)]){

json[str.charAt(i)] = 1;

}

else{

json[str.charAt(i)]++;

}

};

var iMax = 0;var iIndex = '';for(var i in json){

if(json[i]>iMax){

iMax = json[i];

iIndex = i;

}

}

console.log('出现次数最多的是:'+iIndex+'出现'+iMax+'次');


4.$(document).ready()方法和window.onload有什么区别?

(1)、window.onload方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行的。

(2)、$(document).ready() 方法可以在DOM载入就绪时就对其进行操纵,并调用执行绑定的函数。


5.jquery中$.get()提交和$.post()提交有区别吗?

相同点:都是异步请求的方式来获取服务端的数据;

异同点:

1、请求方式不同:$.get() 方法使用GET方法来进行异步请求的。$.post() 方法使用POST方法来进行异步请求的。

2、参数传递方式不同:get请求会将参数跟在URL后进行传递,而POST请求则是作为HTTP消息的实体内容发送给Web服务器的,这种传递是对用户不可见的。

3、数据传输大小不同:get方式传输的数据大小不能超过2KB 而POST要大的多

4、安全问题:GET 方式请求的数据会被浏览器缓存起来,因此有安全问题。


6.jQuery的事件委托方法bind 、live、delegate、on之间有什么区别?(常见)

(1)、bind 【jQuery 1.3之前】

定义和用法:主要用于给选择到的元素上绑定特定事件类型的监听函数;

语法:bind(type,[data],function(eventObject));

特点:

(1)、适用于页面元素静态绑定。只能给调用它的时候已经存在的元素绑定事件,不能给未来新增的元素绑定事件。

(2)、当页面加载完的时候,你才可以进行bind(),所以可能产生效率问题。

实例如下:$( "#members li a" ).bind( "click", function( e ) {} );

(2)、live 【jQuery 1.3之后】

定义和用法:主要用于给选择到的元素上绑定特定事件类型的监听函数;

语法:live(type, [data], fn);

特点:

(1)、live方法并没有将监听器绑定到自己(this)身上,而是绑定到了this.context上了。

(2)、live正是利用了事件委托机制来完成事件的监听处理,把节点的处理委托给了document,新添加的元素不必再绑定一次监听器。

(3)、使用live()方法但却只能放在直接选择的元素后面,不能在层级比较深,连缀的DOM遍历方法后面使用,即$(“ul”").live...可以,但$("body").find("ul").live...不行;

实例如下:$( document ).on( "click", "#members li a", function( e ) {} );

(3)、delegate 【jQuery 1.4.2中引入】

定义和用法:将监听事件绑定在就近的父级元素上

语法:delegate(selector,type,[data],fn)

特点:

(1)、选择就近的父级元素,因为事件可以更快的冒泡上去,能够在第一时间进行处理。

(2)、更精确的小范围使用事件代理,性能优于.live()。可以用在动态添加的元素上。

实例如下:

$("#info_table").delegate("td","click",function(){/*显示更多信息*/});

$("table").find("#info").delegate("td","click",function(){/*显示更多信息*/});

(4)、on 【1.7版本整合了之前的三种方式的新事件绑定机制】

定义和用法:将监听事件绑定到指定元素上。

语法:on(type,[selector],[data],fn)

实例如下:$("#info_table").on("click","td",function(){/*显示更多信息*/});参数的位置写法与delegate不一样。

说明:on方法是当前JQuery推荐使用的事件绑定方法,附加只运行一次就删除函数的方法是one()。

总结:.bind(), .live(), .delegate(),.on()分别对应的相反事件为:.unbind(),.die(), .undelegate(),.off()


7.px和em的区别(常见)

相同点:px和em都是长度单位;

异同点:px的值是固定的,指定是多少就是多少,计算比较容易。em得值不是固定的,并且em会继承父级元素的字体大小。

浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。


8.浏览器的内核分别是什么?

IE: trident内核

Firefox:gecko内核

Safari:Webkit内核

Opera:以前是presto内核,Opera现已改用Google Chrome的Blink内核

Chrome:Blink(基于Webkit,Google与Opera Software共同开发)


9.什么叫优雅降级和渐进增强?(常见)

渐进增强 progressive enhancement:

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

优雅降级 graceful degradation:

一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。

区别:

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

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

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


10.sessionStorage 、localStorage 和 cookie 之间的区别(常见)

共同点:用于浏览器端存储的缓存数据

不同点:

(1)、存储内容是否发送到服务器端:当设置了Cookie后,数据会发送到服务器端,造成一定的宽带浪费;

Web storage,会将数据保存到本地,不会造成宽带浪费;

(2)、数据存储大小不同:Cookie数据不能超过4K,适用于会话标识;Web storage数据存储可以达到5M;

(3)、数据存储的有效期限不同:cookie只在设置了Cookid过期时间之前一直有效,即使关闭窗口或者浏览器;

sessionStorage,仅在关闭浏览器之前有效;localStorage,数据存储永久有效;

(4)、作用域不同:cookie和localStorage是在同源同窗口中都是共享的;sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;


以上就是小编今天为大家分享的关于Web前端面试必备面试题整理的文章,希望本篇文章能够对正在从事Web前端工作的小伙伴们有所帮助,想要了解更多Web前端知识记得关注甲骨文Web培训官网,最后祝愿小伙伴们工作顺利,成为一名优秀的Web前端工程师。

相关推荐

网络工程运维安全:远离故障的七大原则,你知道几个?

网络工程运维安全:远离故障的七大原则,你知道几个?

对于网络工程师来说故障是网络运营人员永远的痛,相信每一个网络工程运维人员都会在工作中 遇到各种各样的障碍,下面为了规避同学们在工作中能避免这些故障,甲骨文华育兴业的小编列举了以下几条,欢迎补充!也是运维最繁琐,最苦逼的地方,所有的变更都必须有回滚的办法,在同样的环境下测试过。没有做过的东西,总是会在你意想不到的地方给你一次痛击,多年运维经验告诉我们,所有没有做过的变更,出错的概率最大。所以我们需要给变更以回滚的可能,在各个步骤可能出错的情况下,考虑回滚到最初状态。优秀的运维人员对不考虑回滚的的操作都是敬而远之的。从某种意义上来说,运维是一门经验的学科,是一门试错的学科。

网络安全:关于网络管理系统简化安全防护的5点建议

网络安全:关于网络管理系统简化安全防护的5点建议

对于网络工程师来说最重要的工作是管理好网络的安全防护, 不仅要做到维护并更多地开始关注安全防护。下面给大家介绍几个确保企业安全安全防护的有力工具!第一,从安全角度来看,监控网络非常重要,因为所有数据都要经过它,这也是查找异常情况和事件的好地方。而且在监控恶意活动时,行为分析成为了常态,也让防护对象发生了由外而内的转变。

哈尔滨大数据培训费用

哈尔滨大数据培训多少钱?

哈尔滨大数据培训多少钱?大数据开发入门简单,职业发展潜力大,随着开发经验的积累和薪资上升幅度显著,企业对合格的大数据开发人员求贤若渴,在各大主流招聘平台上, 大数据相关职位数量一直名列前茅。

java开发培训

什么样的代码是好代码?

好的代码,就像是好的笑话——无需解释就能让别人明白。如果你的代码能够做到不解自明,在大多数时候,你根本无需为其配备说明文档。   好的代码,就像是一辆配备了优秀音响和杯架的汽车,这辆车在行驶到最高速度的时候,你听不到噪音,也不用担心水会洒出来。在它出现故障的时候,任何一名修理工都可以使用最常见的工具,在最短的时间里轻松将其修好。

大数据中hadoop是什么? ps使用 大数据 冲刺Java架构师年薪50W

友情链接: 教育培训 甲骨文华育兴业太原校区 甲骨文华育兴业济南校区 甲骨文华育兴业哈尔滨校区 甲骨文华育兴业长春校区 魔据教育

Copyright ©2016-2019. All Rights Reserved.

    京ICP备17018991号-4     网站地图