2022年前端面试大全.pdf
![资源得分’ title=](/images/score_1.gif)
![资源得分’ title=](/images/score_1.gif)
![资源得分’ title=](/images/score_1.gif)
![资源得分’ title=](/images/score_1.gif)
![资源得分’ title=](/images/score_05.gif)
《2022年前端面试大全.pdf》由会员分享,可在线阅读,更多相关《2022年前端面试大全.pdf(33页珍藏版)》请在得力文库 - 分享文档赚钱的网站上搜索。
1、2022年前端面试大全(一)一、HTML/CSS 篇1、i f r a m e 的优缺点?【仅供参考】优点:解决加载缓慢的第三方内容如图标和广告等的加载问题S e c u r i t y s a n d b o x并行加载脚本缺点:i f r a m e 会阻塞主页面的O n l o a d 事件即时内容为空,加载也需要时间没有语意2、本地存储和会话(事务)存储之间的区别是什么?【仅供参考】本地存储数据持续永久,但是会话存储在浏览器打开时有效,在浏览器关闭时会话重置存储数据。3、W e b s q l 是HT M L 5的一个规范吗?【仅供参考】不是,许多人把它标记为HT M L 5,但是它不
2、是HT M L 5规范的一部分,这个规范是基于S Q L i t e 的4、c o o k i e 和 s e s s i o n 的区别是什么?【仅供参考】区别如下:(1)c o o k i e 数据存放在客户的浏览器上,s e s s i o n 数据存放在服务器上。(2)c o o k i e 不是很安全,别人可以分析存放在本地的c o o k i e 并进行c o o k i e欺骗。考虑到安全问题应当使用s e s s i o n o(3)s e s s i o n 会在一定时间内保存在服务器上。当访问增多时,会占用较多服务器的资源。为了减轻服务器的负担,应当使用c o o k i
3、e。(4)单 个 cookie保存的数据不能超过4KB,很多浏览器都限制一个站点最多保存20个 cookieo所以个人建议可以将登录信息等重要信息存放在session中,其他信息(如果需要保留)可以存放在cookie中。5、如何实现浏览器内多个标签页之间的通信?【仅供参考】在标签页之间,调 用 localstorge cookies等数据存储,可以实现标签页之间的通信6、行内元素有哪些?块级元素有哪些?空(v o i d)元素有那些?【仅供参考】定义:C SS规范规定,每个元素都有display属性,确定该元素的类型,每个元素都有默认的display值,如 div的 display默认值为“b
4、lock,则为“块级”元素;span默 认 display属性值为inline”,是“行内”元素。行内元素有:a b span img input select strong(强调的语气)块级元素有:div ul ol 1 i dl dt dd hl h2 h3 h4p空元素:常见:br hr img input link meta不常见:area base col command embed keygen param source track wbr7、什么是W e b s q l?【仅供参考】Websql是一个在浏览器客户端的结构关系数据库,是浏览器内的本地RD BMS(关系型数据库管理系
5、统),可以使用SQL查询。8、HT M L 5标准提供了哪些新的A P I?【仅供参考】HTML5 提供很多新的 API,包括 Media API、Text Track API ApplicationC ache API、User InteractionAPI D ata Transfer API、C ommand API、C onstraintion Validation API 和 History API9、哪些浏览器支持H T M L 5?【仅供参考】几乎所有的浏览器(如 Safari、C hrome Firefox Opera、IE)都支持HTML51 0、与 H T M L 4比较,
6、H T M L 5废弃了哪些元素?【仅供参考】废弃的元素包括 f r a m e、f r a m es et、n o f r a m e a p p l et、b i g、c en t er 和b a s ef o n t o1 1、H T M L 5为浏览器提供了哪些数据存储方案?【仅供参考】在较高版本的浏览器中,提供了 s es s i o n St o r a g e:和 g l o b a l St o r a g e。在H T M L 5 规范中,用 l o c a l St o r a g e 取代 g l o b a l St o r a g e。H T M L 5中的Web S
7、t o r a g e包括两种存储方式,分别是s es s i o n St o r a g e和l o c a l St o r a g e。s es s i o n St o r a g e用于在本地存储一个会话(s es s i o n)中的数据,这些数据只有同一个会话中的页面才能访问,当会话结来后,数据也随之销毁。因此s es s i o n St o r a g e不是一种持久化的本地存储,仅仅是会话级别的存储。l o c a l St o r a g e用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。l o c a l St o r a g e和 s es s i
8、 o n St o r a g e都具有相同的操作方法,例 如 s et i t em,g et l t em 和 r em o v eI t em 等1 2、t i t l e与 hl的区别?【仅供参考】t i t l e属性没有明确意义只表示是个标题,h l 则表示层次明确的标题,对页面信息的抓取也有很大的影响。1 3、如何显示我们自己画的一个弹框?【仅供参考】可以用一个简单的方法,在页面上单击一个按钮,弹出一个弹框,而弹框也是自己写的一个di v。单击前,先把弹框隐藏,o n c l i c k 事件发生之后就会显示出来1 4、H T M L 5中如何实现应用缓存?【仅供参考】首先,需要
9、指定“m a n i f es t”文件,m a n i f es t”文件帮助你定义缓存如何工作以下是“m a n i f es t”文件的结构。C AC H E M ANT E E ST#v er s i o n 1.0/dem o,c s s/dem o,j s/dem o,p n g所 有 m a n i f es t 文件都以“C AC H E M ANI F E ST”语句开始。#(散列标签)有助于提供缓存文件的版本。m a n i f es t 文件的内容类型应是 t ex t/c a c h e-m a n i f es to创建一个缓存m a n i f es t 文件后,在
10、 H T M L 页面中提供m a n i f es t 链接,代码如下所示。第一次运行以上文件时,它会添加到浏览器应用缓存中,在服务器宕机时,页面从应用缓存中获取数据。1 5、l in e-height 三种赋值方式有何区别?(带单位、纯数字、百分比)【仅供参考】带单位:p x 是固定值,而 e m 会参考父元素f o n t-s ize值计算自身的行高纯数字:会把比例传递给后代。例如,父级行高为1.5,子元素字体为1 8 p x,则子元素行高为1.5*1 8 =2 7 p x百分比:将计算后的值传递给后代1 6、画一条0.5 p x的直线?【仅供参考】考查的是c s s 3 的 t r a
11、n s f o r mheight:I p x;t r an s f o r m:s c al e(0.5);1 7、CS S 优化、提高性能的方法有哪些?【仅供参考】多 个 c s s 合并,尽量减少HT T P 请求CS S 雪碧图抽象提取公共样式,减少代码量选择器优化嵌套,尽量避免层级过深(用 替 换)属性值为0时,不加单位压 缩 CS S 代码避免使用CS S 表达式,它们要计算成千上万次并且可能会对你页面的性能产生影响。18、inline-block之间的间隙如何去掉?【仅供参考】两个并列的inline-block中间会有一条裂缝,这个的原因是两个标签之间有空格,浏览器把这些空格当成
12、文字中空格,所以这两个块中间多少有间隙。解决办法:删除两个标签间的空格,但是这样html排版不好容器元素font-size:0 然后再在里面再重新设置字体大小19、如何让文字换行【仅供参考】word-wrap,word-break,white-space 都可以做到word-wrap:normal;遇到空格才换行word-break:break-all;把所有字符(包括空格)当一行,遇到边界换行word-break:break-word;先按空格换行,再拆分单词和 word-wrap:breakword 一样white-space:normal;正常遇到空白换行white-space:no-w
13、rap;空白都不换行,一行显示所有word-wrap 和 word-break 在 flex 布局下的效果,word-wrap 不能换行,word-break可以。但是如果二者都有width或者min-width限制,效果一样。divstyle二 border:Ipx solid red;width:200px;height:200px;display:flex;,z divstyle二 flex:1;word-wrap:break-word;z,dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd divst
14、yle二 min-width:lOOpx;border:Ipx solid greenz,sss divstyle二 border:Ipx solid red;width:200px;height:200px;display:flex;,zdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd divstyle二 min-width:lOOpx;border:Ipx solid green,zsss20、文字和图片放在一起,为什么无法底部对齐【仅供参考】因 为 i m g 也相当于一个inline的元素,inli
15、ne就要遵守行高的构成,它会按 照 base基线对齐,基线对齐的话那么它就会和底线间有一个缝隙。对 于 img,因为它会遵守文字对齐方案,那么就把图片的对齐方式修改为vertical-align:bottom。或者让他display:block,这样图片虽然会换行,但是没有间隙了二、JS/ES6/TS 篇1、请说出以下flag的结果?为什么?【仅供参考】function show()function getName()return 牛 夫 人 var flag=show()|getName()答案:flag值为 牛夫人解释:1.函数都会有一个默认的返回值undefined逻辑或如果第一个值成立
16、就直接返回第一个值,否则直接返回第二个值2、javascript的内存(垃圾)回收机制?【仅供参考】垃圾回收器会每隔一段时间找出那些不再使用的内存,然后为其释放内存一般使用标记清除方法(mark and sweep),当变量进入环境标记为进入环境,离开环境标记为离开环境垃圾回收器会在运行的时候给存储在内存中的所有变量加上标记,然后去掉环境中的变量以及被环境中变量所引用的变量(闭包),在这些完成之后仍存在标记的就是要删除的变量了还有引用计数方法(reference counting),在低版本IE中经常会出现内存泄露,很多时候就是因为其采用引用计数方式进行垃圾回收。引用计数的策略是跟踪记录每个值
17、被使用的次数,当声明了一个变量并将一个引用类型赋值给该变量的时候这个值的引用次数就加1,如果该变量的值变成了另外一个,则这个值得引用次数减1,当这个值的引用次数变为0的时候,说明没有变量在使用,这个值没法被访问了,因此可以将其占用的空间回收,这样垃圾回收器会在运行的时候清理掉引用次数为0的值占用的空间。在 I E 中虽然J a v a S c r i p t 对象通过标记清除的方式进行垃圾回收,但 B O M 与D O M 对象却是通过引用计数回收垃圾的,也就是说只要涉及B O M 及D O M 就会出现循环引用问题。3、理解下面代码的区别【仅供参考】fu n c t i o n fo o()
18、/c o d e ()以fu n c t i o n 关键字开头的语句会被解析为函数声明,而函数声明是不允许直接运行的。只有当解析器把这句话解析为函数表达式,才能够直接运行(f un c ti o n f o o()/c o d e.)()运算符开头的表达式被立即执行4、请说出以下结果输出什么?为什么?【仅供参考】f o r(va r i =0;i String其他对象:Function、Arguments、Math、D ate、RegExp ErrorES6 新增对象:Symbol Map、Set Promises,Proxy、Reflect9 说一下i n n e r H TML 与 i
19、n n e r Te x t的作用与区别?【仅供参考】作用:都可以获取或者设置元素的内容区别:innerHTML可以解析内容中的html标签innerText不能解析内容中的html标签10、Ty p e Sc r i p t 的优点【仅供参考】1.Typescript能够编译出一个能在所有浏览器上运行的JavaScript版本。2.TypeScript总是在编译时强调错误,而JavaScript在运行时指出错误。3.TypeScript支持强类型或静态类型4.它使用基于类的面向对象编程。5.它有助于代码结构。11、枚举和常量枚举的区别?【仅供参考】枚举会被编译时会编译成一个对象,可以被当作对
20、象使用c o n s t枚举会在ty p e s c r i p t编译期间被删除,c o n s t枚举成员在使用的地方会被内联进来,避免额外的性能开销1 2、Ty peScript中如何实现函数重载?【仅供参考】要 在 Ty peScript中重载函数,只需创建两个名称相同但参数/返回类型不同的函数。两个函数必须接受相同数量的参数。这 是 Ty peScript中多态性的重要组成部分。例如,你可以创建一个add函数,如果它们是数字,则将两个参数相加,如果它们是字符串,则将它们连接起来。function add(a:string,b:string):string;function add(a
21、:number,b:number):number;function add(a:any,b:any):any return a+b;)addC H ello ,Steve);/returns H ello Steve”add(1 0,2 0);/returns 3 01 3、Ty peScript 的缺点【仅供参考】1.Ty peScript需要很长时间来编译代码2 .要使用任何第三方库,必须使用定义文件。并不是所有第三方库都有可用的定义文件。3 .类型定义文件的质量是一个问题,即如何确保定义是正确的?1 4、什么时候应该使用关键字unknown?【仅供参考】unknown,如果你不知道预先期
22、望哪种类型,但想稍后分配它,则应该使用该any 关键字,并且该关键字将不起作用。1 5、什么是装饰器,它们可以应用于什么?【仅供参考】装饰器是一种特殊的声明,它允许你通过使用 注释标记来一次性修改类或类成员。每个装饰器都必须引用一个将在运行时评估的函数。例如,装饰器 sealed将对应于sealed函数。任何标有 的 5 6 2 1 0(都将用于评估 sealed函数。function sealed(target)/do something with target,)它们可以附加到:类声明方法配件特性参数注意:默认情况下不启用装饰器。要启用它们,你必须experimentalD ecorato
23、rs从 tsconfig.json文件或命令行编辑编译器选项中的字段16、如何理解Typescript中的类【仅供参考】Typescript是一种面向对象的JavaScript语言,支持OOP编程特性,比如类、接口等。与 Java一样,类是用于创建可重用组件的基本实体。它是一组具有公共属性的对象。类是创建对象的模板或蓝图。它是一个逻辑实体。“class”关键字用于在Typescript中声明一个类。class Student studC ode:number;studName:string;constructor(code:number,name:string)this.studName=na
24、me;this.studC ode=code;)getGrade():string return A+”:)类的特征:封装、继承、多态、抽象17、Typescript的内置类型【仅供参考】number、string、boolean undefined、null、void1 8、设计一个对象,键名的类型至少包含一个s y mbol类型,并且实现遍历所有k ey【仅供参考】l et n ame=Sy mbol (n ame);l et p rodu ct =n ame:洗衣机,“p ri ce”:799);Ref l ect.ow n Key s(p rodu ct);1 9、下面Set结构,打印
25、出的s i z e值是多少【仅供参考】l et s =n ew Set ();s.add(l);s.add(1);con s ol e.l og(s.s i z e);答案:2两个数组1 并不是同一个值,它们分别定义的数组,在内存中分别对应着不同的存储地址,因此并不是相同的值都能存储到Set结构中,所以s i z e为22 0 f or Each f or i n、f or of、f or 区别【仅供参考】f or:最原始的数组遍历写法,写法比较麻烦。f orEach:不可以遍历对象,用来遍历数组,中途无法跳出循环,break和ret u rn不凑效。f or.i n:主要用来遍历对象的k e
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 2022 年前 端面 大全
![提示](https://www.deliwenku.com/images/bang_tan.gif)
限制150内