Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to achieve web front-end resources incremental update", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "how to achieve web front-end resources incremental update" bar!

I encountered an interesting question in the school recruitment interview before:

"suppose there is a super-large Web project, and the JS source code is compressed and surpasses 10MB (how can there be such a big =.), it is unacceptable to require users to reload JS after each update, so how to solve this problem from an engineering point of view?"

I immediately came up with several solutions, such as:

Extract the basic infrequently updated modules as a long-term cache

If you use a framework that supports server-side rendering such as React or Vue2.0, use server-side rendering and then load JS in blocks step by step

If it is Hybrid development, you can consider using local resource loading, similar to the idea of "offline package" (I encountered this every day during my internship at Tencent).

Later, under the guidance of the interviewer, I came up with a "incremental update" solution, which simply does not need to reload resources when the version is updated, but only needs to load a small piece of diff information, and then merge it into the current resources, similar to the effect of git merge.

1. The client uses LocalStorage or other storage solutions to store a copy of the original code + timestamp:

{timeStamp: "20161026xxxxxx", data: "aaabbbccc"}

2. Send this timestamp to the server each time the resource is loaded

3. The server identifies the version of the client from the received timestamp, and diff the version of * once to return the diff information of both:

Diff ("aaabbbccc", "aaagggccc"); / / suppose our diff message reads: / / [3, "- 3", "+ ggg", 3]

4. After receiving the diff information, the client updates the local resources and timestamp to * to achieve an incremental update:

MergeDiff ("aaabbbccc", [3, "- 3", "+ ggg", 3]); / / = > "aaagggccc"

Practice

Let's implement the core idea of this scheme, which is simply to implement the two functions diff and mergeDiff.

Today I found a good diff algorithm:

GitHub-kpdecker/jsdiff: A javascript text differencing implementation.

We just need to call its diffChars method to compare the difference between the two strings:

Var oldStr = 'aaabbbccc'; var newStr =' aaagggccc'; JsDiff.diffChars (oldStr, newStr); / / > / [{count: 3, value: 'aaa'}, / / {count: 3, added: undefined, removed: true, value:' bbb'}, / / {count: 3, added: true, removed: undefined, value: 'ggg'}, / / {count: 3, value:' ccc'}]

The diff information above is a little redundant, so we can customize a more concise representation to speed up the transmission:

[3, "- 3", "+ ggg", 3]

Integers represent the number of characters that do not change, strings that begin with "-" represent the number of characters that have been removed, and strings that begin with "+" represent newly added characters. So we can write a minimizeDiffInfo function:

Function minimizeDiffInfo (originalInfo) {var result = originalInfo.map (info = > {if (info.added) {return'+'+ info.value;} if (info.removed) {return'-'+ info.count;} return info.count;}); return JSON.stringify (result) } var diffInfo = [{count: 3, value: 'aaa'}, {count: 3, added: undefined, removed: true, value:' bbb'}, {count: 3, added: true, removed: undefined, value: 'ggg'}, {count: 3, value:' ccc'}]; minimizeDiffInfo (diffInfo); / = >'[3, "- 3", "+ ggg", 3]'

The client receives the simplified diff information and generates * resources:

MergeDiff ('aaabbbccc',' [3, "- 3", "+ ggg", 3]'); / / = > 'aaagggccc' function mergeDiff (oldString, diffInfo) {var newString =''; var diffInfo = JSON.parse (diffInfo); var p = 0; for (var I = 0; I < diffInfo.length; iTunes +) {var info = diffInfo [I] If (typeof (info) = = 'number') {newString + = oldString.slice (p, p + info); p + = info; continue;} if (typeof (info) = =' string') {if (info [0] ='+') {var addedString = info.slice (1, info.length) NewString + = addedString;} if (info [0] ='-') {var removedCount = parseInt (info.slice (1, info.length)); p + = removedCount;} return newString;}

Actual effect

If you are interested, you can run this directly:

GitHub-starkwang/Incremental

Use the create-react-app gadget to quickly generate a React project, randomly change two lines of code, and then compare the old and new versions after build:

Var JsDiff = require ('diff'); var fs = require (' fs'); var newFile = fs.readFileSync ('a.jsgiving,' utf-8'); var oldFile = fs.readFileSync ('b.jsfolk,' utf-8'); console.log ('New File Length:', newFile.length); console.log ('Old File Length:', oldFile.length); var diffInfo = getDiffInfo (JsDiff.diffChars (oldFile, newFile)) Console.log ('diffInfo Length:', diffInfo.length); console.log (diffInfo); var result = mergeDiff (oldFile, diffInfo); console.log (result = = newFile)

Here are the results:

You can see that the code after build has more than 21w characters (212KB), while the diff information is quite short, only 151characters, which is more than 1000 times smaller than reloading the new version (of course, I have only changed two or three lines of code here, small is natural).

Some problems that are not involved.

The above is just a realization of the core idea, and there are more things to consider in the actual project:

1. It is impossible for the server to recalculate diff for every request, so it is necessary to cache diff information.

2. Implementation of persistent storage on the client, such as LocalStorage, Indexed DB, Web SQL, or using the interface provided by native app.

3. The realization of fault tolerance, consistent proofreading and forced refresh between the user side and the server side.

Thank you for your reading, the above is the content of "how to achieve web front-end resource incremental update". After the study of this article, I believe you have a deeper understanding of how to achieve web front-end resource incremental update, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.