橙鹰数据网络

1、fetch、axios、XMLHttpRequest三种请求有什么不同，他们的底层原理都相同吗

fetch是基于ES6的Promise和js脚本的网络请求方式 XMLHttpRequest是基于回调函数的网络请求方式，渲染进程将请求发送至网络进程，网络进程完成服务器资源的下载，网络进程拿到数据后，利用IPC来通知渲染进程，渲染进程收到消息，将xhr的回调函数封装成任务并添加到消息队列中，等主线程循环系统执行该任务的时候，就会根据相关的状态来调用对应的回调函数。 axios还是基于XMLHttpRequest，因此需要实现一个Ajax，还需要返回一个Promise对象来对结果进行处理。

2、浏览器的渲染过程

从用户请求到浏览器渲染的过程大致如下：

1.用户输入域名，然后DNS解析成IP地址

2.浏览器根据IP地址请求服务器（TCP连接的三次握手与四次挥手）

3.服务器响应HTTP请求，并返回给浏览器

4.浏览器开始渲染：

根据html，生成DOM树

根据css，生成css树

根据DOM树和css树结合生成render树

根据render树渲染页面

遇到script标签会暂停渲染，优先执行js，然后再继续渲染，因为js引擎和渲染引擎公用一个进程，所以我们通常会把js放到页面底部执行

直到整个render树渲染完成

reflow回流

当页面部分发生了变化影响了布局，需要到回去重新渲染，该过程称为reflow

repaint重绘

如果只是改变某个元素的背景颜色、文字颜色等，不会影响他周围元素或内部布局的属性，将只会引起浏览器的repaint（重绘），回流的过程一定会发生重绘。

3、前端工程化

一、优化网络传输

1.开启HTTP 2.0

2.使用CDN部署静态资源

3.使用DNS预解析

4.提前建立网络连接

5.域名收敛，把页面的静态资源部署在尽可能少的域名下，节省DNS解析，TCP建立连接的网络成本

6.使用brotli压缩，google在15年发布的Brotli压缩算法，比gzip具有更高的压缩比和更快的压缩性能

7.优化https，https多次握手和TLS相关算法会造成额外的开销，导致没有优化过的https性能相比http差距较大，优化的方法如下：

1.SessionResume，把昂贵的计算结果保存在session中复用

2.OCSP Stampling由服务端直接返回OCSP内容，而不需要客户端额外查询

3.使用TLS1.3只需要一次RTT即可完成握手

4.TCP Fast Open 一个RTT的时间内syn包发出的同时捎上应用层的数据

5.HSTS强制客户端（浏览器）使用HTTPS与服务器创建连接。

二 、优化使用缓存

1.DNS缓存

2.宿主浏览器缓存，（1）Memory缓存（2）Cache API缓存

3.运行时缓存，（1）cookie（2）localStorage（3）db（4）memory

三、静态资源加载

1.资源预加载，预加载下级页面的资源

2.HTML加载，控制HTML体积（传输体积不要超过30kb，减少DOM节点和属性，压缩HTML代码，减少使用内联样式）

3.使用骨架屏（骨架屏就是在页面数据尚未加载前先给用户展示出页面的大致结构，直到请求数据返回后在渲染页面，补充进需要显示的数据内容，常用于文章列表、动态列表等相对比较规则的列表页面）

4.JS加载：异步加载，控制加载时机，动态加载JS脚本

优化文件体积（1）压缩（2）按需加载（3）精准控制Polyfill（4）充分使用tree shaking（5）谨慎引入第三方库

优化网络请求（动静分离），尽可能利用http持久化缓存（主次分割），先加载处理主要模块后加载处理次要模块，打包优化

5.CSS加载：优化文件体积，（1）压缩，启用Brotli/Gzip网格压缩（2）精准控制Prefix，只生成需要的样式（3）取出冗余样式，使用PurifyCSS或CSS Module

6.图片加载 控制加载时机 懒加载 使用webp、png、jpg等格式，避免使用bmp，gif等格式，图面大图拆分，小图合并，媒体查询，使用缓存等

7.字体加载 控制加载时机，主要字体体积小就内联到html中，体积大使用预加载，次要字体常规加载或者懒加载，控制加载策略，关键字配置为font-display:block，次要字体配置为font-display:swap

考虑兼容性和字体大小，PC：woff格式字体，移动端：ttf格式字体

字体裁剪，使用工具剪裁

淘系阿里项目组—商家页面

1.你了解过TS吗，你说一下TS的数据类型，例如any、unknow、never、void

any表示不对数据做类型检查，unknow表示未知类型的值，never表示永远不会返回结果，表示没有返回值

2.你了解过TS的泛型吗

泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候在指定类型的一种特性

3.防抖节流

防抖就是在一定时间内，多次点击会不断刷新定时器的状态，直到最后一次触发防抖函数过我们设定的延迟时间之后才会触发事件。节流就是在一定时间内，多次触发节流函数在我们设定的时间内也只会执行一次事件函数，多次点击不会刷新定时器的状态。

4.useCallback怎么使用，能举个例子吗

useCallback主要是为了缓存需要复用的代码，对于依赖

5.useEffect第二个参数的各种状态，以及在整个函数组件中useEffec代码的生命周期，例如，除了在依赖改变时，useEffect执行，还有什么时候会执行，useEffect的return除了销毁时会执行，还有什么时候会执行

6.类组件的生命周期

7.Node.js与前端的关系是什么，Node.js能干什么

8.浏览器渲染页面的时候，Node.js会参与进去吗

9.在浏览器渲染的时候，webpack用到node.js了是吗

10.你简述一下怎么封装一个hook实现防抖和节流，用到了那些hooks

11.实现粘性定位

12.弹性盒子实现水平垂直居中

13.你用过antdesign吗，用的多吗

14.如果我想改变包裹icon的样式应该怎么做？比如加个背景色，不是修改最外层的组件层

15.如果我不满意搜索框的下拉框的样式，你应该怎么修改下拉框的样式

16.如果我想像Promise.all一样接受一个数组参数，但是不希望里面的状态影响整个函数的执行，在所有状态改变完成后一起输出，应该怎么操作

跨境电商

1、git命令

git push/git pull/git branch/git checkout/git merge/git add ./git commit -m/git status git remote add origin 远程仓库地址/git log/git reset —hard 版本号

2、http和https

http的端口为80，https的默认端口为443，HTTP以明文方式发送内容，不提供任何方式的数据加密，如果攻击者截取了Web浏览器和服务器之间的传输报文，就可以直接读懂其中的信息，因此HTTP协议不适合传输一些敏感信息

https由http进行通信，但是还利用了SSL/TLS来加密数据，HTTPS开发主要目的，是提供对网站服务器的身份认证，保护交换数据的隐私与完整性。

HTTP1.0\1.1\2.0\3.0的区别

http://events.jianshu.io/p/cd70b8e90d00

3、xss攻击

https://blog.csdn.net/lgxzzz/article/details/125010336

4、react18的新特性

https://blog.csdn.net/local_people/article/details/123977539

https://blog.csdn.net/qq_42415326/article/details/124785286

5、redux新版本

https://segmentfault.com/a/1190000041472179?sort=newest

6、antd新版本和旧版本的区别