2023前端面试题含答案.docx
《2023前端面试题含答案.docx》由会员分享,可在线阅读,更多相关《2023前端面试题含答案.docx(39页珍藏版)》请在淘文阁 - 分享文档赚钱的网站上搜索。
1、XX公司产品部-前端面试题-答案前端开发面试学问点大纲:HTMLaCSS:对Web标准的理解、阅读器内核差异、兼容性、hack、CSS基本功:布局、 盒子模型、选择器优先级及运用、HTML5、CSS3、移动端适应JavaScript:数据类型、面对对象、继承、闭包、插件、作用域、跨域、原型链、模 块化、自定义事务、内存泄漏、事务机制、异步装载回调、模板引擎、Nodejs、 JSON、ajax 等。其他:、平安、正则、优化、重构、响应式、移动端、团队协作、可维护、 SEO、UED、架构、职业生涯作为一名前端工程师,无论工作年头长短都应当必需驾驭的学问点:1、D0M结构一一两个节点之间可能存在哪些
2、关系以及如何在节点之间随意 产品部移动。Beijing2、DOM操作如何添加、移除、移动、复制、创建和查找节点等。CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算? CSS3新 增伪类有那些?* Lid 选择器(# myid)2 .类选择器(.myclassname)3 .标签选择器(div, hl, p)4 .相邻选择器(hl + p)5 .子选择器(ul li)6 .后代选择器(li a)7 .通配符选择器(* )8 .属性选择器(arel = external)9 .伪类选择器(a: hover, li : nth - child)* 可继承的样式:font-size font-
3、family color, UL LI DL DD DT;* 不行继承的样式:border padding margin width height ;* 优先级就近原则,同权重状况下样式定义最近者为准;* 载入样式以最终载入的定位为准; 优先级为:!important id class tag important比内联优先级高CSS3新增伪类举例:p:firstoftype选择属于其父元素的首个3元素的每个5元素。p:lastoftype选择属于其父元素的最终P元素的每个P元素。p:only-of-type选择属于其父元素唯一的P元素的每个元素。p:only-child选择属于其父元素的唯一子
4、元素的每个P元素。p:nth-child(2)选择属于其父元素的其次个子元素的每个5元素。:enabled :disabled限制表单控件的禁用状态。:checked单选框或复选框被选中。四. 如何居中div?如何居中一个浮动元素?给div设置一个宽度,然后添加margin:。auto属性div(width:200px; margin:0 auto; 五、 居中一个浮动元素确定容器的宽高 宽500高300的层 设置层的外边距.div Width:500px ; height:300px;高度可以不设Margin: -150px 0 0 -250px;position: relative;相对定
5、位background-color: pink; /便利看效果left:50%; top:50%;六、 列出display的值,说明他们的作用。position的值,relative和 absolute定位原点是?1. block象块类型元素一样显示。none缺省值。象行内元素类型一样显示。inline-block象行内元素一样显示,但其内容象块类型元素一样显示。list-item象块类型元素一样显示,并添加样式列表标记。2. absolute生成肯定定位的元素,相对于static定位以外的第一个父元 素进行定位。*fixed (老IE不支持)生成肯定定位的元素,相对于阅读器窗口进行定位。re
6、lative生成相对定位的元素,相对于其正常位置进行定位。* static默认值。没有定位,元素出现在正常的流中* (忽视 top, bottom, left, right z-index 声明)* inherit规定从父元素继承position属性的值。七、CSS3有哪些新特性?CSS3 实现圆角(border-radius:8px),阴影(box-shadow: 10px),对文字加特效(text-shadow、),线性渐变(gradient),旋转(transfonn)transform:rotate(9deg) scale(0. 85, 0. 90) translate(Opx, -3
7、0px)skew (-9deg, Odeg); 旋转,缩放,定位,倾斜增加了更多的CSS选择器 多背景rgba八、 一个满屏品字布局如何设计?九、 常常遇到的CSS的兼容性有哪些?缘由,解决方法是什么?十、为什么要初始化CSS样式。因为阅读器的兼容问题,不同阅读器对有些标签的默认值是不同的,假如没 对CSS初始化往往会出现阅读器之间的页面显示差异。当然,初始化样式会对SEO有肯定的影响,但鱼和熊掌不行兼得,但力求影 响最小的状况下初始化。*最简洁的初始化方法就是:* padding: 0; margin: 0;(不建议)淘宝的样式初始化:body, hl, h2, h3, h4, h5, h6
8、, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td margin:0; padding:0; body, button, input, select, textarea font:12px/l. 5tahoma, arial, 5b8b4f53; hl, h2, h3, h4, h5, h6 font-size: 100%; address, cite, dfn, em, var font-style:normal; code, kbd
9、, pre, samp font-family:couriernew, courier, monospace; small font-size:12px; ul, ol list-style:none; a text-decoration:none; a:hover text-decoration:underline; sup vertical-align:text-top; sub vertical-align:text-bottom; legend color:#000; fieldset, img border:0; button, input, select, textarea fon
10、t-size:100%; table border-collapse:collapse; border-spacing:0; H、absolute的containing block计算方式跟正常流有什么不同?十二、position 跟 display、margin collapse overflow、float 这些特性相互叠加后会怎么样?十三、对BFC规范的理解?(W3C CSS 2. 1规范中的一个概念,它确定了元素如何对其内容进行定位,以及及其他元素的关系和相互作用。)十四、css定义的权重以下是权重的规则:标签的权重为1, class的权重为10, id的权重为100,以下例子是演示各
11、种定义的权重值:/*权重为1*/div/*权重为10*/.classl /*权重为100*/#idl /* 权重为 100+1=101*/#idl div/* 权重为 10+1=11*/.classl div/* 权重为 10+10+1=21*/.classl .class2 div假如权重相同,则最终定义的样式会起作用,但是应当避开这种状况出现十五、说明下浮动和它的工作原理?清除浮动的技巧十六、用过媒体查询,针对移动端的布局吗?十七、运用CSS预处理器吗?喜爱那个?SASS十八.假如须要手动写动画,你认为最小时间间隔是多久,为什么?(阿里)多数显示器默认频率是60Hz,即1秒刷新60次,所以
12、理论上最小间隔为1/60* 1000ms = 16. 7ms十九.display: inline-block什么时候会显示间隙?(携程)移除空格、运用 margin 负值、运用 font-size:。、letter-spacing、word-spacingJavaScript、JavaScript原型,原型链?有什么特点?二、eval是做什么的?它的功能是把对应的字符串解析成JS代码并运行;应当避开运用eval,担心 全,特别耗性能(2次,一次解析成js语句,一次执行)。三、 null, undefined 的区分?四、写一个通用的事务侦听器函数。/ event (事务)工具集,来源:gith
13、ub/markyunmarkyun. Event = /页面加载完成后readyEvent : function(fn) if (fn=null) fn=document;var oldonload = window, onload;if (typeof window, onload != function) window, onload = fn; else window, onload = function() oldonload ();fn();/视实力分别运用domO|dom2|lE 来绑定事务/参数:操作的元素,事务名称,事务处理程序addEvent : function (elem
14、ent, type, handler) if (element. addEventListener)/事务类型、须要执行的函数、是否捕获element. addEventListener (type, handler, false); else if (element. attachEvent) element. attachEvent C on? + type, function () handler, call(element); else elementon + type = handler;/移除事务removeEvent : function (element, type, hand
15、ler) if (element. removeEnentListener) false);element. removeEnentListener(type, handler, else if (element. datachEvent) element. detachEvent(Jon + type, handler); else elementon + type = null;/阻挡事务(主要是事务冒泡,因为IE不支持事务捕获) stopPropagation : function (ev) if (ev.stopPropagation) ev.stopPropagation(); el
16、se ev. cancelBubble = true;3、事务如何运用事务,以及IE和标准DOM事务模型之间存在的差别。4、XML Request这是什么、怎样完整地执行一次GET恳求、怎样检 测错误。5、严格模式及混杂模式一一如何触发这两种模式,区分它们有何意义。6、盒模型一一外边距、内边距和边框之间的关系,及IE8以下版本的阅读 器中的盒模型7、块级元素及行内元素一一怎么用CSS限制它们、以及如何合理的运用它 们8、浮动元素一一怎么运用它们、它们有什么问题以及怎么解决这些问题。9、HTML及XHTML二者有什么区分,你觉得应当运用哪一个并说出理由。10、JSON作用、用途、设计结构。HTM
17、LDoctype作用?严格模式及混杂模式如何区分?它们有何意义?(1)、!D0CTYPE声明位于文档中的最前面,处于html标签之前。告 知阅读器的解析器,用什么文档类型规范来解析这个文档。(2)、严格模式的排版和JS运作模式是 以该阅读器支持的最高标准运行。/取消事务的默认行为preventDefault : function (event) if (event.preventDefault) event.preventDefault(); else event. returnValue = false;/获得事务目标getTarget : function (event) return e
18、vent.target | | event. srcElement;event;/获得event对象的引用,取到事务的全部信息,确保随时能运用getEvent : function(e) var ev = e | | window, event;if (!ev) var c = this.getEvent. caller;while (c) ev = c. arguments LOJ;if (ev & Event = ev.constructor) break;c = c.caller;return ev;五、Node. js的适用场景?高并发、闲聊、实时消息推送六、介绍js的基本数据类型。n
19、umber, string, boolean, object, undefined七、Javascript如何实现继承?通过原型和构造器八、1,2,3.map(parselnt)答案是多少?1, NaN, NaN因为 parselnt 须要两个参数(val, radix),其中 radix 表 示解析时用的基数。map传了 3个(element, index, array),对应的radix 不合法导致解析失败。九、 如何创建一个对象?(画出此对象的内存图)function Person(name, age) this, name = name;this, age = age;this, si
20、ng = function () alert (this, name) 十、谈谈This对象的理解。this是js的一个关键字,随着函数运用场合不同,this的值会发生变更。但是有一个总原则,那就是this指的是调用函数的那个对象。this 一般状况 下:是全局对象Global。作为方法调用,那么this就是指这个对象十一、事务是? IE及火狐的事务机制有什么区分?如何阻挡冒泡?1 .我们在网页中的某个操作(有的操作对应多个事务)。例如:当我们点击 一个按钮就会产生一个事务。是可以被JavaScript侦测到的行为。2 .事务处理机制:IE是事务冒泡、火狐是 事务捕获;3 . ev. stop
21、Propagation ();十二、什么是闭包(closure),为什么要用它?执行say667()后,say667 ()闭包内部变量会存在,而闭包内部函数的内部变量不会存在.使得Javascript的垃圾回收机制GC不会收回say667 ()所占用的资源,因为say667()的内部函数的执行须要依靠say667()中的变量。这是对闭 包作用的特别直白的描述.function say667() / Local variable that ends up within closurevar num = 666;var sayAlert = function () alert (num); num
22、+;return sayAlert;var sayAlert = say667();sayAlert ()执行结果应当弹出的667十三、use strict;是什么意思?运用它的好处和坏处分别是什么?十四、如何推断一个对象是否属于某个类?运用instanceof (待完善)if(a instanceof Person)alert ( yes);十五、new操作符具体干了什么呢?1、创建一个空对象,并且this变量引用该对象,同时还继承了该函 数的原型。2、属性和方法被加入到this引用的对象中。3、新创建的对象由this所引用,并且最终隐式的返回this ovar obj =);obj. _p
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 2023 前端 试题 答案
限制150内