前端面试题汇总

基础面试题

1.new 操作符做了那些事


function Fun(name){this.name = name
}
Fun.prototype.sayHi = funtion(){console.log(this.name)   
}function mockCreate(fn, ...args){let obj = Object.create({}) // 创建一个空对象Object.setPrototypeOf(obj, fn.prototype) // 空对象的原型指向函数的原型链let result = fn.apply(obj, args)  // 绑定对象到函数的thisreturn result instanceof Object ? result : obj // 如果返回的是引用对象则返回对象,否则返回obj
}

2.html 浏览器渲染过程

  1. 处理html解析 并构建dom 树
  2. 处理css 构建cssom
  3. dom cssom 合成渲染树
  4. 根据渲染树,计算节点的布局信息
  5. 调用gpu绘制合成图层,显示在屏幕上

3.defer与async的区别

  1. defer要等到整个页面在内存中正常渲染结束(DOM结构完全生产,以及其他脚本执行完成),才会执行
  2. async 一旦下载完, 渲染引擎就会中断渲染,执行这个脚本以后, 再继续渲染。
  3. 一句话 defer是渲染完再执行,async是下载完就执行
  4. 如果多个defer脚本,会按照页面顺序加载; 而多个async 脚本是不能保证加载顺序的。(async是只要加载完,立即执行)

4.  列出一些服务器的状态码

       301 资源永久转移

       302 资源临时转移; 

       304 Not Modified; 资源未修改, 客户端会访问缓存的资源;

       400 客户端请求的语法错误;

       401 unauthorized, 用户身份未认证

       403 Forbidden, 服务端拒绝此次请求

       404 资源找不到

       500 服务器内部错误

       501 服务器不支持请求的功能

       502 无效的响应

React面试题

1. react 16.8引入fiber,介绍一些

概念:react fiber 是一种基于浏览器单线程的调度算法;  fiber机制下,节点和树分别使用fiberNode,fiberTree的结构;整个过程由current与workInProgress两棵树双缓存完成;

结构: 双链表的形式; 每个节点都是一个fiber,一个fiber包含了child,parent,sibling; 并且sibling返回 到parent这种结构。

问题: v16之前面临的主要性能问题是,组件的reconcilation算法是递归的;无法中断; 会造成页面卡顿; v16之后引入fiber,会把算法拆分成无数个小任务的算法; 并能够随时停止,恢复;通过requestIdelCallback函数计算空闲时间,来决定是否让出js线程的处理权限;

2. react 16 新的生命周期有哪些变化?

1.react16 新的生命周期弃用了componentWillMount, componentWillReceiveProps, componentWillUpdate钩子

2. 新增getDerivedStateFromProps,getSnapshotBeforeUpdate来替代弃用的三个生命周期钩子;

3. 新增了错误处理的钩子函数 componentDidCatch;结合getDerivedStateFromError; 可以搜集错误

class ErrorBoundary extends React.Component{constructor(props){super(props)this.state = {hasError: false,}}getDerivedStateFromError(err){return { hasError: true};}componentDidCatch(err,errInfo){logErrorToService(err,errInfo)}render(){if(this.state.hasError){return <h1>Error</h1>}return this.props.children;}}

         

   创建阶段:

        constructor() -> getDerivedStateFromProps  -> render -> componentDidMount

   更新阶段:
        getDerivedStateFromProps ->shouldComponentUpdate-> render -> getSnapshotStateBeforeUpdate -> componentDidUpdate

  卸载阶段:

        componentWillUnmount

3. react diff算法介绍一下

1. react 通过一些优化避免O n^3的复杂的; 分别采用了 tree层级比较; conponent层级比较; element层级比较,降低到O n^1;

2. 同层element通过key对比; 分别打上插入,移动,删除 标签; 然后移动元素算法使用的是仅右移的方式;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/742669.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

day02vue学习

day02 一、今日学习目标 1.指令补充 指令修饰符v-bind对样式增强的操作v-model应用于其他表单元素 2.computed计算属性 基础语法计算属性vs方法计算属性的完整写法成绩案例 3.watch侦听器 基础写法完整写法 4.综合案例 &#xff08;演示&#xff09; 渲染 / 删除 / 修…

速卖通批量注册买家号安全吗?怎么弄?

在速卖通等跨境电商平台上&#xff0c;买家号的注册与养号过程繁琐而复杂。传统的手动注册方式效率低下&#xff0c;难以满足大规模的需求。而跨境智星系统凭借其全自动化的功能&#xff0c;能够轻松实现买家号的批量注册与养号&#xff0c;大大提高了效率。 使用跨境智星系统进…

200W年薪的大佬 随手丢给我“Spring速成宝典”看完这些知识点直接定级P7

面试官&#xff1a;答的很好&#xff0c;最后一个问题&#xff1a;如果没有Spring&#xff0c;你打算怎么开展工作&#xff1f; 这个思考了几分钟后&#xff0c;程序员小建是这么回答的&#xff1a;Spring的核心源码&#xff0c;比如&#xff1a;IOC、AOP、Spring事务、MVC原理…

Explain详解与索引优化最佳实践

Explain工具介绍 使用EXPLAIN关键字可以模拟优化器执行SQL语句,分析你的查询语句或是结构的性能瓶颈 在select语句之前增加explain关键字,MySQL会在查询前设置一个标记,执行查询会返回执行计划的信息,而不是执行这条SQL 注意: 如果from中包含子查询,仍会执行该子查询,将结果…

DAY by DAY 史上最全的Linux常用命令汇总----man

man是按照手册的章节号的顺序进行搜索的。 man设置了如下的功能键&#xff1a; 功能键 功能 空格键 显示手册页的下一屏 Enter键 一次滚动手册页的一行 b 回滚一屏 f 前滚一屏 q 退出man命令 h 列出所有功能键 /word 搜索word字符串 注意&#xff1a…

【文献阅读】A Fourier-based Framework for Domain Generalization(基于傅立叶的领域泛化框架)

原文地址&#xff1a;https://arxiv.org/abs/2105.11120 摘要 现代深度神经网络在测试数据和训练数据的不同分布下进行评估时&#xff0c;存在性能下降的问题。领域泛化旨在通过从多个源领域学习可转移的知识&#xff0c;从而泛化到未知的目标领域&#xff0c;从而解决这一问…

03-自媒体文章发布-黑马头条

自媒体文章发布 1)自媒体前后端搭建 1.1)后台搭建 ①&#xff1a;资料中找到heima-leadnews-wemedia.zip解压 拷贝到heima-leadnews-service工程下&#xff0c;并指定子模块 执行leadnews-wemedia.sql脚本 添加对应的nacos配置 spring:datasource:driver-class-name: com…

图解Diffusion扩散模型+代码

0、项目视频详解 视频教程见B站https://www.bilibili.com/video/BV1e8411a7mz 1、diffusion模型理论&#xff08;推导出损失函数&#xff09; 1.1、背景 随着人工智能在图像生成&#xff0c;文本生成以及多模态生成等领域的技术不断累积&#xff0c;如&#xff1a;生成对抗网…

SD-WAN技术如何保障网络的持续连接和稳定性

在当今数字化时代&#xff0c;企业对于网络的稳定性和持续连接性需求日益增加。SD-WAN作为一种新兴的网络解决方案&#xff0c;为企业提供了有效的方式来实现网络的持续连接和稳定性。本文将探讨SD-WAN技术如何保障网络的持续连接和稳定性。 1、多路径冗余技术 SD-WAN采用了多…

初识Python语言-课堂练习【pyhton123题库】

初识Python语言-课堂练习【pyhton123题库】 一、单项选择题 1、Guido van Rossum正式对外发布Python版本的年份是&#xff1a; A 2008B 1998C 1991D 2002 【答案】C 【解析】暂无解析2、下面不是Python语言特点的是&#xff1a;‪‬‪‬‪‬‪‬‪‬‮‬‪‬‫‬‪‬‪‬‪…

移动端App、小程序、公众号该怎么选择,你真得知道吗?

当下移动App,小程序泛滥&#xff0c;如何选择&#xff0c;你真的知道吗&#xff1f; 今天我们就聊聊App、小程序、公众号、微应用具体是什么&#xff1f;怎么样开发&#xff1f;适合在什么情况下使用&#xff1f; 1.App、小程序、公众号、微应用之初识 App App本质来说就是手…

机试:蛇形矩阵

问题描述: 代码示例: //蛇形矩阵 #include <bits/stdc.h> using namespace std;int main(){int n;cout << "输入样例" << endl; cin >> n;int k 1; for(int i 0; i < n; i){if( i %2 0){//单数行for(int j 0; j < n; j){ cout &…

安装包逆向1

1.找到程序的入口点 在IDA中我们看到函数非常多&#xff0c;但是一般都是有主要的入口的&#xff0c;所以找一下有没有主函数 可以直接 CtrF直接查找 CNsInstaller::CNsInstaller 这里搞半天在获取文件路径 CNsInstaller::StartInstall CNsInstaller::InstallFunc char…

springboot268码头船只货柜管理系统

码头船只出行和货柜管理系统的设计与实现 摘要 针对于码头船只货柜信息管理方面的不规范&#xff0c;容错率低&#xff0c;管理人员处理数据费工费时&#xff0c;采用新开发的码头船只货柜管理系统可以从根源上规范整个数据处理流程。 码头船只货柜管理系统能够实现货柜管理…

Spring 面试题及答案整理,最新面试题

Spring框架中的Bean生命周期是什么&#xff1f; Spring框架中的Bean生命周期包含以下关键步骤&#xff1a; 1、实例化Bean&#xff1a; 首先创建Bean的实例。 2、设置属性值&#xff1a; Spring框架通过反射机制注入属性。 3、调用BeanNameAware的setBeanName()&#xff1a…

某电信公司组织结构优化咨询项目成功案例纪实

——构建前后端组织结构&#xff0c;提升组织运营效率 随着企业的不断发展&#xff0c;行业的竞争也越来越激烈&#xff0c;企业只能不断调整自身的战略才能更好的适应这样的大环境。在战略调整的过程中&#xff0c;企业往往会面临这样的问题&#xff1a;管理层的经营理念各不…

哪些订单预计会亏?一张报表告诉你

各位数据的朋友&#xff0c;大家好&#xff0c;我是老周道数据&#xff0c;和你一起&#xff0c;用常人思维数据分析&#xff0c;通过数据讲故事。 销售订单一般是企业在销售活动中重要的单据&#xff0c;当我们接到一个客户的订单时&#xff0c;就需要在系统中录入一个销售订…

STM32 | STM32F407ZE中断、按键、灯(续第三天)

上节回顾 STM32 | 库函数与寄存器开发区别及LED等和按键源码(第三天)一、 中断 中断概念 中断是指计算机运行过程中,出现某些意外情况需主机干预时,机器能自动停止正在运行的程序并转入处理新情况的程序,处理完毕后又返回原被暂停的程序继续运行(面试题)。 STM32外部中断…

智慧城市大模型来啦!港大百度推出UrbanGPT

论文作者解读链接&#xff1a;https://blog.csdn.net/qq_42715656/article/details/136681839 项目链接&#xff1a;https://urban-gpt.github.io/ 代码链接&#xff1a;https://github.com/HKUDS/UrbanGPT 论文链接&#xff1a;https://arxiv.org/abs/2403.00813 研究实验室链…

编曲制作软件Fruity Loops Studio 21 中文版及新如何选择适合FL Studio 版本

如果你有着满腔的音乐才华&#xff0c;想要自己在家里发片吗&#xff1f;还是听 MOBY 的电子舞曲不过瘾&#xff0c;要再帮他做做 REMIX&#xff1f;有朋友会说&#xff0c;我不懂乐理&#xff0c;不懂五线谱&#xff0c;怎么制作音乐&#xff1f;这话说得很好&#xff0c;说到…