CN105512324B - A kind of front-end module loader of packaging file local updating - Google Patents
A kind of front-end module loader of packaging file local updating Download PDFInfo
- Publication number
- CN105512324B CN105512324B CN201510962752.0A CN201510962752A CN105512324B CN 105512324 B CN105512324 B CN 105512324B CN 201510962752 A CN201510962752 A CN 201510962752A CN 105512324 B CN105512324 B CN 105512324B
- Authority
- CN
- China
- Prior art keywords
- javascript
- module
- dynamic
- java script
- static
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING OR CALCULATING; COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
-
- G—PHYSICS
- G06—COMPUTING OR CALCULATING; COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Data Mining & Analysis (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
- Information Transfer Between Computers (AREA)
Abstract
The present invention relates to a kind of front-end module loader of packaging file local updating, module loader includes static loading device and dynamically load device；The dynamically load device is made of front end loaders and backstage caching computation module DynamicJsServlet；The dynamically load device is to load Dynamic Java Script；The Dynamic Java Script is the relatively high JavaScript of renewal frequency；The static loading device is to load static JavaScript；The static JavaScript is the JavaScript infrequently updated；By static loading and dynamic combination, the local updating for being packaged script is indirectly realized.Front end loaders proposed by the present invention can make full use of the caching of browser, enough adapt to the regular variation of website, achieve the purpose that optimize web site performance and flow.
Description
Technical field
The present invention relates to network technique fields, load more particularly to a kind of front-end moduleization of packaging file local updating
Device.
Background technique
With the rapid development of Internet, front end exploitation becomes more and more important and complicated.Traditional front end script exploitation
The problems such as mode can bring naming conflict, file loading sequence to rely on, most website all introduces modular solution party
Case.Solution popular at present has AMD(Asynchronous Module Definition), CMD(Common
Module Definition), representative tool is requirejs and sea JavaScript respectively.
In traditional website, in order to solve the problems, such as that front end JavaScript script request quantity is excessive, it will usually
Multiple js file mergencess are a file, while carrying out the processing such as blank character, shortening variable name to this file, can be made in this way
The quantity and volume to call request is reduced, and improves the loading performance of front end.It introduces after modularization, requirejs etc. is provided
R. JavaScript works to carry out this.
But if a JavaScript file change, it will cause the JavaScript change after being packaged, browsing
The caching of device also will failure.In internet project, the update of website and the most short possibility of iteration just have a version for several days
It updates, the JavaScript quantity for being packaged merging may be tens or even up to a hundred, and such a JavaScript's changes
Dynamic to cause entirely to be packaged reloading for JavaScript, this not only affects performance and wastes flow.
In the prior art, applicant: Alibaba Group Holdings Limited has applied for " a kind of JavaScript file
Management method, device and system ", application No. is: 200910249840.0, which disclose a kind of JavaScript files
Management method, device and system, asked method includes the following steps: receiving and parsing through the JavaScript from client
It asks, obtains the JavaScript and request corresponding file array, file dependence knot is traversed according to the file array
Composition, search the JavaScript request corresponding JavaScript file and with the JavaScript text
There are the file sets of dependence for part；If find the JavaScript request corresponding JavaScript file with
And there are the file sets of dependence with the JavaScript file, then by the JavaScript file and institute
It states file set and is sent to the client.The invention only improves only the speed of page loading, accelerates the speed of page download
Degree.And whole loading problems are not resolved bring packaging file again after script file update.
Summary of the invention
It is an object of the invention to: the above-mentioned technical problems in the prior art are directed to, propose packaging file part more
New front-end module loader reaches saving flow so that can sufficiently utilize browser rs cache in script loading procedure
Optimize the purpose of performance.
The present invention is achieved by the following technical solutions: a kind of front-end moduleization load of packaging file local updating
Device, module loader include static loading device and dynamically load device；The dynamically load device is slow by front end loaders and backstage
Deposit computation module DynamicJsServlet composition；
The dynamically load device is to load Dynamic Java Script；The Dynamic Java Script is renewal frequency
Relatively high JavaScript；
The static loading device is to load static JavaScript；The static JavaScript is infrequently more
New JavaScript.
Further, the dynamically load device makes full use of the local cache local storage of browser, and described is dynamic
The caching computation module servelet on backstage is generated only by comparing it when state loader loads Dynamic Java Script
One resource identification tag corresponds to script to decide whether to allow browser to update.
Further, the combination of the static loading device and dynamically load device realizes the local updating for being packaged script indirectly.
Further, the building process for being packaged script is as follows:
Firstly, reading all JavaScript；
Secondly, the JavaScript of reading is classified, it is divided into Dynamic Java Script and static state JavaScript；
Again, the packing JavaScript of current programme is constructed；
It is packaged in JavaScript finally, the list of Dynamic Java Script is written to.
Further, the packing JavaScript of the building current programme is by static JavaScript according to traditional
Packing scheme is packaged, and Dynamic Java Script is added in Dynamic Java Script list.
Further, the Data Structures of the module file of the JavaScript include: ID, Deps, Url and Cache
Strategy；The ID is mark；The Deps is dependence array to be loaded；The Url is file path；It is described
Cache strategy be cache policy.
Further, the load and execution process of the module loader are as follows:
(1) load and execution is packaged JavaScript, and the packing JavaScript contains static JavaScript's
The list of code and Dynamic Java Script ID；
(2) module information of static state JavaScript is generated；
(3) Dynamic Java Script list is read；
(4) dynamically load device loads Dynamic Java Script；
(5) the Dynamic Java Script in local cache local storage is read；
(6) module information that the Dynamic Java Script in local storage generates Dynamic Java Script is executed；
(7) it is constructed between a module according to static JavaScript module information and Dynamic Java Script module information
Dependency tiee；
(8) according to the sequence execution module code of postorder traversal.
Further, the Dynamic Java Script module information includes Tag and Content；The Tag is service
Device end calculates the uniform resource identifier generated；The Content is file content.
Further, the implementation procedure of the dynamically load device are as follows: dynamically load device will need JavaScript text to be loaded
Part list and corresponding tag are sent to backstage caching computation module Dynamic Js Servlet, and backstage caches computation module
Dynamic Js Servlet uses hash algorithm, calculates the tag value of each JavaScript；Then compare this tag value with
Front end loaders are transmitted through the tag value come, if the equal JavaScript code that represents did not made modification, if unequal, and generation
Table JavaScript code modified mistake；For the JavaScript modified, by new tag value and JavaScript code
Content passes to front end loaders, and unmodified JavaScript need to only pass tag value back；Front end loaders receive information
Afterwards, the content modified is write back in local cache local storage.
In conclusion by adopting the above-described technical solution, the beneficial effects of the present invention are: the invention proposes a kind of offices
Portion updates the load mechanism of packaging file, and some JavaScript files infrequently changed are compressed using existing merging
Mode, the JavaScript for can often change pass through static loading using the local cache mode of dynamic calculating tag a kind of
It is combined with dynamic, indirectly realizes the local updating for being packaged script.Front end loaders of the invention can make full use of clear
It lookes at the caching of device, enough adapts to the regular variation of website, achieve the purpose that optimize web site performance and flow.
Detailed description of the invention
Examples of the present invention will be described by way of reference to the accompanying drawings, in which:
Fig. 1 is the schematic diagram of module loader of the invention；
Fig. 2 is that packing script of the invention constructs flow diagram；
Fig. 3 is the Data Structures table of JavaScript module file of the invention；
Fig. 4 is the load and execution procedure chart of module loader of the invention；
Fig. 5 is Dynamic Java Script module information data structure table of the invention
Fig. 6 is dynamically load implementation procedure schematic diagram of the invention.
Specific embodiment
All features disclosed in this specification or disclosed all methods or in the process the step of, in addition to mutually exclusive
Feature and/or step other than, can combine in any way.
Any feature disclosed in this specification (including any accessory claim, abstract and attached drawing), except non-specifically chatting
It states, can be replaced by other alternative features that are equivalent or have similar purpose.That is, unless specifically stated, each feature is only
It is an example in a series of equivalent or similar characteristics.
Embodiment, the r. JavaScript of currently popular require JavaScript are by all script files
A script is synthesized by order line, need to only load a JavaScript when load of front end browser.For one
In a large amount of JavaScript in website, the frequency that substantial portion of JavaScript updates may not be very high.
Therefore, this patent proposes a kind of scheme for distinguishing load, for most of JavaScript infrequently updated
Using existing scheme, the JavaScript relatively high for the renewal frequency of fraction is using a kind of new scheme.This small portion
We at it are Dynamic Java Script by point JavaScript, and load mechanism is known as dynamically load；It is corresponding most of without
The JavaScript often updated is known as static state JavaScript, and load mechanism is static loading.
The basic principle of dynamically load is the local cache (local storage) for taking full advantage of browser, and load is dynamic
The unique resource that backstage caching computation module Dynamic Js Servlet is generated by comparing it when state JavaScript
Mark (tag) corresponds to script to decide whether to allow browser to update.
By static loading and dynamic combination, the local updating for being packaged script is indirectly realized
As shown in Figure 1, a kind of front-end module loader of packaging file local updating, module loader includes static state
Loader and dynamically load device；The dynamically load device is by front end loaders and backstage caching computation module Dynamic Js
Servlet composition.
Specifically, the dynamically load device makes full use of the local cache local storage of browser, and described is dynamic
The caching computation module servelet on backstage is generated only by comparing it when state loader loads Dynamic Java Script
One resource identification tag corresponds to script to decide whether to allow browser to update.
Specifically, the combination of the static loading device and dynamically load device realizes the local updating for being packaged script indirectly.
Specifically, the building process for being packaged script is as follows:
Firstly, reading all JavaScript；
Secondly, the JavaScript of reading is classified, it is divided into Dynamic Java Script and static state JavaScript；
Again, the packing JavaScript of current programme is constructed；
It is packaged in JavaScript finally, the list of Dynamic Java Script is written to.
Specifically, the packing JavaScript of the building current programme is by static JavaScript according to traditional
Packing scheme is packaged, and Dynamic Java Script is added in Dynamic Java Script list.
Specifically, the Data Structures of the module file of the JavaScript include: ID, Deps, Url and Cache
Strategy；The ID is mark；The Deps is dependence array to be loaded；The Url is file path；It is described
Cache strategy be cache policy.
Specifically, the load and execution process of the module loader are as follows:
(1) load and execution is packaged JavaScript, and the packing JavaScript contains static JavaScript's
The list of code and Dynamic Java Script ID；
(2) module information of static state JavaScript is generated；
(3) Dynamic Java Script list is read；
(4) dynamically load device loads Dynamic Java Script；
(5) the Dynamic Java Script in local cache local storage is read；
(6) module information that the Dynamic Java Script in local storage generates Dynamic Java Script is executed；
(7) it is constructed between a module according to static JavaScript module information and Dynamic Java Script module information
Dependency tiee；
(8) according to the sequence execution module code of postorder traversal.
Specifically, the Dynamic Java Script module information includes Tag and Content；The Tag is service
Device end calculates the uniform resource identifier generated；The Content is file content.
Specifically, the implementation procedure of the dynamically load device are as follows: dynamically load device will need JavaScript text to be loaded
Part list and corresponding tag are sent to backstage caching computation module Dynamic Js Servlet, and backstage caches computation module
Dynamic Js Servlet uses hash algorithm, calculates the tag value of each JavaScript；Then compare this tag value with
Front end loaders are transmitted through the tag value come, if the equal JavaScript code that represents did not made modification, if unequal, and generation
Table JavaScript code modified mistake；For the JavaScript modified, by new tag value and JavaScript code
Content passes to front end loaders, and unmodified JavaScript need to only pass tag value back；Front end loaders receive information
Afterwards, the content modified is write back in local cache local storage
Particular embodiments described above has carried out further in detail the purpose of the present invention, technical scheme and beneficial effects
It describes in detail bright, it should be understood that the above is only a specific embodiment of the present invention, is not intended to restrict the invention.This
Invention expands to any new feature disclosed in the present specification or any new combination, and any new method for disclosing or
The step of process or any new combination.
Claims (7)
1. a kind of front-end module loader of packaging file local updating, it is characterised in that: module loader includes static adds
Carry device and dynamically load device；The dynamically load device is by front end loaders and backstage caching computation module
DynamicJsServlet composition；
The dynamically load device is to load Dynamic Java Script；The Dynamic Java Script is that renewal frequency is high
JavaScript；
The Dynamic Java Script module information includes Tag and Content；The Tag is that server end calculates generation
Uniform resource identifier；The Content is file content；
The implementation procedure of the dynamically load device are as follows: dynamically load device will need JavaScript file list to be loaded and correspondence
Tag be sent to backstage caching computation module Dynamic Js Servlet, backstage cache computation module Dynamic Js
Servlet uses hash algorithm, calculates the tag value of each JavaScript；Then compare this tag value and front end loaders pass
The tag value to come over, if unequal, represented JavaScript if the equal JavaScript code that represents does not make modification
Code modified mistake；For the JavaScript modified, new tag value and JavaScript code content are passed into front end
Loader, unmodified JavaScript need to only pass tag value back；After front end loaders receive information, by what is modified
Content writes back in local cache local storage；
The static loading device is to load static JavaScript；The static JavaScript infrequently updates
JavaScript。
2. the front-end module loader of packaging file local updating according to claim 1, which is characterized in that described
Dynamically load device makes full use of the local cache local storage of browser, and the dynamically load device loads dynamic
The caching computation module servelet on backstage is determined by comparing the Uique Resource Identity tag of its generation when JavaScript
It is fixed that browser whether is allowed to update corresponding script.
3. the front-end module loader of packaging file local updating according to claim 1, which is characterized in that described quiet
The combination of state loader and dynamically load device realizes the local updating for being packaged script indirectly.
4. the front-end module loader of packaging file local updating according to claim 3, which is characterized in that described to beat
Building process originally of binding foot is as follows:
Firstly, reading all JavaScript；
Secondly, the JavaScript of reading is classified, it is divided into Dynamic Java Script and static state JavaScript；
Again, the packing JavaScript of current programme is constructed；
It is packaged in JavaScript finally, the list of Dynamic Java Script is written to.
5. the front-end module loader of packaging file local updating according to claim 4, which is characterized in that described
The packing JavaScript of building current programme is to be packaged static JavaScript according to traditional packing scheme, will be moved
State JavaScript is added in Dynamic Java Script list.
6. the front-end module loader of packaging file local updating according to claim 1, which is characterized in that described
The Data Structures of the module file of JavaScript include: ID, Deps, Url and Cache strategy；The ID is mark；
The Deps is dependence array to be loaded；The Url is file path；The Cache strategy is caching plan
Slightly.
7. the front-end module loader of packaging file local updating according to claim 1, which is characterized in that described
The load and execution process of module loader are as follows:
(1) load and execution is packaged JavaScript, and the packing JavaScript contains the code of static JavaScript
With the list of Dynamic Java Script ID；
(2) module information of static state JavaScript is generated；
(3) Dynamic Java Script list is read；
(4) dynamically load device loads Dynamic Java Script；
(5) the Dynamic Java Script in local cache local storage is read；
(6) module information that the Dynamic Java Script in local storage generates Dynamic Java Script is executed；
(7) according to static JavaScript module information and Dynamic Java Script module information construct between a module according to
Rely relational tree；
(8) according to the sequence execution module code of postorder traversal.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201510962752.0A CN105512324B (en) | 2015-12-21 | 2015-12-21 | A kind of front-end module loader of packaging file local updating |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201510962752.0A CN105512324B (en) | 2015-12-21 | 2015-12-21 | A kind of front-end module loader of packaging file local updating |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN105512324A CN105512324A (en) | 2016-04-20 |
| CN105512324B true CN105512324B (en) | 2019-01-15 |
Family
ID=55720304
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201510962752.0A Active CN105512324B (en) | 2015-12-21 | 2015-12-21 | A kind of front-end module loader of packaging file local updating |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN105512324B (en) |
Families Citing this family (13)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106020891A (en) * | 2016-05-25 | 2016-10-12 | 大唐网络有限公司 | Page loading method and device |
| CN106294597B (en) * | 2016-07-28 | 2019-09-20 | 百度在线网络技术（北京）有限公司 | The method and apparatus being grouped for the static resource to webpage |
| CN106294777A (en) * | 2016-08-12 | 2017-01-04 | 福建天晴数码有限公司 | The caching method of browser script and system |
| CN106293855A (en) * | 2016-08-23 | 2017-01-04 | 上海创景计算机系统有限公司 | The loading method of dependent file |
| CN106354533B (en) * | 2016-08-29 | 2019-09-20 | 北京恒华伟业科技股份有限公司 | A kind of module dynamic loading method and device |
| CN108132954B (en) * | 2016-11-30 | 2021-12-28 | 深圳联友科技有限公司 | Localized loading method and device for HTML (Hypertext markup language) page |
| CN107329785A (en) * | 2017-06-27 | 2017-11-07 | 郑州云海信息技术有限公司 | A kind of method and system of dynamic load JavaScript modules |
| CN110020297A (en) * | 2017-10-31 | 2019-07-16 | 北京国双科技有限公司 | A kind of loading method of web page contents, apparatus and system |
| CN109324881A (en) * | 2018-08-22 | 2019-02-12 | 深圳点猫科技有限公司 | A kind of packaging method and electronic equipment of front end programming project |
| CN109165055B (en) * | 2018-08-30 | 2022-09-06 | 百度在线网络技术（北京）有限公司 | Unmanned system component loading method and device, computer equipment and medium |
| CN110096315B (en) * | 2019-03-22 | 2020-09-04 | 华为技术有限公司 | A component loading method and device |
| CN110287433A (en) * | 2019-06-28 | 2019-09-27 | 北京金山安全软件有限公司 | Network information processing method and device and electronic equipment |
| CN111596935A (en) * | 2020-04-27 | 2020-08-28 | 五八有限公司 | Script packing method and device, electronic equipment and storage medium |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103020155A (en) * | 2012-11-23 | 2013-04-03 | 中国电信股份有限公司云计算分公司 | Web front end resource request processing method and device |
| CN104283947A (en) * | 2014-09-28 | 2015-01-14 | 深圳市中科无软件有限公司 | Java script dynamic consolidated server and work process thereof |
Family Cites Families (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US7188216B1 (en) * | 2002-12-13 | 2007-03-06 | Vignette Corporation | Method and system for an extensible caching framework |
-
2015
- 2015-12-21 CN CN201510962752.0A patent/CN105512324B/en active Active
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103020155A (en) * | 2012-11-23 | 2013-04-03 | 中国电信股份有限公司云计算分公司 | Web front end resource request processing method and device |
| CN104283947A (en) * | 2014-09-28 | 2015-01-14 | 深圳市中科无软件有限公司 | Java script dynamic consolidated server and work process thereof |
Non-Patent Citations (1)
| Title |
|---|
| 网站的高性能架构;szjian;《Iteye博客》;20140821;第1节 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN105512324A (en) | 2016-04-20 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN105512324B (en) | A kind of front-end module loader of packaging file local updating | |
| US9077681B2 (en) | Page loading optimization using page-maintained cache | |
| CN109388766B (en) | Page loading method and device | |
| CN110032388B (en) | Incremental file construction, publishing and downloading method and device | |
| US8752016B2 (en) | Converting JavaScript into a device-independent representation | |
| US9037636B2 (en) | Managing script file dependencies and load times | |
| US11474796B1 (en) | Build system for distributed applications | |
| US20130066901A1 (en) | Hash-based file comparison | |
| US20090287641A1 (en) | Method and system for crawling the world wide web | |
| CN106294379A (en) | The loading method of a kind of page, device and system | |
| CN104038520B (en) | A kind of multi version distributive resource managing method and system | |
| CN106649395A (en) | Webpage updating method and apparatus | |
| US7472391B2 (en) | Resource loader for applications that utilize relative uniform resource identifiers | |
| CN110033373A (en) | Device, method and the storage medium endorsed in block chain | |
| CN110929194B (en) | Abstract algorithm-based static resource file cache control method and system | |
| CN104065736A (en) | URL redirection method, device, and system | |
| CN101799821A (en) | Method and system for realizing webpage application by widget | |
| CN106020891A (en) | Page loading method and device | |
| Onuma et al. | Improved software updating for automotive ECUs: Code compression | |
| CN116166911B (en) | Page loading method and device, storage medium and electronic equipment | |
| CN106502757A (en) | A kind of plug-in management method and device | |
| CN102520994A (en) | Method and system for steaming loading virtual files | |
| EP4394619A1 (en) | Data processing method and apparatus based on blockchain, and device and readable storage medium | |
| US9411618B2 (en) | Metadata-based class loading using a content repository | |
| CN112445986B (en) | Cache information updating method, pushing method, device and medium |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |