2021年web前端开发经典面试题总结整理(建议收藏)

某求职招聘平台发布的报告显示,春节后48%的职场人有换工作打算。其中,37%的职场人出于挑战自己、寻找更多机会的目的而改变工作状态;35%的职场人为了获得更多晋升机会;分别有40%、37%的职场人士因为薪资太低、工作发展前景不乐观,而计划在春节后更换工作。你是不是也是这些换工作的一员呢?那上战场怎么能没有枪呢?今天就为大家解答一下前端面试题,希望这份面试题,能对您有所帮助。

1,阐述清楚浮动的几种方式(常见问题)

(1)父级div定义 height

原理:父级div手动定义height,就解决了父级div无法自动获取到高度的问题。
优点:简单、代码少、容易掌握
缺点:只适合高度固定的布局,要给出精确的高度,如果高度和父级div不一样时,会产生问题

(2)父级div定义 overflow:hidden

原理:必须定义width或zoom:1,同时不能定义height,使用overflow:hidden时,浏览器会自动检查浮动区域的高度
优点:简单、代码少、浏览器支持好

(3) 结尾处加空div标签 clear:both

原理:添加一个空div,利用css提高的clear:both清除浮动,让父级div能自动获取到高度
优点:简单、代码少、浏览器支持好、不容易出现怪问题
缺点:不少初学者不理解原理;如果页面浮动布局多,就要增加很多空div,让人感觉很不好

2,解释css sprites ,如何使用?

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,
再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,
background-position可以用数字能精确的定位出背景图片的位置。
CSS Sprites为一些大型的网站节约了带宽,让提高了用户的加载速度和
用户体验,不需要加载更多的图片

3,如何用原生js给一个按钮绑定两个onclick事件?

//事件监听 绑定多个事件
var btn = document.getElementById("btn");
btn.addEventListener("click",hello1);
btn.addEventListener("click",hello2);
function hello1(){
 alert("hello 1");
}
function hello2(){
 alert("hello 2");
}

4,拖拽会用到哪些事件

· dragstart:拖拽开始时在被拖拽元素上触发此事件,监听器需要设置拖拽所需数据,从操作系统拖拽文件到浏览器时不触发此事件.
· dragenter:拖拽鼠标进入元素时在该元素上触发,用于给拖放元素设置视觉反馈,如高亮
· dragover:拖拽时鼠标在目标元素上移动时触发.监听器通过阻止浏览器默认行为设置元素为可拖放元素.
· dragleave:拖拽时鼠标移出目标元素时在目标元素上触发.此时监听器可以取消掉前面设置的视觉效果.
· drag:拖拽期间在被拖拽元素上连续触发
· drop:鼠标在拖放目标上释放时,在拖放目标上触发.此时监听器需要收集数据并且执行所需操作.如果是从操作系统拖放文件到浏览器,需要取消浏览器默认行为.
· dragend:鼠标在拖放目标上释放时,在拖拽元素上触发.将元素从浏览器拖放到操作系统时不会触发此事件. 

5,请列举jquery中的选择器:

#id,.class,element,:first,:even,:eq(index),:contains(text)
链接:jQuery选择器

6,Javascript中的定时器有哪些?他们的区别及用法是什么?

setTimeout 只执行一次<br>setInterval 会一直重复执行

7,请描述一下 cookies sessionStorage和localstorage区别

(1)相同点:都存储在客户端
不同点:
1.存储大小
cookie数据大小不能超过4k。
sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。
(2)有效时间
· localStorage 存储持久数据,浏览器关闭后数据不丢失除非主动删除数据;
· sessionStorage 数据在当前浏览器窗口关闭后自动删除。
· cookie 设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭
(3)数据与服务器之间的交互方式
· cookie的数据会自动的传递到服务器,服务器端也可以写cookie到客户端
· sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。

8,编写一个方法去掉数组里面重复的内容?

2021年web前端开发经典面试题总结整理(建议收藏)插图HTML源码

9,document.write和innerHTML的区别:

document.write是直接写入到页面的内容流,如果在写之前没有调用document.open, 浏览器会自动调用open。每次写完关闭之后重新调用该函数,会导致页面被重写。
innerHTML则是DOM页面元素的一个属性,代表该元素的html内容。你可以精确到某一个具体的元素来进行更改。如果想修改document的内容,则需要修改document.documentElement.innerElement。
innerHTML将内容写入某个DOM节点,不会导致页面全部重绘
innerHTML很多情况下都优于document.write,其原因在于其允许更精确的控制要刷新页面的那一个部分。

10,什么是ajax? ajax的步骤?

ajax(异步javascript xml) 能够刷新局部网页数据而不是重新加载整个网页。
如何使用ajax?
第一步,创建xmlhttprequest对象,var xmlhttp =new XMLHttpRequest();XMLHttpRequest对象用来和服务器交换数据。
var xhttp;
if (window.XMLHttpRequest) {
//现代主流浏览器
xhttp = new XMLHttpRequest();
} else {
// 针对浏览器,比如IE5或IE6
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
第二步,使用xmlhttprequest对象的open()和send()方法发送资源请求给服务器。
第三步,使用xmlhttprequest对象的responseText或responseXML属性获得服务器的响应。
第四步,onreadystatechange函数,当发送请求到服务器,我们想要服务器响应执行一些功能就需要使用onreadystatechange函数,每次xmlhttprequest对象的readyState发生改变都会触发onreadystatechange函数。

11,xml和json的区别

· JSON相对于XML来讲,数据的体积小,传递的速度更快些
· JSON与JavaScript的交互更加方便,更容易解析处理,更好的数据交互
· XML对数据描述性比较好;
· JSON的速度要远远快于XML;

12,js有几种数据类型,其中基本数据类型有哪些

五种基本类型: Undefined、Null、Boolean、Number和String。
引用类型: Object、Array和Function。

13,undefined和null的区别

null: Null类型,代表“空值”,代表一个空对象指针,使用typeof运算得到 “object”,
所以你可以认为它是一个特殊的对象值。
undefined: Undefined类型,当一个声明了一个变量未初始化时,得到的就是undefined。
null是javascript的关键字,可以认为是对象类型,它是一个空对象指针,
和其它语言一样都是代表“空值”,不过 undefined 却是javascript才有的。
undefined是在ECMAScript第三版引入的,为了区分空指针对象和未初始化的变量,
它是一个预定义的全局变量。没有返回值的函数返回为undefined,
没有实参的形参也是undefined。
javaScript权威指南:
null 和 undefined 都表示“值的空缺”,你可以认为undefined是表示系统级的、
出乎意料的或类似错误的值的空缺,而null是表示程序级的、正常的或在意料之中的值的空缺

14,http和https有何区别?

http是HTTP协议运行在TCP之上。所有传输的内容都是明文,客户端和服务器端都无法验证对方的身份。
https是HTTP运行在SSL/TLS之上,SSL/TLS运行在TCP之上。所有传输的内容都经过加密,
加密采用对称加密,但对称加密的密钥用服务器方的证书进行了非对称加密。
此外客户端可以验证服务器端的身份,如果配置了客户端验证,服务器方也可以验证客户端的身份。

15,常见的HTTP状态码

2开头 (请求成功)表示成功处理了请求的状态代码。
200 (成功) 服务器已成功处理了请求。 通常,这表示服务器提供了请求的网页。
201 (已创建) 请求成功并且服务器创建了新的资源。
202 (已接受) 服务器已接受请求,但尚未处理。
203 (非授权信息) 服务器已成功处理了请求,但返回的信息可能来自另一来源。
204 (无内容) 服务器成功处理了请求,但没有返回任何内容。
205 (重置内容) 服务器成功处理了请求,但没有返回任何内容。
206 (部分内容) 服务器成功处理了部分 GET 请求。
3开头 (请求被重定向)表示要完成请求,需要进一步操作。 通常,这些状态代码用来重定向。
300 (多种选择) 针对请求,服务器可执行多种操作。 服务器可根据请求者 (user agent) 选择一项操作,或提供操作列表供请求者选择。
301 (永久移动) 请求的网页已永久移动到新位置。 服务器返回此响应(对 GET 或 HEAD 请求的响应)时,会自动将请求者转到新位置。
302 (临时移动) 服务器目前从不同位置的网页响应请求,但请求者应继续使用原有位置来进行以后的请求。
303 (查看其他位置) 请求者应当对不同的位置使用单独的 GET 请求来检索响应时,服务器返回此代码。
304 (未修改) 自从上次请求后,请求的网页未修改过。 服务器返回此响应时,不会返回网页内容。
305 (使用代理) 请求者只能使用代理访问请求的网页。 如果服务器返回此响应,还表示请求者应使用代理。
307 (临时重定向) 服务器目前从不同位置的网页响应请求,但请求者应继续使用原有位置来进行以后的请求。
4开头 (请求错误)这些状态代码表示请求可能出错,妨碍了服务器的处理。
400 (错误请求) 服务器不理解请求的语法。
401 (未授权) 请求要求身份验证。 对于需要登录的网页,服务器可能返回此响应。
403 (禁止) 服务器拒绝请求。
404 (未找到) 服务器找不到请求的网页。
405 (方法禁用) 禁用请求中指定的方法。
406 (不接受) 无法使用请求的内容特性响应请求的网页。
407 (需要代理授权) 此状态代码与 401(未授权)类似,但指定请求者应当授权使用代理。
408 (请求超时) 服务器等候请求时发生超时。
409 (冲突) 服务器在完成请求时发生冲突。 服务器必须在响应中包含有关冲突的信息。
410 (已删除) 如果请求的资源已永久删除,服务器就会返回此响应。
411 (需要有效长度) 服务器不接受不含有效内容长度标头字段的请求。
412 (未满足前提条件) 服务器未满足请求者在请求中设置的其中一个前提条件。
413 (请求实体过大) 服务器无法处理请求,因为请求实体过大,超出服务器的处理能力。
414 (请求的 URI 过长) 请求的 URI(通常为网址)过长,服务器无法处理。
415 (不支持的媒体类型) 请求的格式不受请求页面的支持。
416 (请求范围不符合要求) 如果页面无法提供请求的范围,则服务器会返回此状态代码。
417 (未满足期望值) 服务器未满足"期望"请求标头字段的要求。
5开头(服务器错误)这些状态代码表示服务器在尝试处理请求时发生内部错误。 这些错误可能是服务器本身的错误,而不是请求出错。
500 (服务器内部错误) 服务器遇到错误,无法完成请求。
501 (尚未实施) 服务器不具备完成请求的功能。 例如,服务器无法识别请求方法时可能会返回此代码。
502 (错误网关) 服务器作为网关或代理,从上游服务器收到无效响应。
503 (服务不可用) 服务器目前无法使用(由于超载或停机维护)。 通常,这只是暂时状态。
504 (网关超时) 服务器作为网关或代理,但是没有及时从上游服务器收到请求。
505 (HTTP 版本不受支持) 服务器不支持请求中所用的 HTTP 协议版本。

16,如何进行网站性能优化

(1)目的: 从用户角度而言,优化能够让页面加载得更快、对用户的操作响应得更及时,能够给用户提供更为友好的体验。从服务商角度而言,优化能够减少页面请求数、或者减小请求所占带宽,能够节省可观的资源。
(2)措施:
——减少HTTP请求数。
——使用缓存。
——脚本的无阻塞加载。
——内联脚本的位置优化等。
——Javascript中的DOM 操作优化、CSS选择符优化。
——图片编码优化,懒加载。
——使用负载均衡方案。

17,什么是mvvm,mvc?区别?

MVC是比较直观的架构模式,用户操作
->View(负责接收用户的输入操作)
->Controller(业务逻辑处理)->Model(数据持久化)->View(将结果反馈给View)。MVC使用非常广泛,比如JavaEE中的SSH框架。 

18,px和em的区别

px表示像素 (计算机屏幕上的一个点:1px = 1/96in),是绝对单位,不会因为其他元素的尺寸变化而变化;
em表示相对于父元素的字体大小。em是相对单位 ,没有一个固定的度量值,而是由其他元素尺寸来决定的相对值。

19,优雅降级和渐进增强

渐进增强(Progressive Enhancement):一开始就针对低版本浏览器进行构建页面,完成基本的功能,然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。
优雅降级(Graceful Degradation):一开始就构建站点的完整功能,然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用,然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。

其实渐进增强和优雅降级并非什么新概念,只是旧的概念换了一个新的说法。在传统软件开发中,
经常会提到向上兼容和向下兼容的概念。渐进增强相当于向上兼容,而优雅降级相当于向下兼容

20, JS哪些操作会造成内存泄露

(1)意外的全局变量引起的内存泄露。

function leak(){
leak="xxx";//leak成为一个全局变量,不会被回收
}


(2)闭包引起的内存泄露。

(3)没有清理的DOM元素引用。

(4)被遗忘的定时器或者回调 5)子元素存在引起的内存泄露。21,什么是闭包,如何使用它,为什么要使用它

闭包就是能够读取其他函数内部变量的函数。由于在Javascript语言中,
只有函数内部的子函数才能读取局部变量,
因此可以把闭包简单理解成“定义在一个函数内部的函数”。

所以,在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。闭包可以用在许多地方。它的最大用处有两个,一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中。

使用闭包的注意点:
· 由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。
· 闭包会在父函数外部,改变父函数内部变量的值。所以,如果你把父函数当作对象(object)使用,把闭包当作它的公用方法(Public Method),把内部变量当作它的私有属性(private value),这时一定要小心,不要随便改变父函数内部变量的值。 

22,请解释一下JavaScript的同源策略。

在客户端编程语言中,如javascript和 ActionScript,同源策略是一个很重要的安全理念,它在保证数据的安全性方面有着重要的意义。
同源策略规定跨域之间的脚本是隔离的,一个域的脚本不能访问和操作另外一个域的绝大部分属性和方法。那么什么叫相同域,什么叫不同的域呢?
当两个域具有相同的协议, 相同的端口,相同的host,那么我们就可以认为它们是相同的域。
同源策略还应该对一些特殊情况做处理,比如限制file协议下脚本的访问权限。
本地的HTML文件在浏览器中是通过file协议打开的,如果脚本能通过file协议访问到硬盘上其它任意文件,就会出现安全隐患,目前IE8还有这样的隐患 作者:编码梦想家 https://www.bilibili.com/read/cv10115331 出处:bilibili

23,怎样添加、移除、移动、复制、创建和查找节点?

(1)创建新节点

createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点

(2)添加、移除、替换、插入

appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //插入

(3)查找

getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id,唯一性

24,浏览器是如何渲染页面的?

1.解析HTML文件,创建DOM树。**
**自上而下,遇到任何样式(link、style)与脚本(script)都会阻塞(外部样式不阻塞后续外部脚本的加载)。
2.解析CSS。优先级:浏览器默认设置<用户设置<外部样式<内联样式

25,从输入url到显示页面,都经历了什么?

1、首先,在浏览器地址栏中输入url。
2、浏览器先查看浏览器缓存-系统缓存-路由器缓存,如果缓存中有,会直接在屏幕中显示页面内容。若没有,则跳到第三步操作。
3、在发送http请求前,需要域名解析(DNS解析)(DNS(域名系统,Domain Name System)是互联网的一项核心服务,它作为可以将域名和IP地址相互映射的一个分布式数据库,能够使人更方便的访问互联网,而不用去记住IP地址。),解析获取相应的IP地址。
4、浏览器向服务器发起tcp连接,与浏览器建立tcp三次握手。(TCP即传输控制协议。TCP连接是互联网连接协议集的一种。)
5、握手成功后,浏览器向服务器发送http请求,请求数据包。
6、服务器处理收到的请求,将数据返回至浏览器。
7、浏览器收到HTTP响应。
8、读取页面内容,浏览器渲染,解析html源码。
9、生成Dom树、解析css样式、js交互。
10、客户端和服务器交互。
11、ajax查询。

26,display:none和visibility:hidden区别?

1.display:none是彻底消失,不在文档流中占位,浏览器也不会解析该元素;visibility:hidden是视觉上消失了,可以理解为透明度为0的效果,
在文档流中占位,浏览器会解析该元素;

2.使用visibility:hidden比display:none性能上要好,display:none切换显示时visibility,
页面产生回流(当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等,页面重新构建,
此时就是回流。所有页面第一次加载时需要产生一次回流),
而visibility切换是否显示时则不会引起回流。

27,JavaScript中如何检测一个变量是一个String类型?请写出函数实现

typeof(obj) === "string"
typeof obj === "string"
obj.constructor === String

28,判断一个字符串中出现次数最多的字符,统计这个次数

var str = 'asdfssaaasasasasaa';
var json = {};
for (var i = 0; i < str.length; i++) { if(!json[str.charAt(i)]){ json[str.charAt(i)] = 1; }else{ json[str.charAt(i)]++; } }; var iMax = 0;var iIndex = '';for(var i in json){ if(json[i]>iMax){
iMax = json[i];
iIndex = i;
}
}
console.log('出现次数最多的是:'+iIndex+'出现'+iMax+'次');

29,$(document).ready()方法和window.onload有什么区别?

(1)、window.onload方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行的。
(2)、$(document).ready() 方法可以在DOM载入就绪时就对其进行操纵,并调用执行绑定的函数。

30,jquery中.get()提交和 .get()提交和.get()提交和.post()提交有区别吗?

相同点:都是异步请求的方式来获取服务端的数据;

不同点:

(1)请求方式不同:$.get() 方法使用GET方法来进行异步请求的。$.post() 方法使用POST方法来进行异步请求的。
(2)参数传递方式不同:get请求会将参数跟在URL后进行传递,而POST请求则是作为HTTP消息的实体内容发送给Web服务器的,这种传递是对用户不可见的。
(3)数据传输大小不同:get方式传输的数据大小不能超过2KB 而POST要大的多。
(4)安全问题: GET 方式请求的数据会被浏览器缓存起来,因此有安全问题。

1、<img> 的title 和alt 有什么区别

  • alt属性和title属性相同点:
  •     它们都会出现浮层,显示自己设置的图片相关的内容。
  • alt属性和title属性不同点:
  •     alt属性:1.当图片加载不出来的时候,就会在图片未显示的地方出现一段alt设置的属性内容。这个属性的作用是为了给未加载的图片显示提示信息,即使在网络比较差的时候,用户也可以知道图片的内容,方便用户浏览网页。同时在程序员对网站维护的时候也能更快的查找到问题。2.浏览器的搜索引擎可以通过alt属性的文字描述来获取图片。
  •     title属性:title属性可以用在任何的元素上,当用户把鼠标移动到元素上时,就会显示预先设置的title的内容,起到对图片说明的作用,实质上就是对图片的解释和备注。
  • 如果图片设置了title属性和alt属性,鼠标悬停或者经过图片区域的时候,只会显示title属性设置的内容。

2、从浏览器地址栏输⼊url到显示⻚⾯的步骤

  • 浏览器根据请求的URL 交给DNS 域名解析,找到真实IP ,向服务器发起请求;
  • 服务器交给后台处理完成后返回数据,浏览器接收⽂件( HTML、JS、CSS 、图象等);
  • 浏览器对加载到的资源( HTML、JS、CSS 等)进⾏语法解析,建⽴相应的内部数据结构
  • (如HTML 的DOM );
  • 载⼊解析到的资源⽂件,渲染⻚⾯,完成。

3、HTTP状态码及其含义

2021年web前端开发经典面试题总结整理(建议收藏)插图1HTML源码
22967472 654e6e6356e0ed95
  • 1XX :信息状态码
  • 100 Continue 继续,⼀般在发送post 请求时,已发送了http header 之后服务端
  • 将返回此信息,表示确认,之后发送具体参数信息
  • 2XX :成功状态码
  • 200 OK 正常返回信息
  • 201 Created 请求成功并且服务器创建了新的资源
  • 202 Accepted 服务器已接受请求,但尚未处理
  • 204 :无内容。服务器成功处理,但未返回内容
  • 3XX :重定向
  • 301 Moved Permanently 请求的资源已被永久的移动到新URI。
  • 302 Found 临时性重定向。请求的资源已被临时的移动到新URI
  • 303 See Other 临时性重定向,且总是使⽤ GET 请求新的 URI 。
  • 304 Not Modified ⾃从上次请求后,请求的⽹⻚未修改过。所请求的资源未修改,服务器返回此状态码时,不会返回任何资源
  • 4XX :客户端错误
  • 400 Bad Request 服务器⽆法理解请求的格式,客户端不应当尝试再次使⽤相同的内
  • 容发起请求。
  • 401 Unauthorized 请求未授权。
  • 403 Forbidden 禁⽌访问。
  • 404 Not Found 找不到如何与 URI 相匹配的资源。
  • 5XX: 服务器错误
  • 500 Internal Server Error 最常⻅的服务器端错误。
  • 503 Service Unavailable 服务器端暂时⽆法处理请求(可能是过载或维护)。

4、html5有哪些新特性、移除了那些元素?

HTML5 现在已经不是 SGML 的⼦集,主要是关于图像,位置,存储,多任务等功能的增加

绘画 canvas

⽤于媒介回放的 video 和 audio 元素

本地离线存储 localStorage ⻓期存储数据,浏览器关闭后数据不丢失

sessionStorage 的数据在浏览器关闭后⾃动删除

语意化更好的内容元素,⽐如article 、footer 、header 、nav 、section

表单控件, calendar 、date 、time 、email 、url 、search

新的技术webworker 、 websocket 、 Geolocation

移除的元素:

纯表现的元素: basefont 、big 、center 、font 、 s 、strike 、tt 、u

对可⽤性产⽣负⾯影响的元素: frame 、frameset 、noframes

⽀持HTML5 新标签:

IE8/IE7/IE6 ⽀持通过document.createElement ⽅法产⽣的标签

可以利⽤这⼀特性让这些浏览器⽀持HTML5 新标签

浏览器⽀持新标签后,还需要添加标签默认的样式

当然也可以直接使⽤成熟的框架、⽐如html5shim

5、请描述⼀下 cookies , sessionStorage 和 localStorage 的区别?

cookie 是⽹站为了标示⽤户身份⽽储存在⽤户本地终端(Client Side)上的数据(通常经过加密)

cook设置 domian 实现跨域 (以及单点登录)----HTTPonly属性不暴露cookie

cookie数据始终在同源的http请求中携带(即使不需要),记会在浏览器和服务器间来回

传递

sessionStorage 和localStorage 不会⾃动把数据发给服务器,仅在本地保存

存储⼤⼩:

cookie 数据⼤⼩不能超过4k

sessionStorage 和localStorage 虽然也有存储⼤⼩的限制,但⽐cookie ⼤得多,可以达到5M或更⼤

有期时间:

localStorage 存储持久数据,浏览器关闭后数据不丢失除⾮主动删除数据

sessionStorage 数据在当前浏览器窗⼝关闭后⾃动删除

cookie 设置的cookie 过期时间之前⼀直有效,即使窗⼝或浏览器关闭

6、⾏内元素有哪些?块级元素有哪些? 空(void)元素有那些?⾏内元素和块级元素有什么区别?

⾏内元素有: a b span img input select strong

块级元素有: div ul ol li dl dt dd h1 h2 h3 h4… p

空元素: <br> <hr> <img> <input> <link> <meta>

⾏内元素不可以设置宽⾼,不独占⼀⾏

块级元素可以设置宽⾼,独占⼀⾏

7、Canvas和SVG有什么区别?

svg 绘制出来的每⼀个图形的元素都是独⽴的DOM 节点,能够⽅便的绑定事件或⽤来修改。canvas 输出的是⼀整幅画布

svg 输出的图形是⽮量图形,后期可以修改参数来⾃由放⼤缩⼩,不会失真和锯⻮。⽽canvas 输出标量画布,就像⼀张图⽚⼀样,放⼤会失真或者锯⻮

8、如何在⻚⾯上实现⼀个圆形的可点击区域?

svg

border-radius

纯js 实现 需要求⼀个点在不在圆上简单算法、获取⿏标坐标等等

9、浏览器的内核分别是什么

IE : trident 内核

Firefox : gecko 内核

Safari : webkit 内核

Opera :以前是presto 内核, Opera 现已改⽤Google - Chrome 的Blink 内核

Chrome:Blink (基于webkit ,Google与Opera Software共同开发)

10、viewport

// width 设置viewport宽度,为⼀个正整数,或字符串‘device-width’

// device-width 设备宽度

// height 设置viewport⾼度,⼀般设置了宽度,会⾃动解析出⾼度,可以不⽤设置

// initial-scale 默认缩放⽐例(初始缩放⽐例),为⼀个数字,可以带⼩数

// minimum-scale 允许⽤户最⼩缩放⽐例,为⼀个数字,可以带⼩数

// maximum-scale 允许⽤户最⼤缩放⽐例,为⼀个数字,可以带⼩数

// user-scalable 是否允许⼿动缩放

怎样处理 移动端 1px 被 渲染成 2px 问题

局部处理

mate 标签中的 viewport 属性 , initial-scale 设置为 1

rem 按照设计稿标准⾛,外加利⽤transfrome 的scale(0.5) 缩⼩⼀倍即可;

全局处理

mate 标签中的 viewport 属性 , initial-scale 设置为 0.5

rem 按照设计稿标准⾛即可

11、简述⼀下src与href的区别

src ⽤于替换当前元素,href⽤于在当前⽂档和引⽤资源之间确⽴联系。

src 是source 的缩写,指向外部资源的位置,指向的内容将会嵌⼊到⽂档中当前标签所

在位置;在请求src 资源时会将其指向的资源下载并应⽤到⽂档内,例如js 脚本,

img 图⽚和frame 等元素

<script src ="js.js"></script> 当浏览器解析到该元素时,会暂停其他

资源的下载和处理,直到将该资源加载、编译、执⾏完毕,图⽚和框架等元素

也如此,类似于将所指向资源嵌⼊当前标签内。这也是为什么将js脚本放在底

部⽽不是头部

href 是Hypertext Reference 的缩写,指向⽹络资源所在位置,建⽴和当前元素(锚

点)或当前⽂档(链接)之间的链接,如果我们在⽂档中添加

<link href="common.css" rel="stylesheet"/> 那么浏览器会识别该⽂档为css ⽂

件,就会并⾏下载资源并且不会停⽌对当前⽂档的处理。这也是为什么建议使⽤link ⽅

式来加载css ,⽽不是使⽤@import ⽅式

12、display: none; 与visibility: hidden; 的区别

display:none ;会让元素完全从渲染树中消失,渲染的时候不占据任何空间;

visibility: hidden ;不会让元素从渲染树消失,渲染师元素继续占据空间,只是内容不可⻅

display: none ;是⾮继承属性,⼦孙节点消失由于元素从渲染树消失造成,通过修改⼦孙节点属性⽆法显示;visibility: hidden; 是继承属性,⼦孙节点消失由于继承了hidden ,通过设置visibility: visible; 可以让⼦孙节点显式

修改常规流中元素的display 通常会造成⽂档重排。修改visibility 属性只会造成本元素的重绘。

读屏器不会读取display: none ;元素内容;会读取visibility: hidden; 元素内容

13、link 与@import 的区别

1. link 是HTML ⽅式, @import 是CSS⽅式

2. link 最⼤限度⽀持并⾏下载, @import 过多嵌套导致串⾏下载,出现FOUC (⽂档样式

短暂失效)

3. link 可以通过rel="alternate stylesheet" 指定候选样式

4. 浏览器对link ⽀持早于@import ,可以使⽤@import 对⽼浏览器隐藏样式

5. @import 必须在样式规则之前,可以在css⽂件中引⽤其他⽂件

6. 总体来说: link 优于@import

14、清除浮动的⼏种⽅式,各⾃的优缺点

⽗级div 定义height

结尾处加空div 标签clear:both

⽗级div 定义伪类:after 和zoom(推荐)

⽗级div 定义overflow:hidden

⽗级div 也浮动,需要定义宽度

结尾处加br 标签clear:both

15、css3有哪些新特性

新增各种css 选择器

圆⻆ border-radius

多列布局

阴影和反射

⽂字特效text-shadow

线性渐变

旋转transform

16、CSS3新增伪类有那些?

p:first-of-type 选择属于其⽗元素的⾸个<p> 元素的每个<p> 元素。

p:last-of-type 选择属于其⽗元素的最后 <p> 元素的每个<p> 元素。

p:only-of-type 选择属于其⽗元素唯⼀的 <p> 元素的每个 <p> 元素。

p:only-child 选择属于其⽗元素的唯⼀⼦元素的每个 <p> 元素。

p:nth-child(2) 选择属于其⽗元素的第⼆个⼦元素的每个 <p> 元素。

:after 在元素之前添加内容,也可以⽤来做清除浮动。

:before 在元素之后添加内容。

:enabled 已启⽤的表单元素。

:disabled 已禁⽤的表单元素。

:checked 单选框或复选框被选中。

17、CSS优先级算法如何计算?

!important 大于一切 > 内联 1000 > id 100  > class 10  > tag  1 ; 

18、介绍⼀下标准的CSS的盒⼦模型?低版本IE的盒⼦模型有什么不同的?

有两种, IE 盒⼦模型、W3C 盒⼦模型;

盒模型: 内容(content)、填充( padding )、边界( margin )、 边框( border );

区 别: IE 的c ontent 部分把 border 和 padding 计算了进去;

19、如果需要⼿动写动画,你认为最⼩时间间隔是多久,为什么?(阿⾥)

多数显示器默认频率是60Hz ,即1 秒刷新60 次,所以理论上最⼩间隔为  --  1/60*1000ms = 16.7ms

20、如何美化CheckBox

<label> 属性 for 和 id

隐藏原⽣的 <input>

:checked + <label>

21、rgba()和opacity的透明效果有什么不同?

rgba() 和opacity 都能实现透明效果,但最⼤的不同是opacity 作⽤于元素,以及元素内的所有内容的透明度,

⽽rgba() 只作⽤于元素的颜⾊或其背景⾊。(设置rgba 透明的元素的⼦元素不会继承透明效果!)

22、["1", "2", "3"].map(parseInt) 答案是多少

[1, NaN, NaN] 因为 parseInt 需要两个参数 (val, radix) ,其中radix 表示解析时⽤的基数。

map 传了 3 个(element, index, array) ,对应的 radix 不合法导致解析失败。

23、闭包

闭包就是能够读取其他函数内部变量的函数

闭包是指有权访问另⼀个函数作⽤域中变量的函数,创建闭包的最常⻅的⽅式就是在⼀个函数内创建另⼀个函数,通过另⼀个函数访问这个函数的局部变量

好处:能够实现封装和缓存等,让变量有自己的作用域 不污染全局

坏处:就是消耗内存、不正当使⽤会造成内存溢出的问题

使⽤闭包的注意点

由于闭包会使得函数中的变量都被保存在内存中,内存消耗很⼤,所以不能滥⽤闭包,否则会造成⽹⻚的性能问题,在IE中可能导致内存泄露

解决⽅法是,在退出函数之前,将不使⽤的局部变量全部删除(变量为空)

24、介绍js的基本数据类型

Undefined 、Null 、Boolean 、Number 、String

25、如何使⽤CSS实现动画加速?

⼀般使⽤tranform:translate3D(x,y,z)  伪GPU加速

will-change  绝对GPU加速 

26、前端性能优化

## react || vue

* 路由懒加载

* vue 组件异步加载

## 页面内容

1.减少HTTP 

    * 通过 webpack 合并JS CSS文件

    * 使用 CSS Sprite 合并图片

    * 使用 Base64 行内图片

    * 用 icon 替换图标

  2. 避免重定向

    * URL末尾添加 / 例如 http://www.baidu.com/

  3. 缓存Ajax请求

    * 设置 Cache-Control (相对过期时间)

  4. 减少页面元素数量

## Javascript

  1. JS代码尽量放在页面底部, 避免阻塞页面加载

  2. 使用外部的CSS 可以缓存CSS

  3. webpack 压缩 js代码

## 图片

  1. CSS Sprite 合并图片

  2. Webp 图片

  3. 不在HTML中缩放图片

  4. 非 webp 图片都要压缩后再使用

  5. 使用 Base64 内嵌图片

## CSS

  1. react vue 可以实现css样式按需加载, 减少每次加载CSS的大小

  2. 压缩CSS

  3. 使用CSS3属性 例如动画使用 transform transiton animtion

## 服务器

  1. 使用 CDN(内容分发网络CDN是一组分散在不同地理位置的web服务器)

  2. 添加 Cache-Control 缓存头

  3. 启用 Gzip 压缩 (图片不要gzip压缩)

  4. Ajax 尽可能使用 get方法, post方法会多一次请求

  5. 避免 <img src="" /> 空图片标签

## 移动端

  1. 保证所有组件都小于25K

27、防抖、节流

防抖(debounce)

所谓防抖 就是指触发事件后在 n 秒内函数只能执行一次 如果在 n 秒内又触发了事件则会重新计算函数执行时间。

节流

所谓节流,就是指连续触发事件,但是每隔 n 秒执行一次函数

lodash.debounce插件实现

需要设置最大过期时间

2021年web前端开发经典面试题总结整理(建议收藏)插图2HTML源码
22967472 24204d7860431a8c
2021年web前端开发经典面试题总结整理(建议收藏)插图3HTML源码
22967472 078ba5addefc7ce5

28、bind apply call 区别

相同:

1、都是用来改变函数的this对象的指向的。

2、第一个参数都是this要指向的对象。

3、都可以利用后续参数传参。

区别:

bind不会立即调用,其他两个会立即调用,apply与call的区别是apply第二个参数是数组,但是在确定的参数下,还是最好用call,call的效果会更高,但是在函数的延展性上使用apply更好

29、如何解决跨域

浏览器的同源策略指" 协议 + 域名 + 端⼝ "三者相同

1、通过jsonp跨域

2、node.js中间件代理跨域  webpack-dev-server

     本地启用node服务器 -》node访问后台接口地址 -》请求这个node服务器,拿到数据

     http-proxy-middleware包配置 proxy

3、后端设置请求头 (CORS)

4、上线以后怎么解决跨域?

  nginx  配置方向代理 

server {

      # 监听9099端口

           listen 9099;

       # 域名是localhost

           server_name localhost;

           location ^~ /api {

                proxy_pass http://localhost:9871;

           }   

}

30、怎么判断一个对象的类型

Object.prototype.toString.call(对象)

31、JS原型、原型链

每个对象都会在其内部初始化⼀个属性,就是prototype (原型),当我们访问⼀个对象的属性时

如果这个对象内部不存在这个属性,那么他就会去prototype ⾥找这个属性,这个prototype ⼜会有⾃⼰的prototype ,于是就这样⼀直找下去,也就是我们平时所说的原型链的概念

32、箭头函数 

(1)箭头函数的this是在定义的时候就固定不变了 

   (2)箭头函数  没有自己的this 

   (3)箭头函数 不能当类(构造器)使用  不可以 new 

   (4)箭头函数  没有 arguments 

   (5)箭头函数没有原型属性

33、深浅拷⻉

(1)浅拷⻉

Object.assign

Object.create

或者展开运算符 ... obj

(2)深拷⻉

一、可以通过 JSON.parse(JSON.stringify(object)) 来解决

     JSON.parse(JSON.stringify(object)) 是有局限性的

     1、会忽略 undefined

     2、不能序列化函数

     3、不能解决循环引⽤的对象

二、普通递归函数

将要拷贝的数据 obj 以参数的形式传参

声明一个变量 来储存我们拷贝出来的内容

判断 obj 是否是引用类型数据,如果不是,则直接赋值即可( 可以利用 obj instanceof Type 来进行判断),

由于用 instanceof 判断array 是否是object的时候,返回值为true, 所以我们在判断的时候,直接判断obj 是否是Array 就可避免这个问题

根据判断的不同类型,再给之前的变量赋予不同的类型: [ ] : { }

循环obj 中的每一项,如果里面还有复杂数据类型,则直接利用递归再次调用copy函数

最后 将 这个变量 return 出来即可

三、 _.cloneDeep() 深拷贝  (lodash)

34、数组去重⽅法总结

1、利⽤ES6 Set去重(ES6中最常⽤)

2、利⽤for嵌套for,然后splice去重(ES5中最常⽤)

3、利⽤indexOf去重

         新建⼀个空的结果数组, for 循环原数组,判断结果数组是否存在当前元

         素,如果有相同的值则跳过,不相同则push 进数组

4、利⽤sort()

         利⽤sort() 排序⽅法,然后根据排序后的结果进⾏遍历及相邻元素⽐对

5、利⽤对象的属性不能相同的特点进⾏去重

6、利⽤includes   

          includes 检测数组是否有某个值

7、利⽤hasOwnProperty

          利⽤hasOwnProperty 判断是否存在对象属性

8、利⽤filter

          当前元素,在原始数组中的第⼀个索引==当前索引值,否则返回当前元素

9、利⽤递归去重

10、利⽤Map数据结构去重

           创建⼀个空Map 数据结构,遍历需要去重的数组,把数组的每⼀个元素作为

           key 存到Map 中。由于Map 中不会出现相同的key 值,所以最终得到的就

           是去重后的结果

11、[...new Set(arr)]

           相对于第⼀种⽅法来说只是简化了代码

35、JS中in 、isPrototypeOf 和hasOwnProperty 的区别

1、isPrototypeOf

isPrototypeOf是用来判断指定对象object1是否存在于另一个对象object2的原型链中,是则返回true,否则返回false。

2、hasOwnProperty

hasOwnProperty则是判断对象实例的是否具有某个属性

3、in

in判断的是对象的所有属性,包括对象实例及其原型的属性

36、事件代理

1、事件代理( Event Delegation ),⼜称之为事件委托。是 JavaScript 中常⽤绑定事

件的常⽤技巧

2、“事件代理”即是把原本需要绑定的事件委托给⽗元素,让⽗元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。使⽤事件代理的好处是可以提⾼性能,⼤量节省内存占⽤,减少事件注册

37、浏览器缓存

   浏览器缓存分为强缓存和协商缓存

1、先根据这个资源的⼀些 http header 判断它是否命中强缓存,如果命中,则直接从本地获取缓存资源,不会发请求到服务器;

2、当强缓存没有命中时,客户端会发送请求到服务器,服务器通过另⼀些request header验证这个资源是否命中协商缓存,称为http 再验证,如果命中,服务器将请求返回,但不返回资源,⽽是告诉客户端直接从缓存中获取,客户端收到返回后就会从缓存中获取资源;

3、强缓存和协商缓存共同之处在于,如果命中缓存,服务器都不会返回资源; 区别是,强缓存不对发送请求到服务器,但协商缓存会。

4、当协商缓存也没命中时,服务器就会将资源发送回客户端。

5、当 ctrl+f5 强制刷新⽹⻚时,直接从服务器加载,跳过强缓存和协商缓存;

6、当 f5 刷新⽹⻚时,跳过强缓存,但是会检查协商缓存;

38、宏任务 setTimeout setInterval 微任务 Promise

js引擎在⼀次事件循环中,会先执⾏js线程的主任务,然后会去查找是否有微任务

microtask(promise) ,如果有那就优先执⾏微任务,如果没有,在去查找

宏任务macrotask(setTimeout、setInterval) 进⾏执⾏

39、React 中的 Key 值

1.为什么要有key值

相同的key不会重新渲染

key是一个字符串,用来唯一标识同父同层级的兄弟元素。当React作diff时,只要子元素有key属性,便会去原v-dom树中相应位置(当前横向比较的层级)寻找是否有同key元素,比较它们是否完全相同,若是则复用该元素,免去不必要的操作。

但是强烈不推荐用数组index来作为key。如果数据更新仅仅是数组重新排序或在其中间位置插入新元素,那么视图元素都将重新渲染

40、Vue中 v-if 与 v-show 区别

v-if 控制元素显示隐藏 当条件不成立时不加载dom结构

v-else 配合v-if使用

v-show 控制元素显示隐藏 当条件不成立时加载dom结构通过css display:none 实现显示隐藏

41、vue中 $router 和 $route 的区别

1、router是VueRouter的一个对象,这个对象中是一个全局的对象,他包含了所有的路由包含了许多关键的对象和属性,如 router.push方法,路由跳转,传递参数等。

2、route为当前router跳转对象。里面可以获取当前路由的name,path,query,parmas等 可以拿里边的值来做各种判断。

42、Vue组件中的data为什么必须是一个函数

如果data是一个函数的话,这样每复用一次组件,就会返回一份新的data,类似于给每个组件实例创建一个私有的数据空间,让各个组件实例维护各自的数据。而单纯的写成对象形式,就使得所有组件实例共用了一份data,就会造成一个变了全都会变的结果。

所以说vue组件的data必须是函数。这都是因为js的特性带来的,跟vue本身设计无关。

不适用 vue  里的变量就是公用  

43、前台路由和后台路由的区别

前台路由:跳转页面,不请求服务器

后台路由:接口访问地址,请求服务器

44、ES6 模块与 CommonJS 模块的差异

CommonJS 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用。

CommonJS 模块是运行时加载,ES6 模块是编译时输出接口。

45、XSS

XSS的含义:跨站脚本攻击, 故将跨站脚本攻击缩写为XSS。恶意攻击者往Web页面里插入恶意Script代码,当用户浏览该页之时,嵌入其中Web里面的Script代码会被执行,从而达到恶意攻击用户的目的。

CSRF 全称cross-site request forgery,名为跨站请求伪造

顾名思义就是黑客伪装成用户身份来执行一些非用户自愿的恶意以及非法操作

(1)CSRF相对于XSS漏洞的危害程度更高一些。

(2)XSS有局限性,而CSRF则不。

(3)CSRF相当于是XSS的基础版,CSRF能做到的XSS都可以做到。

(4)XSS主要指向客户端,而CSRF针对服务端。

(5)XSS是利用合法用户获取其信息,而CSRF是伪造成合法用户发起请求。

预防措施:

  1、验证码

  2、tokenId令牌

  3、判断请求的Referer是否正确

46、 做项目流程

* 项目流程

1. 需求评审: 前端 后台 测试 UI 产品 评审需求是否合理 砍掉不合理需求 和

实现难度大的需求

2. UI出效果图

3. 前后端开始同时开发: 前端封装组件 和 页面

// mock 工具 阿里RAP

// /abc/ddd { name: '小花', age: 22 }

// /mock/abc/ddd { name: 小白, age: 2 }

4. 前端调用mock数据接口(后台)做静态页面 后台开发接口

5. 测试

  1) 测试环境 测试分支 dev

  2) dev 完全没问题 代码合并到master分组 发布上线 master 分支

上线 都是上 master

6. 上线以后 回归测试 有bug 改

47、diff 算法 

高效的diff算法能够保证进行对实际的DOM进行最小的变动

但是标准的的 Diff 算法复杂度需要 O(n^3)

这显然无法满足性能要求 要达到每次界面都可以整体刷新界面的目的

势必需要对算法进行优化

React里结合 Web 界面的特点做出了两个简单的假设

使得 Diff 算法复杂度直接降低到 O(n)

1. 两个相同组件产生类似的 DOM 结构 不同的组件产生不同的 DOM 结构

2. 对于同一层次的一组子节点 它们可以通过唯一的 id 进行区分

不同节点类型的比较

为了在树之间进行比较 我们首先要能够比较两个节点 在 React 中即比较两个虚拟 DOM 节点

当两个节点不同时 应该如何处理 这分为两种情况

1. 节点类型不同

2. 节点类型相同 但是属性不同

节点类型不同 直接删除原节点  插入新节点。

48、虚拟 DOM

虚拟 DOM (VDOM)是真实 DOM 在内存中的表示

UI 的表示形式保存在内存中 并与实际的 DOM 同步

这是一个发生在渲染函数被调用和元素在屏幕上显示之间的步骤 整个过程被称为调和

49、 event loop 事件循环机制(宏任务、微任务)

1. 先执行同步任务

2. 微任务调用栈 promise  [resolve(1), resolve(2), resolve(3)]

3. 宏任务(macrotask): setTimeout setInterval I/O(异步操作) DOM渲染

50、三次握手四次挥手

* 三次握手

第一次握手:客户端给服务器发送一个 SYN 报文。

第二次握手:服务器收到 SYN 报文之后,会应答一个 SYN+ACK 报文。

第三次握手:客户端收到 SYN+ACK 报文之后,会回应一个 ACK 报文。

服务器收到 ACK 报文之后,三次握手建立完成。

* 四次挥手

第一次挥手:客户端发送一个 FIN 报文,报文中会指定一个序列号。此时客户端处于 FIN_WAIT1 状态。

第二次握手:服务端收到 FIN 之后,会发送 ACK 报文,且把客户端的序列号值 +1 作为 ACK 报文的序列号值,表明已经收到客户端的报文了,此时服务端处于 CLOSE_WAIT 状态。

第三次挥手:如果服务端也想断开连接了,和客户端的第一次挥手一样,发给 FIN 报文,且指定一个序列号。此时服务端处于 LAST_ACK 的状态。

第四次挥手:客户端收到 FIN 之后,一样发送一个 ACK 报文作为应答,且把服务端的序列号值 +1 作为自己 ACK 报文的序列号值,此时客户端处于 TIME_WAIT 状态。 需要过一阵子以确保服务端收到自己的 ACK 报文之后才会进入 CLOSED 状态

服务端收到 ACK 报文之后,就处于关闭连接了,处于 CLOSED 状态。

51、B C

  B: Business 企业 商家

  C: Customer 个人 客户

  B2B和C2C都在第三方平台 B2C则在自身运营平台

  B2B: 企业与企业 阿里巴巴

  B2C: 商家对个人 卓越 当当 京东

  C2C: 个人对个人的 淘宝的小店铺

52、PV UV

  PV::统计页面节点的点击量

实现:

    1. 创建一个 img

    2. img.src = '1.gif?name=abc'

  使用: 点击百度按钮 加pv name="abc"

    1. pv.js <script src="pv.js"> sendPv

    2. sendPv({ name: "abc" })


1. pv格式: xxx.gif?xueshu=xueshu&xxxx=xxxxx (git图不需要我们管)

2. 调用: pv的js已经写好了 sendPv({ xueshu: 'xueshu', xxxx: 'xxxx' })

3. 事件回调里调用 sendPv({ xueshu: 'xueshu', xxxx: 'xxxx' })

4. pv的参数都是PM定好的

  UV:统计访问某站点的用户数

53、 MVVM 是 Model-View-ViewModel 的缩写

Model 代表数据模型 也可以在 Model 中定义数据修改和操作的业务逻辑

View 代表 UI 组件 它负责将数据模型转化成 UI 展现出来

ViewModel 监听模型数据的改变和控制视图⾏为 处理⽤户交互 简单理解就是⼀个同 步View 和 Model 的对象,连接 Model 和 View

在 MVVM 架构下 View 和 Model 之间并没有直接的联系 ⽽是通过ViewModel 进⾏交互,

Model 和 ViewModel 之间的交互是双向的, 因 此 View 数据的变化会自动同步到Model中,

⽽Model 数据的变化也会⽴即反应到 View 上

54、浏览器对 html 渲染过程

1. 解析html和构建dom树   

同步进行的,这个过程就是逐行解析代码,包括html标签和js动态生成的标签,最终生成dom树。

2. 构建呈现树,就是把css文件和style标签的中的内容结合dom树的模型,构建一个呈现树

写到内存,等待进一步生成界面。呈现树一定依赖dom树,呈现节点一定会有对应的dom节点,但是dom节点不一定会有对应的呈现节点,比如,被隐藏的一个div。

3. 布局,这一步就是结合呈现树,把dom节点的大小、位置计算出来。虽然呈现节点已经附着在都没节点上,会有对元素大小、位置的定义,但是浏览器还需要根据实际窗口大小进行计算,比如对auto的处理。

4. 绘制,把css中有关颜色的设置,背景、字体颜色等呈现出来。

55、fetch和ajax 的主要区别

  1. fetch()返回的promise将不会拒绝http的错误状态 即使响应是一个HTTP 404或者500

  2. 在默认情况下 fetch不会接受或者发送cookies

56、react 渲染机制:

    React整个的渲染机制就是在state/props发生改变的时候 重新渲染所有的节点 构造出新的虚拟Dom 通过Diff算法进行比较 得到需要更新的地方在批量造作在真实的Dom上, 由于这样做就减少了对Dom的频繁操作 从而提升的性能

57、Vue实现数据双向绑定的原理:

vue 实现数据双向绑定主要是: 采⽤数据劫持结合发布订阅模式·的⽅式

通过 Object.defineProperty() 来劫持各个属性的 setter, getter 在数据变动时发布消息给订阅者,触发相应监听回调. 整合 Observer, Compile和

Watcher 三者, 通过 Observer 来监听⾃⼰的 model 的数据变化,通过 Compile 来解 析编译模板指令(vue 中是⽤来解析 {{}})最终利⽤ watcher 搭起 observer 和

Compile 之间的通信桥梁, 达到数据变化 —> 视图更新; 视图交互变化 input —>

数据 model 变更双向绑定效果

58、vue 和 react 区别

vue 上手简单 react 复杂一些

vue 的逻辑大部分写在 <template>, react 写在 js

vue2 Object.defineProperty() + 观察者模式实现双向绑定

react diff算法

vue 插件库比较少  , react 丰富的插件库

59、调用setState 发生一些什么(异步)

在代码调用setState之后,React会将传入的参数对象与组件当前的状态合并,然后触发所谓的调和过程。经过调和过程React会构建新的React元素树  然后会自动计算出新的树与老树的节点差异,然后根据差异对界面进行最小化的渲染。React能够精确地知道哪些位置发生了改变,这就保证了按需更新,而不是重新渲染。

setstate是异步的,但是在ajax里是同步的

* react 事件 生命周期 修改 setState 异步 batchedUpdates = true // 异步

* setTimeout setInterval 非react事件(原生事件)  ajax 都是同步的

* setState 有这个 isBatchingUpdates = false // 默认同步

  有一个 batchedUpdates 方法 如果是react的事件 生命周期修改 setState 会把 isBatchingUpdates = true 否则就是 false

60、链表:

      * 单向链表: 单向链表包含两个域 一个是信息域 一个是指针域

      * 双向链表: 每个节点有2个链接 一个是指向前一个节点 另一个则指向后一个节点

      * 循环链表: 循环链表就是首节点和末节点被连接在一起

      循环链表中第一个节点之前就是最后一个节点

    * 数组和链表的区别: 

        * 链表是链式的存储结构 数组是顺序的存储结构

        * 链表通过指针来连接元素 数组则是把所有元素按次序依次存储

        * 链表的插入删除元素相对数组较为简单 但是寻找某个元素较为困难

        * 数组寻找某个元素较为简单 但插入与删除比较复杂

61、computed 和 watch 的区别

           computed 对于其中变量的依赖是多个的,它的函数中使用了多个 this.xxx ,只要其中一个发生了变化,都会触发这个函数。而 watch 的依赖则是单个的,它每次只可以对一个变量进行监控。

62、position有哪些值

    1、static:默认值;

    2、 绝对定位:absolute

    3、相对定位:relative

    4、固定定位:fixed

    5、粘性布局  sticky

63、DOM2 事件的三个阶段 

(1)捕获阶段:从外往里    document  -》 html -》body  -》div

(2)目标阶段:找是哪个节点注册的事件

(3)冒泡阶段:从里往外  div(注册事件的节点)-》body -》html -》document

true :捕获阶段  

false : 冒泡阶段

64、Redux 三大基本原则:

1. store 单一数据源

2. state 在页面里是只读的 触发action -> 修改state

3. state 只能在reduce里改 并且reduce 必须是纯函数

65、react 中没有共同父组件的兄弟组件之间的传参 

    pubsub-js

    使用发布订阅的方式

    PubSub.subscribe(’MY TOPIC’, mySubscriber) 订阅

    PubSub.publish(’MY TOPIC’, ‘hello world!’) 发布

66、标准盒模型和怪异盒模型

标准盒模型:一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)

怪异盒模型:一个块的总宽度= width + margin(左右)(即width已经包含了padding和border值)

67、重绘、重排指的是什么?

重绘(repaint或redraw):

重绘是指当 DOM 元素的属性发生变化 (如 color) 时, 浏览器会通知render 重新描绘相应的元素, 此过程称为重绘。

重排(重构):

重排是指某些元素变化涉及元素布局 (如width), 浏览器则抛弃原有属性, 重新计算,此过程称为重排。(重排一定会重绘,重绘不一定重排)

68、react 16.8 新特性 

1)、PureComponent

 2)、hook

 3)、lazy (异步加载组件)

69、检测数据类型

1)、typeof方法用于检测bai简单的数du据类型如zhitypeof 12

2)、instanceof的实例方法检测如[] instanceof Array // true

3)、精确判断数据类型Object.prototype.toString.call(arr)

70、react 事件机制

React组件上声明的事件没有绑定在React组件对应的原生DOM节点上,而是绑定在document节点上,触发的事件是对原生事件的包装。

71、数组扁平化 

1)、用 reduce 实现数组的 flat 方法

function flatten(ary) {

     return ary.reduce((pre, cur) => { 

             return pre.concat(Array.isArray(cur) ? flatten(cur) : cur);  

     })

}

let ary = [1, 2, [3, 4], [5, [6, 7]]]

console.log(ary.MyFlat(Infinity))

2)、flat数组扁平化 

   默认二维数组扁平化

  console.log(arr.flat() )  // [1,2,[3,4] ]

    Infinity 多维数组扁平化

  console.log(arr.flat(Infinity) )  // [1,2,3,4] 

72、RESTful api

1. RESTful api接口规范 (RESTful api)

2. 比如 传统的增删改查 4个接口, RESTful的增删改查一个接口 /update/data

    post get put delete

    post(/update/data, 参数) 增加

    get(/update/data, 参数) 查询

    put(/update/data, 参数) 修改

    delete(/update/data, 参数) 删除

73、async 原理

async === generator + 自动执行器

2021年web前端开发经典面试题总结整理(建议收藏)插图4HTML源码

74、state 和 props 的区别

    props 父组件传的值  props不可改

    state 是组件内部的状态(数据),不能够直接修改,必须要通过setState来改变                 值的状态

75、redux的常用中间件

  redux-thunk    让action以函数的方式写

原理:

首先 redux-thunk 封装了一些公共方法 这些方法里有一个 createThunkMiddleware 接收一个参数 extraArgument, 里面返回一个匿名函数 这个匿名函数接收一个 _ref参数 这个_ref 是一个对象里面有2个属性 { dispatch, getState }, createThunkMiddleware   这个函数返回了一个匿名函数 这个匿名函数接收了 next 参数 next也是一个函数  这个匿名函数里面 又返回了一个匿名函数 这个匿名函数接收一个 action 参数 这个action就是我们 传入的 action 在这个匿名函数里 如果 action 是函数 调用这个函数 传入 dispatch, getState, extraArgument   如果 action 不是函数 调用next 传入 action参数 触发下一次 action

2021年web前端开发经典面试题总结整理(建议收藏)插图5HTML源码

  redux-promise    让action的payload是异步的方式

原理:

首先 redux-promise 封装了一些公共方法 这些方法里有一个 promiseMiddleware 接收一个参数 _ref 这个_ref 是一个对象 里面有2个属性 { dispatch, getState }, promiseMiddleware这个函数返回了一个匿名函数 这个匿名函数接收了 next 参数 next也是一个函数  这个匿名函数里面 又返回了一个匿名函数 这个匿名函数接收一个 action 参数 这个action就是我们 传入的 action 在这个匿名函数里 通过监听 action.payload 这个请求的promise 如果成功  调用 dispatch 触发一个同步的 action { type: 'XXX', payload: 数据 }

2021年web前端开发经典面试题总结整理(建议收藏)插图6HTML源码

  redux-persist     做数据持久化

76、合并两个数组 

第一种方法  :letc = a.concat(b);

第二种方法  :a.push (...b)

第三种办法  :a.push.apply(a,b);

第四种办法   :  var newA = [...a,...b]

© 版权声明
THE END
喜欢就支持一下吧
点赞37 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片