CN111563225A - Source code filling method and platform for overcoming first screen blank - Google Patents
Source code filling method and platform for overcoming first screen blank Download PDFInfo
- Publication number
- CN111563225A CN111563225A CN202010666332.9A CN202010666332A CN111563225A CN 111563225 A CN111563225 A CN 111563225A CN 202010666332 A CN202010666332 A CN 202010666332A CN 111563225 A CN111563225 A CN 111563225A
- Authority
- CN
- China
- Prior art keywords
- webpage
- source code
- page
- headless browser
- filling
- 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
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/951—Indexing; Web crawling techniques
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
Abstract
A source code filling method and a platform for overcoming the blank of a first screen comprise the following steps of running on a processing terminal: in the project construction stage of H5 front-end development, a headless browser is utilized to pre-load a corresponding page, and webpage source codes are captured and filled into a packaged and generated html file. The defect that the H5 front-end development in the prior art has a blank first screen is effectively overcome by combining other structures and methods.
Description
Technical Field
The invention relates to the technical field of overcoming the blank of a first screen, belongs to the technical field of source code filling methods, and particularly relates to a source code filling method and a platform for overcoming the blank of the first screen.
Background
The front-end development is a process of creating a front-end interface such as a Web page or app and the like and presenting the front-end interface to a user, and user interface interaction of an internet product is realized through HTML, CSS and JavaScript and various derived technologies, frames and solutions. The commonly used H5 front-end development refers to a process of making a web page through html markup language.
Most of the current H5 front-end development is packed by webpack, which writes script droplets in the form of commonJS, but the support for AMD/CMD is complete, and the code migration of old items is convenient. The system supports the calling of a plurality of module loaders, and can make the module loaders flexibly customized, such as a babel-loader, which enables an operator to write codes by using the grammar of ES 6; the development is convenient, and the work of partial grunt/gulp can be replaced, such as packaging, compression confusion, picture transfer to base64 and the like. The cache function of the browser can be effectively utilized to improve the performance by being configured and packaged into a plurality of files. The first screen under the webpack packaging is generally blank html, and then the page rendering is realized by the loaded js file, so that the problem of blank first screen occurs.
Disclosure of Invention
In order to solve the problems, the invention provides a source code filling method and a platform for overcoming the first screen blank, which effectively overcome the defect that the first screen blank can occur in the H5 front-end development in the prior art.
In order to overcome the defects in the prior art, the invention provides a solution for a source code filling method and a platform for overcoming the blank of a first screen, which comprises the following steps:
a filling method of a source code platform for overcoming the blank of a first screen is operated on a processing terminal and comprises the following steps:
in the project construction stage of H5 front-end development, a headless browser is utilized to pre-load a corresponding page, and webpage source codes are captured and filled into a packaged and generated html file.
Further, the headless browser is a puppeteer headless browser of google.
Further, the method for preloading a corresponding page and capturing a webpage source code and filling the webpage source code into the html file generated by packaging by using the headless browser includes:
before the webpage is released, the webpage is implicitly accessed by using an interface provided by development version chromium of a puppeteer headless browser of Google, after the webpage is loaded, source codes of the webpage are captured by using the interface provided by the development version chromium again, contents required by a user are obtained after processing by a set algorithm, and the contents are injected into an html file generated by packaging the webpage codes. puppeteer in the puppeteer headless browser is actually a whole set of API for controlling the browser, and can be understood as a browser without an interface. Headless browsers are colloquially speaking browsers without an interface. And the API provided by the browser is used for calling, so that rich functions can be realized. There are cases on the web where crawler development is performed using Puppeteer. Through the function provided by the headless browser, the development can be conveniently carried out on the server side, and some complex webpage interaction is completed.
Further, the implicit access webpage is a background access webpage.
A source code platform to overcome first screen blanks, comprising: the loading module and the filling module run on the processing terminal;
the loading module is used for pre-loading a corresponding page by using a headless browser;
the filling module is used for capturing webpage source codes and filling the webpage source codes into the html file generated by packaging.
Further, the loading module is also used for implicitly accessing the webpage by using an interface provided by a chroma of a development version of a puppeteer headless browser of google before the webpage is released;
the filling module is also used for capturing the source codes of the webpage by using an interface provided by development version chromium, obtaining contents required by a user after processing by a set algorithm, and then injecting the contents into the html file generated by packaging the webpage codes.
Further, the implicitly accessing the web page by using the interface provided by the chrome, a development version of the puppeteer headless browser of google comprises:
launch development version of chrome with third party library puppeter. launch () method of npm, create a new page window with puppeter. newpage (), access specified page with puppeter. goto ().
The interface provided by the development version of the chrome is reused for capturing the source code of the webpage, and the method comprises the following steps:
generating an instance page of a current page by using a newPage method of puppeter, and acquiring a source code of the current page by using page content ();
the setting algorithm comprises the following steps: and formatting the captured content by using an open source tool html-minifier, wherein the open source tool html-minifier comprises a function method such as removeComments, collapseWhitespace, minifyJS and minifyCSS.
The invention has the beneficial effects that:
according to the method and the device, the corresponding page is loaded in advance, the webpage source codes are captured and filled into the html file generated by packaging, the problem of blank first screen can be solved, and the user experience is improved.
Drawings
Fig. 1 is a basic flowchart of a filling method of a source code platform for overcoming the blank of a first screen.
Fig. 2 is a detailed flowchart of a filling method of a source code platform for overcoming the blank of the first screen.
Detailed Description
The invention will be further described with reference to the following figures and examples.
As shown in fig. 1-2, the method for filling a source code platform for overcoming the blank of the first screen, which is executed on a processing terminal, includes the following steps:
in order to cancel the blank period of the first screen blank, in the project construction stage of the H5 front-end development, a headless browser is used to pre-load a corresponding page, and a webpage source code is captured and filled into a html file generated by packaging. The processing terminal can be a computer, a notebook computer, a single chip microcomputer, a server or a tablet computer.
Therefore, the corresponding page is loaded in advance, the webpage source codes are captured and filled into the html file generated by packaging, the problem of blank first screen can be solved, and the user experience is improved.
The headless browser is a puppeteer headless browser of google.
The method for pre-loading the corresponding page by using the headless browser and capturing the webpage source code and filling the webpage source code into the html file generated by packaging comprises the following steps:
before the webpage is released, the webpage is implicitly accessed by using an interface provided by development version chromium of a puppeteer headless browser of Google, after the webpage is loaded, source codes of the webpage are captured by using the interface provided by the development version chromium again, contents required by a user are obtained after processing by a set algorithm, and the contents are injected into an html file generated by packaging the webpage codes. Therefore, the user can directly see the content in normal access without the problem of blank first screen, and the time consumed by waiting for loading the webpage is not needed.
The applicable scenes of the method comprise: different web pages need to correspond to a plurality of html, and the content of the web page is not strongly related to the user information. In the aspect of not being strongly associated with the user information, the display of the pages of some web pages is strongly associated with the user information, and the information such as id, lottery frequency, prize and the like of each person is different like a certain lottery activity page. If static rendering is carried out, each person sees the information of the same person, so that the business requirement is obviously contradictory. The DOM nodes displaying the personal information can be identified in a development stage by the method, and are avoided or default information, such as default head portraits and the like, is displayed in a code implantation stage of static rendering. HTML, known as hypertext markup language, is a markup language. The document format on the network can be unified through the labels, so that the scattered Internet resources are connected into a logic whole. HTML text is descriptive text consisting of HTML commands that can specify words, graphics, animations, sounds, tables, links, etc. Hypertext is a way to organize information by associating words and diagrams in text with other information media through a hyperlink method. These interrelated information media may be in the same text, may be other files, or may be files on a computer that is geographically remotely located. The information resources distributed at different positions are connected in a random mode by the information organization mode, and convenience is provided for people to search and retrieve information.
The implicit access webpage is a background access webpage, and a browser is not opened to access the webpage.
The source code platform for overcoming the blank of the first screen comprises: the loading module and the filling module run on the processing terminal;
the loading module is used for pre-loading a corresponding page by using a headless browser;
the filling module is used for capturing webpage source codes and filling the webpage source codes into the html file generated by packaging.
The loading module is also used for implicitly accessing the webpage by using an interface provided by the chroma of the development version of the puppeteer headless browser of Google before the webpage is released;
the filling module is also used for capturing the source codes of the webpage by using an interface provided by development version chromium, obtaining contents required by a user after processing by a set algorithm, and then injecting the contents into the html file generated by packaging the webpage codes. Therefore, the user can directly see the content in normal access without the problem of blank first screen, and the time consumed by waiting for loading the webpage is not needed. chrome is a web browser developed by Google initiative. Multiple free rights such as BSD licenses are issued and source code is opened. The development of the chrome may begin as early as 2006, the design concept is based on concepts of simplicity, high speed, stability, safety and the like, a WebKit typesetting engine developed by Apple, part of source codes of Safari and results of Firefox are used on the framework, a V8 engine developed by Google exclusively is adopted to improve the efficiency of interpreting JavaScript, and functions of 'sandbox', 'blacklist', 'traceless browsing' and the like are designed to realize a stable and safe webpage browsing environment. The Chrome is a plan for Google to start for a browser Google Chrome (hereinafter, abbreviated as Chrome) developed by the user, so the Chrome is equivalent to an engineering version or an experimental version of the Chrome (although the Chrome itself has a β version stage), a new function is firstly realized on the Chrome, and the Chrome is applied to the Chrome after being verified, so the function of the Chrome is relatively lagged and stable. The updating speed of the chromium is very high, a new development version is released every few hours, the installation is avoided, and the zip package version can be used after being decompressed (the installation version is also available under Windows).
The implicit access to the web page with the interface provided by the chroma, a development version of the puppeteer headless browser of google comprises:
launch development version of chrome with third party library puppeter. launch () method of npm, create a new page window with puppeter. newpage (), access specified page with puppeter. goto ().
The interface provided by the development version of the chrome is reused for capturing the source code of the webpage, and the method comprises the following steps:
generating an instance page of a current page by using a newPage method of puppeter, and acquiring a source code of the current page by using page content ();
the setting algorithm comprises the following steps: and formatting the captured content by using an open source tool html-minifier, wherein the open source tool html-minifier comprises a function method such as removeComments, collapseWhitespace, minifyJS and minifyCSS. HTML-minifier is a highly configurable, well tested, JavaScript based HTML online compression tool, with a lint-like capability. At its core, Minifier relies on John Resig's HTML parser. This parser is capable of handling very complex documents.
All relevant contents of each step related to the method of the above embodiment may be referred to the functional description of the corresponding functional module, and are not described herein again.
Based on the same technical concept, embodiments of the present application further provide a computer-readable storage medium storing a computer program, where the computer program includes at least one code, and the at least one code is executable by a terminal to control the terminal to implement the method of the foregoing embodiments.
Based on the same technical concept, the embodiment of the present application further provides a computer program, which is used to implement the method of the foregoing embodiment when the computer program is executed by the terminal.
The program may be stored in whole or in part on a storage medium packaged with the processor, or in part or in whole on a memory not packaged with the processor.
Based on the same technical concept, the embodiment of the present application further provides a processor, and the processor is configured to implement the method of the foregoing embodiment. The processor may be a chip.
The steps of a method or algorithm described in connection with the disclosure of the embodiments of the application may be embodied in hardware or in software instructions executed by a processor. The software instructions may be comprised of corresponding software modules that may be stored in Random Access Memory (RAM), flash Memory, Read Only Memory (ROM), Erasable Programmable ROM (EPROM), Electrically Erasable Programmable ROM (EEPROM), registers, a hard disk, a removable disk, a compact disc Read Only Memory (CD-ROM), or any other form of storage medium known in the art. An exemplary storage medium is coupled to the processor such the processor can read information from, and write information to, the storage medium. Of course, the storage medium may also be integral to the processor. The processor and the storage medium may reside in an ASIC. Additionally, the ASIC may reside in a network device. Of course, the processor and the storage medium may reside as discrete components in a network device.
Those skilled in the art will recognize that, in one or more of the examples described above, the functions described in the embodiments of the present application may be implemented in hardware, software, firmware, or any combination thereof. When implemented in software, the functions may be stored on or transmitted over as one or more instructions or code on a computer-readable medium. Computer-readable media includes both computer storage media and communication media including any medium that facilitates transfer of a computer program from one place to another. A storage media may be any available media that can be accessed by a general purpose or special purpose computer.
While the present embodiments have been described with reference to the accompanying drawings, it is to be understood that the invention is not limited to the precise embodiments described above, which are meant to be illustrative and not restrictive, and that various changes may be made therein by those skilled in the art without departing from the spirit and scope of the invention as defined by the appended claims.
In addition, the present invention has been described above in terms of procedures illustrated by embodiments, and it will be understood by those skilled in the art that the present disclosure is not limited to the above-described embodiments, and that various changes, modifications and substitutions can be made without departing from the scope of the present invention.
While the present invention has been described above in terms of procedures illustrated in embodiments, it will be understood by those skilled in the art that the present disclosure is not limited to the embodiments described above, and that various changes, alterations, and substitutions can be made without departing from the scope of the present invention.
Claims (4)
1. A filling method of a source code platform for overcoming the blank of a first screen is characterized by running on a processing terminal and comprising the following steps:
in the project construction stage of H5 front-end development, a headless browser is utilized to pre-load a corresponding page, and webpage source codes are captured and filled into a packaged html file;
the headless browser is a puppeteer headless browser of Google;
the method for pre-loading the corresponding page by using the headless browser and capturing the webpage source code and filling the webpage source code into the html file generated by packaging comprises the following steps:
before the webpage is released, the webpage is implicitly accessed by using an interface provided by development version chromium of a puppeteer headless browser of Google, after the webpage is loaded, source codes of the webpage are captured by using the interface provided by the development version chromium again, contents required by a user are obtained after processing by a set algorithm, and the contents are injected into an html file generated by packaging the webpage codes.
2. The method for filling the source code platform for overcoming the head screen blank according to claim 1, wherein the implicit access webpage is a background access webpage.
3. A source code platform for overcoming first screen blanks, comprising: the loading module and the filling module run on the processing terminal;
the loading module is used for pre-loading a corresponding page by using a headless browser;
the filling module is used for capturing webpage source codes and filling the webpage source codes into the html file generated by packaging; the loading module is also used for implicitly accessing the webpage by using an interface provided by the chroma of the development version of the puppeteer headless browser of Google before the webpage is released;
the filling module is also used for capturing the source codes of the webpage by using an interface provided by development version chromium, obtaining contents required by a user after processing by a set algorithm, and then injecting the contents into the html file generated by packaging the webpage codes.
4. The source code platform for overcoming the blanks of the first screen according to claim 3, wherein the web page is implicitly accessed by using an interface provided by a chrome, a development version of a puppeteer headless browser of google, comprising:
starting development version chromium by using a third-party library puppeter. launch () method of npm, newly building a page window by using puppeter. newpage (), and accessing a specified page by using puppeter. goto ();
and capturing the source code of the webpage by using the interface provided by the development version of the chromium again, wherein the capturing comprises the following steps:
generating an instance page of a current page by using a newPage method of puppeter, and acquiring a source code of the current page by using page content ();
setting an algorithm, comprising: and formatting the captured content by using an open source tool html-minifier, wherein the open source tool html-minifier comprises a function method such as removeComments, collapseWhitespace, minifyJS and minifyCSS.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010666332.9A CN111563225A (en) | 2020-07-13 | 2020-07-13 | Source code filling method and platform for overcoming first screen blank |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010666332.9A CN111563225A (en) | 2020-07-13 | 2020-07-13 | Source code filling method and platform for overcoming first screen blank |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN111563225A true CN111563225A (en) | 2020-08-21 |
Family
ID=72072842
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010666332.9A Pending CN111563225A (en) | 2020-07-13 | 2020-07-13 | Source code filling method and platform for overcoming first screen blank |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111563225A (en) |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104408198A (en) * | 2014-12-15 | 2015-03-11 | 北京国双科技有限公司 | Method and device for acquiring webpage contents |
| CN109284454A (en) * | 2018-08-02 | 2019-01-29 | 平安科技（深圳）有限公司 | Page rendering method, apparatus, computer equipment and storage medium |
| CN110020304A (en) * | 2017-11-29 | 2019-07-16 | 北京京东尚科信息技术有限公司 | A kind of method and apparatus of loading page |
| CN110874427A (en) * | 2018-09-03 | 2020-03-10 | 菜鸟智能物流控股有限公司 | Webpage information crawling method, device and system and electronic equipment |
-
2020
- 2020-07-13 CN CN202010666332.9A patent/CN111563225A/en active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104408198A (en) * | 2014-12-15 | 2015-03-11 | 北京国双科技有限公司 | Method and device for acquiring webpage contents |
| CN110020304A (en) * | 2017-11-29 | 2019-07-16 | 北京京东尚科信息技术有限公司 | A kind of method and apparatus of loading page |
| CN109284454A (en) * | 2018-08-02 | 2019-01-29 | 平安科技（深圳）有限公司 | Page rendering method, apparatus, computer equipment and storage medium |
| CN110874427A (en) * | 2018-09-03 | 2020-03-10 | 菜鸟智能物流控股有限公司 | Webpage information crawling method, device and system and electronic equipment |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US11347826B2 (en) | Systems and methods for hosted applications | |
| CN108038134B (en) | Page display method and device, storage medium and electronic equipment | |
| US9081757B2 (en) | Systems and methods for tracking and updating hosted applications | |
| US9128723B2 (en) | Method and apparatus for dynamic document object model (DOM) aware code editing | |
| US20140136954A1 (en) | Automatically Rendering Web or Hybrid Applications Natively | |
| US10084878B2 (en) | Systems and methods for hosted application marketplaces | |
| JP2014524069A (en) | Embedded web viewer for presentation applications | |
| CN110674619B (en) | Online document editing method, device, equipment and computer storage medium | |
| CN109445775B (en) | One-key active embedded code method, device and computer readable storage medium | |
| US10671801B2 (en) | Markup code generator | |
| CN105205845A (en) | Webpage animation rendering method and device | |
| US8677332B1 (en) | Executing multiple child code blocks via a single compiled parent code block | |
| CN112559026A (en) | API interface-based native capability expansion method, device and storage medium | |
| Oh et al. | Automated transformation of template-based web applications into single-page applications | |
| CN111563225A (en) | Source code filling method and platform for overcoming first screen blank | |
| KR102311326B1 (en) | Apparatus and method to display web content | |
| US20090055161A1 (en) | Technology for supporting modification of messages displayed by program | |
| CN116932126A (en) | Application embedding method, device, terminal, medium and program product | |
| CN117828211A (en) | Webpage display method and device, electronic equipment and storage medium | |
| Northwood et al. | Front End | |
| CN113778942A (en) | File management method, file management device, computer system and computer-readable storage medium | |
| CN116450964A (en) | Multimedia playing method and device, electronic equipment and storage medium | |
| CN113127785A (en) | Subtitle processing method, subtitle processing device, computer equipment and storage medium | |
| Kuuskeri et al. | AsyncHttpEvalRequest: A New Primitive for Downloading Web Applications Incrementally and Securely | |
| Kurowski et al. | RESS essentials |
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: 20200821 |
|
| RJ01 | Rejection of invention patent application after publication |