前端面试题(五.3)(20道)下

简介: 前端面试题(五.3)(20道)

11. 在使用redux过程中,如何防止定义的action-type的常量重复?


ES6引入了一种新的原始数据类型Symbol,表示独一无二的值。 Symbol函数前不能使用new命令,否则会报错。这是因为生成的Symbol是一个原始类型的值,不是对象 Symbol函数可以接受一个字符串作为参数,表示对Symbol实例的描述,主要是为了在控制台显示,或者转为字符串时,比较容易区分。


12. CDN的特点及意义?


什么是CDN?


CDN 意为内容分发网络,是基于现有网络的智能虚拟网络,分布在世界各地的边缘服务器上。基本思路是避免互联网上可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输更快更稳定。


CDN 表示将数据从原始服务器复制到其他服务器。当用户访问时,他们可以在复制了数据内容的服务器上进行访问。其目的是使用户能够更快更好地获取所需内容,解决网络拥塞情况,提高用户访问网站的响应速度。CDN 加速成本低,速度快,适合访问量比较大的网站。


CDN 具有以下主要功能 :


1.节省骨干网带宽,降低带宽需求;

2.提供服务器端加速,解决大量用户访问导致的服务器过载问题;

3.服务提供商可以利用Web Cache技术将用户访问的网页和对象缓存在本地,这样对相同对象的访问就不需要占用骨干网的出口带宽,相应的用户访问网页的时间要求也增加了;

4.可以克服网站分布不均的问题,降低网站自身的建设和维护成本;

5.减少“通信风暴”的影响,提高网络访问的稳定性。

CDN 的特点:


1.本地缓存加速:提高了企业网站(尤其是包含大量图片和静态页面的网站)的访问速度,大大提高了上述网站的稳定性。

2.镜像服务:消除了不同运营商之间互联瓶颈带来的影响,实现了跨运营商的网络加速,保证了不同网络的用户都能获得良好的接入质量。

3.远程加速:远程访问用户根据DNS负载均衡技术智能自动选择缓存服务器,选择最快的缓存服务器加速远程访问。

4.带宽优化:自动生成服务器的远程镜像缓存服务器。远程用户访问时,可以从缓存服务器读取数据,减少远程访问的带宽,分担网络流量,减轻原WEB服务器的负载。

5.集群抗攻击:广泛分布的CDN 节点加上节点间的智能冗余机制,可以有效防止黑客入侵,降低各种D.D.o.S攻击对网站的影响,同时保证更好的服务质量。


13. 为什么for循环比forEach性能高?


for( )循环:

 通过下标,对循环中的代码反复执行,功能强大,可以通过index取得元素。在处理比较复杂的处理的时候较为方便


forEach( )循环:

 forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数。foreach有的也叫增强for循环,foreach其实是for循环的一个特殊简化版。注意,forEach() 对于空数组是不会执行回调函数的


for和forEach的区别:

1、遍历:

 for循环按顺序遍历,forEach使用iterator迭代器遍历


2、数据结构:

 for循环是随机访问元素,foreach是顺序链表访问元素


3、性能上:

 对于arraylist,是顺序表,使用for循环可以顺序访问,速度较快;使用foreach会比for循环稍慢一些。 对于linkedlist,是单链表,使用for循环每次都要从第一个元素读取next域来读取,速度非常慢;使用foreach可以直接读取当前结点,数据较快;


如何选择:

 foreach相对于for循环,代码减少了,但是foreach依赖IEnumerable。在运行的时候效率低于for循环。当然了,在处理不确定循环次数的循环,或者循环次数需要计算的情况下。使用foreach比较方便。而且foreach的代码经过编译系统的代码优化后,和for循环的循环类似。


可以说,foreach语句是for语句的特殊简化版本,在遍历数组、集合方面,foreach为开发人员提供了极大的方便。在复杂的循环设计时,还是应该使用for循环更加的灵活。


14. 说说你对@reduxjs/toolkit的理解?和react-redux有什么区别?


reduxjs/toolkit:

 Redux 官方强烈推荐,开箱即用的一个高效的 Redux 开发工具集。它旨在成为标准的 Redux 逻辑开发模式,使用 Redux Toolkit 都可以优化你的代码,使其更可维护


react-redux:

 react官方推出的redux绑定库,react-redux将所有组件分为两大类:

UI组件和容器组件,其中所有容器组件包裹着UI组件,构成父子关系。容器组件负责和redux交互,里面使用redux API函数,UI组件负责页面渲染,不使用任何redux API。容器组件会给UI组件传递redux中保存对的状态和操作状态的方法


15. React render方法的原理,在什么时候会触发?


在类组件和函数组件中,render函数的形式是不同的。


在类组件中render函数指的就是render方法;而在函数组件中,指的就是整个函数组件。


在render函数中的jsx语句会被编译成我们熟悉的js代码


在render过程中,React 将新调用的 render函数返回的树与旧版本的树进行比较,这一步是决定如何更新 DOM 的必要步骤,然后进行 diff 比较,更新 DOM树


触发机制:


类组件调用 setState 修改状态 函数组件通过useState hook修改状态。函数组件通过useState这种形式更新数据,当数组的值不发生改变了,就不会触发render


总结:


render函数里面可以编写JSX,转化成createElement这种形式,用于生成虚拟DOM,最终转化成真实DOM


在React 中,类组件只要执行了 setState 方法,就一定会触发 render 函数执行,函数组件使用useState更改状态不一定导致重新render


组件的props 改变了,不一定触发 render 函数的执行,但是如果 props 的值来自于父组件或者祖先组件的 state


在这种情况下,父组件或者祖先组件的 state 发生了改变,就会导致子组件的重新渲染


所以,一旦执行了setState就会执行render方法,useState 会判断当前值有无发生改变确定是否执行render方法,一旦父组件发生渲染,子组件也会渲染


16. ![] == ![],![] == [],结果是什么?为什么?


1、根据运算符优先级 ,! 的优先级是大于 == 的,所以先会执行 ![]


!可将变量转换成boolean类型,null、undefined、NaN以及空字符串(‘’)取反都为true,其余都为false。


所以 ! [] 运算后的结果就是 false


也就是 [] == ! [] 相当于 [] == false


2、根据上面提到的规则(如果有一个操作数是布尔值,则在比较相等性之前先将其转换为数值——false转换为0,而true转换为1),则需要把 false 转成 0


也就是 [] == ! [] 相当于 [] == false 相当于 [] == 0


3、根据上面提到的规则(如果一个操作数是对象,另一个操作数不是,则调用对象的valueOf()方法,用得到的基本类型值按照前面的规则进行比较,如果对象没有valueOf()方法,则调用 toString())


而对于空数组,[].toString() -> ‘’ (返回的是空字符串)


也就是 [] == 0 相当于 ‘’ == 0


4、根据上面提到的规则(如果一个操作数是字符串,另一个操作数是数值,在比较相等性之前先将字符串转换为数值)


Number(‘’) -> 返回的是 0


相当于 0 == 0 自然就返回 true了


17. 什么是闭包,应用场景是什么?


什么是闭包 闭包就是一个函数和对其周围状态(lexical environment,词法环境)的引用捆绑在一起(或者说函数被引用包围),这样的组合就是闭包(closure)


也就是说 闭包可以让你在一个内层函数中访问到其外层函数的作用域 , 也可以说是函数 + 上下文调用


在 JavaScript中,每当创建一个函数,闭包就会在函数创建的同时被创建出来,作为函数内部与外部连接起来的一座桥梁


应用场景:


任何闭包的使用场景都离不开这两点:


1、创建私有变量

2、延长变量的生命周期

注意点:


如果不是某些特定任务需要使用闭包,在其它函数中创建函数是不明智的,因为闭包在处理速度和内存消耗方面对脚本性能具有负面影响


18. 谈谈你是如何做移动端适配的?


详情: https://blog.csdn.net/weixin_44602430/article/details/120909358


19. 移动端1像素的解决方案?


为什么会有一像素问题 在移动端分辨率是不相同的,目前来说可以分一倍屏,二倍屏,三倍屏,在不同分辨率上显示的1像素可能会被渲染为2个像素点或者三个像素点,这样严重影响了美观,所以我们要解决一像素问题


解决方案: https://blog.csdn.net/Qian_mos/article/details/88945352


20. 弹性盒中的缩放机制是怎样的?


弹性盒中的项目设置flex-grow属性定义项目的放大比例,默认值为0,值越大,放大越厉害,且不支持负值;


而flex-shrink属性定义项目的缩小比例,默认值为1,数值越大,缩小越厉害,同样不支持负值;


flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间,浏览器根据这个属性,计算主轴是否有多余空间。他的默认值为auto,也就是项目的本来大小。


注意:它可以设为跟width或height属性一样的值,比如给具体的像素值,则项目将占据固定空间。


相关实践学习
Serverless极速搭建Hexo博客
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
目录
相关文章
|
3月前
|
存储 前端开发 JavaScript
前端面试题23-34
通过对 Promise 和 ECMAScript6 的深入理解,可以更好地应对现代 JavaScript 开发中的复杂异步操作和新特性,提升代码质量和开发效率。
36 2
|
1月前
|
缓存 前端开发 中间件
[go 面试] 前端请求到后端API的中间件流程解析
[go 面试] 前端请求到后端API的中间件流程解析
|
1月前
|
存储 XML 移动开发
前端大厂面试真题
前端大厂面试真题
|
1月前
|
存储 前端开发 JavaScript
44 个 React 前端面试问题
【8月更文挑战第18天】
27 2
|
1月前
|
存储 JavaScript 前端开发
2022年前端js面试题
2022年前端js面试题
21 0
|
1月前
|
存储 前端开发 JavaScript
44 个 React 前端面试问题
44 个 React 前端面试问题
|
1月前
|
存储 JavaScript 前端开发
|
1月前
|
Web App开发 存储 缓存
|
1月前
|
前端开发 容器
前端面试热门问题--浮动和清除浮动(CSS)
前端面试热门问题--浮动和清除浮动(CSS)
|
2月前
|
缓存 前端开发 JavaScript
高级前端常见的面试题?
【7月更文挑战第11天】 **高级前端面试聚焦候选人的技术深度、项目实战、问题解决及技术趋势洞察。涉及React/Vue生命周期、Redux/Vuex状态管理、Webpack优化、HTTP/HTTPS安全、性能提升策略、PWA、GraphQL、WebAssembly、安全性议题及项目管理。通过回答,展现候选人技术广度与应对复杂场景的能力。**
65 1