一川烟草 文武艺

【Interview】前端研发岗

1-Momenta

  1. react通信

    1. 父组件向子组件传递props，callback
    2. 子组件通过event向父组件发送消息
    3. context
    4. 兄弟：将state提升到父组件
    5. Global Variables(localStorage)
    6. 完全不相关：observer pattern

    vs. Vue

    • provide / inject

  2. react diff算法

  3. 算法

  4. eventloop

    同步 call stack

    异步 callback queues

    当call stack为空时，

    一个tick

    1. deque and run the oldest task from macrotask queue (dom event, ajax, setTimeOut, setInterval)
    2. execute all microtasks (Promises aync/await)
    3. render changes if any
    4. wait if macrotask queue is empty

  5. 编译原理

  6. 闲聊etc.

2-ByteDance

  1. 项目

  2. SSR渲染

    rendering web pages on the server and sending fully rendered HTML pages to the client for display

    csr: web pages are constructed in the browser using javascript

    benefit:

    • seo: search engine optimization
    • performance

  3. eventloop

  4. var let const

  5. arrow function 和 普通函数的区别

    1. 不能Generator函数，不能使用yeild关键字。
    2. 箭头函数不具有prototype
    3. 箭头函数不具有super
    4. 箭头函数不具有new.target，不能作为构造函数使用
    5. 箭头函数不会创建自己的this，call | apply | bind 无法改变箭头函数中this的指向

  6. 闭包及其运用

    内嵌的函数及它的lexical scoping

    private method

  7. 继承（vs. Java）

  8. react和vue的区别

  9. TCP三次握手

3-好未来（学而思）

  1. 语义化

  2. inline和block

  3. script defer和async

  4. Array的原型链

  5. 构造函数 prototype 实例

  6. 盒模型 IE和standard box-sizing

  7. flex实现水平垂直居中

  8. flex属性

  9. HTTP caching

  10. vue组件通信

  11. scope 闭包 外访问内

  12. OSI模型

  13. DNS

  14. HTTP缓存

    heuristic caching: as much as possible

    1. private cache

    2. shared cache

      1. proxy caches

      2. managed caches

        cdn等等

    // if both are available max-age is preferred
Expires: Tue, 28 Feb 2022 22:22:22 GMT (HTTP/1.0)
Cache-Control: max-age = 604800(sec = 1 week) (HTTP/1.1)

    Vary: Accept-Language

    revalidation: transform a stale response into a fresh one by asking the origin server, done by conditional request

    If-Modified-Since
If-None-Match  ETag

  15. HTTPS

    use TLS(transport layer security) to encrypt all communication (ssl = secure sockets layer, old standard security technology, v3.0 Netscape 1996)

    TLS handshake

    TCP +

    1）客户端发起一个http请求，告诉服务器自己支持哪些hash算法。

    2）服务端把自己的信息以数字证书的形式返回给客户端（证书内容有密钥公钥，网站地址，证书颁发机构，失效日期等）。证书中有一个公钥来加密信息，私钥由服务器持有。

    3）验证证书的合法性

    客户端收到服务器的响应后会先验证证书的合法性（证书中包含的地址与正在访问的地址是否一致，证书是否过期）。

    4）生成随机密码（RSA签名）

    如果验证通过，或用户接受了不受信任的证书，浏览器就会生成一个随机的对称密钥（session key）（随机数）并用公钥加密，让服务端用私钥解密，解密后就用这个对称密钥进行传输了，并且能够说明服务端确实是私钥的持有者。（服务端并不是真的加密这个字符串，而是把字符串进行hash计算后再进行加密后发送给客户端。客户端收到后再解密这个hash值与原来字符串的hash值对比，从而确定对方是否持有私钥。）

    5）生成对称加密算法

    验证完服务端身份后，客户端生成一个对称加密的算法和对应密钥，以公钥加密之后发送给服务端。此时被黑客截获也没用，因为只有服务端的私钥才可以对其进行解密。之后客户端与服务端可以用这个对称加密算法来加密和解密通信内容了。

  16. 跨域解决方法

    同源：协议/主机/端口

    • CORS

      Preflight request: 一个 CORS 预检请求是用于检查服务器是否支持 CORS 即跨域资源共享。

      它一般是用了以下几个 HTTP 请求首部的 OPTIONS 请求：Access-Control-Request-Method 和 Access-Control-Request-Headers，以及一个 Origin 首部

      Access-Control-Allow-Origin
Access-Control-Allow-Methods
Access-Control-Allow-Headers
Access-Control-Allow-Credentials = true
Access-Control-Expose-Headers 允许服务器指示那些响应标头可以暴露给浏览器中运行的脚本，以响应跨源请求。
Access-Control-Max-Age indicates how long the results of a preflight request can be cached

      By default, in cross-origin XMLHttpRequest or Fetch invocations, browsers will not send credentials. CORS-preflight requests must never include credentials. When responding to a credentialed request: The server must not specify the “*” wildcard for other related headers

    • jsonp

      利用了 script 不受同源策略的限制 （脚本的来源取决于脚本所嵌入的资源的来源，比如说访问A主机的当前HTML文件中有一个script标签，这个script标签的src属性请求了一个js脚本，因为这个脚本是由A主机的HTML文件的嵌入的script标签发起请求获取的，因此这个脚本的来源是属于A主机的。)

      通过动态添加<script>元素，向服务器发出请求

      缺点：只能 get 方式，易受到 XSS攻击

    • 代理跨域请求(Nginx)

      前端向发送请求，经过代理，请求需要的服务器资源

      缺点：需要额外的代理服务器

    • Html5 window.postMessage() 方法

      safely enables cross-origin communication between window objects

      允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本、多窗口、跨域消息传递

    • 基于 Html5 websocket 协议

      websocket 是 Html5 一种新的协议，基于该协议可以做到浏览器与服务器全双工通信，允许跨域请求

    • 修改 document.domain 跨子域

      相同主域名下的不同子域名资源，设置 document.domain 为 相同的一级域名

-比特大陆

  1. 水平垂直居中

    1. {
	display: flex,
	align-items: center,
	justify-content: center
}

    2. 绝对定位 + margin: auto

    3. 绝对定位 + 负margin（宽高一半）

      {
	position: absolute,
	top: 50%,
	left: 50%,
	margin-left: - width/2
	margin-top: - height/2
}

    4. 绝对定位 + transform

      {
	position: absolute,
	top: 50%,
	left: 50%,
	transform: translate(-50%, -50%)
}

  2. ES6新特性

    1. const let
    2. arrow function
    3. module
    4. template string
    5. default paramter
    6. spead/rest
    7. destructuring
    8. class
    9. symbol

  3. react和vue区别

  4. react class component和function component区别

    class组件是有状态的组件，可以定义state状态。 函数组件是无状态的。 class组件有生命周期。 函数组件没有生命周期，函数组件使用的是Hooks。 class组件是有this对象的。

  5. react diff算法

  6. react和vue diff算法的区别

  7. scope 闭包

  8. react hooks

  9. useEffect

  10. useReducer

  11. css flex

  12. 虚拟列表

  13. 深拷贝、浅拷贝区别 实现

  14. 跳出forEach

    throw Exception

5-滴滴

  1. 虚拟DOM树的本质和作用

    本质：JS和dom之间的映射缓存

    作用：实现DOM元素的高效更新

  2. HTTP缓存 Header

    Cache-Control

  3. 防抖、节流 概念实现

    防抖（debounce)：n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时

    节流（throttle）: n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效

    想象每天上班大厦底下的电梯。把电梯完成一次运送，类比为一次函数的执行和响应

    假设电梯有两种运行策略 debounce 和 throttle，超时设定为15秒，不考虑容量限制

    电梯第一个人进来后，15秒后准时运送一次，这是节流

    电梯第一个人进来后，等待15秒。如果过程中又有人进来，15秒等待重新计时，直到15秒后开始运送，这是防抖

  4. Map的使用

这场面试一上来就是几个当时一点都不会的问题，直接大破防放弃面试，但是面试官人很好，还给了我“克服腼腆，提高沟通交流能力“的建议

6-ThunderBit

消息订阅模式

初创公司，创始人都有美国大厂背景，挺有人格魅力的，可惜没去成

7-鳄梨科技

笔试

  1. 层叠上下文（stacking context)
  1. content, padding, border, margin

8-网易

  1. 强缓存与协商缓存的区别

    强缓存：浏览器不与服务端协商直接取浏览器缓存

    协商缓存：浏览器会先向服务器确认资源的有效性后才决定是从缓存中取资源还是重新获取资源 (304 Not Modified)

  2. react生命周期img

    挂载

    • constructor
    • getDerivedStateFromProps
    • render
    • componentDidMount

    更新

    • getDerivedStateFromProps
    • shouldComponentUpdate
    • render
    • getSnapshotBeforeUpdate
    • componentDidUpdate

    卸载

    • componentWillUnmount

  3. http响应码

    1. 信息响应 (100–199)
    2. 成功响应 (200–299)
    3. 重定向消息 (300–399)
    4. 客户端错误响应 (400–499)
    5. 服务端错误响应 (500–599)

    201 Created

    202 Accepted

    204 No Content

    301 Moved Permanently

    307 Temporary Redirect

    308 Permanent Redirect

    400 Bad Request

    403 Forbidden

    404 Not Found

    405 Method Not Allowed

    408 Request Timeout

    500 Internal Server Error

    501 Not Implemented

    502 Bad Gateway

    503 Service Unavailable

    504 Gateway Timeout

  4. 深拷贝浅拷贝

    深拷贝实现

    堆上新建了一份对象

    • 递归
    • 序列化与反序列化
    • structuredClone(value, options)

    浅拷贝实现

    原生 赋值 对象 复制内存地址

    Object.assign()

    const let

  5. 数组

    splice 原地，可新加（相当于unshift)

    slice 新数组, 返回切出来的部分

    splice(start)
splice(start, deleteCount)
splice(start, deleteCount, item1)
splice(start, deleteCount, item1, item2)
splice(start, deleteCount, item1, item2, /* …, */ itemN)

slice()
slice(start)
slice(start, end)

  6. flex gap

  7. css 画三角形

    ​ border实现

    .triangle {
    width: 0;
    height: 0;
    border: 100px solid;
    border-color: orangered skyblue gold yellowgreen;
}

    三个方向设置透明一个方向设置颜色

  8. 盒模型

  9. animation vs. transition

    他们虽然都可以做出动画效果，但是transition主要做简单的过渡效果，而animation可以做复杂的动画效果，在语法和用法上有非常大的区别。

    transition是过渡属性，强调过渡，他的实现需要触发一个事件（比如鼠标移动上去，焦点，点击等）才执行动画，过渡只有一组（两个：开始-结束）关键帧。

    animation是动画属性，他的实现不需要触发事件，设定好时间之后可以自己执行，且可以循环一个动画（设置多个关键帧）。

  10. v-if, v-show

  11. ref, reactive

    1. ref() 函数可以接受原始类型（最常见的是布尔值、字符串和数字）以及对象作为参数，而 reactive() 函数只能接受对象作为参数。
    2. ref() 有一个 .value 属性，你必须使用 .value 属性获取内容，但是使用 reactive() 的话可以直接访问
    3. 使用 ref() 函数可以替换整个对象实例，但是在使用 reactive() 函数时就不行

  12. 响应码处理

  13. 伪类 伪元素

  14. instanceof

  15. hash 模式

    hash 模式是一种把前端路由的路径用井号 # 拼接在真实 URL 后面的模式。当井号 # 后面的路径发生变化时，浏览器并不会重新发起请求，而是会触发 hashchange 事件。

    history 模式

    history API 是 H5 提供的新特性，允许开发者直接更改前端路由，即更新浏览器 URL 地址而不重新发起请求。

二面因拿到百度offer放弃

9-迈步科技

  1. 输入网址到页面呈现的过程

    URL解析：浏览器解析输入的URL，提取出协议、主机、端口、路径等信息。

    DNS解析：浏览器使用主机名查询DNS服务器，获取对应的IP地址。

    建立TCP连接：浏览器使用获取到的IP地址和端口号，与服务器建立TCP连接。这涉及到三次握手的过程。

    发送HTTP请求：一旦TCP连接建立，浏览器向服务器发送HTTP请求。请求的内容包括请求方法、请求头和请求体。

    服务器处理请求：服务器接收到浏览器发送的HTTP请求后，根据请求的路径和参数，处理请求并准备响应。

    服务器返回响应：服务器根据请求的处理结果，生成相应的HTTP响应。响应的内容包括响应状态码、响应头和响应体。

    接收响应：浏览器接收到服务器返回的HTTP响应。

    渲染页面：浏览器开始解析接收到的响应内容，构建DOM树、CSSOM树和渲染树。然后进行布局和绘制，最终将页面呈现在屏幕上。

    页面展示：页面渲染完成后，浏览器将页面展示给用户，用户可以看到页面内容并与页面进行交互。

  2. cookie和session的区别

    1. Session : A session is used to save information on the server momentarily so that it may be utilized across various pages of the website. It is the overall amount of time spent on an activity. The user session begins when the user logs in to a specific network application and ends when the user logs out of the program or shuts down the machine.

    Session values are far more secure since they are saved in binary or encrypted form and can only be decoded at the server. When the user shuts down the machine or logs out of the program, the session values are automatically deleted. We must save the values in the database to keep them forever.

    2. Cookie : A cookie is a small text file that is saved on the user’s computer. The maximum file size for a cookie is 4KB. It is also known as an HTTP cookie, a web cookie, or an internet cookie. When a user first visits a website, the site sends data packets to the user’s computer in the form of a cookie.

    The information stored in cookies is not safe since it is kept on the client-side in a text format that anybody can see. We can activate or disable cookies based on our needs.

    CookieSession
    Cookies are client-side files on a local computer that hold user information.Sessions are server-side files that contain user data.
    Cookies end on the lifetime set by the user.When the user quits the browser or logs out of the programmed, the session is over.
    It can only store a certain amount of info.It can hold an indefinite quantity of data.
    The browser’s cookies have a maximum capacity of 4 KB.We can keep as much data as we like within a session, however there is a maximum memory restriction of 128 MB that a script may consume at one time.
    Because cookies are kept on the local computer, we don’t need to run a function to start them.To begin the session, we must use the session start() method.
    Cookies are not secured.Session are more secured compare than cookies.
    Cookies stored data in text file.Session save data in encrypted form.
    Cookies stored on a limited data.Session stored a unlimited data.
    We can set an expiration date to delete the cookie’s data. It will automatically delete the data at that specific time.In PHP, to destroy or remove the data stored within a session, we can use the session_destroy() function, and to unset a specific variable, we can use the unset() function

    具体来说cookie机制采用的是在客户端保持状态的方案，而session机制采用的是在服务器端保持状态的方案。

    同时我们也看到，由于采用服务器端保持状态的方案在客户端也需要保存一个标识，所以session机制可能需要借助于cookie机制

    来达到保存标识的目的，但实际上它还有其他选择。

    cookie机制。正统的cookie分发是通过扩展HTTP协议来实现的，服务器通过在HTTP的响应头中加上一行特殊的指示以提示

    浏览器按照指示生成相应的cookie。然而纯粹的客户端脚本如JavaScript或者VBScript也可以生成cookie。而cookie的使用

    是由浏览器按照一定的原则在后台自动发送给服务器的。浏览器检查所有存储的cookie，如果某个cookie所声明的作用范围

    大于等于将要请求的资源所在的位置，则把该cookie附在请求资源的HTTP请求头上发送给服务器。

    Set-Cookie: <cookie-name>=<cookie-value>
Set-Cookie: <cookie-name>=<cookie-value>; Domain=<domain-value>
Set-Cookie: <cookie-name>=<cookie-value>; Expires=<date>
Set-Cookie: <cookie-name>=<cookie-value>; HttpOnly
Set-Cookie: <cookie-name>=<cookie-value>; Max-Age=<number>
Set-Cookie: <cookie-name>=<cookie-value>; Partitioned
Set-Cookie: <cookie-name>=<cookie-value>; Path=<path-value>
Set-Cookie: <cookie-name>=<cookie-value>; Secure

Set-Cookie: <cookie-name>=<cookie-value>; SameSite=Strict
Set-Cookie: <cookie-name>=<cookie-value>; SameSite=Lax
Set-Cookie: <cookie-name>=<cookie-value>; SameSite=None; Secure

// Multiple attributes are also possible, for example:
Set-Cookie: <cookie-name>=<cookie-value>; Domain=<domain-value>; Secure; HttpOnly

    cookie的内容主要包括：名字，值，过期时间，路径和域。路径与域一起构成cookie的作用范围。若不设置过期时间，则表示这

    个cookie的生命期为浏览器会话期间，关闭浏览器窗口，cookie就消失。这种生命期为浏览器会话期的cookie被称为会话cookie。

    会话cookie一般不存储在硬盘上而是保存在内存里，当然这种行为并不是规范规定的。若设置了过期时间，浏览器就会把cookie

    保存到硬盘上，关闭后再次打开浏览器，这些cookie仍然有效直到超过设定的过期时间。存储在硬盘上的cookie可以在不同的浏

    览器进程间共享，比如两个IE窗口。而对于保存在内存里的cookie，不同的浏览器有不同的处理方式session机制。session机制是一种服务器端的机制，服务器使用一种类似于散列表的结构（也可能就是使用散列表）来保存信息。

    ​ 当程序需要为某个客户端的请求创建一个session时，服务器首先检查这个客户端的请求里是否已包含了一个session标识

    （称为session id），如果已包含则说明以前已经为此客户端创建过session，服务器就按照session id把这个session检索出来

    使用（检索不到，会新建一个），如果客户端请求不包含session id，则为此客户端创建一个session并且生成一个与此session相

    关联的session id，session id的值应该是一个既不会重复，又不容易被找到规律以仿造的字符串，这个session id将被在本次响应

    中返回给客户端保存。保存这个session id的方式可以采用cookie，这样在交互过程中浏览器可以自动的按照规则把这个标识发送给

    服务器。一般这个cookie的名字都是类似于SEEESIONID。但cookie可以被人为的禁止，则必须有其他机制以便在cookie被禁止时

    仍然能够把session id传递回服务器。经常被使用的一种技术叫做URL重写，就是把session id直接附加在URL路径的后面。还有一种技术叫做表单隐藏字段。就是服务器

    会自动修改表单，添加一个隐藏字段，以便在表单提交时能够把session id传递回服务器。

    Cookie总是保存在客户端中，按在客户端中的存储位置，可分为会话Cookie和持久Cookie

  3. react生命周期

  4. get和post区别

    （1）post更安全（不会作为url的一部分，不会被缓存、保存在服务器日志、以及浏览器浏览记录中） （2）post发送的数据更大（get有url长度限制） （3）post能发送更多的数据类型（get只能发送ASCII字符）

    GET用于获取信息，是无副作用的，是幂等的，且可缓存POST用于修改服务器上的数据，有副作用，非幂等，不可缓存

    在约定中，GET方法的参数应该放在 url 中，POST方法参数应该放在 body 中

  5. useState useRef

  6. Promise的理解

  7. 热加载 原理

    webpack

  8. git命令

  9. linux命令

  10. 25匹马求最快的3匹

  11. 最近读的一本书

10-货拉拉

  1. 盒模型

  2. position

    是否在流里

    absolute和fixed被移出flow

    static

    The element is positioned according to the normal flow of the document. The top, right, bottom, left, and z-index properties have no effect. This is the default value.

    relative

    The element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements; thus, the space given for the element in the page layout is the same as if position were static.

    This value creates a new stacking context when the value of z-index is not auto. Its effect on table-*-group, table-row, table-column, table-cell, and table-caption elements is undefined.

    absolute

    The element is removed from the normal document flow, and no space is created for the element in the page layout. The element is positioned relative to its closest positioned ancestor (if any) or to the initial containing block. Its final position is determined by the values of top, right, bottom, and left.

    This value creates a new stacking context when the value of z-index is not auto. The margins of absolutely positioned boxes do not collapse with other margins.

    fixed

    The element is removed from the normal document flow, and no space is created for the element in the page layout. The element is positioned relative to its initial containing block, which is the viewport in the case of visual media. Its final position is determined by the values of top, right, bottom, and left.

    This value always creates a new stacking context. In printed documents, the element is placed in the same position on every page.

    sticky

    The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor), including table-related elements, based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements.

    This value always creates a new stacking context. Note that a sticky element “sticks” to its nearest ancestor that has a “scrolling mechanism” (created when overflow is hidden, scroll, auto, or overlay), even if that ancestor isn’t the nearest actually scrolling ancestor.

  3. BFC

    Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。

    Block Formatting Context(区块格式化上下文)

    • 内部的Box会在垂直方向，一个接一个地放置。
    • Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
    • 每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
    • BFC的区域不会与float box重叠。
    • BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
    • 计算BFC的高度时，浮动元素也参与计算。

    产生

    • The root element of the document (<html>).
    • Floats (elements where float isn’t none).
    • Absolutely positioned elements (elements where position is absolute or fixed).
    • Inline-blocks (elements with display: inline-block).
    • Table cells (elements with display: table-cell, which is the default for HTML table cells).
    • Table captions (elements with display: table-caption, which is the default for HTML table captions).
    • Anonymous table cells implicitly created by the elements with display: table, table-row, table-row-group, table-header-group, table-footer-group (which is the default for HTML tables, table rows, table bodies, table headers, and table footers, respectively), or inline-table.
    • Block elements where overflow has a value other than visible and clip.
    • display: flow-root.
    • Elements with contain: layout, content, or paint.
    • Flex items (direct children of the element with display: flex or inline-flex) if they are neither flex nor grid nor table containers themselves.
    • Grid items (direct children of the element with display: grid or inline-grid) if they are neither flex nor grid nor table containers themselves.
    • Multicol containers (elements where column-count or column-width isn’t auto, including elements with column-count: 1).
    • column-span: all should always create a new formatting context, even when the column-span: all element isn’t contained by a multicol container (Spec change, Chrome bug).

  4. 数组方法 原地与否

    find （没有undefined

    filter

    Mutating methodNon-mutating alternative
    copyWithin()No one-method alternative
    fill()No one-method alternative
    pop()slice(0, -1)
    push(v1, v2)concat([v1, v2\])
    reverse()toReversed()
    shift()slice(1)
    sort()toSorted()
    splice()toSpliced()
    unshift(v1, v2)toSpliced(0, 0, v1, v2)

  5. ES6新特性

  6. 事件循环

  7. var let const

  8. 响应式

    • media query
    • 百分比
    • rem布局 （rem单位都是相对于根元素html的font-size来决定大小的）
    • vw/vh

  9. Object方法 Object.keys(), Object.values(), Object.entries()

    Object.create, Object.is, Object.getPrototypeOf(), Object.setPrototypeOf(), Object.assign(), Object.defineProperty()

  10. 防抖节流

  11. 闭包

    闭包（closure）是一个函数以及其捆绑的周边环境状态（lexical environment，词法环境）的引用的组合。

    缺点

    延长生命周期，内存消耗大，内存泄漏

    由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。 解决方法是，在退出函数之前，将不使用的局部变量全部删除。

  12. 原型链

  13. vue通信

  14. vue响应式原理

    Object.defineProperty get set方法追踪依赖，在 property 被访问和修改时通知变更

  15. 页面展现过程

  16. post 和 get

  17. 深浅拷贝

  18. 算法题 Set,Map

    Set(iterable)

  19. 项目中最难的点

  20. 字符串去重 两种

11-百度 基础架构

  1. 难点，如何解决，解决之后有没有形成一些方法论

  2. CD实现原理

    持续集成的工作原理是将小的代码块推送到Git仓库中托管的应用程序代码库中，并且每次推送时，都要运行一系列脚本来构建、测试和验证代码更改，然后再将其合并到主分支中。

    持续交付和部署相当于更进一步的CI，可以在每次推送到仓库默认分支的同时将应用程序部署到生产环境。

  3. ref和reactive的区别

  4. vue3的响应性

    Proxy

    Vue2: Object.defineProperty(), get set方法

  5. 虚拟dom

  6. vue3 diff算法

  7. vue3 hook

  8. http是什么，结构，解决什么问题，注意的点，版本及其区别，方法及其区别，报文结构

  9. 跨域

  10. flex flex-basis和width谁优先，flex上下左右居中

  11. block formatting context, 解决margin重叠

    父元素设置border和padding?

  12. stacking context，生效策略

    img

二面因拿到另一个部门的offer而取消

12-百度 工程效能

一面

  1. es6新特性

  2. vue2到vue3

  3. 三角形

  4. 扁平化 flatten

  5. promise.any

    settled: fulfilled or rejected

    resolved: settled or ’locked-in’ to match the eventual state of another promise.

  6. css优先级

二面

  1. http状态码

  2. tcp和udp

  3. udp变可靠

    最简单的方式是在应用层模仿传输层TCP的可靠性传输。下面不考虑拥塞处理，可靠UDP的简单设计。

    • 1、添加seq/ack机制，确保数据发送到对端
    • 2、添加发送和接收缓冲区，主要是用户超时重传。
    • 3、添加超时重传机制。

  4. es6新特性

  5. 常用hook

  6. useMemo和useCallback区别

    useMemo 和 useCallback 接收的参数都是一样,第一个参数为回调 第二个参数为要依赖的数据

    共同作用： 1.仅仅 依赖数据 发生变化, 才会重新计算结果，也就是起到缓存的作用。

    两者区别： 1.useMemo 计算结果是 return 回来的值, 主要用于 缓存计算结果的值 ，应用场景如： 需要 计算的状态 2.useCallback 计算结果是 函数, 主要用于 缓存函数，应用场景如: 需要缓存的函数，因为函数式组件每次任何一个 state 的变化 整个组件 都会被重新刷新，一些函数是没有必要被重新刷新的，此时就应该缓存起来，提高性能，和减少资源浪费。

  7. useMemo的作用

  8. 实现useCounter

  9. 实现 objDiff

总结

不要等到准备周全才开始面试，边面边学，熟能生巧

自我介绍，表达能力，如何展示自己很重要

可以考虑从事更有门槛的赛道

要自信

Licensed under CC BY-NC-SA 4.0
Last updated on Oct 29, 2023 00:00 UTC
comments powered by Disqus
© 2020 - 2024 飞鸿踏雪泥
Built with Hugo
Theme Stack designed by Jimmy