Xiaohongshu (two rounds of technology and one round of hr oc)
one side
What is the difference between map and forEach?
(1)map() will allocate memory space to store the new array and return it, while forEach() will not return data.
(2)forEach() allows callback to change elements of the original array. map() does not change the original array.
The any method of promise,
Promise.any(), is considered successful if one sub-instance succeeds, and fails if all sub-instances fail. Opposite of all method
async await principle async and await are actually generators
generated by generators. First, the generator function needs to add a symbol after the function: * Secondly, the generator function can control the execution flow of the function through the yield keyword:
function* foo() {
console.log('函数开始执行');
const value = 10;
console.log(value);
//如果想有返回值，可以把返回值写在yield后面
yield value
const value2 = 20;
console.log(value2);
yield
console.log('结束');
}
//调用生成器函数，会给我们返回一个生成器对象,generator本质是一个迭代器，所以可以调用next
const generator = foo();
//开始执行第一段代码(第一个yield前面)
//打印一下返回值
console.log('1',generator.next());
//开始执行第二段代码(第二个yield前面)
console.log('2',generator.next());
//开始执行第三段代码(第二个yield后面)
console.log('3', generator.next());
The difference between dns iterative query and recursive query
Recursive query
In this mode, the DNS server receives the client request and must reply to the client with an accurate query result . If the DNS server does not store the query DNS information locally, the server will query other servers and submit the returned query results to the client.
Iterative query
to DNS server Another query method is iterative query. The DNS server will provide the client with other DNS server addresses that can resolve the query request. When the client sends a query request, the DNS server does not directly reply to the query result, but tells the client The client then submits a request to this DNS server, and the cycle continues until the query result is returned
.
There are both recursive and iterative queries in a dns query
Why design a virtual dom?
The first point is to reduce reflow and redraw, and minimize the overhead of multiple DOM operations. The
second point
is to prevent the real DOM from being directly operated in the framework
because a project is written by many people and everyone operates the DOM. , will cause conflicts, and the readability of the written code will be greatly reduced, so performance is only part of it. The core improves development efficiency through this architecture.
Then this virtual dom can develop many functions, such as SSR, and has cross-platform capabilities.
Two sides
What are the advantages of token?
The stateless
token itself contains all the information required for authentication, so that our server does not need to store session information, which obviously increases the availability and scalability of the system and greatly reduces the pressure on the server.
Preventing CSRF attacks
CSRF (Cross Site Request Forgery) is generally translated as cross-site request forgery and belongs to the field of network attacks. The reason for this attack is that in the Cookie + Session authentication method, the authentication data (session_id in the cookie) is automatically carried by the browser and sent to the server. With this feature, the attacker can attack by making the user mistakenly click Link to achieve attack effect. The token is added to the request as a dynamic parameter through the client's own logic, and the token will not be easily leaked. Therefore, the token has a natural advantage in CSRF defense.
What do Mysql indexes do?
It is equivalent to the table of contents of a book and can speed up data retrieval.
Imagine that if there are tens of thousands, hundreds of thousands or even millions of data in a table, the efficiency of a full table scan without indexing will be very...
//编码
new Buffer(String).toString('base64');
//解码
new Buffer(base64Str, 'base64').toString();
How to start a child process in node?
exec
execFile
spawn
fork
How to solve margin "collapse"?
1. Set a border for the parent box. After adding a border to the outer layer, the parent and child boxes are not truly aligned (can be set to transparent: border: 1px solid transparent);
2. Add overflow:hidden to the parent box;
3. Set the padding value for the parent box;
4. Add position: fixed to the parent box;
5. Add display: table to the parent box;
webpack loader execution order
webpack loads from right to left
What are the commonly used plugins for webpack?
html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
entry: 'index.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'index_bundle.js',
},
plugins: [new HtmlWebpackPlugin()],
};
From the above code, we can see that in fact, this plugin is a plugin that can complete what it does without configuration. The generated result is to automatically generate an index.html file based on the export, and then introduce us into index.html Packaged js file
uglifyjs-webpack-plugin
const HtmlWebpackPlugin = require('uglifyjs-webpack-plugin');
optimization: {
minimizer: [
new UglifyJsPlugin()
]
},
The uglifyjs-webpack-plugin plug-in is used to shrink (compress and optimize) js files. The minimum version used is: Node v6.9.0/Webpack v4.0.0. Generally, our current projects do not need to worry about this. After all, these two compatible versions are already It’s very low
. One thing we need to talk about here is optimization. This is also a configuration of webpack. Its function is optimization. By default, uglifyjs-webpack-plugin (webpack’s own) is used for compression and packaging, but we can configure this with Different compression plug-ins are used for customization. Minimizer is where we configure our custom plug-ins. The default is true.
What is the difference between Vite and Wbpack?
1. Webpack first packages and generates the bundle, and then starts the development server.
Vite first starts the development server, using the ESM capabilities of the new generation browser, without packaging, directly requesting the required modules and compiling them in real time.
2. Webpack HMR requires changing modules and related dependencies. When fully compiling
Vite HMR, you only need to let the browser request the module again, and at the same time use the browser's cache (source code module negotiation cache, dependent module strong cache) to optimize the request.
Kuaishou (three rounds of skills, one round of hr, lock hc)
one side
201 and 403 status codes?
The English name of the 201 status code is Created, which means it has been created. A new resource was successfully requested and created, and the request has been implemented.
403 Forbidden is a status code (Status Code) in the HTTP protocol. It can be simply understood that you do not have permission to access this site.
function a(name) {
this.name = name
return null
}
let b = new a('123');
console.log(b);
Returning null during new will not affect the object returned by new.
Algorithm: flipping the binary tree
Kuaishou Ermian
Vite is so popular, why isn’t it more popular?
Many browser versions of the ESmodule technology used by Vite do not support this technology.
How many processes does it take to open a page in Chrome? What are the differences?
From closing the browser to starting it, and then opening a new page, at least: 1 browser process, 1 GPU process, 1 network process, and 1 rendering process, a total of 4 processes;
Form of multiplex debug?
A waterfall is a side-by-side flow form
Kuaishou three sides
Do the questions
Didi
Didi side
The table creation process of the data analysis function in the e-commerce project
is to build a large table according to the product type, and then create some sub-tables in this large table, such as the detailed information of the product (price, number of buyers, time, etc.) Disadvantages of instanceof: cannot be
checked number, boolean, string types
so use Object.prototype.toString.call()
Method of converting object to map
var o = {
name: '123',
sge:'123'
}
console.log(new Map(Object.entries(o)))
//Map(2) { 'name' => '123', 'sge' => '123' }
Opinions on the advantages and disadvantages of node Advantages
:
1. Based on Javascript, the threshold for popularization is low, and JavaScript is simpler than other enterprise-level programming languages, so front-end programmers can quickly get started using Node for back-end design
2. Node is event-driven and non-blocking, so it is very suitable for handling concurrent requests, so proxy servers built on Node perform much better than servers implemented by other technologies (such as Ruby).
Disadvantages:
1. Not suitable for computing-intensive applications;
2. Not suitable for large-memory applications;
3. Not suitable for large-scale synchronization applications.
Let’s talk about node’s API
/*__dirname获取当前文件所在的路径 */
/* __filename获取当前文件所在的路径和文件名称 */
console.log(__dirname);
console.log(__filename);
enents module
fs module
path module
request module
const fs = require('fs');
const content = '王威是傻逼是我儿子'
//参数1是地址，参数2是内容，参数3是错误时的回调函数,flag:'a'代表往文件里面追加内容
fs.writeFile('./abc.txt', content,{
flag:'a'}, err => {
console.log(err);
})
//文件的读取,{encoding:'utf-8'}是读取时的编码
fs.readFile('./abc.txt', {
encoding:'utf-8'}, (err, data) => {
console.log(data);
})
Lalamove
Browser cache appears after vue is packaged multiple times
Problem: Every time a package update version is uploaded to the server, there will occasionally be logic that the code has not been updated and is still the old code. This means that there is a caching problem in the browser.
Analysis:
When packaging for the first time, a bundle.js is generated, the bundle.js file is introduced in index.html, and when the page is loaded, it will cache the bundle.js locally in the browser.
This is the browser's caching mechanism. When we repackage, since the file name is still bundle.js , the browser may obtain it from the cache , because the browser finds that this bundle.js is in the browser's cache, and if it is in the cache, it goes to the cache. Get the last packed result from the cache.
Solution:
The reason why there is cache is because the file name or URL name is the same. Only if they are the same, the browser will be lazy and get the resources from the cache. If the URL name or file name is different, the cache will definitely not be used. The browser will not use the cache. will be treated as a new resource.
The export file name specified when packaging is different every time.
There is a hash thing in webpack:
hash can save a different value every time.
filename: "bundle.[hash].js", set this way, the file name will be different every time the package is generated.
Method 2:
Add in the entry file index.html:
<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">
The caching problem was solved during the upgrade, but it directly caused users to re-request the server every time they access your program . All static resources cannot be cached , which wastes traffic and increases network pressure.
Method 3:
If you use Ngnix:
just add the following configuration
location = /index.html {
add_header Cache-Control "no-cache, no-store";
}
How to share cookies in single sign-on system
In the case of the same domain:
use the two attributes of the cookie
domain-domain
. By setting this attribute, multiple web servers can share cookies. The default value of the domain attribute is the host name of the server that created the cookie. The domain of a cookie cannot be set to a domain other than the domain where the server is located.
path-path
indicates which files on the server that created the cookie have permission to read the cookie. The default is /, which is the root directory of the server that created the cookie.
For example:
allow the server located at a.taotao.com to read the cookie value set by b.taotao.com. If the cookie created by the page b.taotao.com has its path attribute set to "/" and its domain attribute set to ".taotao.com" , then all web pages located at b.taotao.com and all pages located at a.taotao .com web pages, as well as web pages on other servers located in the taotao.com domain, can access (or obtain) this cookie.
In the case of different domains:
If it is in different domains, cookies are not shared. Here we can deploy an authentication center to use an independent Web service that specifically handles login requests. When
logging in to project a for the first time, we found that in project a There is no token in the sessionstorage, so it jumps to the authentication center. If the authentication center finds that the user has not logged in, it returns to the login page and waits for the user to log in. After the login is successful, the authentication center records the user's login status and writes the token to the cookie (note this )The cookie belongs to the authentication center and cannot be accessed by the application system ), and then the authentication center will jump back to the target URL , and generate a Token before the jump , splice it behind the target URL, and send it back to the target application system . The application system After getting the Token, write the Token into the sessions storage. When you visit a again and find that there is a token in the sessions storage in the a project, it will not jump to the authentication center.
Now visit project b. Because the previous visit to project a has been stored in the cookie of the authentication center, you will directly get the Token and splice it back after the target URL.
This implementation method is relatively complex, supports cross-domain, has good scalability, and is the standard practice for single sign-on.
The second method:
This implementation method is completely controlled by the front end and requires almost no back-end participation. It also supports cross-domain
single sign-on and can be completely implemented on the front-end. After the front end gets the Session ID (or Token), in addition to writing it into its own LocalStorage, it can also write it into the LocalStorage in multiple other domains through special postMessage combined with iframe.
// 获取 token
var token = result.data.token;
// 动态创建一个不可见的iframe，在iframe中加载一个跨域HTML
var iframe = document.createElement("iframe");
iframe.src = "http://app1.com/localstorage.html";
document.body.append(iframe);
// 使用postMessage()方法将token传递给iframe
setTimeout(function () {
iframe.contentWindow.postMessage(token, "http://app1.com");
}, 4000);
setTimeout(function () {
iframe.remove();
}, 6000);
// 在这个iframe所加载的HTML中绑定一个事件监听器，当事件被触发时，把接收到的token数据写入localStorage
window.addEventListener('message', function (event) {
localStorage.setItem('token', event.data)
}, false);
Can token be placed in cookie?
Yes, but not safe
Renewal of token
Option 1 returns a new token for each request.
Assume that the issuance time of a token is 12:00 and the demand is 2h. It will expire if no request is made. Then set the validity period to 2h, then each request will replace a token with a new token with a duration of two hours . If no request is made within 2h, the token received from the last request will expire and you will need to log in again. Just keep signing and you can keep using it.
The implementation idea of this method is very simple, but the overhead is relatively high.
Option 2 is implemented using two tokens
. As shown in the figure, two Tokens are generated. Access_token is responsible for back-end business verification, and refresh_token is responsible for renewal verification. Therefore, logically each performs its own duties and does not take off its pants and fart.
Log in and
distribute access_token and refresh_token. The expiration time of access_token is 1 hour and the expiration time of refresh_token is 2 hours, and the load contents of the two are consistent.
If the subsequent request
access_token has not expired, the backend will execute the business normally. When the access_token expires, the refresh_token will be verified. If the refresh_token has not expired, it will be renewed, that is, new access_token and refresh_token will be sent to the client.
Disadvantages of ts
It is not perfect when combined with some libraries,
which increases the learning cost and the writing method is cumbersome.
Solution to the conflict between projects using ts and js libraries
Configure the configuration file of ts to ignore the type constraints on this library
Byte-Finance Department
One side: In the process of the evolution
of the concept of service governance
from monolithic architecture to microservice architecture, due to the substantial increase in the number of fine-grained microservice applications, service governance needs such as service discovery, load balancing, circuit breaker and current limiting among microservices have become increasingly evident. Keep improving.
Retry:
Automatic retry is also a common configuration for inter-service calls in microservices. When the upstream service returns a specific type of error code, the call can be retried. Since errors can be caused by temporary environmental jitters and generally recover quickly, retrying is a useful strategy. Retry is a direct and simple method to solve some abnormal requests, especially in scenarios where network quality is unstable, it can improve service quality. However, improper use of retries can also cause problems. In certain circumstances, retries may never succeed, which increases latency and performance overhead.
Circuit breaker:
There are dependent calls between multiple services. If a service cannot respond to requests in time, the fault will propagate to the source of the call, which may cause large-scale cascading failures in the cluster and render the entire system unavailable. To deal with this situation, a circuit breaker strategy can be introduced. In order to prevent the expansion of the fault scope, the basic logic of fusing is to isolate the fault.
Current limiting:
The main purpose of circuit breakers is to isolate faults. In addition to internal problems in the system service, the cause of the fault may also be that the request volume exceeds the limit of the system's processing capacity. Subsequent new requests will continue to increase the service load, resulting in A service error occurred due to resource exhaustion. The purpose of current limiting is to reject excessive request traffic and ensure that the overall service load is at a reasonable level.
The difference between micro front-end and traditional b-end projects
transforms Web applications from a single monolithic application into an application in which multiple small front-end applications are aggregated into one. Each front-end application can be run independently, developed independently, and deployed independently. (It is recommended to understand microservices first)
Advantages after micro-front-end transformation
1. It can keep pace with the times and continuously introduce new technologies/new frameworks, regardless of the technology stack
2. Partial/incremental upgrades, replacing old applications bit by bit, while continuously providing new functions to customers without being hindered by a monolithic architecture.
3. Easier to maintain, the
implementation principle of independently deploying the qiankun framework
registerMicroApps
registerMicroApps is used to register sub-applications based on the information array of the incoming sub-applications; start is used to start these sub-applications.
registerMicroApps first traverses the array of registered sub-applications, and then calls the registration method of single-spa to register. The resource is loaded through html entry. html entry
TML
Entry is implemented by the import-html-entry library and is requested through http. Load the first screen content of the specified address, that is, the html page, then parse the html template to obtain template, scripts, entry, styles, then remotely load the style content in styles, and replace the commented out link tag in the template with the corresponding style element.
Then expose a Promise object to the outside, and finally execute the js script through execScripts.
{
// template 是 link 替换为 style 后的 template
template: embedHTML,
// 静态资源地址
assetPublicPath,
// 获取外部脚本，最终得到所有脚本的代码内容
getExternalScripts: () => getExternalScripts(scripts, fetch),
// 获取外部样式文件的内容
getExternalStyleSheets: () => getExternalStyleSheets(styles, fetch),
// 脚本执行器，让 JS 代码(scripts)在指定 上下文 中运行
execScripts: (proxy, strictGlobal) => {
if (!scripts.length) {
return Promise.resolve();
}
return execScripts(entry, scripts, proxy, {
fetch, strictGlobal });
}
}
The proxy sandbox of js is to solve the pollution of single-spa.
Why does string have a length attribute?
As we all know, the String() constructor can create a string instance, and this instance has a length of length.
When a string defined by a literal is used with its length property, it actually does the following operations:
Creates an instance of the String type
using the instance. How to achieve asynchronous destruction
of instance js as a single thread? The browser is a multi-threaded CSS handwritten mahjong five-line flex layout within a flex layout. The detail is that after flex switches the main axis direction, justify-content and align-items will also switch directions, so only the innermost elements need to be set with justify-content and align. -items is enough, the outermost main box does not need to be set
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.main {
width: 300px;
height: 400px;
border: 1px solid black;
display: flex;
}
.left {
width: 100%;
height: 500px;
flex: 1;
background-color: aqua;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.center {
width: 100%;
height: 500px;
flex: 1;
background-color: pink;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.right {
width: 100%;
height: 500px;
flex: 1;
background-color: chartreuse;
display: flex;
align-items: center;
justify-content: center;
}
.line {
width: 10px;
height: 100px;
background-color: black;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="main">
<div class="left">
<div class="line"></div>
<div class="line"></div>
</div>
<div class="center">
<div class="line"></div>
<div class="line"></div>
</div>
<div class="right">
<div class="line"></div>
</div>
</div>
</body>
</html>
By default, flex-grow expands the remaining space left and right. How to use flex-grow to expand up and down?
writing-mode: vertical-lr;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.main {
width: 500px;
height: 500px;
display: flex;
writing-mode: vertical-lr;
}
.item {
flex: 1;
height: 500px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="main">
<div class="item">111</div>
<div class="item">111</div>
<div class="item">111</div>
</div>
</body>
</html>
Zuishi Vue responsive principle (two-way binding) source code
Why are the data packets transmitted from the application layer to the network interface layer getting larger and larger?
Because the data packet is in the process from the application layer to the physical layer, we call it the data encapsulation process.
Why is udp faster than tcp?
TCP has congestion control, timeout retransmission, and confirmation response mechanisms to ensure reliable transmission of data packets.
Congestion control algorithm
Slow start: It means that the connection to the network has just been added, and the speed is increased bit by bit, so as not to fill up the road as soon as it starts.
Congestion avoidance: When the congestion window cwnd reaches a threshold, the window size no longer increases exponentially but linearly to avoid network congestion caused by excessive growth.
When cwnd (congestion window) is less than or equal to the ssthresh threshold, TCP adopts the slow-start algorithm. When this threshold is exceeded, TCP will switch to the congestion avoidance algorithm.
Fast retransmission: When packet loss occurs, the receiving end resends the last repeated acknowledgment received. The sender receives a total of three consecutive repeated acknowledgments of message segments, and the message segments after the immediate retransmission are quickly recovered
: After receiving 3 duplicate confirmations, do not start slow start and perform fast recovery.
What does the threshold value depend on?
When congestion occurs, sshthresh will be set to half the current window size.
Why is udp faster than tcp?
1. In order to ensure reliability, TCP adds 3 handshakes and 4 waves, complex congestion control, and flow control, which further increases the delay of network transmission.
2. Using TCP, once packet loss occurs, TCP will cache subsequent packets and wait for the previous packet to be retransmitted and received before continuing to send. The delay will become larger and larger. Based on UDP, which has strict real-time requirements In this case, a custom retransmission mechanism is adopted to send packets as soon as they are available, which can minimize the delay caused by packet loss and minimize network delay.
3. Because the receiver needs to guarantee the order, the previous packet has not arrived and will not continue to process subsequent packets.
4. The size of the TCP header further increases the amount of data transmitted.
Side two:
1. Why does the project adopt a micro-front-end architecture?
To put it directly, the old project is a base. I developed the corresponding sub-application transformation plan.
2. Let’s talk about the loading method of sub-applications.
How does the browser request the index.html of the sub-application?
Are the sub-application and the main application in the same domain? Will there be cross-domain issues?
Configure the devserver proxy locally to solve cross-domain problems. What about online?
3. Speaking of html entry, how is the proxy sandbox implemented?
4. Shadow dom is used in css scope, right? If the browser does not support shadow dom, how to achieve isolation of css?
5. How is the communication between the subsystem and the base done?
Is initglonalstate a two-way communication?
What is initglonalstate based on?
Are the base and subsystem managed by the same state?
6.jwt process
7.Session ID and cookie authentication methods
8.Why are cookies insecure? Let’s talk about csrf.
Since cookies are insecure, why do many companies use this login method instead of sessionStorage plus token?
9. Now that the session ID method is flawed for distributed system authentication, can you talk about a solution for distributed systems?
10. What parameters are passed to implement the paging function?
How to write the sql statement for back-end paging
Code 1 (all the answers are wrong, I feel numb)
<body>
xxx
<script>
window.onload = function () {
document.body.innerHTML = 'yyy';
alert(document.body.innerHTML);
console.log(document.body.innerHTML)
}
</script>
</body>
What does the page show now? What does the alert display? What does console.log() print?
Code 2
uses js to implement an input two-way binding (oninput event can be combined with defineproprty)
11. How to implement async and await?
Code 3
uses async and await to solve the callback hell problem.
Optimize the amount of code, (use factory mode to create functions)
Code 4
implements a style, the less code the better (a square has three points, the first one is at the top left, the second The first one is in the middle, the third one is in the lower right)
Examine the align-self attribute and align-items attribute of the flex layout. Look
at a picture, there are more than a dozen English items, it seems to be a performance testing chart, explaining the meaning and optimization of each item.
1. How to reduce httprequest requests?
2. CDN principle
3. The difference between cache and strong cache. When does etag change?
4. Is the css file image js file an xhr request?
5. Why can’t src and herf be empty?
6. Why should css be written above?
7. Webpack’s gizp compression, what does it compress?
8. Redraw and reflow
9. Why should css and js be made into external links
10. DNS analysis
11. How to redirect http requests
12. How to reduce the size of cookies and optimize cookies
13. Cross-domain solution, if the client has a.com and b.com, and the server is c.com, how to configure Access-Control-Allow-Origin?
Sanmian:
What classes are offered in the school?
1. Talk about the tcp protocol
2. How does congestion control do this?
Where is congestion control used in actual scenarios?
Have you ever done tcp programming?
The interviewer said he sent me a message and asked me how to parse the data?
According to the process in the figure, for example, we are browsing site B. After the TCP connection is established, the client's application layer protocol can send a byte stream without special format to TCP, and TCP will package these bytes into segments. , the size of the message segments depends on the situation. These message segments will be encapsulated into IP datagrams (IP Datagram) by the IP of the network layer, and then transmitted to the server through the network. The subsequent operation of the server is equivalent to the reverse operation of the client. First split the TCP message segment from the IP datagram, then restore the TCP message segment into a byte stream and send it to the upper application layer protocol. The process of sending data from the server to the client is the same, and the roles of the sender and receiver can be interchanged.
What is the form of the content transmitted by tcp
? 3. What is the concept of service governance?
How to do fuse?
4. Micro front terminal application transformation?
How to change the render function?
5. Talk about the implementation of vue router
6. How to compile vue files into js
vue-loader: parse .vue into object parts through parser, which contain style, script and template respectively. The corresponding part can be returned according to different queries.
Algorithm: Compare the version number and
ask
1. How many developers are there in the department?
2. Which skills will this position focus more on at work?
3. If I can join the team, what does the company think about my personal expectations and the future development of this position?
Meituan-Search
One side:
30-minute internship content
Eight-minute 20-minute
front-end concurrent request implementation
The difference between tcp
and udp
http
vue life cycle
Which hook function the virtual dom is generated in
Parent-child life cycle sequence
Paradigm of relational database
Algorithm: 10s
maximum of binary tree Depth
rhetorical question 10min
Byte-data recommended architecture
One side:
self-introduction ,
the background of micro-front-end transformation
, the biggest challenge in the transformation process
, for the react project, change the Vue
dynamic rendering routing menu
qiankun's sandbox ,
the implementation of the sandbox,
the shortcomings of the proxy sandbox,
the implementation of shadow dom,
other css isolation solutions,
webpack plug-in Isolate css and
go online. Let
’s talk about the most impressive es6. Let’s talk about the security policy of
sso single sign-on
cookie.
The difference between vue setup and options api. The
principle of nextTick.
The refresh of vue history mode. The reason for 404 rendering
and adding key.
Why not use index as the key? Key
http request status code
Cross-domain solution
Divided into local and online (bypass)
cookie security policy
Negotiate cache
Code 1
writes a function to return the data type of the current incoming parameter in the form of a string
Code 2
new Array(10) What does .map((item,i)=>i+1) return?
On this basis, it is changed to return an array of 1-10.
On this basis, the array is shuffled.
Code 3
sorts an object array according to the size of the score.
[{age:2,score:88},{age:22,score:45},{age:21,score:95},{age:42,score:52}Code 4 let a = 10;
function
foo
( ) { console.log(a) }
function bar() { let b = 20; foo() } foo() Code 5 string arrangement (pointing to offer38) Side 2 (50min): Self-introduction to the difference between vue2 and vue3 Is vue3 compatible with the syntax of vue2? What are the rules for service governance project introduction (internship content) ? Gains from the internship: Write code (40min) Code (15min) Implement a quick queue Optimize it Optimize the selection of hubs Explain the idea of quick queue Code 2 (25min) Write a calculator Enter '5+9/2-10 45+6 ', return the operation result. Write a calculator with priority. Enter '5+9/2-10 (45+6)', and return the operation result.
Baidu-Health R&D approved in advance
On the one hand,
self-introduction to
the differences between react and vue (responsiveness, data flow, writing, ecology)
mvc->mvvm transition, comparison of mvc and mvvm (vm weakens the concept of c, and does not replace c, but is abstracted from c) Business logic makes development more efficient. mvvm is a two-way data flow, mvc is one-way) The
most challenging and difficult things in recent projects
are the implementation of virtual scrolling (offsetTop calculation of start index)
why not use an external library? The
reason why hook appears in react The reason why fiber architecture
appears Management) Redux data flow , execution timing of middleware (before dispatch to reducer) Principle of react-thunk (rewrite and upgrade dispatch, support function incoming, internal judgment if it is a function, mobilize it) Oral use of middleware to create a log Redux hooks (useSelector, useDispatch) usage scenarios of useReducer (the state calculation logic is complex and can be optimized using useReducer) What problems does the micro front end solve (how to upgrade the old framework class library smoothly? Incremental upgrade, technology stack, code splitting, modules Decoupling) Micro front-end implementation Disadvantages of module federation (version control during iteration requires more attention, upgrades of the exporting party will cause upgrades of both users. Compatibility)
How to achieve transparency in css
Algorithm: square root sum (integer, decimal)
Side 2:
Self-introduction:
Xiaohongshu has done difficult things as an intern;
talk about the projects done in Byte;
long list performance optimization;
cross-domain methods
; differences between anti-shake and throttling, application scenarios, and how to implement it;
introduce one of the most familiar design patterns
for object-oriented design. Let’s talk about the principles of polymorphism.
What back-end languages have you learned
? Write a generator function, the return value is a generator object, and the internal is a Fibonacci sequence. The
difference between iteration and recursion. The
benefits of iteration over recursion.
The development process at work. , who are involved in each step, and what is the output of each step?
Open question: How to cultivate and embody owner consciousness
. Rhetorical question