This article is an interview question, and not just an interview question

Throw brick

Just finished writing an interview topic on the article saw the nuggets of technology essay, just to catch up, on the number

Interview questions, in every technology in the community is a topic that it’s never out of style, like most people finish the interview question before the interview, wish all the interview questions are over, again say no useful, useful, of course, because most of the interview questions can help the interviewer, and brush the interview questions to improve technology accumulation and vision is also a real help, not just the interview useful

In fact, we all brush the interview questions before the interview, maybe several people to brush the interview questions before the interview are the same solution, this situation undoubtedly increases the difficulty of the selection of the interviewer, similarly, this is why not only large companies, small and medium-sized companies interview questions are more difficult, and even seriously does not meet the standard of one of the reasons. Every time people come back from the interview they will sigh that I may not be worthy of this position, this question is too difficult!

Also can’t blame those who come forward to test questions, because market above test questions more and more, want to identify a person’s true skill or some difficulty, so the face of the time can only go deep to ask, to screen out some people

This kind of situation is that we cannot avoid, unless there is no interview question solution on the Internet from now on, it is possible that the interview question difficulty coefficient will be relatively reduced

SO, we all read the same, the answer is similar, how to highlight our differences, or to start from the interview questions

Lead jade

First of all, what kind of questions do you like to find in an interview? It must be a database of interview questions collected and sorted by various bloggers. It is convenient and diverse, and there is no need to find fragmentary interview questions repeatedly on the Internet

Also is bad, actually such good benefit is can quickly understand questions often meet on market, the bad, the blogger in fact because of the space, answer the following questions are given the most compact (mean here, an interview, given the corresponding classical antithesis, and without too much related knowledge, and the interview process is the need of divergent thinking)

Want to highlight is different from that of others is simple, not only to brush the interview questions, each interview question has its unique significance, each brush an interview question, no matter how easily it, take care to take a look at this interview questions related technical post or document, so when asked about the interview questions are at least the interviewer at a divergent thinking can Pass away, You can also answer from multiple angles, not just the interview question

The other thing is that people are working on all kinds of complicated questions, which the interviewer may feel good about if they can answer, but not easy questions

Do not look down upon those simple interview questions, simple questions we answer are simple, but you should be able to answer very complex, high and low judgment

Can not say too open, need oneself understand, hey hey

I also usually brush through the interview questions to improve my vision and see how deep the water is in the big front end industry.

These days, I can see a question in the interview post of Ali posted by some bloggers, which is the title of this article. In fact, it can be regarded as an example

You call it difficult? You can say a few things at the beginning of your career

So it’s not hard? When I first saw it, I thought about it carefully. If I went to an interview and was asked this question, obviously the answer in my mind would not highlight that I was better than others

So I wrote this article after thinking about how to answer

Return to the chase

What is the difference between applets and H5?

Parsing the topic

Small program and H5 difference, first of all we want to see this question ask the focus of which (popular is to think about this question to test is what)?

If you want to dig you understanding of H5, I don’t think need so ask, and ask the difference between small program before, and both are relatively small procedure is relatively new, clear priorities in this small program, through the comparison with the H5 to dig your knowledge of small programs, then the answer will focus on small program this divergence, will make the interviewer feel, well, This kid knows a thing or two about small programs

Next, I will focus on small programs to try to answer this question from all aspects of comparison

Operating environment

From the perspective of running environment, the host environment of H5 is a browser. As long as there is a browser, it can be used, including web-view components in APP and web-view components provided by small programs

Small programs are different. They run on specific mobile software platforms (Wechat/Alipay/Bytedance/Baidu/QQ, etc.).

Take wechat applet for example, it is a built-in parser based on the kernel reconstruction of the browser. It is not a complete browser. The official document emphasizes that the window object and document object commonly used in the browser cannot be used in the script, that is, there is no DOM and BOM related API. This one kills JQ and some NPM packages that rely on BOM and DOM

Operation mechanism

H5 running is a web page running, here is not more described

Small program or wechat small program for example

Start the

  • If the user has opened a small program, in a certain period of time to open the small program again, at this time, there is no need to restart, just switch the background state of the small program to the foreground, the whole process is called hot start

  • If the user opens it for the first time or the small program is opened again after being destroyed by wechat actively, the small program needs to be reloaded and started, which is called cold start

The destruction

  • Only when the small program enters the background for a certain amount of time, or the system resources are too high, or you manually destroy, is the true destruction

System permissions

What is the most criticized aspect of the H5? H5 does not have enough system permissions, such as network communication status, data caching ability, address book, or some functions that apps have, such as Bluetooth, because it relies heavily on browser capabilities

It is still the example of wechat applets. These system-level permissions of wechat clients can be seamlessly connected with wechat applets, which is officially claimed to have the smooth performance of Native Apps

Development language

H5 development as we all know, standard HTML, CSS, JavaScript, all changes from its three swordsmen

Different applets (Wechat/Alipay/Bytedance/Baidu/QQ, etc.) have their own unique language

WXML and WXSS, the most commonly used micro channel applets, are all micro channel self-defined tags. The writing method in WXSS, JSON and JS files is slightly limited, and the official documents have clear usage introduction. Although it is easy to use, there are still differences

Different departments of small program development language are some differences, said this, to a digression

But the problem is that the technical standards for small programs are becoming more and more fragmented. Last September, the World Wide Web Consortium (W3C) addressed this problem in the industry. The white Paper on International Standardization of Small Programs, initiated by Alibaba and drafted jointly with W3C China and domestic and foreign manufacturers, was officially released (link)

In fact, ali is ready to lead the small program standard, Ali Baidu byte these enterprises are involved, but said that small programs are micro channel small program, micro channel is the big head ah, Tencent seems to have no reason for them, ha ha (aside, appropriate skin, such as feel inappropriate please contact me delete 😂)

The difference in development language leads to the problem of development cost

Development cost

Or say H5, develop a H5, what we need to consider, first of all development tools (vscode/webstorm/atom/sublim, etc.), the second is the development framework (Vue/React/presents, etc.), Then consider modular tools (Webpack/Gulp/Parcel, etc.), then UI libraries, various packages, and compatibility issues, which can be costly

This small program need not to think about the browser compatibility, and made an example WeChat applet, no compatibility problems, only need to look at the document written in WeChat development tools line, small program also stand out a lot of native APP component alone, in H5 simulation is needed to realize the function of small programs can directly call components, are encapsulated, You can also use translation frameworks to write applets. There are many UI library options, and applets should win out in terms of development costs alone

But small program again simple is also need to learn the process, pit certainly also more, because it is still in the process of gradually becoming stronger, after all, and H5 is not the same thing

Update mechanism

H5 words want how to update how to update, update after putting aside CDN/ browser cache what, basically update end refresh can see the effect

Small program is different, or wechat example, hey hey, wechat small program update what is the need to pass the audit

Moreover, after the developer releases a new version, it cannot immediately affect all users on the live network. The new version information should be distributed to users within 24 hours after the release

Small program each cold start, will check whether there is an updated version, if found a new version, will asynchronously download the new version of the code package, and at the same time with the client local package to start, so the new version of the small program need to wait for the next cold start will be applied, of course, wechat also has wx.getUpdateManager can do check update

Rendering mechanics

H5 is Web rendering, browser rendering

The host environment of wechat applet is wechat. The host environment provides a dual-thread model for executing various files of the applet: WXML file, WXSS file, JS file. What is the dual-thread model

The rendering layer and logic layer of the applet are managed by two threads each

  • Render layer: all tasks related to interface rendering are inWebViewThread execution, a small program there are multiple interfaces, so there are multiple rendering layersWebViewthread
  • Logic layer: A single thread executes JavaScript, and in this environment all the code for the business logic of the applet is executed, as shown in the figureJsCoreThread to runJSThe script
  • Both threads will pass through the wechat client (Native) in theWeixinJsBridageThe logic layer notifies the view layer of data changes, triggers page updates of the view layer, and the view layer notifies the triggered events to the logic layer for business processing

Small program rendering logic

  • In the render layer willWXMLTo convertjsObjects are virtualDOM
  • Will be virtual at the logical levelDOMObject generation realityDOMTree, render to the render layer
  • When the view has data to update, the logical layer calls the one provided by the applet host environmentsetDataMethod passes data from the logical layer to the rendering layer
  • After comparing before and after differences (DIff algorithm), the differences are applied to realDomTree, render the correct UI interface to complete the view update

Although the applet is rendered by Native, the applet also supports Web rendering, that is, web-view component, which loads H5 pages in web-view. When we develop the applet, we usually use hybrid. According to the specific situation, some functions are developed with Native code of small program, and some functions are realized by loading H5 page through Web-view. Native and Web rendering are mixed to achieve the optimal solution of the project

The last

Well, that’s it, it’s not much, but as an answer I think maybe five or ten minutes is enough, so it’s just a general idea, just give it a little bit, and then you have to give the interviewer a chance to ask, and he’s going to ask something that’s going to come out of what you’re saying

So you need to be in accordance with the above about the general content to see some related documents, at least to have some knowledge of the above things they spread out, will highlight the bright spots are actually render mechanism, there is also the point (where most can blow), and the interviewer can greatly divergence points is double thread/render here

Finally, this article is written fast, the content is personal understanding, may be a bit one-sided, if there is inappropriate or supplement, please also point out, discuss with each other, thank you

If it helps you, give it a thumbs up

Oh, there are, can add a friend add group communication together, the public number [not serious front end] also welcome to pay attention to yo 😄