CN109871499A - Page loading method and client - Google Patents

Page loading method and client Download PDF

Info

Publication number
CN109871499A
CN109871499A CN201910039462.7A CN201910039462A CN109871499A CN 109871499 A CN109871499 A CN 109871499A CN 201910039462 A CN201910039462 A CN 201910039462A CN 109871499 A CN109871499 A CN 109871499A
Authority
CN
China
Prior art keywords
page
client
homepage
file
mentioned
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.)
Pending
Application number
CN201910039462.7A
Other languages
Chinese (zh)
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 Property and Casualty Insurance Company of China Ltd
Original Assignee
Ping An Property and Casualty Insurance Company of China 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 Property and Casualty Insurance Company of China Ltd filed Critical Ping An Property and Casualty Insurance Company of China Ltd
Priority to CN201910039462.7A priority Critical patent/CN109871499A/en
Publication of CN109871499A publication Critical patent/CN109871499A/en
Pending legal-status Critical Current

Links

Landscapes

  • Information Transfer Between Computers (AREA)

Abstract

The embodiment of the present application discloses a kind of page loading method i.e. and client.Wherein, this method comprises: the corresponding first page of client load homepage, the first page includes target element, wherein the target element is the component of the page to be loaded;The client monitors whether the target element initiates page load request;If the client listens to the page load request, the user end to server sends the page load request;The client receives the corresponding source file of the target element that the server is sent;The client parses the source file, obtains second page, and the client loads the second page in the first page.Using the application, page loading velocity can be improved.

Description

Page loading method and client
Technical field
This application involves field of computer technology more particularly to a kind of page loading method and clients.
Background technique
Single page Web application (single page web application, SPA) itself can regard a big page as, open up Show that different contents is content requests different among the page.
The switching time that SPA application can reduce between the page can be used family and possess better page for a user Face switching experience.For developer, SPA application is easy to dispose, and front and back end separates, and developer is made to possess higher exploitation Efficiency, and it is easy to the later maintenance of SPA application.
But for large-scale SPA project, if the complexity of the SPA project is excessively high, browser is parsing the SPA It will cause parsing slowly even blank, the problem of function pattern temporarily lacks when css the and js code of application.
It therefore, is the problem of those skilled in the art are studying for the research of SPA application.
Summary of the invention
This application provides a kind of page loading methods and relevant apparatus can be improved homepage for loading Webpage The loading velocity of the page, and realize the on-demand loading to target element in the homepage page, improve page loading velocity.
In a first aspect, this application provides a kind of page loading methods, comprising:
Client loads the corresponding first page of homepage, and the first page includes target element, wherein the target group Part is the component of the page to be loaded;
The client monitors whether the target element initiates page load request;
If the client listens to the page load request, the user end to server sends the page and adds Carry request;
The client receives the corresponding source file of the target element that the server is sent;
The client parses the source file, obtains second page, and the client loads in the first page The second page.
In the embodiment of the present application, client loads the corresponding first page of homepage first, wherein the first page includes mesh Component is marked, only when the target element initiates page load request, it is corresponding that the client just loads the target element Second page.It can be seen that implementing the embodiment of the present application, can be realized by way of monitoring target element to target element On-demand loading, improve the loading velocity of the homepage page.
In one possible implementation, before the corresponding first page of client load homepage, the method is also Include:
The client encrypts the corresponding homepage file of the homepage by Message Digest 5, obtains comprising dissipating The homepage file of train value;
The client judges whether the hashed value in the homepage file changes;
In the case where hashed value change, the client carries out Hash operation to the homepage file, is wrapped The homepage file containing cryptographic Hash, wherein the homepage file is for saving the first page.
In the embodiment of the present application, whether changed by the hashed value judged in homepage file, can judge the head in time Whether page file changes, and is timely updated the cryptographic Hash in the homepage file by Hash operation, ensure that homepage file It can timely update.
In one possible implementation, before the corresponding first page of client load homepage, the side Method further include:
The client receiving module is packaged instruction;
The client is packaged instruction according to the module and the target element is bundled in the homepage file.
In the embodiment of the present application, the homepage file module can be made by the module strapping tool, can avoid institute It states that homepage file is too big, can reduce the resources occupation rate of homepage file.
In one possible implementation, before the corresponding first page of client load homepage, the side Method further include:
The client receives code compaction instruction;
Code of the client in the homepage file according to the code compaction instruction compression.
In the embodiment of the present application, the volume of code in homepage file can be reduced by code compaction, and it is corresponding to improve homepage Application performance.
In one possible implementation, before the corresponding first page of client load homepage, the side Method further include:
The client detects whether the code in the homepage file standardizes by code detection tool;
If the code in the homepage file is lack of standardization, prompt information is exported.
In the embodiment of the present application, nonstandard code in the homepage file can detecte by code detection tool, subtract The generation rate for having lacked code vulnerabilities improves the quality of code.
In one possible implementation, the corresponding application of the homepage is single page application.
Second aspect, this application provides a kind of clients, comprising:
First loading unit, for the corresponding first page of client load homepage, the first page includes target group Part, wherein the target element is the component of the page to be loaded;
Monitoring unit monitors whether the target element initiates page load request for the client;
Transmission unit, if listening to the page load request, the user end to server for the client Send the page load request;
Receiving unit receives the corresponding source file of the target element that the server is sent for the client;
Second loading unit parses the source file for the client, obtains second page, the client is in institute It states and loads the second page in first page.
In one possible implementation, the client further include:
Encryption unit adds the corresponding homepage file of the homepage by Message Digest 5 for the client It is close, obtain the homepage file comprising hashed value;
Judging unit judges whether the hashed value in the homepage file changes for the client;
Arithmetic element, in the case where hashed value change, the client to breathe out the homepage file Uncommon operation, obtains the homepage file comprising cryptographic Hash, wherein the homepage file is for saving the first page.
In one possible implementation, the client further include:
First receiving unit is packaged instruction for the client receiving module;
Packaged unit is packaged instruction according to the module for the client and the target element is bundled to the head In page file.
In one possible implementation, the client further include:
Second receiving unit receives code compaction instruction for the client;
Compression unit, for code of the client in the homepage file according to the code compaction instruction compression.
In one possible implementation, the client further include:
Detection unit detects whether the code in the homepage file advises by code detection tool for the client Model;
Output unit exports prompt information if the code in the homepage file is lack of standardization.
The third aspect, the embodiment of the present application also provides a kind of clients, comprising: processor and memory, the processing Device and the memory are interconnected by route;Wherein, the memory is stored with program instruction;Described program is instructed by the place When managing device execution, make the corresponding method of the processor execution as described in relation to the first aspect.
In one possible implementation, which further includes input/output interface, and the input/output interface can For being communicated with other equipment or device etc..
Fourth aspect, the embodiment of the present application provide a kind of computer readable storage medium, the computer-readable storage Computer program is stored in medium, the computer program includes program instruction, and described program instruction is when by the place of client When managing device execution, the processor is made to execute method described in first aspect.
5th aspect, the embodiment of the present application provides a kind of computer program product comprising instruction, when it is in computer When upper operation, so that computer executes method described in above-mentioned first aspect.
Detailed description of the invention
Technical solution in ord to more clearly illustrate embodiments of the present application or in background technique below will be implemented the application Attached drawing needed in example or background technique is illustrated.
Fig. 1 is a kind of flow diagram of page loading method provided by the embodiments of the present application;
Fig. 2 is the flow diagram of another page loading method provided by the embodiments of the present application;
Fig. 3 is a kind of structural schematic diagram of client provided by the embodiments of the present application;
Fig. 4 is the structural schematic diagram of another client provided by the embodiments of the present application;
Fig. 5 is a kind of structural schematic diagram of client provided by the embodiments of the present application.
Specific embodiment
In order to keep the purposes, technical schemes and advantages of the application clearer, below in conjunction with attached drawing to the application make into One step it is described in detail.
The description and claims of this application and term " first " in above-mentioned attached drawing, " second " etc. are for distinguishing Different objects, is not use to describe a particular order.In addition, term " includes " and " having " and their any deformations, meaning Figure, which is to cover, non-exclusive includes.Such as contain the process, method, system, product or equipment of a series of steps or units It is not limited to listed step or unit, but optionally further comprising the step of not listing or unit, or optionally also Including other step or units intrinsic for these process, methods or equipment.
It is a kind of flow diagram of page loading method provided by the embodiments of the present application referring to Fig. 1, Fig. 1, which adds Support method can apply and client, which may include mobile phone, desktop computer, laptop computer and other equipment etc., this Shen Please embodiment be specifically what is not construed as limiting for the client.
As shown in Figure 1, the page loading method includes:
101, the corresponding first page of client load homepage, above-mentioned first page includes target element, wherein above-mentioned mesh Mark the component that component is the page to be loaded.
In the embodiment of the present application, above-mentioned first page is the corresponding page of homepage, which is referred to as start page.It should First page that homepage is seen after can opening for a website, such as Baidu's homepage, the homepage of IE browser.Alternatively, should Homepage may be the homepage of some application APP in mobile phone terminal, such as wechat homepage, Alipay homepage, etc..It is understood that It is specifically what is not construed as limiting for the homepage in the embodiment of the present application.
Specifically, including common component (such as pop-up, menu), tool class component, function class group in above-mentioned first page Part, hypertext, picture, video/audio and the corresponding component of third-party application software etc..Wherein, component it can be appreciated that Element in webpage.Wherein, above-mentioned target element is the bigger application software of occupied space, such as third-party application software, or Person, the target element may be some function class component etc..For example, which can be Taobao, Jingdone district, hundred Spend map etc. application software.And the target element be the page to be loaded component, that is to say, that the target element it is corresponding The page is not loaded, and when the component is triggered, just loads the corresponding page of the target element.It is understood that itself applying real It applies in example and the content that first page specifically includes is not construed as limiting, and be what is not construed as limiting to the target element.
Wherein, the corresponding first page of client load homepage.Homepage load can be triggered by following methods to ask It asks.For example, homepage load request can be triggered by clicking the corresponding button of the above-mentioned homepage page.Alternatively, can also lead to It crosses and inputs the keyword about the homepage, network address etc. triggering homepage load request.Alternatively, if above-mentioned client is mobile phone, The triggering mode can also be to be triggered by touching mobile phone screen.It is understood that the embodiment of the present application is for the specifically side of triggering Formula is not construed as limiting.
Wherein, the corresponding first page of above-mentioned client load homepage.Specifically, the homepage of a website is a text Shelves will be calculated when a Website server receives the message linking request of a computer internet network browser to this Machine sends this document.Alternatively, when the address field in browser inputs domain name, and when not being directed toward particular category or file, usually Browser can also open the homepage of website.
For the clearer process for illustrating to load first page, will be illustrated by taking web-page requests as an example below, such as Under it is above-mentioned:
One webpage generally can be divided into following 7 steps from request to the complete procedure finally shown:
1, network address is inputted in a browser;
2, it is sent to dns server and obtains the IP address of the corresponding WEB server of domain name;
3, TCP connection is established with WEB server;
4, browser sends corresponding HTTP request to the IP address of WEB server;
5, WEB server respond request and the data or error message of the specified URL of return, if setting redirection, weighs It is directed to the new address URL.
6, html source file is parsed after browser downloading data, the typesetting to the page is realized during parsing, has been parsed The display base page in a browser after.
7, it analyzes the hyperlink in the page and is shown in current page, repeat above procedure up to no hyperlink needs to send out It send, completes all displays.
It is understood that above-mentioned web page loading process is only used as an example to illustrate the process of above-mentioned first page load, originally Application embodiment does not make uniqueness restriction.
Optionally, before the corresponding first page of client load homepage, the above method further include:
Above-mentioned client encrypts the corresponding homepage file of above-mentioned homepage by Message Digest 5, obtains comprising dissipating The above-mentioned homepage file of train value;
Above-mentioned client judges whether the hashed value in above-mentioned homepage file changes;
In the case where the change of above-mentioned hashed value, above-mentioned client carries out Hash operation to above-mentioned homepage file, is wrapped Above-mentioned homepage file containing cryptographic Hash, wherein the homepage file is for saving the first page.
In the embodiment of the present application, eap-message digest can be understood as the regular length for uniquely corresponding to a message or text Value, acts on message by an One-way Hash Encryption function and is generated.Above-mentioned Message Digest 5 can be eap-message digest Algorithm MD (Message Digest), secure hash algorithm SHA (Secure Hash Algorithm), message authentication code algorithm MAC (Message Authentication Code) etc..It is understood that for specific eap-message digest in the embodiment of the present application Algorithm is not construed as limiting.
Above-mentioned homepage file is encrypted by above-mentioned Message Digest 5, the hash of the available homepage file Value, and the hashed value and the homepage file have unique corresponding relation, that is, modify the content of the homepage file very little, homepage text Part will be different from the hashed value before modification file content with regard to corresponding hashed value.Then above-mentioned client judges homepage file In the no change of hashed value, for example, can be understood as above-mentioned client-cache has the corresponding hashed value of above-mentioned homepage file, During loading above-mentioned homepage, above-mentioned client can be by comparing the hashed value of homepage file got and above-mentioned visitor The hashed value of family end caching compares, if two values are identical, changes, if two values are different, does not change.On it is understood that State example be only in the embodiment of the present application a kind of possible implementation, the embodiment of the present application do not make uniqueness restriction.
In the case where the change of above-mentioned hashed value, it can be understood as the content in above-mentioned homepage file changes, for example, should Variation can be version updating etc., it is therefore desirable to which timely update the corresponding hashed value of homepage file.Therefore, above-mentioned client Hash operation can be re-started to above-mentioned homepage file, obtain the corresponding cryptographic Hash of homepage file, and cache the head again The corresponding cryptographic Hash of page file ensure that client can show the homepage file pair.Wherein, above-mentioned Hash operation is a kind of dissipates Column operations can be realized by scheduling algorithms such as MD4, MD5, SHA1, and cryptographic Hash is referred to as hashed value.
Implement the embodiment of the present application, by the hashed value in verification homepage file, can find that the homepage file is in time No update, and then the cryptographic Hash of the homepage file is generated, the information of the homepage file can be cached in time, ensure that in homepage text Client can show the newest page when part updates, and improve the timeliness of page load.
102, above-mentioned client monitors whether above-mentioned target element initiates page load request.
In the embodiment of the present application, above-mentioned page load request can be understood as request and open the corresponding page of above-mentioned target element Face.For example, which can open Baidu map (the i.e. target group in the IE browser homepage page for request Part).Alternatively, the page load request can also be the small routine (i.e. target element), etc. in opening wechat.It is understood that this The particular content of page load request is not construed as limiting in application embodiment.
It can be by carrying out event prison to the corresponding button of the target element specifically, monitoring above-mentioned target element It listens, to monitor whether the target element initiates page load request.Wherein, can be understood as can be by JavaScrip for event A kind of behavior that (a kind of literal translation formula scripting language) detects.Event, which is broadly divided into, emits alveolitoid event and trap-type event.Therefore, It is following above-mentioned the embodiment of the present application also provides the method for several event monitorings:
1, event monitoring is realized in vue instruction:
V-on instruction can be used to bind and monitor DOM event.The content of binding can be on an instant example Method (below without with bracket) or an inline expression formula.Provided that be a method, then primary DOM event meeting It is passed to as first parameter, while this event can have targetVM attribute, be directed toward and trigger the corresponding of the event ViewModel。
2, the event monitoring method of versatility:
(1) HTML element attribute: < input type=" button " value=" clickMe " onclick=" is bound check(this)">
(2) DOM object properties: document.getElementById (" xxx ") .onclick=test are bound.
3, the event monitoring method in standard DOM: (1) [object] .addEvent (" event type ", " handles letter Number ", " bubbling event or capturing events ");(2) [object] .removeEvent (" event type ", " processing function ", " bubbling Event or capturing events ").
The monitoring to target element may be implemented by the above method.It is understood that for specific in the embodiment of the present application Event monitoring method is not construed as limiting.
Implement the present embodiment, it, can be with by way of monitoring target element when target element initiates page load request The page load request is monitored in real time, can avoid because that cannot get the page load request in time, and delays the target element The loading velocity of corresponding page improves the speed of page load.
If 103, above-mentioned client listens to above-mentioned page load request, above-mentioned user end to server sends above-mentioned page Face load request.
In the embodiment of the present application, above-mentioned client listens to above-mentioned page load request, it can be understood as page load Request is triggered.Specifically, then the page load request is triggered when the corresponding button of the above-mentioned target element of mouse click; Alternatively, trigger the corresponding interface element of the target element by touch screen, then the page load request is triggered, etc..It can manage Solution, the embodiment of the present application are not construed as limiting specific triggering mode.
Specifically, including domain name, above-mentioned client (browser specially in client) in above-mentioned page load request The domain name can be parsed first, find the corresponding host ip of the domain name.Then, which can utilize the IP directly and web host Communication, detailed process can be that browser issues TCP (SYN flag position is 1) connection request, and host returns to TCP (SYN, ACK mark Will position is 1) response message, and it is 1 that browser, which receives response message discovery ACK flag position, indicates connection request confirmation.Browser TCP acknowledgment message is returned to, host receives confirmation message, and three-way handshake, TCP link, which is established, to be completed.Last browser, which initiates GET, asks It asks, i.e., browser initiates a HTTP-GET method message request to host.Wherein, above-mentioned HTTP-GET method message request is For above-mentioned page load request.It is understood that the application is not construed as limiting the content of specific page load request, and for The page load request how is initiated to be not construed as limiting.
104, above-mentioned client receives the corresponding source file of above-mentioned target element that above-mentioned server is sent.
In the embodiment of the present application, when the page load request that above-mentioned target element is initiated is sent to service by above-mentioned client After device, and after server makes a response the page load request, what above-mentioned client can receive server transmission should The corresponding source file of target element.Wherein, which is html source file.
Wherein, above-mentioned source file is used to save the page of above-mentioned target element.For example, if above-mentioned target element is hundred Map is spent, then the source file can be the file, etc. of storage Baidu map page info.It is understood that the embodiment of the present application pair What it is in the source file is specifically what is not construed as limiting.
105, above-mentioned client parses above-mentioned source file, obtains second page, and above-mentioned client loads above-mentioned second page.
In the embodiment of the present application, above-mentioned second page is the corresponding page of above-mentioned target element.It is understood that the second page Face includes common component (such as pop-up, menu), tool class component, function class component, hypertext, picture, video/audio etc.. Wherein, component is it can be appreciated that element in webpage.
Specifically, above-mentioned client, after obtaining above-mentioned source file, which can be html source file, then solve The html source file is analysed, and realizes the typesetting to second page in resolving, after above-mentioned client is parsed, Above-mentioned client can show the second page in above-mentioned first page, it is appreciated that the loading procedure of the second page can refer to The loading procedure of above-mentioned first page, is no longer described in detail one by one herein.It is also understood that above-mentioned second page it can be appreciated that on Homepage is stated, therefore also includes the component that there are same characteristics with above-mentioned target element in the second page, therefore, when having loaded the After two pages, process that can also be above-mentioned according to above-mentioned steps 101 to 105, details are not described herein.
Optionally, the corresponding application of above-mentioned homepage is single page application.
Specifically, single page application be referred to as single page Web application (single page web application, SPA), it is exactly the application of only one Web page, is the single html page of load and the dynamic when user interacts with application program Update the web application of the page.
Implement the embodiment of the present application, after client has loaded first page, if the target group in the first page Part initiates page load request, then the corresponding second page of corresponding load target element, if the target element is not initiated Page load request, then be not loaded with second page, can avoid the target element and do not initiate page load request just loading in advance Second page is completed, the on-demand loading of target element is can be realized, improves the loading velocity of the homepage page.
Referring to fig. 2, Fig. 2 is the flow diagram of another page loading method provided by the embodiments of the present application, such as Fig. 2 institute Show, which includes:
201, above-mentioned client detects whether the code in homepage file standardizes by code detection tool, if above-mentioned homepage Code in file is lack of standardization, then exports prompt information, wherein the homepage file is for saving the first page.
In the embodiment of the present application, the code in above-mentioned homepage file can have nonstandard place, it is therefore desirable to code inspection The normalization of survey tool guarantee code.
Wherein, above-mentioned code detection tool can be esLint tool.EsLint tool is one and is used to identify ECMAScript and the code detection tool that report is provided according to rule, can be to avoid lower level error and Unicode using it Style.ESLint is designed to fully configurable, configures ESLint there are mainly two types of mode:
(1) it configures in annotation: directly configuration being embedded into JS file using JavaScript annotation.
(2) configuration file: using following any file come the subdirectory specified configuration information for whole catalogues and it.
Javascript: using .eslintrc.js file and the object comprising configuration is exported.
YAML:.eslintrc.yaml or .eslintrc.yml.
JSON:.eslintrc.json, and this file allows the annotation using JS form.
Package.json: creating eslintConfig attribute in package.json file, and all configurations include In this attribute.The priority of these files are as follows:
(.eslintrc.js>.eslintrc.yaml>.eslintrc.yml>.eslintrc.json>.eslintrc> package.json)。
Wherein it is possible to which the information being configured is broadly divided into 3 classes:
Environments: your javascript script will operate in what environment (such as: nodejs, browser, Commonjs etc.) in.
Globals: step needs the additional global variable accessed when executing code.
Rules: opening certain rules, and the grade of rule also can be set.
It is understood that being specifically that tool is not construed as limiting for the code detection tool in the embodiment of the present application.
When detecting nonstandard code, client can export corresponding prompt information, which can be police Accuse prompt, or miscue etc..It is understood that being not construed as limiting in the embodiment of the present application for specific prompt information.
Implement the embodiment of the present application, code is detected by code detection tool, it can be in time by nonstandard generation Code is found out, and a possibility that code generates bug is reduced, and be can avoid causing file compiling wrong because code is lack of standardization, be improved The quality of code.
202, above-mentioned client receives code compaction instruction, and above-mentioned client is according to above-mentioned code compaction instruction compression homepage Code in file.
In the embodiment of the present application, above-mentioned homepage file is the corresponding file of homepage.And above-mentioned homepage file can be js text Part.Above-mentioned code compaction instruction can be the instruction of user's input.It is instructed when above-mentioned client receives above-mentioned code compaction Afterwards, above-mentioned client can complete the compression to the code in above-mentioned homepage file by corresponding code compaction tool.
Wherein, above-mentioned code compaction tool can be UglifyJS, and it is one that UglifyJS, which is the predecessor of UglifyJS2, One kit of general syntactic analysis, code compaction, code optimization that Javascript is developed.UglifyJS is to be based on Nodejs environment exploitation supports the arbitrary Javascript platform of CommonJS modular system.
The realization of UglifyJS is broadly divided into 2 parts:
1, the abstract syntax tree (AST) for generating JS code, is completed by parse-js.js.
2, AST syntax tree is traversed, various operations are done, for example is retracted automatically, is shortened variable name, delete block bracket { }, remove sky Lattice, constant expression, continuous variable are stated, language block merges, removes the code that can not be accessed etc., are completed by process.js.
Above-mentioned code compaction tool can also be UglifyJS2, and it is complete that UglifyJS2, which is the rewriting to UglifyJS, Rewriting, rather than just upgrading.In terms of the webpage introduction of the lawsuit side UglifyJS2, UglifyJS2 is compressed entire JS Journey has done further refinement.
1, parser, for realizing abstract language method tree (AST).
2, the code generator generates JS code and source map by AST.
3, compressor, the compression for JS code.
4, mangler is replaced for reducing the name of local variable with single-letter.
5, scope analyzer, for the tool of the judgment variable range of definition and variable reference range.
6, tree walker, AST tree traversal tool.
7, tree transformer, AST tree crossover tool.
Above-mentioned all function code API are that the development kit in the left and right of 6500 rows, than other identical functions will be small.
It is understood that being specifically what is not construed as limiting for the code detection tool in the embodiment of the present application.
Implement the embodiment of the present application, the code in above-mentioned homepage file is compressed by code compaction tool, it can be with Guarantee code is ciphertext code, and the volume that can avoid code is excessive, improves performance.
203, above-mentioned client receiving module is packaged instruction, and the client is packaged instruction for the mesh according to the module Mark component is bundled in the homepage file.
In the embodiment of the present application, above-mentioned target element is to occupy the bigger applied function module of resource, as Baidu map, The application modules such as Taobao, Jingdone district.And the corresponding js file of the target element, such as baiduditu.js file, taobao.js text Part, jingdong.js file etc..Wherein, above-mentioned homepage file can be bundle.js file, for example, should Bundle.js file includes main.js file (i.e. entry file), a.js file, b.js file, it will be appreciated that above-mentioned a.js text Part, b.js file are the corresponding js file of target element.
Since above-mentioned entry file and above-mentioned js file are all bigger files, if by the js file and entrance text It (includes above-mentioned entry file and above-mentioned js i.e. in the new homepage file that part, which is bundled to and obtains a new homepage file together, File), it is very big to will cause the new homepage file, more resource is occupied, when loading the new homepage file, load speed Degree can be very slow, and therefore, it is necessary to reasonably be packaged the entry file and the js file.Correspondingly, the embodiment of the present application also provides A kind of method being packaged the entry file He the js file, following above-mentioned:
Specifically, can be realized jointly by vue frame and webpack tool to above-mentioned entry file and above-mentioned js file Packing.Wherein, vue is the gradual frame of a set of building user interface, which includes a series of tools: vue.js Core;VueRouter2 realizes routing tool;Webpack project is packaged and compilation tool;Ring is developed in the front end nodejs Border;The front end npm package manager;Axios ajax interface requests tool;Sass-loader and node-sass CSS pretreatment; Back-end component library of the element based on vue;Another set of back-end component library of the iview based on vue;Vue-cli vue project foot hand The tool of frame, i.e. the one button installation vue whole family bucket.
Optionally, above-mentioned client can also use (hereinafter referred to as ES6) module of ECMAScript 6.0 to construct above-mentioned head Page to application.ES6 is the generation standard of JavaScript language, enables to JavaScript language that can be used to compile Complicated large-scale application program is write, Enterprise Development language is become.It is developed by using es6 module, can be avoided name The conflict in space reduces loophole generation rate.
Wherein it is possible to be realized to above-mentioned occupancy resource very by this function of require.ensure in webpack The code division of big sub-function module.Wherein, which is above-mentioned target element, and code division is that module is beaten Packet.Each js file is a resource, and the js file of each sub-function module can be imported by require;And each enter Mouth file can rely on (i.e. require) one or more resources, and these resources can be all packaged with by webpack, When one of resource is repeatedly quoted, then a resource can be only packaged once.
For example, the above-mentioned entry file entirely applied is entry.js, which relies on three js files, Abtn-work.js file, the Abtn-work.js file are to encapsulate the service logic just executed after abtn button is clicked; Bbtn-work.js file, the Bbtn-work.js file are to encapsulate the service logic just executed after bbtn button is clicked;With And util.js file, the util.js file are the tool boxes for encapsulating entry.js and needing to utilize.If Abtn-work.js is literary Part, Bbtn-work.js file and util.js file are all very big files, and entry.js file may include Abtn- Work.js and Bbtn-work.js both of these documents can not also include both of these documents, i.e. function corresponding to both of these documents It can be the operation that possible occur, then the corresponding function of both of these documents is subjected to on-demand loading by the way of asynchronous load; Util.js file is the entry.js file tool box that synchronization relies in load, since util.js file is very big, The util.js file can be packaged into a public module, and concurrently adding using browser by the configuration of webpack tool Load mode realizes the load to the util.js file.It is understood that in the embodiment of the present application for specific module strapping tool and Packing manner is not construed as limiting.
Implement the embodiment of the present application, subfunction mould that through the above way can be bigger by occupied space in above-mentioned application Block is rationally packaged into several different modules, can avoid causing page load because being packaged into a big file slowly, even There is the case where blank in page load, greatly improves the loading velocity of the page and the satisfaction of user experience.
It is understood that Fig. 1 and embodiment of the method shown in Fig. 2 emphasize particularly on different fields, not detailed description in one embodiment Implementation reference may also be made to other embodiments.
It is above-mentioned to illustrate the method for the embodiment of the present application, the device of the embodiment of the present application is provided below.
It is a kind of structural schematic diagram of client provided by the embodiments of the present application referring to Fig. 3, Fig. 3, as shown in figure 3, the visitor Family end includes:
First loading unit 301, for the corresponding first page of client load homepage, above-mentioned first page includes target Component, wherein above-mentioned target element is the component of the page to be loaded;
Monitoring unit 302 monitors whether above-mentioned target element initiates page load request for above-mentioned client;
Transmission unit 303, if listening to above-mentioned page load request for above-mentioned client, above-mentioned client is to service Device sends above-mentioned page load request;
Receiving unit 304 receives the corresponding source document of above-mentioned target element that above-mentioned server is sent for above-mentioned client Part;
Second loading unit 305 parses above-mentioned source file for above-mentioned client, obtains second page, above-mentioned client Above-mentioned second page is loaded in above-mentioned first page.
Optionally, referring to fig. 4, Fig. 4 is the structural schematic diagram of another client provided by the embodiments of the present application, such as Fig. 4 It is shown, the client further include:
Encryption unit 306, for above-mentioned client by Message Digest 5 to the corresponding homepage file of above-mentioned homepage into Row encryption, obtains the above-mentioned homepage file comprising hashed value;
Judging unit 307 judges whether the hashed value in above-mentioned homepage file changes for above-mentioned client;
Arithmetic element 308, in the case where the change of above-mentioned hashed value, above-mentioned client to carry out above-mentioned homepage file Hash operation obtains the above-mentioned homepage file comprising cryptographic Hash, wherein above-mentioned homepage file is for saving above-mentioned first page.
Optionally, referring to fig. 4, Fig. 4 is the structural schematic diagram of another client provided by the embodiments of the present application, such as Fig. 4 It is shown, the client further include:
First receiving unit 309 is packaged instruction for above-mentioned client receiving module;
Packaged unit 3010 is packaged instruction according to above-mentioned module for above-mentioned client and is bundled to above-mentioned target element It states in homepage file.
Optionally, referring to fig. 4, Fig. 4 is the structural schematic diagram of another client provided by the embodiments of the present application, such as Fig. 4 It is shown, the client further include:
Second receiving unit 3011 receives code compaction instruction for above-mentioned client;
Compression unit 3012, for above-mentioned client according to the generation in the above-mentioned homepage file of above-mentioned code compaction instruction compression Code.
Optionally, referring to fig. 4, Fig. 4 is the structural schematic diagram of another client provided by the embodiments of the present application, such as Fig. 4 It is shown, the client further include:
Detection unit 3013, detecting the code in above-mentioned homepage file by code detection tool for above-mentioned client is No specification;
Output unit 3014 exports prompt information if the code in above-mentioned homepage file is lack of standardization.
It is a kind of structural schematic diagram of client provided by the embodiments of the present application referring to Fig. 5, Fig. 5, which includes place Device 501, memory 502 and input/output interface 503 are managed, above-mentioned processor 501, memory 502 and input/output interface 503 are logical Cross bus interconnection.
Memory 502 include but is not limited to be random access memory (random access memory, RAM), it is read-only Memory (read-only memory, ROM), Erasable Programmable Read Only Memory EPROM (erasable programmable Read only memory, EPROM) or portable read-only memory (compact disc read-only memory, CD- ROM), which is used for dependent instruction and data.
Input/output interface 503, such as can be communicated etc. by the input/output interface with other devices.
Processor 501 can be one or more central processing units (central processing unit, CPU), locate In the case that reason device 501 is a CPU, which can be monokaryon CPU, be also possible to multi-core CPU.
Specifically, the realization of each operation can also correspond to referring to Figures 1 and 2 shown in embodiment of the method accordingly retouch It states.And the realization of each operation can also corresponding description to should refer to Fig. 3 and Installation practice shown in Fig. 4.
As in one embodiment, processor 501 can be used for executing shown in step 101, step 102 and step 105 Method, for another example the processor 501 can also be used to execute the first loading unit 301, monitoring unit 302 and the second loading unit 305 equal performed methods.
For another example in one embodiment, input/output interface 503, it may also be used for execute transmission unit 303 and receiving unit Method performed by 304.
It is designed it is understood that Fig. 5 illustrate only simplifying for client.In practical applications, data processing equipment Necessary other elements can also be separately included, including but not limited to any number of input/output interface, processor, memory Deng, and all clients that the embodiment of the present application may be implemented are all within the scope of protection of this application.
It is apparent to those skilled in the art that for convenience and simplicity of description, the device of foregoing description It with the specific work process of unit, can refer to corresponding processes in the foregoing method embodiment, details are not described herein.
Those of ordinary skill in the art will appreciate that realizing all or part of the process in above-described embodiment method, the process Relevant hardware can be instructed to complete by computer program, which can be stored in computer-readable storage medium, should Program is when being executed, it may include such as the process of above-mentioned each method embodiment.And storage medium above-mentioned includes: ROM or deposits at random Store up the medium of the various program storage codes such as memory body RAM, magnetic or disk.

Claims (10)

1. a kind of page loading method, which is characterized in that the described method includes:
Client loads the corresponding first page of homepage, and the first page includes target element, wherein the target element is The component of the page to be loaded;
The client monitors whether the target element initiates page load request;
If the client listens to the page load request, the user end to server sends the page load and asks It asks;
The client receives the corresponding source file of the target element that the server is sent;
The client parses the source file, obtains second page, described in the client loads in the first page Second page.
2. the method according to claim 1, wherein before the corresponding first page of client load homepage, The method also includes:
The client encrypts the corresponding homepage file of the homepage by Message Digest 5, obtains comprising hashed value The homepage file;
The client judges whether the hashed value in the homepage file changes;
In the case where hashed value change, the client carries out Hash operation to the homepage file, obtains comprising breathing out The homepage file of uncommon value, wherein the homepage file is for saving the first page.
3. according to the method described in claim 2, it is characterized in that, the corresponding first page of client load homepage it Before, the method also includes:
The client receiving module is packaged instruction;
The client is packaged instruction according to the module and the target element is bundled in the homepage file.
4. according to the method described in claim 3, it is characterized in that, the corresponding first page of client load homepage it Before, the method also includes:
The client receives code compaction instruction;
Code of the client in the homepage file according to the code compaction instruction compression.
5. according to the method described in claim 4, it is characterized in that, the corresponding first page of client load homepage it Before, the method also includes:
The client detects whether the code in the homepage file standardizes by code detection tool;
If the code in the homepage file is lack of standardization, prompt information is exported.
6. method according to claim 1-5, which is characterized in that the corresponding application of the homepage is answered for single page With.
7. a kind of client, which is characterized in that the client includes:
First loading unit, for the corresponding first page of client load homepage, the first page includes target element, In, the target element is the component of the page to be loaded;
Monitoring unit monitors whether the target element initiates page load request for the client;
Transmission unit, if listening to the page load request for the client, the user end to server is sent The page load request;
Receiving unit receives the corresponding source file of the target element that the server is sent for the client;
Second loading unit parses the source file for the client, obtains second page, and the client is described the The second page is loaded in one page.
8. the method according to the description of claim 7 is characterized in that the client further include:
Encryption unit encrypts the corresponding homepage file of the homepage by Message Digest 5 for the client, Obtain the homepage file comprising hashed value;
Judging unit judges whether the hashed value in the homepage file changes for the client;
Arithmetic element, in the case where hashed value change, the client to carry out Hash fortune to the homepage file It calculates, obtains the homepage file comprising cryptographic Hash, wherein the homepage file is for saving the first page.
9. a kind of client, which is characterized in that including processor, input equipment, output equipment and memory, the processor, Input equipment, output equipment and memory are connected with each other, wherein the memory is for storing computer program, the calculating Machine program includes program instruction, and the processor is configured for calling described program instruction, is executed as claim 1-6 is any The corresponding function of method described in.
10. a kind of computer storage medium, which is characterized in that the computer storage medium is stored with computer program, described Computer program includes program instruction, and described program instruction makes the processor execute such as claim when being executed by a processor The described in any item methods of 1-6.
CN201910039462.7A 2019-01-16 2019-01-16 Page loading method and client Pending CN109871499A (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201910039462.7A CN109871499A (en) 2019-01-16 2019-01-16 Page loading method and client

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201910039462.7A CN109871499A (en) 2019-01-16 2019-01-16 Page loading method and client

Publications (1)

Publication Number Publication Date
CN109871499A true CN109871499A (en) 2019-06-11

Family

ID=66917724

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201910039462.7A Pending CN109871499A (en) 2019-01-16 2019-01-16 Page loading method and client

Country Status (1)

Country Link
CN (1) CN109871499A (en)

Cited By (14)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN110333863A (en) * 2019-06-17 2019-10-15 无线生活(杭州)信息科技有限公司 A kind of method and device for generating, showing the small routine page
CN110442808A (en) * 2019-06-28 2019-11-12 苏宁云计算有限公司 Page rendering acceleration method and device
CN110471709A (en) * 2019-07-15 2019-11-19 北京字节跳动网络技术有限公司 A kind of method, apparatus, medium and electronic equipment accelerating webpage opening speed
CN111506844A (en) * 2020-04-08 2020-08-07 聚好看科技股份有限公司 Page processing method, equipment and computer storage medium
CN111581569A (en) * 2020-04-01 2020-08-25 车智互联(北京)科技有限公司 Webpage resource updating method and system
CN111666585A (en) * 2020-04-16 2020-09-15 北京百度网讯科技有限公司 Method and device for accessing sub-application, electronic equipment and readable storage medium
CN111708522A (en) * 2020-06-23 2020-09-25 西安雷风电子科技有限公司 Video playing component development method and device
CN111796878A (en) * 2020-06-05 2020-10-20 北京沃东天骏信息技术有限公司 Resource splitting and loading method and device applied to single-page application
CN112100555A (en) * 2020-08-18 2020-12-18 北京思特奇信息技术股份有限公司 Method and system for realizing single-page application in native HTML5 page
CN112817700A (en) * 2021-02-25 2021-05-18 北京顶象技术有限公司 Method and device for realizing active updating of client script and computer equipment
CN113326231A (en) * 2021-05-27 2021-08-31 北京沃东天骏信息技术有限公司 Picture resource processing method and device
CN113486267A (en) * 2021-07-27 2021-10-08 平安国际智慧城市科技股份有限公司 Analysis method, device and equipment of application entry page and storage medium
CN114003471A (en) * 2022-01-04 2022-02-01 深圳市明源云科技有限公司 Page loading analysis method and device and readable storage medium
CN114357339A (en) * 2022-03-17 2022-04-15 杭州互链互联网技术有限公司 Page loading method and device and storage medium

Citations (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101035262A (en) * 2007-04-19 2007-09-12 深圳市融合视讯科技有限公司 Video information transmission method
CN101551819A (en) * 2009-04-30 2009-10-07 用友软件股份有限公司 A method for rendering large-scale Web page
US20090282022A1 (en) * 2008-05-12 2009-11-12 Bennett James D Web browser accessible search engine that identifies search result maxima through user search flow and result content comparison
CN101945263A (en) * 2007-05-08 2011-01-12 孟智平 Method for using information sets in video resources
CN103036898A (en) * 2012-12-21 2013-04-10 上海现代先进超精密制造中心有限公司 Controllable waterfall-type file pushing method
CN106202100A (en) * 2015-05-05 2016-12-07 腾讯科技(深圳)有限公司 The loading method of the page and device
WO2017166806A1 (en) * 2016-03-29 2017-10-05 上海斐讯数据通信技术有限公司 Browser-based method for jumping to access authentication page, and user terminal
CN107797837A (en) * 2017-08-30 2018-03-13 上海壹账通金融科技有限公司 Page display method, device, server and medium
CN108228282A (en) * 2018-04-04 2018-06-29 北京三快在线科技有限公司 For the method and device of Website page loading

Patent Citations (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101035262A (en) * 2007-04-19 2007-09-12 深圳市融合视讯科技有限公司 Video information transmission method
CN101945263A (en) * 2007-05-08 2011-01-12 孟智平 Method for using information sets in video resources
US20090282022A1 (en) * 2008-05-12 2009-11-12 Bennett James D Web browser accessible search engine that identifies search result maxima through user search flow and result content comparison
CN101551819A (en) * 2009-04-30 2009-10-07 用友软件股份有限公司 A method for rendering large-scale Web page
CN103036898A (en) * 2012-12-21 2013-04-10 上海现代先进超精密制造中心有限公司 Controllable waterfall-type file pushing method
CN106202100A (en) * 2015-05-05 2016-12-07 腾讯科技(深圳)有限公司 The loading method of the page and device
WO2017166806A1 (en) * 2016-03-29 2017-10-05 上海斐讯数据通信技术有限公司 Browser-based method for jumping to access authentication page, and user terminal
CN107797837A (en) * 2017-08-30 2018-03-13 上海壹账通金融科技有限公司 Page display method, device, server and medium
CN108228282A (en) * 2018-04-04 2018-06-29 北京三快在线科技有限公司 For the method and device of Website page loading

Cited By (20)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN110333863A (en) * 2019-06-17 2019-10-15 无线生活(杭州)信息科技有限公司 A kind of method and device for generating, showing the small routine page
CN110333863B (en) * 2019-06-17 2023-05-30 无线生活(杭州)信息科技有限公司 Method and device for generating and displaying applet page
CN110442808A (en) * 2019-06-28 2019-11-12 苏宁云计算有限公司 Page rendering acceleration method and device
CN110471709B (en) * 2019-07-15 2022-12-06 北京字节跳动网络技术有限公司 Method, device, medium and electronic equipment for accelerating webpage opening speed
CN110471709A (en) * 2019-07-15 2019-11-19 北京字节跳动网络技术有限公司 A kind of method, apparatus, medium and electronic equipment accelerating webpage opening speed
CN111581569A (en) * 2020-04-01 2020-08-25 车智互联(北京)科技有限公司 Webpage resource updating method and system
CN111581569B (en) * 2020-04-01 2023-05-26 车智互联(北京)科技有限公司 Webpage resource updating method and system
CN111506844A (en) * 2020-04-08 2020-08-07 聚好看科技股份有限公司 Page processing method, equipment and computer storage medium
CN111666585A (en) * 2020-04-16 2020-09-15 北京百度网讯科技有限公司 Method and device for accessing sub-application, electronic equipment and readable storage medium
CN111666585B (en) * 2020-04-16 2023-08-18 北京百度网讯科技有限公司 Method and device for accessing sub-application, electronic equipment and readable storage medium
CN111796878A (en) * 2020-06-05 2020-10-20 北京沃东天骏信息技术有限公司 Resource splitting and loading method and device applied to single-page application
CN111796878B (en) * 2020-06-05 2024-04-12 北京沃东天骏信息技术有限公司 Resource splitting and loading method and device applied to single-page application
CN111708522A (en) * 2020-06-23 2020-09-25 西安雷风电子科技有限公司 Video playing component development method and device
CN112100555A (en) * 2020-08-18 2020-12-18 北京思特奇信息技术股份有限公司 Method and system for realizing single-page application in native HTML5 page
CN112817700A (en) * 2021-02-25 2021-05-18 北京顶象技术有限公司 Method and device for realizing active updating of client script and computer equipment
CN113326231A (en) * 2021-05-27 2021-08-31 北京沃东天骏信息技术有限公司 Picture resource processing method and device
CN113486267A (en) * 2021-07-27 2021-10-08 平安国际智慧城市科技股份有限公司 Analysis method, device and equipment of application entry page and storage medium
CN113486267B (en) * 2021-07-27 2024-01-23 平安国际智慧城市科技股份有限公司 Method, device, equipment and storage medium for analyzing application entry page
CN114003471A (en) * 2022-01-04 2022-02-01 深圳市明源云科技有限公司 Page loading analysis method and device and readable storage medium
CN114357339A (en) * 2022-03-17 2022-04-15 杭州互链互联网技术有限公司 Page loading method and device and storage medium

Similar Documents

Publication Publication Date Title
CN109871499A (en) Page loading method and client
US10108595B2 (en) Method and system for automated analysis and transformation of web pages
US9456019B2 (en) Web page load time prediction and simulation
JP3762687B2 (en) System and method for dynamically displaying HTML form elements
US10209968B2 (en) Application compiling
CN106663002A (en) REST service source code generation
EP3077950A1 (en) Directed execution of dynamic programs in isolated environments
CN112631590B (en) Component library generation method, device, electronic equipment and computer readable medium
CN108846286A (en) Cross site scripting leak detection method and device
CN111814024A (en) Distributed data acquisition method, system and storage medium
CN111880789A (en) Page rendering method, device, server and computer-readable storage medium
JP5604016B1 (en) Script caching method and information processing apparatus using the same
CN114491560A (en) Vulnerability detection method and device, storage medium and electronic equipment
US11115462B2 (en) Distributed system
CN112346774A (en) Method and device for generating application installation package
JP2013122655A (en) Browser execution script conversion system and browser execution script conversion program
CN105808727A (en) Website cross-screen adaptation technology architecture and adaptation method based on HTML5 (Hypertext Markup Language 5)
US10146885B1 (en) Method and system for deciding on ordering of scripting language source code for dependency resolution
CN104767808B (en) A kind of WEB Proxy Method based on support AJAX
CN116955861A (en) Page generation method and device and front-end fusion system
Rahmel et al. Testing a site with ApacheBench, JMeter, and Selenium
CN113420199A (en) Data acquisition method and device for application program
Aivaliotis Mastering Nginx
CN112965749B (en) Request path acquisition method, apparatus, computer device and storage medium
JP2016018552A (en) Script caching method and information processing device utilizing the same

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
RJ01 Rejection of invention patent application after publication

Application publication date: 20190611

RJ01 Rejection of invention patent application after publication