CN112966205B - Webpage opening method and device, electronic equipment and storage medium - Google Patents

Webpage opening method and device, electronic equipment and storage medium Download PDF

Info

Publication number
CN112966205B
CN112966205B CN202110432601.XA CN202110432601A CN112966205B CN 112966205 B CN112966205 B CN 112966205B CN 202110432601 A CN202110432601 A CN 202110432601A CN 112966205 B CN112966205 B CN 112966205B
Authority
CN
China
Prior art keywords
target
target webpage
opening
package
webpage
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
Application number
CN202110432601.XA
Other languages
Chinese (zh)
Other versions
CN112966205A (en
Inventor
蔡鹏�
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Ping'an Haoyi Investment Management Co ltd
Original Assignee
Ping'an Haoyi Investment Management Co ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Ping'an Haoyi Investment Management Co ltd filed Critical Ping'an Haoyi Investment Management Co ltd
Priority to CN202110432601.XA priority Critical patent/CN112966205B/en
Publication of CN112966205A publication Critical patent/CN112966205A/en
Application granted granted Critical
Publication of CN112966205B publication Critical patent/CN112966205B/en
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/958Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G06F16/986Document structures and storage, e.g. HTML extensions
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/31Programming languages or programming paradigms
    • G06F8/315Object-oriented languages
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/38Creation or generation of source code for implementing user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Databases & Information Systems (AREA)
  • Computing Systems (AREA)
  • Human Computer Interaction (AREA)
  • Data Mining & Analysis (AREA)
  • Information Transfer Between Computers (AREA)
  • Information Retrieval, Db Structures And Fs Structures Therefor (AREA)

Abstract

The invention relates to the technical field of data processing, and provides a webpage opening method, a device, electronic equipment and a storage medium, wherein the method comprises the following steps: sending an access request of a target webpage to a Web server, and receiving a plurality of target JS package files of the target webpage returned by the Web server; when the opening type of the target webpage is opening after the edition is sent, sending an HTML request for loading the target webpage to a Web server, and receiving all the first JS package files and the first names of each first JS package file, which are referenced by the HTML file returned by the Web server; when the first name of each first JS package file exists in the database, determining that a plurality of target JS package files of the target webpage are cached, loading the plurality of target JS package files in the cache, and opening the target webpage. According to the method and the device, whether the webpage is the latest version or not is determined according to the file name of the JS package file, so that the opening efficiency and accuracy of the target webpage are improved.

Description

Webpage opening method and device, electronic equipment and storage medium
Technical Field
The present invention relates to the field of data processing technologies, and in particular, to a method and apparatus for opening a web page, an electronic device, and a storage medium.
Background
At present, JS needs to be loaded when a webpage is loaded, the webpage can be opened after the analysis of JS is completed, and when a server side updates static resources, but a client side caches the resources, the phenomenon that an old version webpage is still opened by using an old resource when the webpage is opened occurs, so that the accuracy of webpage opening is low.
In addition, when the client side is using the webpage process, if the server side updates the static resources, the client side cannot acquire the corresponding static resources when opening a new webpage, uncontrollable abnormality occurs in the webpage, and the user uses the webpage to break, so that the efficiency of opening the webpage is low.
Disclosure of Invention
In view of the foregoing, it is necessary to provide a method, an apparatus, an electronic device, and a storage medium for opening a web page, which improve the efficiency and accuracy of opening a target web page by determining whether the web page is the latest version according to the file name of the JS packet file.
A first aspect of the present invention provides a method for opening a web page, the method comprising:
sending an access request of a target webpage to a Web server, and receiving a plurality of target JS package files of the target webpage returned by the Web server, wherein the plurality of target JS package files are obtained by packaging front-end resources of the target webpage by the Web server;
acquiring the opening type of the target webpage;
When the opening type of the target webpage is opening after the edition is issued, sending an HTML request for loading the target webpage to the Web server, and receiving all the first JS package files and the first names of each first JS package file, which are returned by the Web server and are referenced by the HTML file;
Searching whether a first name of each first JS package file exists in a database, wherein a plurality of second names are stored in the database, and each second name is obtained by adding a randomly generated hash value into the file name of each target JS package file by the Web server;
when the first name of each first JS package file exists in the database, determining that a plurality of target JS package files of the target webpage are cached, loading the plurality of target JS package files in the cache, and opening the target webpage.
Optionally, the method further comprises:
When the opening type of the target webpage is opening before publishing, triggering a switching instruction of the target webpage;
loading a plurality of second JS package files corresponding to the target webpage according to the switching instruction of the target webpage, so as to obtain a loading result;
when the loading result is that the resources of the plurality of second JS package files do not exist, determining that the version of the target webpage is updated, and displaying and reloading the target webpage; or alternatively
And when the loading result is that the resources of the plurality of second JS package files exist, determining that the version of the target webpage is the latest version, loading the plurality of second JS package files and opening the target webpage.
Optionally, the plurality of target JS packet files are obtained by packaging front-end resources of the target Web page by the Web server, and include:
the Web server analyzes the access request of the target webpage to obtain front-end resources of the target webpage, and divides the front-end resources into general resources and non-general resources;
Configuring a universal resource packing rule and a non-universal resource packing rule of a packer;
The packer is used for packing the universal resources according to the universal resource packing rule to obtain a plurality of universal JS resource package files, and the packer is used for packing the non-universal resources according to the non-universal resource packing rule to obtain a plurality of non-universal JS resource package files;
And merging the plurality of universal JS resource package files and the plurality of non-universal JS resource package files to obtain a plurality of target JS package files of the target webpage.
Optionally, the acquiring the opening type of the target webpage includes:
Analyzing the access request of the target webpage to obtain the publishing state identification of the target webpage;
And determining the opening type of the target webpage according to the publishing state identification of the target webpage.
Optionally, before sending the HTML request for loading the target Web page to the Web server, the method further includes:
configuring an Nginx configuration in the Web server;
And setting the configuration of the Nginx as an HTML file cache, and setting the configuration of the Nginx as a JS file cache.
Optionally, the searching whether the first name of each first JS packet file exists in the database includes:
comparing the first name of each first JS package file with a plurality of second names in the database;
When the first name of each first JS package file is consistent with any one of the second names in the database, determining that the first name of each first JS package file exists in the database; or alternatively
When the first name of any one of the first JS package files is inconsistent with a plurality of second names in the database, determining that the first name of each first JS package file does not exist in the database.
Optionally, the method further comprises:
When the first name of each first JS package file does not exist in the database, determining that a plurality of target JS package files of the target webpage are not cached;
Transmitting a target universal JS resource package file request for loading the target webpage to the Web server, and receiving a plurality of loaded universal JS resource package files returned by the Web server;
and loading the loaded plurality of universal JS resource package files, and opening the target webpage.
A second aspect of the present invention provides a web page opening apparatus, the apparatus comprising:
the first sending module is used for sending an access request of a target webpage to a Web server and receiving a plurality of target JS package files of the target webpage returned by the Web server, wherein the plurality of target JS package files are obtained by packing front-end resources of the target webpage by the Web server;
the acquisition module is used for acquiring the opening type of the target webpage;
The second sending module is used for sending an HTML request for loading the target webpage to the Web server when the opening type of the target webpage is opened after the opening type is opened, and receiving all the first JS package files and the first names of each first JS package file, which are returned by the Web server and are referenced by the HTML file;
The searching module is used for searching whether a first name of each first JS package file exists in a database, wherein a plurality of second names are stored in the database, and each second name is obtained by adding a randomly generated hash value into the file name of each target JS package file by the Web server;
And the opening module is used for determining that a plurality of target JS package files of the target webpage are cached when the first name of each first JS package file exists in the database, loading the plurality of target JS package files in the cache and opening the target webpage.
A third aspect of the present invention provides an electronic device comprising a processor and a memory, the processor being configured to implement the web page opening method when executing a computer program stored in the memory.
A fourth aspect of the present invention provides a computer-readable storage medium having stored thereon a computer program which, when executed by a processor, implements the web page opening method.
In summary, according to the method, the device, the electronic device and the storage medium for opening the webpage, on one hand, when the first name of each first JS packet file exists in the database, it is determined that a plurality of target JS packet files of the target webpage are cached, the plurality of target JS packet files are loaded in the cache, and the target webpage is opened, so that the opening efficiency of the target webpage is improved; on the other hand, when the opening type of the target webpage is opening after the opening is the publishing, an HTML request for loading the target webpage is sent to the Web server, all the first JS package files and the first names of each first JS package file which are returned by the Web server and are referenced by the HTML files are received, and the efficiency of determining whether the target webpage is the webpage of the latest version is improved by determining whether the target webpage is the webpage of the latest version according to the file names of the first JS package files; finally, when a plurality of target JS packages of the target webpage are not cached locally, firstly removing non-universal JS package files in the process of opening the target webpage, directly loading the universal JS package files to open the target webpage, reducing the size of the JS package files, shortening the loading time of the Web server, and improving the opening efficiency of the target webpage.
In addition, the front-end resources are packaged into a plurality of target JS package files, so that the phenomenon that the front-end resources loaded by a client side are too large to drag and slow to open the webpage due to the fact that the front-end resources are not split and packaged is avoided, the loading speed of the front-end resources is improved, and the opening speed of the target webpage is further improved.
Drawings
Fig. 1 is a flowchart of a method for opening a web page according to an embodiment of the present invention.
Fig. 2 is a block diagram of a web page opening device according to a second embodiment of the present invention.
Fig. 3 is a schematic structural diagram of an electronic device according to a third embodiment of the present invention.
Detailed Description
In order that the above-recited objects, features and advantages of the present invention will be more clearly understood, a more particular description of the invention will be rendered by reference to specific embodiments thereof which are illustrated in the appended drawings. It should be noted that, without conflict, the embodiments of the present invention and features in the embodiments may be combined with each other.
Unless defined otherwise, all technical and scientific terms used herein have the same meaning as commonly understood by one of ordinary skill in the art to which this invention belongs. The terminology used herein in the description of the invention is for the purpose of describing particular embodiments only and is not intended to be limiting of the invention.
Example 1
Fig. 1 is a flowchart of a method for opening a web page according to an embodiment of the present invention.
In this embodiment, the method for opening a web page may be applied to an electronic device, and for an electronic device that needs to be opened a web page, the function of opening a web page provided by the method of the present invention may be directly integrated on the electronic device, or may be run in the electronic device in the form of a software development kit (Software Development Kit, SDK).
As shown in fig. 1, the method for opening a web page specifically includes the following steps, and the order of the steps in the flowchart may be changed according to different requirements, and some may be omitted.
S11, sending an access request of a target webpage to a Web server, and receiving a plurality of target JS package files of the target webpage returned by the Web server, wherein the plurality of target JS package files are obtained by packaging front-end resources of the target webpage by the Web server.
In this embodiment, because resources such as an HTML file, a CSS file, a JS file and the like exist in the target Web page, the client sends a target Web page request to the Web server, and the Web server returns a plurality of target JS package files of the target Web page in response to the access request of the target Web page, specifically, the Web server packages the front end resource of the target Web page to obtain a plurality of target JS package files.
Optionally, the plurality of target JS packet files are obtained by packaging front-end resources of the target Web page by the Web server, and include:
the Web server analyzes the access request of the target webpage to obtain front-end resources of the target webpage, and divides the front-end resources into general resources and non-general resources;
Configuring a universal resource packing rule and a non-universal resource packing rule of a packer;
The packer is used for packing the universal resources according to the universal resource packing rule to obtain a plurality of universal JS resource package files, and the packer is used for packing the non-universal resources according to the non-universal resource packing rule to obtain a plurality of non-universal JS resource package files;
And merging the plurality of universal JS resource package files and the plurality of non-universal JS resource package files to obtain a plurality of target JS package files of the target webpage.
In this embodiment, the Web server divides the front-end resource of the target Web page into a general resource and a non-general resource, and specifically, the general resource refers to Web page data required by all Web pages, and the non-general resource refers to Web page resource required by a specific Web page.
In this embodiment, the packager may be Webpack packager, and the Webpack packager is a static module packager (module bundler) of a modern JavaScript application. Packaging the universal resources into a plurality of universal JS resource package files according to a universal resource packaging rule by using the packer, wherein the file size of each universal JS resource package file can be set to be not more than 800KB; and packaging the non-universal resources into a plurality of non-universal JS resource package files by using the packer according to a non-universal resource packaging rule, wherein the file size of each non-universal JS resource package file is not more than 400KB, combining the plurality of universal JS resource package files with the plurality of non-universal JS resource package files to obtain a plurality of target JS package files of the target webpage, and storing the plurality of target JS package files in the Web server.
In this embodiment, by packing the front-end resources into a plurality of target JS packet files, the phenomenon that the front-end resources loaded by the client are too large to drag and slow to open the web page due to the fact that the front-end resources are not split and packed is avoided, the loading speed of the front-end resources is increased, and then the opening speed of the target web page is increased.
S12, acquiring the opening type of the target webpage.
In this embodiment, the opening types include pre-release opening and post-release opening.
Optionally, the acquiring the opening type of the target webpage includes:
Analyzing the access request of the target webpage to obtain the publishing state identification of the target webpage;
And determining the opening type of the target webpage according to the publishing state identification of the target webpage.
In this embodiment, the version status identifier includes a version that is released and a version that is not released, and when the version status identifier of the target webpage is a version that is released, the opening type of the target webpage is determined to be opened after the version is released; and when the publishing state of the target webpage is marked as not publishing, determining that the opening type of the target webpage is opening before publishing.
In other embodiments, the opening type may be a front first screen opening before the plate and a front first screen opening after the plate.
In this embodiment, since different opening types determine different opening modes of the target webpage, the opening type of the target webpage is rapidly determined according to the publishing state identifier of the target webpage, and thus the opening mode of the target webpage is rapidly determined, and the opening efficiency of the target webpage is improved.
And S13, when the opening type of the target webpage is opening after the opening is the publishing, sending an HTML request for loading the target webpage to the Web server, and receiving all the first JS package files and the first names of each first JS package file, which are returned by the Web server and are referenced by the HTML file.
In this embodiment, the resource of the HTML file corresponds to a plurality of entries, for example, a system login page entry and a system function page entry, and the Web server obtains all the first JS packet files corresponding to the HTML request and the first names of each first JS packet file according to the HTML request sent by the client to load the target Web page.
Further, before sending the HTML request to load the target Web page to the Web server, the method further includes:
configuring an Nginx configuration in the Web server;
And setting the configuration of the Nginx as an HTML file cache, and setting the configuration of the Nginx as a JS file cache.
In this embodiment, by setting the configuration of the nginnx to be that the HTML file is not cached, setting the JS file to be that the cache is set, and in the process of setting the packaged JS package file by Webpack, the file name of each JS package file is transformed, and in the process of loading the HTML file, only the file name of the JS package file referenced in the HTML file needs to be obtained, and whether the target web page is the latest version web page is determined according to the file name of the first JS package file, thereby improving the efficiency of determining whether the target web page is the latest version web page, and further improving the accuracy of opening the target web page.
Further, the method further comprises:
When the opening type of the target webpage is opening before publishing, triggering a switching instruction of the target webpage;
loading a plurality of second JS package files corresponding to the target webpage according to the switching instruction of the target webpage, so as to obtain a loading result;
when the loading result is that the resources of the plurality of second JS package files do not exist, determining that the version of the target webpage is updated, and displaying and reloading the target webpage; or alternatively
And when the loading result is that the resources of the plurality of second JS package files exist, determining that the version of the target webpage is the latest version, loading the plurality of second JS package files and opening the target webpage.
In this embodiment, when the client opens the target webpage before the client opens the target webpage, the browser loads the plurality of second JS packet files corresponding to the target webpage when the client switches the target webpage after the client opens the target webpage, and when the version of the target webpage is updated, the file names of the corresponding JS packet files of the target webpage change, and in the loading process, the browser captures an error of failure in resource loading of the plurality of second JS packet files of the target webpage, specifically, the error of failure in resource loading is that the resources of the plurality of second JS packet files do not exist, it is determined that the version of the target webpage is updated, the reloaded target webpage is displayed on the client, the phenomenon that the opened target webpage is an old version is avoided, and the accuracy of opening the target webpage is improved.
In this embodiment, when the loading result indicates that the resources of the plurality of second JS packet files exist, it is determined that the version of the target webpage is the latest version, and the plurality of second JS packet files are directly loaded in the local cache to open the target webpage, so that the phenomenon that the client needs to load the same front-end resource every time the version of the target webpage is opened when the version of the target webpage is not updated is avoided, and the opening speed of the target webpage is improved.
S14, searching whether a first name of each first JS package file exists in a database, wherein a plurality of second names are stored in the database, and each second name is obtained by adding a randomly generated hash value into the file name of each target JS package file by the Web server.
In this embodiment, a randomly generated hash value is added to the file name of each JS packet file in the process of configuring the universal resource packing rule and the non-universal resource packing rule of the packer, and the file name of each JS packet file changes in each packing process.
Optionally, the searching whether the first name of each first JS packet file exists in the database includes:
comparing the first name of each first JS package file with a plurality of second names in the database;
When the first name of each first JS package file is consistent with any one of the second names in the database, determining that the first name of each first JS package file exists in the database; or alternatively
When the first name of any one of the first JS package files is inconsistent with a plurality of second names in the database, determining that the first name of each first JS package file does not exist in the database.
In this embodiment, by comparing the first name of each first JS packet file with the plurality of second names in the database, it is determined whether the first name of each first JS packet file exists in the database according to the comparison result.
And S15, when the first name of each first JS package file exists in the database, determining that a plurality of target JS package files of the target webpage are cached, loading the plurality of target JS package files in the cache, and opening the target webpage.
In this embodiment, since the configuration of the nginnx is set to be that the HTML file is not cached, the HTML file is the latest version of the target webpage when the target webpage is opened each time, the first name of each first JS packet file corresponding to the latest version of the target webpage is obtained from the HTML file, the first name is compared with the second name stored in the database, whether the plurality of target JS packet files of the target webpage are cached is determined according to the comparison result, and when the plurality of target JS packet files are cached, the target JS packet files in the cache are directly obtained, and the target webpage is opened, thereby improving the opening efficiency of the target webpage.
Further, the method further comprises:
When the first name of each first JS package file does not exist in the database, determining that a plurality of target JS package files of the target webpage are not cached;
Transmitting a target universal JS resource package file request for loading the target webpage to the Web server, and receiving a plurality of loaded universal JS resource package files returned by the Web server;
and loading the loaded plurality of universal JS resource package files, and opening the target webpage.
In this embodiment, when the plurality of target JS packets of the target webpage are not cached locally, in the process of opening the target webpage, the non-universal JS resource packet file is removed first, and the universal JS resource packet file is directly loaded to open the target webpage, so that the size of the JS packet file is reduced, the loading time of the Web server is shortened, and the opening efficiency of the target webpage is improved.
In this embodiment, since the front end resource of the target webpage is packaged into multiple target JS package files in advance, multiple target JS package files can be loaded in parallel to open the target webpage, so that the opening efficiency of the target webpage is improved.
In summary, the webpage opening method of the embodiment may be applied to the fields of smart life, smart medical treatment, smart law, smart community, smart finance, etc. in smart city construction, to promote the development of smart city construction, and by sending an access request of a target webpage to a Web server and receiving multiple target JS packet files of the target webpage returned by the Web server, where the multiple target JS packet files are obtained by packing front-end resources of the target webpage by the Web server; acquiring the opening type of the target webpage; when the opening type of the target webpage is opening after the edition is issued, sending an HTML request for loading the target webpage to the Web server, and receiving all the first JS package files and the first names of each first JS package file, which are returned by the Web server and are referenced by the HTML file; searching whether a first name of each first JS package file exists in a database, wherein a plurality of second names are stored in the database, and each second name is obtained by adding a randomly generated hash value into the file name of each target JS package file by the Web server; when the first name of each first JS package file exists in the database, determining that a plurality of target JS package files of the target webpage are cached, loading the plurality of target JS package files in the cache, and opening the target webpage.
In this embodiment, on the one hand, when the first name of each first JS packet file exists in the database, it is determined that a plurality of target JS packet files of the target web page are cached, and the plurality of target JS packet files are loaded in the cache and the target web page is opened, so that the opening efficiency of the target web page is improved; on the other hand, when the opening type of the target webpage is opening after the opening is the publishing, an HTML request for loading the target webpage is sent to the Web server, all the first JS package files and the first names of each first JS package file which are returned by the Web server and are referenced by the HTML files are received, and the efficiency of determining whether the target webpage is the webpage of the latest version is improved by determining whether the target webpage is the webpage of the latest version according to the file names of the first JS package files; finally, when a plurality of target JS packages of the target webpage are not cached locally, firstly removing non-universal JS package files in the process of opening the target webpage, directly loading the universal JS package files to open the target webpage, reducing the size of the JS package files, shortening the loading time of the Web server, and improving the opening efficiency of the target webpage.
In addition, the front-end resources are packaged into a plurality of target JS package files, so that the phenomenon that the front-end resources loaded by a client side are too large to drag and slow to open the webpage due to the fact that the front-end resources are not split and packaged is avoided, the loading speed of the front-end resources is improved, and the opening speed of the target webpage is further improved.
Example two
Fig. 2 is a block diagram of a web page opening device according to a second embodiment of the present invention.
In some embodiments, the web page opening device 20 may include a plurality of functional modules that are comprised of program code segments. Program code for each program segment in the web page opening device 20 may be stored in a memory of the electronic device and executed by the at least one processor to perform the web page opening functions (described in detail with respect to fig. 1).
In this embodiment, the web page opening device 20 may be divided into a plurality of functional modules according to the functions performed by the web page opening device. The functional module may include: the device comprises a first sending module 201, an obtaining module 202, a second sending module 203, a searching module 204, an opening module 205, a determining module 206 and a loading module 207. The module referred to in the present invention refers to a series of computer program segments capable of being executed by at least one processor and of performing a fixed function, stored in a memory. In the present embodiment, the functions of the respective modules will be described in detail in the following embodiments.
The first sending module 201 is configured to send an access request of a target webpage to a Web server, and receive a plurality of target JS packet files of the target webpage returned by the Web server, where the plurality of target JS packet files are obtained by packaging front-end resources of the target webpage by the Web server.
In this embodiment, because resources such as an HTML file, a CSS file, a JS file and the like exist in the target Web page, the client sends a target Web page request to the Web server, and the Web server returns a plurality of target JS package files of the target Web page in response to the access request of the target Web page, specifically, the Web server packages the front end resource of the target Web page to obtain a plurality of target JS package files.
Optionally, the plurality of target JS packet files are obtained by packaging front-end resources of the target Web page by the Web server, and include:
the Web server analyzes the access request of the target webpage to obtain front-end resources of the target webpage, and divides the front-end resources into general resources and non-general resources;
Configuring a universal resource packing rule and a non-universal resource packing rule of a packer;
The packer is used for packing the universal resources according to the universal resource packing rule to obtain a plurality of universal JS resource package files, and the packer is used for packing the non-universal resources according to the non-universal resource packing rule to obtain a plurality of non-universal JS resource package files;
And merging the plurality of universal JS resource package files and the plurality of non-universal JS resource package files to obtain a plurality of target JS package files of the target webpage.
In this embodiment, the Web server divides the front-end resource of the target Web page into a general resource and a non-general resource, and specifically, the general resource refers to Web page data required by all Web pages, and the non-general resource refers to Web page resource required by a specific Web page.
In this embodiment, the packager may be Webpack packager, and the Webpack packager is a static module packager (module bundler) of a modern JavaScript application. Packaging the universal resources into a plurality of universal JS resource package files according to a universal resource packaging rule by using the packer, wherein the file size of each universal JS resource package file can be set to be not more than 800KB; and packaging the non-universal resources into a plurality of non-universal JS resource package files by using the packer according to a non-universal resource packaging rule, wherein the file size of each non-universal JS resource package file is not more than 400KB, combining the plurality of universal JS resource package files with the plurality of non-universal JS resource package files to obtain a plurality of target JS package files of the target webpage, and storing the plurality of target JS package files in the Web server.
In this embodiment, by packing the front-end resources into a plurality of target JS packet files, the phenomenon that the front-end resources loaded by the client are too large to drag and slow to open the web page due to the fact that the front-end resources are not split and packed is avoided, the loading speed of the front-end resources is increased, and then the opening speed of the target web page is increased.
An obtaining module 202, configured to obtain an opening type of the target webpage.
In this embodiment, the opening types include pre-release opening and post-release opening.
Optionally, the acquiring module 202 acquires an opening type of the target webpage includes:
Analyzing the access request of the target webpage to obtain the publishing state identification of the target webpage;
And determining the opening type of the target webpage according to the publishing state identification of the target webpage.
In this embodiment, the version status identifier includes a version that is released and a version that is not released, and when the version status identifier of the target webpage is a version that is released, the opening type of the target webpage is determined to be opened after the version is released; and when the publishing state of the target webpage is marked as not publishing, determining that the opening type of the target webpage is opening before publishing.
In other embodiments, the opening type may be a front first screen opening before the plate and a front first screen opening after the plate.
In this embodiment, since different opening types determine different opening modes of the target webpage, the opening type of the target webpage is rapidly determined according to the publishing state identifier of the target webpage, and thus the opening mode of the target webpage is rapidly determined, and the opening efficiency of the target webpage is improved.
And the second sending module 203 is configured to send an HTML request for loading the target webpage to the Web server when the opening type of the target webpage is opened after the opening type is opened, and receive all the first JS packet files and the first names of each first JS packet file that are referred to by the HTML file and returned by the Web server.
In this embodiment, the resource of the HTML file corresponds to a plurality of entries, for example, a system login page entry and a system function page entry, and the Web server obtains all the first JS packet files corresponding to the HTML request and the first names of each first JS packet file according to the HTML request sent by the client to load the target Web page.
Further, before sending an HTML request to load the target Web page to the Web server, configuring Nginx in the Web server; and setting the configuration of the Nginx as an HTML file cache, and setting the configuration of the Nginx as a JS file cache.
In this embodiment, by setting the configuration of the nginnx to be that the HTML file is not cached, setting the JS file to be that the cache is set, and in the process of setting the packaged JS package file by Webpack, the file name of each JS package file is transformed, and in the process of loading the HTML file, only the file name of the JS package file referenced in the HTML file needs to be obtained, and whether the target web page is the latest version web page is determined according to the file name of the first JS package file, thereby improving the efficiency of determining whether the target web page is the latest version web page, and further improving the accuracy of opening the target web page.
Further, when the opening type of the target webpage is opening before publishing, triggering a switching instruction of the target webpage; loading a plurality of second JS package files corresponding to the target webpage according to the switching instruction of the target webpage, so as to obtain a loading result; when the loading result is that the resources of the plurality of second JS package files do not exist, determining that the version of the target webpage is updated, and displaying and reloading the target webpage; or when the loading result is that the resources of the plurality of second JS package files exist, determining that the version of the target webpage is the latest version, and loading the plurality of second JS package files to open the target webpage.
In this embodiment, when the client opens the target webpage before the client opens the target webpage, the browser loads the plurality of second JS packet files corresponding to the target webpage when the client switches the target webpage after the client opens the target webpage, and when the version of the target webpage is updated, the file names of the corresponding JS packet files of the target webpage change, and in the loading process, the browser captures an error of failure in resource loading of the plurality of second JS packet files of the target webpage, specifically, the error of failure in resource loading is that the resources of the plurality of second JS packet files do not exist, it is determined that the version of the target webpage is updated, the reloaded target webpage is displayed on the client, the phenomenon that the opened target webpage is an old version is avoided, and the accuracy of opening the target webpage is improved.
In this embodiment, when the loading result indicates that the resources of the plurality of second JS packet files exist, it is determined that the version of the target webpage is the latest version, and the plurality of second JS packet files are directly loaded in the local cache to open the target webpage, so that the phenomenon that the client needs to load the same front-end resource every time the version of the target webpage is opened when the version of the target webpage is not updated is avoided, and the opening speed of the target webpage is improved.
The searching module 204 is configured to search whether a first name of each first JS packet file exists in a database, where the database stores a plurality of second names, and each second name is obtained by adding a randomly generated hash value to a file name of each target JS packet file by the Web server.
In this embodiment, a randomly generated hash value is added to the file name of each JS packet file in the process of configuring the universal resource packing rule and the non-universal resource packing rule of the packer, and the file name of each JS packet file changes in each packing process.
Optionally, the searching module 204 searches whether the first name of each first JS packet file exists in the database includes:
comparing the first name of each first JS package file with a plurality of second names in the database;
When the first name of each first JS package file is consistent with any one of the second names in the database, determining that the first name of each first JS package file exists in the database; or alternatively
When the first name of any one of the first JS package files is inconsistent with a plurality of second names in the database, determining that the first name of each first JS package file does not exist in the database.
In this embodiment, by comparing the first name of each first JS packet file with the plurality of second names in the database, it is determined whether the first name of each first JS packet file exists in the database according to the comparison result.
And an opening module 205, configured to determine that, when the first name of each first JS packet file exists in the database, a plurality of target JS packet files of the target web page are cached, load the plurality of target JS packet files in the cache, and open the target web page.
In this embodiment, since the configuration of the nginnx is set to be that the HTML file is not cached, the HTML file is the latest version of the target webpage when the target webpage is opened each time, the first name of each first JS packet file corresponding to the latest version of the target webpage is obtained from the HTML file, the first name is compared with the second name stored in the database, whether the plurality of target JS packet files of the target webpage are cached is determined according to the comparison result, and when the plurality of target JS packet files are cached, the target JS packet files in the cache are directly obtained, and the target webpage is opened, thereby improving the opening efficiency of the target webpage.
Further, the determining module 206 is configured to determine that the plurality of target JS packet files of the target web page are not cached when the first name of each first JS packet file does not exist in the database.
The second sending module 203 sends a request for loading the target universal JS resource package file of the target webpage to the Web server, and receives a plurality of loaded universal JS resource package files returned by the Web server.
And the loading module 207 is configured to load the plurality of loaded universal JS resource package files, and open the target webpage.
In this embodiment, when the plurality of target JS packets of the target webpage are not cached locally, in the process of opening the target webpage, the non-universal JS resource packet file is removed first, and the universal JS resource packet file is directly loaded to open the target webpage, so that the size of the JS packet file is reduced, the loading time of the Web server is shortened, and the opening efficiency of the target webpage is improved.
In this embodiment, since the front end resource of the target webpage is packaged into multiple target JS package files in advance, multiple target JS package files can be loaded in parallel to open the target webpage, so that the opening efficiency of the target webpage is improved.
In summary, the webpage opening device of the present embodiment may be applied to the fields of smart life, smart medical treatment, smart law, smart community, smart finance, etc. in smart city construction, to promote the development of smart city construction, and by sending an access request of a target webpage to a Web server, and receiving multiple target JS packet files of the target webpage returned by the Web server, where the multiple target JS packet files are obtained by packaging front end resources of the target webpage by the Web server; acquiring the opening type of the target webpage; when the opening type of the target webpage is opening after the edition is issued, sending an HTML request for loading the target webpage to the Web server, and receiving all the first JS package files and the first names of each first JS package file, which are returned by the Web server and are referenced by the HTML file; searching whether a first name of each first JS package file exists in a database, wherein a plurality of second names are stored in the database, and each second name is obtained by adding a randomly generated hash value into the file name of each target JS package file by the Web server; when the first name of each first JS package file exists in the database, determining that a plurality of target JS package files of the target webpage are cached, loading the plurality of target JS package files in the cache, and opening the target webpage.
In this embodiment, on the one hand, when the first name of each first JS packet file exists in the database, it is determined that a plurality of target JS packet files of the target web page are cached, and the plurality of target JS packet files are loaded in the cache and the target web page is opened, so that the opening efficiency of the target web page is improved; on the other hand, when the opening type of the target webpage is opening after the opening is the publishing, an HTML request for loading the target webpage is sent to the Web server, all the first JS package files and the first names of each first JS package file which are returned by the Web server and are referenced by the HTML files are received, and the efficiency of determining whether the target webpage is the webpage of the latest version is improved by determining whether the target webpage is the webpage of the latest version according to the file names of the first JS package files; finally, when a plurality of target JS packages of the target webpage are not cached locally, firstly removing non-universal JS package files in the process of opening the target webpage, directly loading the universal JS package files to open the target webpage, reducing the size of the JS package files, shortening the loading time of the Web server, and improving the opening efficiency of the target webpage.
In addition, the front-end resources are packaged into a plurality of target JS package files, so that the phenomenon that the front-end resources loaded by a client side are too large to drag and slow to open the webpage due to the fact that the front-end resources are not split and packaged is avoided, the loading speed of the front-end resources is improved, and the opening speed of the target webpage is further improved.
Example III
Fig. 3 is a schematic structural diagram of an electronic device according to a third embodiment of the present invention. In the preferred embodiment of the invention, the electronic device 3 comprises a memory 31, at least one processor 32, at least one communication bus 33 and a transceiver 34.
It will be appreciated by those skilled in the art that the configuration of the electronic device shown in fig. 3 is not limiting of the embodiments of the present invention, and that either a bus-type configuration or a star-type configuration is possible, and that the electronic device 3 may also include more or less other hardware or software than that shown, or a different arrangement of components.
In some embodiments, the electronic device 3 is an electronic device capable of automatically performing numerical calculation and/or information processing according to a preset or stored instruction, and its hardware includes, but is not limited to, a microprocessor, an application specific integrated circuit, a programmable gate array, a digital processor, an embedded device, and the like. The electronic device 3 may further include a client device, where the client device includes, but is not limited to, any electronic product that can interact with a client by way of a keyboard, a mouse, a remote control, a touch pad, or a voice control device, such as a personal computer, a tablet computer, a smart phone, a digital camera, etc.
It should be noted that the electronic device 3 is only used as an example, and other electronic products that may be present in the present invention or may be present in the future are also included in the scope of the present invention by way of reference.
In some embodiments, the memory 31 is used to store program codes and various data, such as the web page opening device 20 installed in the electronic device 3, and to implement high-speed, automatic access to programs or data during operation of the electronic device 3. The Memory 31 includes Read-Only Memory (ROM), programmable Read-Only Memory (Programmable Read-Only Memory, PROM), erasable programmable Read-Only Memory (Erasable Programmable Read-Only Memory, EPROM), one-time programmable Read-Only Memory (OTPROM), electrically erasable rewritable Read-Only Memory (EEPROM), compact disc Read-Only Memory (Compact Disc Read-Only Memory, CD-ROM) or other optical disc Memory, magnetic tape Memory, or any other medium that can be used for carrying or storing data.
In some embodiments, the at least one processor 32 may be comprised of an integrated circuit, such as a single packaged integrated circuit, or may be comprised of multiple integrated circuits packaged with the same or different functionality, including one or more central processing units (Central Processing unit, CPU), microprocessors, digital processing chips, graphics processors, combinations of various control chips, and the like. The at least one processor 32 is a Control Unit (Control Unit) of the electronic device 3, connects the respective components of the entire electronic device 3 using various interfaces and lines, and executes various functions of the electronic device 3 and processes data by running or executing programs or modules stored in the memory 31 and calling data stored in the memory 31.
In some embodiments, the at least one communication bus 33 is arranged to enable connected communication between the memory 31 and the at least one processor 32 or the like.
Although not shown, the electronic device 3 may further include a power source (such as a battery) for powering the various components, and optionally, the power source may be logically connected to the at least one processor 32 via a power management device, thereby implementing functions such as managing charging, discharging, and power consumption by the power management device. The power supply may also include one or more of any of a direct current or alternating current power supply, recharging device, power failure detection circuit, power converter or inverter, power status indicator, etc. The electronic device 3 may further include various sensors, bluetooth modules, wi-Fi modules, etc., which will not be described herein.
It should be understood that the embodiments described are for illustrative purposes only and are not limited to this configuration in the scope of the patent application.
The integrated units implemented in the form of software functional modules described above may be stored in a computer readable storage medium. The software functional modules described above are stored in a storage medium and include instructions for causing a computer device (which may be a personal computer, an electronic device, or a network device, etc.) or a processor (processor) to perform portions of the methods described in the various embodiments of the invention.
In a further embodiment, in connection with fig. 2, the at least one processor 32 may execute the operating device of the electronic device 3 and various installed applications (e.g., the web page opening device 20), program code, etc., such as the various modules described above.
The memory 31 has program code stored therein, and the at least one processor 32 can invoke the program code stored in the memory 31 to perform related functions. For example, each of the modules depicted in fig. 2 is a program code stored in the memory 31 and executed by the at least one processor 32 to perform the functions of the respective modules for web page opening purposes.
In one embodiment of the present invention, the memory 31 stores a plurality of instructions that are executed by the at least one processor 32 to implement the function of web page opening.
Specifically, the specific implementation method of the above instruction by the at least one processor 32 may refer to the description of the relevant steps in the corresponding embodiment of fig. 1, which is not repeated herein.
In the several embodiments provided by the present invention, it should be understood that the disclosed apparatus and method may be implemented in other manners. For example, the above-described apparatus embodiments are merely illustrative, and for example, the division of the modules is merely a logical function division, and there may be other manners of division when actually implemented.
The modules described as separate components may or may not be physically separate, and components shown as modules may or may not be physical units, may be located in one place, or may be distributed over multiple network units. Some or all of the modules may be selected according to actual needs to achieve the purpose of the solution of this embodiment.
In addition, each functional module in the embodiments of the present invention may be integrated in one processing unit, or each unit may exist alone physically, or two or more units may be integrated in one unit. The integrated units can be realized in a form of hardware or a form of hardware and a form of software functional modules.
It will be evident to those skilled in the art that the invention is not limited to the details of the foregoing illustrative embodiments, and that the present invention may be embodied in other specific forms without departing from the spirit or essential characteristics thereof. The present embodiments are, therefore, to be considered in all respects as illustrative and not restrictive, the scope of the invention being indicated by the appended claims rather than by the foregoing description, and all changes which come within the meaning and range of equivalency of the claims are therefore intended to be embraced therein. Any reference sign in a claim should not be construed as limiting the claim concerned. Furthermore, it will be obvious that the term "comprising" does not exclude other elements or that the singular does not exclude a plurality. The units or means stated in the invention may also be implemented by one unit or means, either by software or hardware. The terms first, second, etc. are used to denote a name, but not any particular order.
Finally, it should be noted that the above-mentioned embodiments are merely for illustrating the technical solution of the present invention and not for limiting the same, and although the present invention has been described in detail with reference to the preferred embodiments, it should be understood by those skilled in the art that modifications and equivalents may be made to the technical solution of the present invention without departing from the spirit and scope of the technical solution of the present invention.

Claims (8)

1. A method for opening a web page, the method comprising:
Sending an access request of a target webpage to a Web server, and receiving a plurality of target JS package files of the target webpage returned by the Web server, wherein the plurality of target JS package files are obtained by packaging front-end resources of the target webpage by the Web server, and the method comprises the following steps: the Web server analyzes the access request of the target webpage to obtain front-end resources of the target webpage, and divides the front-end resources into general resources and non-general resources, wherein the general resources refer to webpage data required by all webpages, and the non-general resources refer to webpage resources required by specific webpages; configuring a universal resource packing rule and a non-universal resource packing rule of a packer; the packer is used for packing the universal resources according to the universal resource packing rule to obtain a plurality of universal JS resource package files, and the packer is used for packing the non-universal resources according to the non-universal resource packing rule to obtain a plurality of non-universal JS resource package files; merging the plurality of universal JS resource package files and the plurality of non-universal JS resource package files to obtain a plurality of target JS package files of the target webpage;
acquiring the opening type of the target webpage;
When the opening type of the target webpage is opening after the edition is issued, sending an HTML request for loading the target webpage to the Web server, and receiving all the first JS package files and the first names of each first JS package file, which are referenced by the HTML file and returned by the Web server;
Searching whether a first name of each first JS package file exists in a database, wherein a plurality of second names are stored in the database, and each second name is obtained by adding a randomly generated hash value into the file name of each target JS package file by the Web server;
when the first name of each first JS package file exists in the database, determining that a plurality of target JS package files of the target webpage are cached, loading the plurality of target JS package files in the cache, and opening the target webpage;
When the first name of each first JS package file does not exist in the database, determining that a plurality of target JS package files of the target webpage are not cached; removing non-universal JS resource package files in the plurality of target JS resource package files, sending a target universal JS resource package file request for loading the target webpage to the Web server, and receiving a plurality of loaded universal JS resource package files returned by the Web server; and loading the loaded plurality of universal JS resource package files, and opening the target webpage.
2. The web page opening method as recited in claim 1, wherein the method further comprises:
When the opening type of the target webpage is opening before publishing, triggering a switching instruction of the target webpage;
loading a plurality of second JS package files corresponding to the target webpage according to the switching instruction of the target webpage, so as to obtain a loading result;
when the loading result is that the resources of the plurality of second JS package files do not exist, determining that the version of the target webpage is updated, and displaying and reloading the target webpage; or alternatively
And when the loading result is that the resources of the plurality of second JS package files exist, determining that the version of the target webpage is the latest version, loading the plurality of second JS package files and opening the target webpage.
3. The web page opening method as recited in claim 1, wherein the obtaining the opening type of the target web page comprises:
Analyzing the access request of the target webpage to obtain the publishing state identification of the target webpage;
And determining the opening type of the target webpage according to the publishing state identification of the target webpage.
4. The Web page opening method of claim 1, wherein prior to sending the HTML request to load the target Web page to the Web server, the method further comprises:
configuring an Nginx configuration in the Web server;
And setting the configuration of the Nginx as an HTML file cache, and setting the configuration of the Nginx as a JS file cache.
5. The web page opening method as recited in claim 4, wherein said looking up whether the first name of each first JS packet file exists in the database includes:
comparing the first name of each first JS package file with a plurality of second names in the database;
When the first name of each first JS package file is consistent with any one of the second names in the database, determining that the first name of each first JS package file exists in the database; or alternatively
When the first name of any one of the first JS package files is inconsistent with a plurality of second names in the database, determining that the first name of each first JS package file does not exist in the database.
6. A web page opening apparatus for implementing the web page opening method according to any one of claims 1 to 5, the apparatus comprising:
the first sending module is used for sending an access request of a target webpage to a Web server and receiving a plurality of target JS package files of the target webpage returned by the Web server, wherein the plurality of target JS package files are obtained by packing front-end resources of the target webpage by the Web server;
the acquisition module is used for acquiring the opening type of the target webpage;
The second sending module is used for sending an HTML request for loading the target webpage to the Web server when the opening type of the target webpage is opened after the opening type is opened, and receiving all the first JS package files and the first names of each first JS package file, which are referred by the HTML files and returned by the Web server;
The searching module is used for searching whether a first name of each first JS package file exists in a database, wherein a plurality of second names are stored in the database, and each second name is obtained by adding a randomly generated hash value into the file name of each target JS package file by the Web server;
And the opening module is used for determining that a plurality of target JS package files of the target webpage are cached when the first name of each first JS package file exists in the database, loading the plurality of target JS package files in the cache and opening the target webpage.
7. An electronic device comprising a processor and a memory, wherein the processor is configured to implement the method for opening a web page according to any one of claims 1 to 5 when executing a computer program stored in the memory.
8. A computer readable storage medium having a computer program stored thereon, which when executed by a processor implements a method of opening a web page as claimed in any one of claims 1 to 5.
CN202110432601.XA 2021-04-21 2021-04-21 Webpage opening method and device, electronic equipment and storage medium Active CN112966205B (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202110432601.XA CN112966205B (en) 2021-04-21 2021-04-21 Webpage opening method and device, electronic equipment and storage medium

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202110432601.XA CN112966205B (en) 2021-04-21 2021-04-21 Webpage opening method and device, electronic equipment and storage medium

Publications (2)

Publication Number Publication Date
CN112966205A CN112966205A (en) 2021-06-15
CN112966205B true CN112966205B (en) 2024-06-21

Family

ID=76281023

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202110432601.XA Active CN112966205B (en) 2021-04-21 2021-04-21 Webpage opening method and device, electronic equipment and storage medium

Country Status (1)

Country Link
CN (1) CN112966205B (en)

Citations (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109634925A (en) * 2019-02-20 2019-04-16 平安科技(深圳)有限公司 Resource file downloading method, device, computer equipment and storage medium

Family Cites Families (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105095226B (en) * 2014-04-25 2019-08-02 广州市动景计算机科技有限公司 Web page resources loading method and device
CN108664296A (en) * 2017-03-31 2018-10-16 阿里巴巴集团控股有限公司 A kind of page rendering method and apparatus, a kind of page processing method and device
CN107315791A (en) * 2017-06-14 2017-11-03 广州酷狗计算机科技有限公司 Static resource caching method, device and computer-readable recording medium
CN109634654A (en) * 2018-12-04 2019-04-16 北京马上慧科技术有限公司 A kind of page packaging method, device, system, computer equipment and storage medium
CN111159615B (en) * 2019-12-31 2024-01-02 新方正控股发展有限责任公司 Webpage processing method and device

Patent Citations (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109634925A (en) * 2019-02-20 2019-04-16 平安科技(深圳)有限公司 Resource file downloading method, device, computer equipment and storage medium

Also Published As

Publication number Publication date
CN112966205A (en) 2021-06-15

Similar Documents

Publication Publication Date Title
CN107798108B (en) Asynchronous task query method and device
US11392461B2 (en) Method and apparatus for processing information
CN110908879B (en) Reporting method, reporting device, reporting terminal and recording medium of buried point data
EP1011043A2 (en) Method and apparatus for loading a java application program
CN111475764B (en) Search engine optimization method, device, terminal and storage medium
CN111090823B (en) Page application integration system, application access method, device and equipment
CN112256989A (en) Page loading method and device based on offline package, terminal equipment and storage medium
CN115145806A (en) Data acquisition method and device and computer readable storage medium
CN112347737A (en) Method and device for previewing excel file online, electronic equipment and storage medium
CN110659104B (en) Service monitoring method and related equipment
EP1280051A1 (en) Information processing method and system
CN112966205B (en) Webpage opening method and device, electronic equipment and storage medium
CN113065055B (en) News information capturing method and device, electronic equipment and storage medium
CN114185502B (en) Log printing method, device, equipment and medium based on production line environment
CN115080899A (en) Interactive sub-web page starting method, device, equipment and storage medium
Patros et al. Multitenancy benefits in application servers
CN113286014B (en) Dynamic configuration method and device of basic domain name and related equipment
CN115129348A (en) Resource updating method, device and equipment of application program and readable storage medium
CN115022397A (en) Interface parameter simplifying method and device, electronic equipment and storage medium
CN114374727B (en) Data calling method and device based on artificial intelligence, electronic equipment and medium
CN112559131A (en) Method, device and equipment for updating container mirror image and computer readable storage medium
CN114265997B (en) Page information output method, device, storage medium and terminal
CN116991331B (en) Log file storage method and device, storage medium and electronic device
CN113626739B (en) Method and system for accelerating optimization of website rendering path
CN115455331A (en) Page table single data processing method and device, electronic equipment and storage medium

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant