2022年前端面试宝典.pdf
《2022年前端面试宝典.pdf》由会员分享,可在线阅读,更多相关《2022年前端面试宝典.pdf(37页珍藏版)》请在得力文库 - 分享文档赚钱的网站上搜索。
1、2022年前端面试宝典一、H T M L/CS S 篇1、如果把H T M L 5 看成一个开放平台,它的构建模块有哪些?【仅供参考】如果把H T M L 5 看成一个开放平台,它的构建模块至少包括以下几个,如oW n a v 标签用来将具有导航性质的链接划分在一起,使代码结构在语义化方面更加准确 h e a d e r 标签用来定义文档的页眉。标签用来描述文档的结构。f o o t e r 标签用来定义页脚。在典型情况下,该元素会包含文档作者的姓名、文档的创作日期和联系信息2、请描述一下 s e s s i o n S t o r a g e 和 l o c a l S t o r a g
2、e 的区别。【仅供参考】s e s s i o n S t o r a g e 用于在本地存储一个会话中的数据,这些数据只有同一个会话中的页面才能访问,当会话结束后,数据也随之销毁。因 此 s e s s i o n S t o r a g e不是一种持久化的本地存储,仅仅是会话级别的存储。而 l o c a l s t o r a g e 用于持久化本地存储,除非主动删除数据,否则数据是永远不会过期的。3、如何实现浏览器内多个标签页之间的通信?【仅供参考】在标签页之间,调 用 l o c a l s t o r g e,c o o k i e s 等数据存储,可以实现标签页之间的通信4、l
3、o c a l S t o r a g e 和 c o o k i e 的区别是什么?【仅供参考】l o c a l S t o r a g e 的概念和c o o k i e 相似,区别是l o c a l S t o r a g e 是为了更大容量的存储设计的。c o o k i e 的大小是受限的,并且每次请求一个新页面时,c o o k i e都会被发送过去,这样无形中浪费了带宽。另外,c o o k i e 还需要指定作用域,不可以跨域调用。除此之外,l o c a l s t o r a g e 拥有 s e t l t e n,g e t l t e m、r e m o v e
4、i t e m、c l e a r 等方法,c o o k i e 则需要前端开发者自己封装s e t Co o k i e 和 g e t Co o k i e。但c o o k i e 也是不可或缺的,因 为 c o o k i e 的作用是与服务器进行交互,并且还是H TP 规范的一部分,而 l o c al St o r age仅因为是为了在本地“存储”数据而已,无法跨浏览器使用。5、H TM L 5 如何实现跨域?【仅供参考】在服务器端设置允许在其他域名下访问,例如允许所有域名访问以下内容。r es p o n s e.s et H eader (A c c es s-C o n t
5、 r o l-A l l o w-O r igin ,*);r es p o n s e.s et H eader (A c c es s-C o n t r o l-A l l o w-M et ho ds ,P O ST);r es p o n s e.s et H eader (A c c es s-C o n t r o l-A l l o w-H eader s ,x-r eq u es t ed-wit h,c o n t en t-t yp e);6、D o c t yp e作用?标准模式与兼容模式各有什么区别?【仅供参考】D 0C TYP E 是用来声明文档类型和D TD 规范
6、的。C D O C TYP E ht m l 声明位于H TM L 文档中的第一行,不是一个H TM L 标签,处 于 ht m l 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。D O C TYP E 不存在或格式不正确会导致文档以兼容模式呈现。标准模式的排版和J S 运作模式都是以该浏览器支持的最高标准运行。在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。7、什么是Webs q l?【仅供参考】Webs q l 是一个在浏览器客户端的结构关系数据库,是浏览器内的本地RD B M S(关系型数据库管理系统),可以使用SQ L 查询。8、如何进行
7、网站性能优化【仅供参考】c o n t en t 方面1、减少H TTP 请求:合并文件、C SS精灵、in l in e I m age2、减少D N S查询:D N S缓存、将资源分布到恰当数量的主机名3、减少D 0M 元素数量Ser v er 方面1、使用C D N2、配置E Tag3、对组件使用G z ip 压缩C o o k ie方面1、减小c o o k ie大小c s s 方面1、将样式表放到页面顶部2、不使用C SS表达式3、使用 1 in k 不使用 im p o r tJ av as c r ip t 方面1、将脚本放到页面底部2、将 ja va s c ript 和 c
8、s s 从外部引入3、压缩 ja va s c ript 和 c s s4、删除不需要的脚本5、减少D 0 M 访问图片方面1、优化图片:根据实际颜色需要选择色深、压缩2、优化c s s 精灵3、不要在H TM L 中拉伸图片9、HTML5中如何实现应用缓存?【仅供参考】首先,需要指定“ma nif e s t”文件,“ma nif e s t”文件帮助你定义缓存如何工作以下是“ma nif e s t”文件的结构。C A C H E M A N TE E ST#ve rs ion 1.0/d e mo,c s s/d e mo,js/d e mo,png所 有 ma nif e s t 文件
9、都以“C A C H E M A N I F E ST”语句开始。#(散列标签)有助于提供缓存文件的版本。ma nif e s t 文件的内容类型应是t e x t/c a c he-ma nif e s t。创建一个缓存ma nif e s t 文件后,在 H TM L 页面中提供ma nif e s t 链接,代码如下所示。ht ml ma nif e s t*ic ke t a ng.a ppc a c he”第一次运行以上文件时,它会添加到浏览器应用缓存中,在服务器宕机时,页面从应用缓存中获取数据。10、什么是SVG?【仅供参考】SVG 即可缩放失量图形(Sc a la b le Ve
10、 c t or G ra phic s)。它是基于文本的图形语言,使用文本、线条、点等来绘制图像,这使得它轻便、显示迅速。1 1、常见兼容性问题?【仅供参考】浏览器默认的ma rgin和 pa d d ing不同。解决方案是加一个全局的*ma rgin:0;pa d d ing:0;来统一。C hrome 中文界面下默认会将小于1 2 px 的文本强制按照1 2 px 显示,可通过加入 C SS 属 性-we b kit-t e x t-s iz e-a d ju s t:none;解决.1 2、C SS中可以让文字在垂直和水平方向上重叠的两个属性是什么?【仅供参考】垂直方向的属性是line-
11、he ight.水平方向的属性是le t t e r-s pa c ing。1 3、如何使英文单词发生词内断行?【仅供参考】输入 w o r d-w r a p:b r e a k-w o r d o1 4 精灵图和b a s e 6 4 如何选择?【仅供参考】精灵图:优点:将多个图像加载请求合并为一个请求;弊端:难以维护和更新;增加内存消耗;b a s e 6 4:优点:将多个图像加载请求合并为一个C S S 文件请求;轻松更新生成文件;弊端:b a s e 6 4 编码比原始二进制表示大约大2 5%;I E 6 或 I E 7 不支持;1 5、C S S中,自适应的单位都有哪些?【仅供参考
12、】自适应的单位有以下几个百分比:%相对于视口宽度的单位:w w相对于视口高度的单位:v h相对于视口宽度或者高度(取决于哪个小)的单位:Vm相对于父元素字体大小的单位:e m相对于根元素字体大小的单位:r e m1 6、解释浮动及其工作原理。【仅供参考】浮动的元素可以向左或向右移动,直到它的外边缘碰到包含元素(父元素)或另一个浮动元素的边框为止。要想使元素浮动,必须为元素设置一个宽度(w i d t h)。虽然浮动元素已不在文档流中,但是它浮动后所处的位置依然在浮动之前的水平方向上。因为浮动元素不在文档流中,所以文档流中的块元素表现得就像浮动元素不存在一样,下面的元素会填补原来的位置。有些元素
13、会在浮动元素的下方,但是这些元素的内容并不一定会被浮动的元素遮盖。当定位内联元素时,要考虑浮动元素的边界,围绕浮动元素放置内联元素。也可以把浮动元素想象成被块元素忽略的元素,而内联元素会关注的元素。1 7、我们会在写c s s的时候做一些标签选择器的初始化样式?为什么?比如:【仅供参考】b o d y,u l,o l,li,p,h l,h 2,h 3,h 4,h 5,h 6,f o r m,f i e ld s e t,t a b le,t d,i m g,d i v (m a r gi n:0;p a d d i n g:0;b o r d e r:0;b o d y(b a c k g r
14、 o u n d:#f f f;c o lo r:#3 3 3;f o n t-s i ze:1 2 p x;m a r g i n-t o p:5 p x;f o n t f a m i ly:,zS i m S u n/,Ar i a l N a r r o w”;u l,o l(l i st-st y l e-t y p e:n o n e;sel ec t,i n p u t,i m g,sel ec t v ert i c al-al i gn:m i d d l e;a t ex t-d ec o rat i o n:n o n e;a:l i n k c o l o r:#0 0
15、 9;a:v i si t ed c o l o r:#8 0 0 0 8 0;a:ho v er,a:ac t i v e,a:fo c u sc o l o r:#c 0 0;t ex t-d ec o rat i o n:u n d erl i n e;为了保证默认的标签样式在不同浏览器能有一致的效果18、如何实现左边固定宽,右边自适应布局【仅供参考】/1.圣杯布局 t t c o n t ai n er p ad d i n g-l eft:2 0 0 p x;p ad d i n g-ri ght:1 5 0 p x;)Wc o n t ai n er.c o l u m n fl
16、o at:l eft;S c en t er w i d t h:1 0 0%;)#l eft w i d t h:2 0 0 p x;m argi n-l eft:-1 0 0%;p o si t i o n:rel at i v e;ri ght:2 0 0 p x;)S ri ght w i d t h:1 5 0 p x;m argi n-ri ght:-1 5 0 p x;)/2.双飞翼布局 d i v i d二 c o n t ai n er,c l assc o l u m n”S c o n t ai n er w i d t h:1 0 0%;),c o l u m n fl
17、 o at:l eft;)t t c en t er m argi n-l eft:2 0 0 p x;m argi n-ri ght:1 5 0 p x;)#l eft w i d t h:2 0 0 p x;m argi n-l eft:-1 0 0%;)t t ri ght w i d t h:1 5 0 p x;m argi n-l eft:-1 5 0 p x;/3.等高布局(假等高)互补的内外边距.p aren t o v erfl o w:hi d d en;),l eft,ri ght m argi n-b o t t o m:-l OOOOp x;p ad d i n g-b
18、 o t t o m:l OOOOp x;/4.等高布局(真等高)弹性盒子.p aren t d i sp l ay:fl ex;).c hi l d fl ex:1;)/c al c d i v i d 二 l eft c l ass二 c o l u m rTX/d i v ,c o l u m n fl o at:l eft;#l eft w i d t h:l OOp x;)#ri ght w i d t h:2 0 0 p x;)c en t er w i d t h:c al c(1 0 0%-l OOp x -2 0 0 p x);/5.浮动#l eft fl o at:l ef
19、t;w i d t h:l OOp x;)#ri ght fl o at:ri ght;w i d t h:2 0 0 p x;)#c en t er m argi n-l eft:1 OOp x;m argi n-ri ght:2 0 0 p x;)1 9、F l o at 布局有哪些缺陷?如何清除浮动?【仅供参考】使用fl o at 之后,元素跳出文档流,容易引发父容器塌陷,最好的解决方式是给复用器加上:aft er伪类进行清除浮动2 0、如何控制单行显示且显示不下显示.【仅供参考】o v erfl o w:hi d d en;t ex t-o v erfl o w:el l i p si
20、 s;w hi t e-sp ac e:n o-w rap;二、JS/ES6/TS 篇1、说几条写JavaScript书写的基本规范?【仅供参考】代码一定要正确缩进,建议使用“二个或者四个空格 缩进语句结束使用分号;规范定义J S ON 对象,补全双引号用 和声明对象和数组变量和函数在使用前进行声明以大写字母开头命名构造函数,全大写命名常量代码段使用花括号 包裹还有要书写正确的标识标签2、var、let、const 区别?【仅供参考】v ar存在变量提升。l et 只能在块级作用域内访问。c o n st 用来定义常量,必须初始化,不能修改(对象特殊)3、什么是回调【仅供参考】回调函数是作为参
21、数或选项传递给某个方法的普通JS 函数。它是一个函数,在另一个函数完成调用后执行,因此称为回调。4、对 JS的slice和 splice的理解?【仅供参考】sl i ce 是用来截取,比如sl i ce。,3),下标含头不含尾的截取,sl i ce(l),从下标 1 开始截取到最后,sl i ce(-2)表示截取倒数第二个开始,取到最后。返回被提取的数组。原数组不变。sp l i ce 通过删除或替换现有元素或者原地添加新的元素来修改数组,原数组变化。sp i l ce(l,O,a ,b ),在下标为1 的位置开始删除0 个元素,追加两个元素 a ,b ,此时 a 的下标变成1sp i l c
22、e d,l/a/b ),在下标为1 的位置开始删除1 个元素,追加两个元素 a ,b ,此时 a 的下标变成1返回被删除的数组5、请说一个p ush S ta te 与 re p l a ce S ta te 两个方法的作用与区别【仅供参考】作 用:都是改变路由(路径)的,路径改变时不会请求服务器(除非你f 5 刷新)区别:p ush S ta te:不会替换掉之前的历史路径re p l a ce S ta te:会替换掉之前的历史路径6、请说一下你常用的字符串方法(至少七个)【仅供参考】tri m O:去首尾空格sp l i t(se p,l i m i t):将字符串分割为字符数组,l i
23、 m i t为从头开始执行分割的最大数量i n d e xO f(str):返 回 str在父串中第一次出现的位置,若没有则返回Tl a stl n d e xO f (str):返 回 str在父串中最后一次出现的位置,若没有则返回Tsub str(sta rt,l e n g th):从字符索引sta rt的位置开始,返回长度为l e n g th的子串sub stri n g (f ro m,to):返回字符索引在f ro m 和 to (不含)之间的子串sl i ce (sta rt,e n d):返回字符索引在sta rt和 e n d (不含)之间的子串to L o w e rCa
24、 se。:将字符串转换为小写to U p p e rCa se O:将字符串转换为大写re p l a ce(strl,str2):strl 也可以为正则表达式,用str2 替 换 str 1co n ca t(strl,str2,.):连接多个字符串,返回连接后的字符串的副本m a tch (re g e x):搜索字符串,并返回正则表达式的所有匹配ch a rAt(i n d e x):返回指定索引处的字符串ch a rCo d e At(i n d e x):返回指定索引处的字符的U n i co d e 的值f ro m Ch a rCo d e O :将 U n i co d e 值
25、转换成实际的字符串se a rch (re g e x):基于正则表达式搜索字符串,并返回第一个匹配的位置v a l ue O f O:返回原始字符串值7、p ro to ty p e 和 p ro to 的关系是什么【仅供参考】p ro to ty p e:所有函数都会有一个p ro to ty p e 属性,它就是函数的原型对象p ro to:所有实例对象上都会有一个p ro to 属性,它等同于函数的原型对象8、说一下i n n e rH T M L 与 i n n e rT e xt的作用与区别?【仅供参考】作用:都可以获取或者设置元素的内容区别:i n n e rH T M L 可以
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 2022 年前 端面 宝典
限制150内