码迷,mamicode.com
首页 > Web开辟 > 详细

最全的web前端面试题及答案整顿 你不能不看

时间:2019-10-08 17:25:13      浏览:94      评论:0      收藏:0      [点我收藏+]

标签:出口   情势   class   import   行内元素   add   dom操作   ppc   处理   

面试web前端开辟,不论是口试照样面试,都邑触及到各类专业技巧成绩,明天小编整顿了一些罕见的web前端面试题及答案,欲望对大年夜家有所赞助。

1、经常使用那几种浏览器测试?有哪些内核(Layout Engine)?

(Q1) 浏览器:IE,Chrome,FireFox,Safari,Opera。

(Q2) 内核:Trident,Gecko,Presto,Webkit。

2、 说下行内元素和块级元素的差别?行内块元素的兼容性应用?(IE8 以下)

(Q1) 行内元素:会在程度偏向分列,不克不及包含块级元素,设置width有效,height有效(可以设置line-height),margin高低有效,padding高低有效。

  块级元素:各占据一行,垂直偏向分列。重新行开端停止接着一个断行。

(Q2) 兼容性:display:inline-block;*display:inline;*zoom:1;

3、 清除浮动有哪些方法?比较好的方法是哪一种?

(Q1)

  (1)父级div定义height。

  (2)开头处加空div标签clear:both。

  (3)父级div定义伪类:after和zoom。

  (4)父级div定义overflow:hidden。

  (5)父级div定义overflow:auto。

  (6)父级div也浮动,须要定义宽度。

  (7)父级div定义display:table。

  (8)开头处加br标签clear:both。

(Q2) 比较好的是第3种方法,很多多少网站都这么用。

4、box-sizing经常使用的属性有哪些?分别有甚么感化?

(Q1)box-sizing: content-box|border-box|inherit;

(Q2)content-box:宽度和高度分别应用到元素的内容框。在宽度和高度以外绘制元素的内边距和边框(元素默许后果)。

border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内停止绘制。经过过程从已设定的宽度和高度分别减去边框和内边距才能取得内容的宽度和高度。

5、Doctype感化?标准形式与兼容形式各有甚么差别?

(Q1) 告诉浏览器的解析器用甚么文档标准解析这个文档。DOCTYPE不存在或格局不精确会招致文档以兼容形式出现。

(Q2) 标准形式的排版和JS运作形式都是以该浏览器支撑的最高标准运转。在兼容形式中,页面以宽松的向后兼容的方法显示,模仿老式浏览器的行动以防止站点没法任务。

6、HTML5 为甚么只须要写 ?

HTML5不基于 SGML,是以不须要对DTD停止援用,然则须要doctype来标准浏览器的行动(让浏览器按照它们应当的方法来运转)。

  而HTML4.01基于SGML,所以须要对DTD停止援用,才能告诉浏览器文档所应用的文档类型。

7、 页面导入款式时,应用link和@import有甚么差别?

  (1)link属于XHTML标签,除加载CSS外,还能用于定义RSS, 定义rel连接属性等感化;而@import是CSS供给的,只能用于加载CSS;

  (2)页面被加载的时,link会同时被加载,而@import援用的CSS会比及页面被加载完再加载;

  (3)import是CSS2.1 提出的,只在IE5以上才能被辨认,而link是XHTML标签,无兼容成绩。

8、简介一下你对浏览器内核的懂得?

  重要分红两部分:衬着引擎(layout engineer或Rendering Engine)和JS引擎。

  衬着引擎:担任取得网页的内容(HTML、XML、图象等等)、整顿讯息(例如参加CSS等),和计算网页的显示方法,然后会输入至显示器或打印机。浏览器的内核的不合关于网页的语法解释会有不合,所以衬着的后果也不雷同。一切网页浏览器、电子邮件客户端和其它须要编辑、显示搜集内容的应用法式榜样都须要内核。

JS引擎则:解析和履行javascript来完成网页的静态后果。

  最开端衬着引擎和JS引擎并没有辨别的很明白,后来JS引擎愈来愈自力,内核就偏向于只指衬着引擎。

9、html5有哪些新特点?若何处理HTML5新标签的浏览器兼容成绩?若何辨别 HTML 和 HTML5?

(Q1)

HTML5 如今曾经不是 SGML 的子集,主如果关于图象,地位,存储,多义务等功能的增长。

(1)绘画 canvas;

(2)用于序文回放的 video 和 audio 元素;

(3)本地离线存储 localStorage 经久存储数据,浏览器封闭后数据不损掉;

(4)sessionStorage 的数据在浏览器封闭后主动删除;

(5)语意化更好的内容元素,比如 article、footer、header、nav、section;

(6)表单控件,calendar、date、time、email、url、search;

(7)新的技巧webworker, websocket, Geolocation;

(Q2)

IE8/IE7/IE6支撑经过过程document.createElement办法产生的标签,

  可以应用这一特点让这些浏览器支撑HTML5新标签,

  浏览器支撑新标签后,还须要添加标签默许的款式。

  固然也能够直接应用成熟的框架、比如html5shim,

10、简述一下你对HTML语义化的懂得?

  用精确的标签做精确的任务。

html语义化让页面的内容构造化,构造更清楚,便于对浏览器、搜刮引擎解析;

  即使在没有款式CSS情况下也以一种文档格局显示,并且是轻易浏览的;

  搜刮引擎的爬虫也依附于HTML标记来肯定高低文和各个关键字的权重,利于SEO;

  使浏览源代码的人对网站更轻易将网站分块,便于浏览保护懂得。

JavaScript

1、简介js的根本数据类型

Undefined、Null、Boolean、Number、String

2、js有哪些内置对象?

  数据封装类对象:Object、Array、Boolean、Number 和 String

  其他对象:Function、Arguments、Math、Date、RegExp、Error

3、this对象的懂得

this总是指向函数的直接调用者(而非直接调用者);

  假设有new关键字,this指向new出来的那个对象;

  在事宜中,this指向触发这个事宜的对象,特别的是,IE中的attachEvent中的this总是指向全局对象Window。

4、eval是做甚么的?

  它的功能是把对应的字符串解析成JS代码并运转;

  应当防止应用eval,不安然,异常耗性能(2次,一次解析成js语句,一次履行)。

  由JSON字符串转换为JSON对象的时辰可以用eval,var obj =eval(‘(‘+ str +‘)‘)。

5、DOM如何添加、移除、移动、复制、创建和查找节点

// 创建新节点

createDocumentFragment() //创建一个DOM片段

createElement() //创建一个详细的元素

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

// 添加、移除、调换、拔出

appendChild()

removeChild()

replaceChild()

insertBefore() //在已有的子节点前拔出一个新的子节点

// 查找

getElementsByTagName() //经过过程标签称号

getElementsByName() //经过过程元素的Name属性的值(IE容错才能较强,会取得一个数组,个中包含id等于name值的)

getElementById() //经过过程元素Id,唯一性

6、null和undefined的差别?

null是一个表示"无"的对象,转为数值时为0;undefined是一个表示"无"的原始值,转为数值时为NaN。

undefined:

  (1)变量被声清楚明了,但没有赋值时,就等于undefined。

  (2) 调用函数时,应当供给的参数没有供给,该参数等于undefined。

  (3)对象没有赋值的属性,该属性的值为undefined。

  (4)函数没有前往值时,默许前往undefined。

null:

  (1) 作为函数的参数,表示该函数的参数不是对象。

  (2) 作为对象原型链的终点。

7、new操作符详细干了甚么呢?

  (1)创建一个空对象,并且 this 变量援用该对象,同时还持续了该函数的原型。

  (2)属性和办法被参加到 this 援用的对象中。

  (3)新创建的对象由 this 所援用,并且最后隐式的前往 this 。

8、JSON 的懂得?

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格局。它是基于JavaScript的一个子集。数据格局简单, 易于读写, 占用带宽小。

  格局:采取键值对,例如:{‘age‘:‘12‘, ‘name‘:‘back‘}

9、call() 和 apply() 的差别和感化?

apply()函数有两个参数:第一个参数是高低文,第二个参数是参数构成的数组。假设高低文是null,则应用全局对象代替。

  如:function.apply(this,[1,2,3]);

call()的第一个参数是高低文,后续是实例传入的参数序列。

  如:function.call(this,1,2,3);

10、若何获得UA?

function whatBrowser() {

document.Browser.Name.value=navigator.appName;

document.Browser.Version.value=navigator.appVersion;

document.Browser.Code.value=navigator.appCodeName;

document.Browser.Agent.value=navigator.userAgent;

}

  其他

1、HTTP状况码知道哪些?

100 Continue 持续,普通在发送post请求时,已发送了http header以后办事端将前往此信息,表示确认,以后发送详细参数信息

200 OK 正常前往信息

201 Created 请求成功并且办事器创建了新的资本

202 Accepted 办事器已接收请求,但还没有处理

301 Moved Permanently 请求的网页已永久移动到新地位。

302 Found 临时性重定向。

303 See Other 临时性重定向,且总是应用 GET 请求新的 URI。

304 Not Modified 自从前次请求后,请求的网页未修悛改。

400 Bad Request 办事器没法懂得请求的格局,客户端不应当测验测验再次应用雷同的内容提议请求。

401 Unauthorized 请求未授权。

403 Forbidden 禁止拜访。

404 Not Found 找不到若何与 URI 相婚配的资本。

500 Internal Server Error 最罕见的办事器端缺点。

503 Service Unavailable 办事器端临时没法处理请求(能够是过载或保护)。

2、你有哪些性能优化的办法?

  (1) 增添http请求次数:CSS Sprites, JS、CSS源码紧缩、图片大年夜小控制合适;网页Gzip,CDN托管,data缓存 ,图片办事器。

  (2) 前端模板 JS+数据,增添由于HTML标签招致的带宽浪费,前端用变量保存AJAX请求成果,每次操作本地变量,不消请求,增添请求次数

  (3) 用innerHTML代替DOM操作,增添DOM操作次数,优化javascript性能。

  (4) 当须要设置的款式很多时设置className而不是直接操作style。

  (5) 罕用全局变量、缓存DOM节点查找的成果。增添IO读取操作。

  (6) 防止应用CSS Expression(css表达式)又称Dynamic properties(静态属性)。

  (7) 图片预加载,将款式表放在顶部,将脚本放在底部 加上时间戳。

3、 甚么叫优雅升级和渐进加强?

  优雅升级:Web站点在一切新式浏览器中都能正常任务,假设用户应用的是老式浏览器,则代码会检查以确认它们能否能正常任务。由于IE独特的盒模型构造成绩,针对不合版本的IE的hack实际过优雅升级了,为那些没法支撑功能的浏览器增长候选筹划,使之在新式浏览器上以某种情势升级体验却不至于完全掉效。

  渐进加强:从被一切浏览器支撑的根本功能开端,渐渐地添加那些只要新式浏览器才支撑的功能,向页面增长有害于基本浏览器的额外款式和功能的。当浏览器支撑时,它们会主动地出现出来并发挥感化。

4、哪些罕见操作会形成内存泄漏?

  内存泄漏指任何对象在您不再具有或须要它以后依然存在。

  渣滓收受接收器定期扫描对象,并计算援用了每个对象的其他对象的数量。假设一个对象的援用数量为 0(没有其他对象援用过该对象),或对该对象的唯一援用是轮回的,那么该对象的内存便可收受接收。

setTimeout 的第一个参数应用字符串而非函数的话,会激起内存泄漏。

  闭包、控制台日记、轮回(在两个对象彼此援用且彼此保存时,就会产生一个轮回)。

5、线程与过程的差别

  一个法式榜样至少有一个过程,一个过程至少有一个线程。

  线程的划分标准小于过程,使很多线程法式榜样的并发性高。

  别的,过程在履行过程当中具有自力的内存单位,而多个线程共享内存,从而极大年夜地进步了法式榜样的运转效力。

  线程在履行过程当中与过程照样有区其他。每个自力的线程有一个法式榜样运转的出口、次序履行序列和法式榜样的出口。然则线程不克不及够自力履行,必须依存在应用法式榜样中,由应用法式榜样供给多个线程履行控制。

  从逻辑角度来看,多线程的意义在于一个应用法式榜样中,有多个履行部分可以同时履行。但操作体系并未将多个线程看作多个自力的应用,来完成过程的调剂和管理和资本分派。这就是过程和线程的重要差别。

文章来源:http://www.maiziedu.com/article/28255/

最全的web前端面试题及答案整顿 你不能不看

标签:出口   情势   class   import   行内元素   add   dom操作   ppc   处理   

原文地址:https://www.cnblogs.com/a112233/p/11636681.html

(0)
(0)
   
告发
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权一切 京ICP备13008772号-2
迷上了代码!