You are given an array of points representing points on a 2D plane, where points [i] = [xi, yi].
The cost of joining the points [xi, yi] and [xj, yj] is the Manhattan distance between them: | xi - xj | + | yi - yj |, where | val | represents the absolute value of val.
Please return the minimum total cost of connecting all points. All points are considered connected only when there is one and only one simple path between any two points.
Vue3 has been released for a while, and although it is still in beta testing, some features can also be understood in advance. This time, let’s take a look at the combined API of one of the most important features, something similar to React Hooks.
If you know Vue2 or have read my previous analysis of Vue2 source code, there is a conclusion I can throw out now:
That is, Vue3’s combined API itself does not use any essentially new features, or a set of reactive principles, but provides a new syntax that allows you to strongly correlate some columns of data, prop, compute, method, life cycle function encapsulated together, and finally the data that needs to be exposed is returned through an object, and the rest is no different from vue2. You can use this to call or use it directly.
The main content of the article comes fromVue3迁移指南-组合式APIIn the middle, it will be reorganized and explained according to its own ideas.
Recently, I read an article about the principle of VPN and found that its connection establishment process is somewhat similar to HTTPS, and both of them encrypt data for communication.
Record the VPN connection establishment process here. If you want to compare the difference with HTTPS, you can see my other blog: https://sunra.top/posts/ ‘51308784’/.
Most of this week has been spent developing an Electron-based client.
Electron has a built-in chrome kernel, so it allows us to develop clients like a website.
During the development process, we encountered a problem that our project needed to load AI models locally and perform calculations.
Have seen my introduction浏览器结构那篇文章You should know that under the current chrome structure, the network process and the rendering process are completely separate, so loading the model will not pend the rendering process, so I don’t care.
But it turns out that my page still has cards.
So I recorded it with the Performance panel of the developer tools, and it was found that it was the recognition function after the model was loaded. It was a Promise, a microtask, and actually a coroutine, and it was a CPU-intensive coroutine.
I have always told my junior brothers and sisters that if you don’t learn the meaning of out-point philosophy, you can’t understand its principles. It only stays on the surface, what others say is what they say, and it always stays at the level of “equipment”, and you can’t draw inferences from one another.
Sometimes we can easily understand a knowledge point in depth, and sometimes we need to contact other knowledge points, you can summarize the common parts between them, that is, the principle.
The content of this blog is also like this, our junior high school math knowledge, mathematical induction. But not only mathematical induction, but also how to verify it with our usual programming and find the commonalities between the two.
This blog seems simple, but what I want to convey is a feeling, a way of thinking.
Recently, when reviewing the configuration of cookies, I found a new configuration called sameSite.
The Chinese translation of this sameSite is same site.
Let’s take a look today at what this same site is, what is the difference between it and the same origin, and why cookies clearly have domain and path to specify the scope and need the sameSite attribute.
In the previous articles, we explained scope and closure from the perspective of the call stack and execution context, and at the same time talked about the difference between scope and this. Now the most difficult concepts to understand in JavaScript are only a prototype chain.
If we have read “JavaScript Advanced Programming”, we should have an impression of the prototype chapter. It has a very complex diagram through which the “proto”, “prototype”, and “constructor” of JavaScript are explained.
At the beginning of reading that book, I seemed to understand this part, and finally took this opportunity to reorganize to figure it out.
The content of this blog is still divided into two parts:
In the previous article, we explained the principle of JavaScript’s scope chain and closure through the call stack execution context.
This time we will talk about another very important concept in JavaScript, this.
There are two main points in this article, first, what is this thing, and second, how does this point to judgment.
In上一篇关于作用域的文章We talk about scope through the call stack.
Whenever we call a function, we create an execution context for that function in the call stack. So far we know that there is a variable environment for storing variables declared through var, and a lexical environment. The lexical environment, in turn, is a stack that places the variables in the function declared through let and const in different levels of block-level scope **.
Based on the above variable environment and lexical environment, we can understand how to find the correct variable in the execution context of a function.
What if the variable we need is not actually in the current execution context, but in the execution context at the previous level? How do we determine which execution context is at the previous level?
This question touches on our topic today: scope chains.
Understanding scope chain is the basis for understanding closures, which are almost ubiquitous in JavaScript. At the same time, scope and scope chain are the foundation of all programming languages. Therefore, if you want to learn a language thoroughly, scope and scope chain must be inseparable.
Whether you want to design high-performance web applications or optimize existing web applications, you need to understand network processes in browsers, page rendering processes, JavaScript execution processes, and web security theory.
This article briefly introduces the architectural evolution of browsers.