《2023年经典前端面试题.pdf》由会员分享，可在线阅读，更多相关《2023年经典前端面试题.pdf（29页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、2023年经典前端面试题(一)一、HTML/CSS篇1、请你说一下 Web Worker和 WebSocket的作用。【仅供参考】Web Worker的作用如下：(1)通过 worker=new Worker(url)加载一个 JavaScript文件，创建一个 Worker,同时返回一个Worker实例(2)用 worker.postMessage(data)向 Worker发送数据(3)绑 定 worker,onmessage接 收 Worker发送过来的数据(4)可以使用worker,terminate()终止一个 Worker的执行。WebSocket的作用如下。它是Web应用程序的传
2、输协议，提供了双向的、按序到达的数据流。它是HTML5新增的协议，WebSocket的连接是持久的，它在客户端和服务器之间保持双工连接，服务器的更新可以及时推送到客户端，而不需要客户端以一定的时间间隔去轮询。2、iframe的优缺点？【仅供参考】优点：解决加载缓慢的第三方内容如图标和广告等的加载问题Security sandbox并行加载脚本缺点：i frame会阻塞主页面的Onload事件即时内容为空，加载也需要时间没有语意3 localstorage和 cookie的区别是什么?【仅供参考】localStorage的概念和cookie相似，区 别 是 localStorage是为了更大容量
3、的存储设计的。cookie的大小是受限的，并且每次请求一个新页面时，cookie都会被发送过去，这样无形中浪费了带宽。另外，cookie还需要指定作用域，不可以跨域调用。除此之外，localStorage拥有 setlten,getltem、removeitem、clear等方法，cookie则需要前端开发者自己封装setCookie和 get Cookie。但 cookie也是不可或缺的，因 为 cookie的作用是与服务器进行交互，并且还是HTP规范的一部分，而 localStorage仅因为是为了在本地“存储”数据而已，无法跨浏览器使用。第1/29页4、H T M L 5 为浏览器提供了
4、哪些数据存储方案？【仅供参考】在较高版本的浏览器中，提供了 s e s s i o n S t o r a g e：和 g l o b a l S t o r a g eo在H T M L 5 规范中，用l o c a l S t o r a g e 取代 g l o b a l S t o r a g e。H T M L 5 中的 W e b 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。s e s s i o n S t o r a g e 用于在本地存储一个 会 话（s e
5、 s s i o n）中的数据，这些数据只有同一个会话中的页面才能访问，当会话结来后，数据也随之销毁。因 此 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 用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。l o c a l S t o r a g e 和 s e s s i o n S t o r a g e 都具有相同的操作方法，例 如 s e t i t e m、g e t l t e m 和r e m o v e I t e m 等5、i m g 的t i t l
6、e 和a l t 有什么区别【仅供参考】通常当鼠标滑动到元素上的时候显示a l t 是 i m g 的特有属性，是图片内容的等价描述，用于图片无法加载时显示、读屏器阅读图片。可提图片高可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析。6、H T M L 5 中如何实现应用缓存？【仅供参考】首先，需要指定“m a n i f e s t”文件，m a n i f e s t”文件帮助你定义缓存如何工作以下是“m a n i f e s t”文件的结构。C A C H E M A N T E E S T#v e r s i o n 1.0/d e m o,c s s/d e m
7、o,j s/d e m o,p n g所 有 m a n i f e s t 文件都以“C A C H E M A N I F E S r语句开始。#（散列标签）有助于提供缓存文件的版本。m a n i f e s t 文件的内容类型应是“t e x t/c a c h e-m a n i f e s t”。创建一个 缓 存 m a n i f e s t 文件后，在H T M L 页面中提供m a n i f e s t 链接，代码如下所示。h t m l m a n i f e s t i i c k e t a n g.a p p c a c h e”第一次运行以上文件时，它会添加到浏览
8、器应用缓存中，在服务器宕机时，页面从应用缓存中获取数据。7、应用缓存中网络命令的作用是什么？【仅供参考】网络命令描述不需要缓存的文件，例如以下代码中“l o g i n,p h p”始终都不应该缓存或者离线访问。N E T W O R Kl o g i n,p h p第2/2 9 页8、H T M L 5 为什么只需要写?【仅供参考】H T M L 5 不基于S G M L,因此不需要对D T D 进行引用，但是需要D 0 C T Y P E 来规范浏览器的行为(让浏览器按照它们的方式来运行)。而H T M 4.0 1 基于S G M L,所以需要对D T D 进行引用，才能告知浏览器文档所使
9、用的类型。9、H T M L 5 C an vas 元素有什么作用？【仅供参考】C an vas 元素用于在网页上绘制图形，该元素标签的强大之处在于可以直接在H T M L 上进行图形操作。1 0、什么是 W ebs q l?【仅供参考】W ebs q l 是一个在浏览器客户端的结构关系数据库，是浏览器内的本地R D B M S (关系型数据库管理 系 统)，可以使用S Q L 查询。1 1、伪元素和伪类的区别和作用？【仅供参考】伪元素：在内容元素的前后插入额外的元素或样式类似：befo r e,:aft er,:fi r s t-l et t er,但是这些元素实际上并不在文档中生成。它们只
10、在外部显示可见，但不会在文档的源代码中找到它们，因此，称 为“伪”元素伪类：将特殊的效果添加到特定选择器上类似:h o ver,:fi r s t-ch i l d。它是已有元素上添加类别的，不会产生新的元素。1 2、如何实现6 P x 字体【仅供参考】.fo n t fo n t-s i z e:1 2 p x;t r an s fo r m:s cal e(.5);)1 3、C S S 中可以让文字在垂直和水平方向上重叠的两个属性是什么？【仅供参考】垂直方向的属性是l i n e-h ei g h t.水平方向的属性是l et t er-s p aci n g。1 4、我们会在写cs s
11、的时候做一些标签选择器的初始化样式？为什么？比如：【仅供参考】bo dy,u l,o l,l i,p,h l,h 2,h 3,h 4,h 5,h 6,fo r m,fi el ds et,t abl e,t d,i m g,di v(m ar g i n:0;p addi n g:0;bo r der:0;)第3/2 9 页bodybackground:#fff;color:#333;font-size:12px;margin-top:5px;font一family:SimSun,宋体,“Arial N arrow”;ul,ollist-style-type:none;select,input
12、,img,select(vertical-align:middle;atext-decoration:none;a:linkcolor:#009;a:visitedcolor:#800080;a:hover,a:active,a:focuscolor:#c00;text-decoration:underline;为了保证默认的标签样式在不同浏览器能有一致的效果15、Float布局有哪些缺陷？如何清除浮动？【仅供参考】使用float之后，元素跳出文档流，容易引发父容器塌陷，最好的解决方式是给复用器加上：after伪类进行清除浮动16、如何在图片下方设置几像素的空白间隙？【仅供参考】定义img为
13、display:block,或定义父容器为font-size：0。17、CSS3新特性你能说出哪些？【仅供参考】新增选择器 p:nth-chi Id(n)color:rgba(255,0,0,0.75)弹性盒模型display:flex;多列布局 column-count:5;媒体查询 media(max-width:4 80px).box:column-count:1;个性化字体 font-facefont-family:BorderWeb;src:ur 1(BOR DER WO.eot);颜色透明度 color:rgba(255,0,0,0.75);圆角 border-radius:5px
14、;渐变 background:linear-gradient(red,green,blue);阴影 box-shadow:3px 3px 3px rgba(0,64,128,0.3);倒影 box-reflect:below 2px;文字装饰 text-stroke-color:red;文字溢出 text-overflow:el 1 ipsis;背景效果 background-size:lOOpx lOOpx;边框效果 border-image:url(bt_blue.png)0 10;平滑过渡 transition:all.3s ease-in.Is;动画 keyframes anim-1
15、50%border-radius:50%;animation:anim-1 Is;变形 transform旋转 transform:rotate(20deg);第4/29页倾斜 tra n sf orm:sk e w(1 5 0 d e g,-l O d e g);位移 tra n sf orm:tra n sl a te(2 0 px,2 0 px);缩放 tra n sf orm:sc a l e(.5);1 8、你知道哪些关于l e tte r-spa c i n g 的妙用？【仅供参考】可以用于消除i n l i n e-b l oc k 元素间的换行符空格间隙1 9、rg b a()
16、和 opa c i ty的透明效果有什么不同？【仅供参考】opa c i ty作用于元素以及元素内的所有内容(包括文字)的透明度rg b a()只作用于元素自身的颜色或其背景色，子元素不会继承透明效果2 0、ve rti c a l-a l i g n 什么时候生效【仅供参考】父 元 素(i n l i n e-b l oc k b l oc k)必须含有l i n e-h e i g h t(i n l i n e 元素有无皆可)，子元素中的(i n l i n e-b l oc k/i n l i n e 元 素)ve rti c a l-a l i g n 才能起作用当父元素没有设置l
17、i n e-h e i g h t时，只对行内元素的兄弟元素对齐有用，无法子元素居中对齐父元素二、JS/ES6/TS篇1、箭头函数有哪些特点？【仅供参考】不需要f un c ti on 关键字来创建函数省略re turn 关键字改变th i s指向2、J a va S c ri pt的同源策略【仅供参考】所谓同源 指的是三个相同，协议+域名+端口同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。因此A 网页设置的Co o k ie,B 网页不能读到，除非这两个网页同源”。比如恶意网站的页面通过if r am e 嵌入了银行的登录页面(二者不同源)，因此恶意网站得不到用户输入的任
18、何信息和c o o k ie。如果非同源，共有三种行为受到限制：(1)Co o k ie、L o c al St o r ag e 和 I n d e x D B 无法读取。(2)D O M 无法获得。(3)A J A X请求不能发送。第5/2 9页同源政策规定，AJAX请求只能发给同源的网址，否则就报错。有三种方法规避这个限制。JSON PWebSocketC0R SN ginx代理跨域技术-C0R S,是 HTML5的一项特性，它定义了一种浏览器和服务器交互的方式来确定是否允许跨域请求。前端正常ajax请求：$.ajax(type:post，url:http:/192.168.4 5.15
19、2:8081/conference/user/bind，,async:false,/使用同步方式/1 需要使用JSON.stringify 否则格式为 a=2&b=3&now=14./2 需要强制类型转换,否则格式为 a:2,b:3 data:JSON.stringify(a:1,b:2now:new Date().getTime()/注意不要在此行增加逗号),headers:Authentication，:xxxxxx),contentType:text/plain”,dataType:json，success:function(data)console,log(data)/注意不要在此行增
20、加逗号)；后端配置允许跨域的域名，路径，方法等：Configurationpublic class CorsConfig implements WebMvcConfigurer Overridepublic void addCorsMappings(CorsR egistry registry)设置允许跨域的路径registry.addMapping(/*)设置允许跨域请求的域名,allowedOrigins(*)是否允许证书不再默认开启第6/29页.al l o w Cr e d e n t ial s(t r u e)设置允许的方法.al l o w e d M e t ho d s CG
21、 E r,PO ST)跨域允许时间.m ax A g e(3 60 0);Ng in x 代理：项目部署的时候，用n g in x 服务起做代理：8 0 端口：请求端口，所有请求到此处8 0 8 0 端口：A PI 服务器端口，通过请求的路径匹配代理进入3、字符串截取方法s u bs t r、s u bs t r in g、s l ic e 三者的区别【仅供参考】s u bs t r (n,m)：截取的是字符串中索引为n 开始的，并且截取m 位s u bs t r in g 8,m)：从索引为n 的位置开始截取，截取到索引为m 的位置但是不包含索引为m 这一项s l ic e(n,m)：和s
22、u bs t r in g 一样，但是他可以支持负数索引4、在J S中编码与解码URL【仅供参考】.e n c o d e URI ()可以对字符串编码.d e c o d e URI ()可以对字符串解码5、事件冒泡，事件捕获，阻止默认行为【仅供参考】事件冒泡，事件捕获：我们可以在a d d E v e n t L i s t e n e r 的最后一个参数设置是冒泡还是捕获。d i v l d i v 2 d i v 3 假如有三个d i v,从里到外是d i v l,d i v 2,d i v 3 o 我们给三个d i v 都加上一个点击事件。当点击d i v l,则从冒泡顺序是d i
23、v l-d i v 2-d i v 3(从内到外)，而捕获顺序是d i v 3-d i v 2-d i v l (从外到内)如果同时定义了冒泡和捕获，则触发顺序是先捕获再冒泡，即先从外到内，再从内到外。f o c u s,b l u r,c h a n g e,s u b m i t,r e s e t,s e l e c t 等不参与冒泡e v e n t.s t o p Pr o p a g a t i o n()阻止冒泡，在d i v l 加入这行代码，冒泡到这一层就不会再往下继续了。默认行为：如表单提交，a 标签跳转，右键鼠标菜单以标签a 为例，当点击a 标签时，默认都是跳转的动作，这
24、个就是默认事件；如果给a 加一个c l i c k 事件，并且只想执行c l i c k,则需要在里面加上e v e n t,p r e v e n t d e f a u l t (),此时默认跳转第7/2 9 页行为会被阻止，只执行点击事件。假如d i v 3 是a 标签，点击a 标签，实际干了三件事情，先后为执行本身处理函数比如c l i c k 事件、冒泡父级处理函数，接着响应默认事件(跳转)如果想只处理a 的自身函数，其它都不处理。方法一：可以在a 事件加上e v e n t.s t o p Pr o p a g a t i o n ()和e v e n t,p r e v e n
25、t d e f a u l t ()方法二：在d i v 2 事件里写上r e t u r n f a l s e6、1,2,3 .m a p (M a t h,p o w)的结果是什么？【仅供参考】请说出代码的运行结果，为什么？结 果 时 1 2 9m a p ()会根据提供提供的函数对指定序列(列表)做映射。p o w()方法返回x 的y 次方的值。m a p (f u n c t i o n (当前元素的值 v a l u e,下标 i n d e x);7、L a b e l 的作用是什么？是怎么用的？【仅供参考】答案：l a b e l 标签来定义表单控制间的关系,*当用户选择该标签
26、时，浏览器会自动将焦点转到和标签相关的表单控件上*。两种用法：一 种 是 i d 绑定，一种是嵌套；示例：l a b e l f o r=p w c T用户名：/l a b e l i n p u t i d=p w d t y p e=c h e c k b o x”8、把 s c r i p t 放 在/b o d y 之前和之后有什么区别？【仅供参考】浏览器会如何解析它们？按照H TM L 标准，在结束后出现 s c r i p t 或任何元素的开始标签都是解析错虽然不符合H T M L 标准，但浏览器会自动容错，使实际效果与写在/b o dy 之前没有区别浏览器的容错机制会忽略 s c
27、r ip t 之前的，视作V s cr ip t 仍 在 b o dy 体内。9、什么是标识符？【仅供参考】在J S 中，可以自定义命名的东西都属性标识符；比如变量名，函数名，参数名都是标识符1 0、=、=”的区别？【仅供参考】=,当且仅当两个运算数相等时，它 返 回 t r u e,即不检查数据类型=,只有在无需类型转换运算数就相等的情况下，才 返 回 t r u e,需要检查数据类型第8/2 9页11、事件绑定和普通事件有什么区别？【仅供参考】普通事件会覆盖掉，只执行后者方法dom.onclick=function()事件绑定不会覆盖掉，会依次执行addEventListener(clic
28、k,function(),true)12、new操作符具体干了什么呢？【仅供参考】1、创建一个空对象，并 且 this变量引用该对象，同时还继承了该函数的原型。2、属性和方法被加入到this引用的对象中。3、新创建的对象由this所引用，并且最后隐式的返回this o13、documen.write 和 innerHTML 的区别?【仅供参考】document,write只能重绘整个页面innerHTML可以重绘页面的一部分14、TypeScript的as语法是什么？【仅供参考】as是TypeScript中类型断言的附加语法，引入as-语法的原因是原始语法0 与JSX冲突let empCode
29、:any=111;let employeeCode=code as number;15、TypeScript中的类型断言？【仅供参考】类型断言可以手动指定一个值的类型/第一种let employeeCode=code;第二种let employeeCode=code as number16、es5和es6的区别，说一下你所知道的es6【仅供参考】ECMAScript5,即ES5,是ECMAScript的第五次修订，于2009年完成标准化ECMAScript6,即ES6,是ECMAScript的第六次修订，于2015年完成，也称ES2015ES6是继ES5之后的一次改进,相对于ES5更加简洁，提
30、高了开发效率ES6新增的一些特性：let声明变量和const声明常量，两个都有块级作用域ES5中是没有块级作用域的，并且var有变量提升，在let中，使用的变量一定要进行声明第9/29页箭头函数E S 6中的函数定义不再使用关键字fu n c t i o n。，而是利用了（）=来进行定义字符串模板字符串是增强版的字符串，用反引号标识，可以当作普通字符串使用，也可以用来定义多行字符串解构赋值E S 6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值fo r.o f循环可以遍历数组、S et 和Ma p 结构、某些类似数组的对象、对象，以及字符串i m p o r t ex p o r t
31、 模块化导入导出ES 6 标准中，J s 原生支持模块（m o d u l e）。将J S 代码分割成不同功能的小块进行模块化，将不同功能的代码分别写在不同文件中，各模块只需导出公共接口部分，然后通过模块的导入的方式可以在其他地方使用S et 数据结构，类似数组。所有的数据都是唯一的，没有重复的值。它本身是一个构造函数展开运算符可以将数组或对象里面的值展开；还可以将多个值收集为一个变量c l a s s 类的继承ES 6 中不再像ES 5 一样使用原型链实现继承，而是引入C l a s s 这个概念a s y n c、a w a i t 使 用 a s y n c/a w a i t,搭配p
32、r o m i s e,可以通过编写形似同步的代码来处理异步流程,提高代码的简洁性和可读性a s y n c 用于申明一个fu n c t i o n 是异步的，而 a w a i t 用于等待一个异步方法执行完成Pr o m i s e是异步编程的一种解决方案，比传统的解决方案（回调函数和事件）更合理、强大S y m b o l 是一种基本类型。S y m b o l 通过调用s y m b o l 函数产生，它接收一个可选的名字参数，该函数返回的s y m b o l 是唯一的Pr o x y 代理使用代理（Pr o x y）监听对象的操作，然后可以做一些相应事情17、p r o m i
33、s e有哪几种状态，什么时候会进入c a t c h （或者t h en 函数的第二个回调）？【仅供参考】三个状态：p en d i n g（初始化）、f u l f i l l e d （履行|成功）、re j e c t（拒绝|失败）两个过程：p a d d i n g -f u l f i l l e d,p a d d i n g -re j e c te d当p e n d i n g 为re j e c td 时，会进入c a tc h初始化，状态：p e n d i n g当调用re so l v e（成功），状态：p e n g d i n g=f u l f i l l e
34、d当调用re j e c t（失败），状态：p e n d i n g=re j e c te d1 8、解构赋值过程及其原理【仅供参考】解构赋值：其实就是分解出一个对象的解构，分成两个步骤：解构赋值过程：变量的声明变量的赋值原理：E S 6 变量的解构赋值本质上是“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予匹配的右边的值，如果匹配不成功变量的值就等于u n d e f i n e d第1 0/29 页1 9、E S 6 中数组新增了哪些方法f o rE a c h O,用于遍历数组，无返回值;【仅供参考】f i l te r。，过滤掉数组中不满足条件的值；m a p(),遍历数
35、组，返回一个新数组；re d u c e(),让数组的前后两项进行某种计算，然后返回其值。20、P ro m i se 构造函数是同步执行还是异步执行，那 么 th e n 方法呢？【仅供参考】p ro m i se 构造函数中回调函数是同步执行的，th e n 方法中回调函数是异步执行的三、Vue/ReactM1、sta te 和p ro p s区别是什么?【仅供参考】相同点：都是普通的j s对象，他们包含着影响渲染输出的信息不同点：sta te 是组件自己管理数据，控制自己的状态，可变p ro p s是外部传入的数据参数，不可变没有sta te 的叫做无状态组件，有sta te 的叫有状态
36、组件多用p ro p s,少用sta te2、列 出 R e a c t R o u te r的优点。【仅供参考】就像 R e a c t 基于组件一样，在 R e a c t R o u te r v 4 中，A P I 是 A l l A b o u t C o m p o n e n ts)0 可以将 R o u te r可视化为单个根组件(),其中我们将特定的子路由()包起来。无需手动设置历史值：在 R e a c t R o u te r v4 中，我们要做的就是将路由包装在 组件中。包是分开的：共有三个包，分别用于We b、N a ti v e 和 C o re。这使我们应用更加紧
37、凑。基于类似的编码风格很容易进行切换3、R e du x 遵循的三个原则是什么？【仅供参考】单一事实来源：整个应用的状态存储在单个s t o r e 中的对象/状态树里。单一状态树可以更容易地跟踪随时间的变化，并调试或检查应用程序。状态是只读的：改变状态的唯一方法是去触发一个动作。动作是描述变化的普通J S 对象。就像 s t at e 是数据的最小表示一样，该操作是对数据更改的最小表示。使用纯函数进行更改：为了指定状态树如何通过操作进行转换，你需要纯函数。纯函数是那些返回值仅取决于其参数值的函数。第1 1/29页4、怎样解释R e ac t 中 r e n de r()的目的【仅供参考】每个
38、R e ac t 组件强制要求必须有一个r e n de r()o 它返回一个R e ac t 元素，是 原 生 D O M 组件的表示。如果需要渲染多个H T M L 元素，则必须将它们组合在一个封闭标记内，例 如 f o r m 、,等。此函数必须保持纯净，即必须每次调用时都返回相同的结果5、在构造函数调用s u p e r 并将p r o p s 作为参数传入的作用是啥？【仅供参考】在 调 用 s u p e r()方法之前，子类构造函数无法使用t h i s 引用，E S 6 子类也是如此。将 p r o p s参数传递给s u p e r()调用的主要原因是在子构造函数中能够通过t
39、h i s,p r o p s 来获取传入的p r o p s op r o p s 的行为只有在构造函数中是不同的，在构造函数之外也是一样的6、如何避免组件的重新渲染？【仅供参考】R e ac t 中最常见的问题之一是组件不必要地重新渲染。R e ac t 提供了两个方法，在这些情况下非常有用：R e ac t.m e m o():这可以防止不必要地重新渲染函数组件P u r e C o m p o n e n t:这可以防止不必要地重新渲染类组件这两种方法都依赖于对传递给组件的p r o p s 的浅比较，如 果 p r o p s 没有改变，那么组件将不会重新渲染。虽然这两种工具都非常有
40、用，但是浅比较会带来额外的性能损失，因此如果使用不当，这两种方法都会对性能产生负面影响。通过使用R e a c t P r of i l e r,可以在使用这些方法前后对性能进行测量，从而确保通过进行给定的更改来实际改进性能。7、列出R e a c t 的一些主要优点【仅供参考】它提高了应用的性能可以方便地在客户端和服务器端使用由 于 J S X,代码的可读性很好R e a c t 很容易与M e t e or,A ng u l a r 等其他框架集成使用R e a c t,编写U I 测试用例变得非常容易8、u s e E f f e c t 的回调函数为什么无法使用a s ync?【仅供参
41、考】R e a c t 本身并不支持这么做，理 由 是 e f f e c t f u nc t i on应该返回一个销毁 函 数(e f f e c t：是指r e t u r n返回的c l e a nu p函 数)，如 果 u s e E f f e c t 第一个参数传入a s ync,返回值则变成了P r om i s e,会 导 致 r e a c t 在调用销毁函数的时候报错：f u nc t i on,a ppl y i s u nd e f i ne d o9、什么是虚拟D OM?第12/29页【仅供参考】虚拟D OM 是真实D OM 在内存中的表示，u l 的表示形式保存在
42、内存中，并且与实际的D OM 同步，这是一个发生在渲染函数被调用和元素在屏幕上显示的步骤，整个过程被称为调和10、常用的h ook s【仅供参考】u s e S t a t e：定义s t a t e 的数据，参数是初始化的数据，返回值两个值1.初始化值，2.修改的方法u s e E f f e c t：副作用函数，顾名思义，副作用即只有使用过后才会产生副作用当作生命周期来使用：第二个参数如果没写的话，页面一更新触发，c om poe nt D i d M ou ntc om poe nt D i d U pd a t e第二个参数如果空数组的话，只执行一次，c om poe nt D i d
43、 M ou nt数组中跟某些变量，当作监听器来使用，监听数据的变化，u s e E f f e c t 是一个副作用函数，组件更新完成后触发的函数如果我们在u s e E f f e ct 返回一个函数的，组件被销毁的时候触发u s e M e mo：用来计算数据，返回一个结果，监听数据的变化，第二个参数就是监听的数据，具有缓存性u s e M e mo 和u s e E f f e ct 相比较来说，u s e M e mo 是组件更新的时候触发生命周期u s e C a llb a ck：当父组件向子组件传递函数的时候，父组件的改变会导致函数的重新调用产生新的作用域，所以还是会导致子组件的
44、更新渲染，这个时候我们可以使用u s e C a llb a ck 来缓存组件u s e R e f：相当于cr e a t e R e f 的使用，创建组件的属性信息u s e C o n t e x t：相当在函数组件中获取co n t e x t 状态数的内容信息u s e R e du ce r：u s e R e du ce r 是用来弥补u s e S t a t e 的补不足，可以把数据进行集中式的管理，单独处理数据的逻辑信息1 1、如 何 在 R e du x 中定义Act i o n【仅供参考】R e a ct 中 的 Act i o n 必须具有t y pe 属性，该属性指
45、示正在执行的AC T I O N 的类型。必须将它们定义为字符串常量，并且还可以向其添加更多的属性。在 R e du x 中，a ct i o n 被 名 为 Act i o nC r e a t o r s 的函数所创建1 2、当调用s e t S t a t e 时，R e a ct r e n de r 是如何工作的【仅供参考】虚 拟 D O M 渲染：当r e n de r 方法被调用时，它返回一个新的组件的虚拟D O M 结构。当调用s e t S t a t e()时，r e n de r 会被再次调用，因为默认情况下s h o u ldC o mpo n e n t U pda
46、t e 总是返回t r u e,所以默认情况下R e a ct 是没有优化的。原 生 D 0 M 渲染:R e a ct 只会在虚拟D O M 中修改真实D O M 节点，而且修改的次数非常少这是很棒的R e a ct 特性，它优化了真实D 0 M 的变化，使R e a ct 变得更快。1 3、V u e 是如何实现数据双向绑定的？【仅供参考】第1 3/2 9 页如果被问到V u e 怎么实现数据双向绑定，大家肯定都会回答通过O b j e ct,de f i n e P r o pe r t y O对数据进行劫持，但 是 O b j e ct.de f i n e P r o pe r t
47、y O 只能对属性进行数据劫持，不能对整个对象进行劫持。同理无法对数组进行劫持，但是我们在使用V u e 框架中都知道，V u e 能检测到对象和数组(部分方法的操作)的变化，那它是怎么实现的呢？我们查看相关代码如下：/*O b s e r v e a l is t o f A r r a y it e m s.*/o b s e r v e A r r a y (it e m s:A r r a y )f o r (l e t i =0,1=it e m s,l e n gt h;i 执行加载图片操作-判断图片是否在可视区域内-在，则动态将d a t a-s r c的值赋予该图片1 5、哪些
48、方法可以提升网站前端性能？第27/29页精灵图合并，减少H T T P 请求；压缩H T M L、C S S、J a v a S c r ip t 文件；使用C D N 托管静态文件；使用l oc a l s t or a g e缓 存 和 m a in fes t 应用缓存。1 6、请说出几种缩短页面加载时间的方法。【仅供参考】具体方法如下。（1）优化图片（2）选择图像存储格式（比如，G 1 F 提供的颜色较少，可用在一些对颜色要求不高的地方）（3）优化C S S （压缩、合并C S S）（4）在网址后加斜杠（5）为图片标明高度和宽度（如果浏览器没有找到这两个参数，它需要一边下载图片一边计算
49、大小。如果图片很多，浏览器需要不断地调整页面。这不但影响速度，而且影响浏览体验。当浏览器知道高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容，从而优化加载时间，提升浏览体验）。1 7、请说一下你用过的浏览器存储，并说出它们的区别？【仅供参考】s es s ion S t or a g el oc a l S t or a g ec ook ie相 同 点：三者都是在浏览器本地存放数据；区 别：s es s ion S t or a g e：数据只存在于会话期间l oc a l S t or a g e：数据永久存储c ook ie：数据默认会话结束时过期
50、，但可以设置过期时间，在请求服务端，浏览器会默认把c ook ie数据发送给服务器，c ook ie能存放的数据相对较小1 8、描述浏览器的渲染过程？，D 0 M 树和渲染树的区别？【仅供参考】浏览器的渲染过程：解 析 H T M L构 建 D 0 M（D 0 M 树），并行请求c s s/im a g e/j sC S S 文件下载完成，开始构建C S S O M（C S S 树）C S S O M 构 建 结 束 后 和 D 0 M 一起 生 成 R en d er T r ee（渲染树）布局（La y ou t）：计算出每个节点在屏幕中的位置显示（P a in t in g）：通过显卡把