pleasestartyourperformance / face-questions Goto Github PK

1.Event-loop （高频）

2.从输入url到页面加载完成发生了什么（高频）

1.DNS解析

2.TCP连接

3.发送HTTP请求

4.服务器处理请求并返回HTTP报文

5.浏览器解析渲染页面

https://blog.csdn.net/a18792627168/article/details/106519016

连接结束

3.content-type 字段

决定浏览器将以什么形式、什么编码读取这个文件，这就是经常看到一些 PHP 网页点击的结果却是下载一个文件或一张图片的原因。

Content-Type 标头告诉客户端实际返回的内容的内容类型。

https://www.runoob.com/http/http-content-type.html

4.协商缓存和强缓存 （高频）

强缓存总结
cache-control: max-age=xxxx，public
客户端和代理服务器都可以缓存该资源；
客户端在xxx秒的有效期内，如果有请求该资源的需求的话就直接读取缓存,statu code:200 ，如果用户做了刷新操作，就向服务器发起http请求

cache-control: max-age=xxxx，private
只让客户端可以缓存该资源；代理服务器不缓存
客户端在xxx秒内直接读取缓存,statu code:200

cache-control: max-age=xxxx，immutable
客户端在xxx秒的有效期内，如果有请求该资源的需求的话就直接读取缓存,statu code:200 ，即使用户做了刷新操作，也不向服务器发起http请求

cache-control: no-cache
跳过设置强缓存，但是不妨碍设置协商缓存；一般如果你做了强缓存，只有在强缓存失效了才走协商缓存的，设置了no-cache就不会走强缓存了，每次请求都回询问服务端。

cache-control: no-store
不缓存，这个会让客户端、服务器都不缓存，也就没有所谓的强缓存、协商缓存了。

强缓存就是给资源设置个过期时间，客户端每次请求资源时都会看是否过期；只有在过期才会去询问服务器。所以，强缓存就是为了给客户端自给自足用的。而当某天，客户端请求该资源时发现其过期了，这是就会去请求服务器了，而这时候去请求服务器的这过程就可以设置协商缓存。这时候，协商缓存就是需要客户端和服务器两端进行交互的。

发请求-->看资源是否过期-->过期-->请求服务器-->服务器对比资源是否真的过期-->没过期-->返回304状态码-->客户端用缓存的老资源。

请求资源时，把用户本地该资源的 etag 同时带到服务端，服务端和最新资源做对比。

etag 是一个段字符串

如果资源没更改，返回304，浏览器读取本地缓存。

如果资源有更改，返回200，返回最新的资源。

https://www.jianshu.com/p/9c95db596df5

5.vue diff算法 （高频）

6.原型链 作用域（高频）

1.React render 为啥加个括号

2.commentWillupdate 可以改setstate吗 为啥

react组件在每次需要重新渲染时候都会调用componentWillUpdate(),

例如，我们调用 this.setState()时候

在这个函数中我们之所以不调用this.setState()是因为该方法会触发另一个componentWillUpdate(),如果我们componentWillUpdate()中触发状态更改,我们将以无限循环结束.

3.react如何导入svg

import * as React from 'react';
export const SvgPlainUp = (
    props: React.SVGProps<SVGSVGElement>
): React.PropsWithoutRef<React.ReactSVGElement> => 
    <svg
        data-name="\u56FE\u5C42 1"
        viewBox="0 0 768 768"
        width="1em"
        height="1em"
        fill="currentColor"
        {...props}
    >
        <path d="M41.38 566.63a32 32 0 0045.25 0L384 269.25l297.38 297.38a32 32 0 0045.25 0 32 32 0 000-45.26l-320-320a32 32 0 00-45.25 0l-320 320a32 32 0 000 45.26z" />
    </svg>;

4.协商缓存 强缓存

5.flex的几种

利用 flex: 1; 确实实现了三个不同内容的 div 平分空间, 所以按我以前的想法来说:

flex: 1; === flex: 1 1 auto;
这是完整写法, 详见mdn, 它还有另外两种完整写法, 分别是 initial (0 1 auto) 和 none (0 0 auto)

第一个参数表示: flex-grow 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
第二个参数表示: flex-shrink 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
第三个参数表示: flex-basis给上面两个属性分配多余空间之前, 计算项目是否有多余空间, 默认值为 auto, 即项目本身的大小

6.url 过程 浏览器解析

7.虚拟dom储存在那里

8.constructor中super的作用 props的作用

9.this.setstate()是同步还是异步

1.socureMap 的原理 浏览器中的socure

2.vue Objec.definProptye 和 proxy

3.vue的状态管理

4.react 的高阶组件 和 Hooks

5.react 为什么 使用 setstate()

6.react的生命周期

7.eslint 的几种配置

npm源的多种使用

1.React.Hooks 为React带来了什么

https://zh-hans.reactjs.org/docs/hooks-intro.html

2.Hooks的方法都有什么

useState,useEffect,useRef,useContext uselayoutEffect

useLayoutEffect里面的callback函数会在DOM更新完成后立即执行

3.Hooks的useEffect 都包含了什么生命周期 然后那个阶段为什么能用这些生命周期

useEffect 拥有两个参数，第一个参数作为回调函数会在浏览器布局和绘制完成后调用，因此它不会阻碍浏览器的渲染进程。
第二个参数是一个数组

当数组存在并有值时，如果数组中的任何值发生更改，则每次渲染后都会触发回调。
当它不存在时，每次渲染后都会触发回调。
当它是一个空列表时，回调只会被触发一次，类似于 componentDidMount。

4....运算符是什么意思

5.函数柯里化知道吗

6.webpack 分模块打包 怎么做 React怎么做

https://segmentfault.com/a/1190000021233631?utm_source=tag-newest

7.防抖和节流说一下

1.微任务和宏任务

2.url到页面发生了什么

3.es6的新特性

4.数组的排序 方法 冒泡 快速排序

5.JS的设计模式

6.重绘和重排

https://github.com/LiangJunrong/document-library/blob/master/%E7%B3%BB%E5%88%97-%E9%9D%A2%E8%AF%95%E8%B5%84%E6%96%99/%E6%B5%8F%E8%A7%88%E5%99%A8/%E9%87%8D%E6%8E%92%E5%92%8C%E9%87%8D%E7%BB%98.md

1.http1.0和2.0

2.浏览器的渲染机制

3.装饰器的原理

4.mobx的原理

5.webpack打包优化

6.promiss手写 几个关键的点

7.axios的 api 使用 和 原理

8.输入url都发生了什么

9.js的bind实现 call map filter

1.vue 和 react 的区别
两者的模板渲染、两者的虚拟 dom、diff 差异（vue2、vue3、react 16）、react fiber 能解决什么问题、vue2 的响应式原理和 vue3 的响应式原理；vue 关于 Proxy 与 Object.defineProperty 的区别；两者的批量更新，还有路由差异、常用的优化手段、怎么进行数据通信、讲点新鲜的内容：新发布的 vue3 有什么特性、最后总结，谈谈两者的如今的生态……
2.项目的性能优化
项目技术栈的性能优化，比如使用 react 可以讲避免重复渲染的一些手段，比如 electron 可以将如何更接近原生；针对浏览器做的优化（你需要了解浏览器相关原理，比如缓存/存储、代理、SSR 等，针对渲染引擎的工作内容想到的优化，比如解析 css 解析会影响 dom 渲染、合成优化减少回流重绘、web worker、Event Loop 等）；打包工具提供的优化，特指 webpack；针对具体的页面做的优化，比如首页该做什么，首页最新指标；最后讲讲应用场景、我的项目里用到了哪些方法，针对中等项目、大型项目的性能选择。
3.react 与 vue 的技术栈对比，说下区别
4.B 端遇到的最复杂的数据结构是什么
5.快速实现 [1, 2, ...100]，所有你能想到的解
6.数据展示的优化、数据截取和处理
7.实际场景中，哪些地方应用到了堆、链表、多叉树结构
8.es6 及 es6+ 的能力集，你最常用的，这其中最有用的，都解决了什么问题。
9.GC 相关问题：es6+ ，eventloop 中涉及 GC 的部分。
10.数组 flat 展开的各种解法，数组 map 应用
11.讲下 V8 sort 的大概思路
12.Promise 并发限制
13.手写 Promise.all
14.省市区拼接查字段，要求 O(n) 内解出
15.中台的理解
16.input type 都有哪些类型，还记得其他 attrs 呢
17.css 的伪类和伪元素有哪些？有什么区别？
18.在一个未知宽度的父元素内如何创建一个等边正方形
19.异步加载 js 会阻塞什么
20.数组所有方法都有哪些？findIndex 的参数说明
21.vue 和 react 的异同
22.如何优化 vue 框架，注意是优化框架
23.vue 和 react 的 jsx 使用
24.id key 真的能使列表比对更高效吗？举个反例？
25.webpack 优化的手段
26.tree-shaking 怎么配置，如何 避免 tree-shaking？
27.electron 和小程序遇到什么坑？
28.说下微信自动化测试
29.es2015 到 es2020 的新特性，你最常用什么，给你收益最大的。
30.weakMap 和 Map 的区别，weakMap 原理，为什么能被 GC？
31.如何干扰 GC ？
32.webpack import 动态加载原理
33.知道 webpack 中的 devTool 吗？
34.如何进行错误定位和数据上报，线上异常的处理
35.为什么有时候配置了 webpack caching，chunk 还是更新了？
36.讲讲浏览器和 node 的 eventloop
37.微任务后面还有哪些？requestAnimationFrame 是怎么调用的？requestAnimationFrame 帧内总是有任务吗？分情况说下。
38.帧数怎么计算？
39.了解网络安全吗？
40.如何避免数据被 iframe 截获
41.说下状态码
42.说下 304，什么情况会 304？协商缓存的头部字段？
43.webpack 提高构建速度的方式
44.oader 输入什么产出什么 ？
45.webpack 原理
46.webpack 动态加载的原理
47.webpack 热更新
48.如何写一个 webpack plugin
49.AST 的应用
50.如何解析一个 html 文本，还是考 AST
51.babel 原理，怎么写 babel 插件
52.如何设计一个沙盒 sandbox ？
53.小程序的 API 做了什么处理，能够做到全局变量的隐藏，如果是你，怎么设计 ？
54.基础题考闭包的，我讲对了思路，结果没做对。
55.实现颜色转换 'rgb(255, 255, 255)' -> '#FFFFFF' 的多种思路。
56.提供一个数字 n，生成一组 0~n-1 的整数，打乱顺序组成数组，打乱几次，如何能够看起来平衡，说出你能想到的所有方法。

1.神三元同学的原生js上
https://juejin.cn/post/6844903974378668039

https://github.com/lgwebdream/FE-Interview?utm_source=gold_browser_extension

1.Http的理解

2.BFC的理解

3.PureComponent Vs Component

1.如果state和prop一直变化的话，还是建议使用Component，并且PureComponent的最好作为展示组件

2.它们几乎完全相同，但是PureComponent通过prop和state的浅比较来实现shouldComponentUpdate，某些情况下可以用PureComponent提升性能

3.PureComponent不仅会影响本身，而且会影响子组件，所以PureComponent最佳情况是展示组件
父组件继承PureComponent，子组件继承Component时：下面的结果初始化时输出为constructor，IndexPage render，example render，但是当我们点击按钮时，界面没有变化，因为这个this.state.person对象的引用没有改变，只是改变了它里面的属性值
4.所以尽管子组件是继承Component的也没有办法渲染，因为父组件是PureComponent，父组件根本没有渲染，所以子组件也不会渲染
5.父组件继承Component，子组件继承PureComponent时：结果和我们预期的一样，即初始化是会输出constructor，IndexPage render，example render，但是点击的时候只会出现IndexPage render，因为父组件是Component，所以父组件会渲染，但是
当父组件把值传给子组件的时候**，因为子组件是PureComponent，所以它会对prop进行浅比较**，发现这个person对象的引用没有发生变化，所以不会重新渲染，而界面显示是由子组件显示的，所以界面也不会变化

6.若是数组和对象等引用类型，则要引用不同，才会渲染

7.若有shouldComponentUpdate，则执行它，若没有这个方法会判断是不是PureComponent，若是，进行浅比较

8.继承自Component的组件，若是shouldComponentUpdate返回false，就不会渲染了，继承自PureComponent的组件不用我们手动去判断prop和state，所以在PureComponent中使用shouldComponentUpdate会有如下警告:

答案参考：https://zhuanlan.zhihu.com/p/41035820

4.histroy 和哈希模式

5.防抖节流

6.react.memo

1.Vuex 原理

2.接口中返回的interface 如何定义

1.nexttick的原理

this.$nextTick这个方法作用是当数据被修改后使用这个方法会回调获取更新后的dom再渲染出来

2.基本类型和引用类型

3.diff算法的原理

4.http1.0和2.0

5.浏览器缓存 强缓存 协商缓存

6.flex 和 bfc

7.webworker

8.webpack loder干啥原理

9.Vue 父子组件的生命周期加载顺序

1、父子组件的加载顺序为
父beforeCreated ->父created ->父beforeMounted ->子beforeCreated ->子created ->子beforeMounted ->子mounted -> 父mounted

2、父组件更新顺序为
父beforeUpdate->父updated

3、子组件更新顺序为
父beforeUpdate->子beforeUpdate->子updated->父updated

4、父子组件销毁顺序为
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

10.react的合成事件

11.垃圾回收机制