前端面试题汇总

基础面试题

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.hqwc.cn/news/535349.html

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

相关文章

记OnlyOffice的两个大坑

开发版&#xff0c;容器部署&#xff0c;试用许可已安装。 word&#xff0c;ppt&#xff0c;excel均能正常浏览。 自带的下载菜单按钮能用。 但config里自定义的downloadAs方法却不一而足。 word能正常下载&#xff0c;excel和ppt都不行。 仔细比对调试了代码。发现app.js…

供应链金融翻译,英译中如何翻译比较好

在供应链金融领域&#xff0c;英文翻译是一项至关重要的任务。由于供应链金融涉及多个行业、多方参与者和错综复杂的金融操作&#xff0c;翻译人员需要具备深厚的专业知识和精湛的翻译技巧。那么&#xff0c;供应链金融英文怎么翻译成中文 &#xff0c;北京哪个翻译公司比较专业…

手把手写深度学习(23):视频扩散模型之Video DataLoader

手把手写深度学习(0)&#xff1a;专栏文章导航 前言&#xff1a;训练自己的视频扩散模型的第一步就是准备数据集&#xff0c;而且这个数据集是text-video或者image-video的多模态数据集&#xff0c;这篇博客手把手教读者如何写一个这样扩散模型的的Video DataLoader。 目录 准…

一文告诉你服务器为什么要托管?

IDC的全称是Internet Data Center&#xff0c;即“互联网数据中心”&#xff0c;现在大家都称作“IDC数据中心” 。 什么是IDC服务器托管服务&#xff1f; 服务器托管是企业用户为提高公司效益、压缩成本&#xff0c;将自身企业的服务器及相关设备放到专业IDC服务商所建设的数…

考研C语言复习进阶(1)

目录 1. 数据类型介绍 1.1 类型的基本归类&#xff1a; 2. 整形在内存中的存储 2.1 原码、反码、补码 2.2 大小端介绍 3. 浮点型在内存中的存储 ​编辑 1. 数据类型介绍 前面我们已经学习了基本的内置类型&#xff1a; char //字符数据类型 short //短整型 int /…

10个调研分析模板,轻松搞定市场调查与分析!

市场调查与分析&#xff0c;对于任何一家企业来说&#xff0c;都是不可或缺的一环。对进入市场开展业务的企业而言&#xff0c;不管处于哪个阶段——初创公司&#xff0c;抑或是已经稳定运营的企业&#xff0c;了解市场动态和客户需求总是至关重要的。 但必须承认的是&#xf…

探索C++中的动态数组:实现自己的Vector容器

&#x1f389;个人名片&#xff1a; &#x1f43c;作者简介&#xff1a;一名乐于分享在学习道路上收获的大二在校生 &#x1f648;个人主页&#x1f389;&#xff1a;GOTXX &#x1f43c;个人WeChat&#xff1a;ILXOXVJE &#x1f43c;本文由GOTXX原创&#xff0c;首发CSDN&…

mybatis基础操作(三)

动态sql 通过动态sql实现多条件查询&#xff0c;这里以查询为例&#xff0c;实现动态sql的书写。 创建members表 创建表并插入数据&#xff1a; create table members (member_id int (11),member_nick varchar (60),member_gender char (15),member_age int (11),member_c…

什么时候去检测大数据信用风险比较合适?

什么时候去检测大数据信用风险比较合适?在当今这个数据驱动的时代&#xff0c;大数据信用风险检测已经成为个人的一项重要需求。本文将从贷前检测、信息泄露检测和定期检测三个方面&#xff0c;阐述何时进行大数据信用风险检测较为合适。 一、贷前检测 大数据信用风险检测在贷…

指针【理论知识速成】(3)

一.指针的使用和传值调用&#xff1a; 在了解指针的传址调用前&#xff0c;先来额外了解一下 “传值调用” 1.传值调用&#xff1a; 对于来看这个帖子的你相信代码展示胜过千言万语 #include <stdio.h> #include<assert.h> int convert(int a, int b) {int c 0…

【Python】python实现Apriori算法和FP-growth算法(附源代码)

使用一种你熟悉的程序设计语言&#xff0c;实现&#xff08;1&#xff09;Apriori算法和&#xff08;2&#xff09;FP-growth算法。 目录 1、Apriori算法2、F-Growth算法3、两种算法比较 1、Apriori算法 def item(dataset): # 求第一次扫描数据库后的 候选集&#xff0c;&am…

OpenCASCADE开发指南<四>:OCC 数据类型和句柄

一个软件首先要规定能处理的数据类型&#xff0c; 其次要实现三项最基本的功能——引用管理、内存管理和异常管理。在 OCC 中&#xff0c;这三项功能分别对应基础类中的句柄、内存管理器和异常类。 1 数据类型 在基本概念篇里&#xff0c;已经介绍了 OCC 数据类型的分类&…