CN107766532A - A kind of front end Node.js automates positive static method - Google Patents
A kind of front end Node.js automates positive static method Download PDFInfo
- Publication number
- CN107766532A CN107766532A CN201711025357.5A CN201711025357A CN107766532A CN 107766532 A CN107766532 A CN 107766532A CN 201711025357 A CN201711025357 A CN 201711025357A CN 107766532 A CN107766532 A CN 107766532A
- Authority
- CN
- China
- Prior art keywords
- static
- html
- codes
- contents
- file
- 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
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/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
-
- 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
- G06F16/9574—Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
-
- 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
- G06F9/44526—Plug-ins; Add-ons
Abstract
The present invention rectifies static method before providing a kind of Node.js, comprises the following steps：Local file is acted on behalf of by configuring Nginx according to url addresses, or request is sent to remote server by url addresses and downloads static resource file；The static resource file of acquisition is rendered by chrome v8 kernels, complete dom structures is obtained and is temporarily stored in internal memory；The code for taking out body parts in the dom structures renders in locally progress static, obtains static html contents and the static html contents are written as into cache file.The complete html structure contents of generation that can be automated, head screens and are saved on local or server interface data static, solve front end js dynamics and render the SEO of the page and include problem, right assessment of the lifting search engine for webpage.
Description
Technical field
The present invention relates to areas of information technology, and positive static method is automated more particularly, to a kind of front end Node.js.
Background technology
As in recent years, the rapid development of web development technique, web development frames are also developing, wherein, in recent years
The most fast, change maximum of development is exactly front-end technology industry.After the separation of front and back end, the framework of front end also in the iteration of high speed,
Front end starts the increasing heavy burden of undertaking slowly, before many is solved the problems, such as by back-end technology, also begins to slow
Slowly hand over to front end to complete, such as, data render therein this.
The framework of present market popularity, most of has all been the framework that front end dynamic renders, such as market popularity
React, angular, Vue etc., be all after the data-interface that rear end spues is returned into client, then carried out in client
Dynamic parsing, the render process of data, rendered by rear end and switched to front end and render.
It is all that data and dom structure elucidations are compiled into a process together using js mostly that front end, which renders framework, is needed
Container is pre-set, then by the fills after parsing into container, which results in present popular framework straight
When its source code is asked in receiving, only free container causes reptile, search engine can not be completed without the code actually compiled
Retrieval, so as to the relevant information and content of None- identified website.
The content of the invention
The present invention only has mould to solve the framework that most of front end data template in the prior art renders class in html
The problem of plate container is without complete dom structures, there is provided a kind of front end Node.js automates positive static method.
In order to solve the above problems, the technical solution adopted by the present invention is as described below：
Rectify static method before a kind of Node.js, comprise the following steps：According to url addresses by configuring Nginx agencies
Local file, or request is sent to remote server by url addresses and downloads static resource file；By the static money of acquisition
Source file renders by chrome v8 kernels, obtains complete dom structures and is temporarily stored in internal memory；Take out in the dom structures
The code of body parts renders in locally progress static, obtains static html contents and is written as delaying by the static html contents
Deposit file.
Preferably, the step T2 comprises the following steps：The chrome v8 kernels are performed in the static resource file
Html codes, the html codes may proceed to download the js codes and img resources of current network address；The chrome v8 kernels
The js codes are performed, and go to ask back end interface data on server, the data field of json forms are resolved to corresponding
In html label containers, the data render on backstage js codes described in html is arrived into and has continued executing with css codes, there will be js generations
Css code analysis in code is inserted into the head labels for the dom structures being now temporarily stored in internal memory into style labels；
After all static resource files have been performed, the chrome v8 core analogs browser engine will render the complete of completion
Dom structure outputs.
Preferably, the step T3 comprises the following steps：The dom structure contents are parsed, take out the dom knots
The code snippet of body parts described in structure；Compiled to obtain a header content, the header contents according to default template
The framework js of related title, meta label and current network address including SEO information quotes path；By in the header
Hold and body codes splice, quote path plus page resource js and generate 32 hash character strings at random, splice and providing
Source js is quoted behind path, that is, completes the render process of static html contents；And the html contents are written as caching text
Part.
Beneficial effects of the present invention are：Rectify static method before a kind of Node.js is provided, can render complete
Dom structures, and complete html structures are formed, solve current most of front end data template and render the framework of class in html
Only template container is without complete dom structures, the problem of having influence on the content retrieval of search engine, the life that can be automated
Into complete html structure contents, by head screen interface data statics and it is saved on local or server, solves front end js
The SEO that dynamic renders the page includes problem, right assessment of the lifting search engine for webpage.
Brief description of the drawings
Fig. 1 is to rectify static method schematic diagram in the embodiment of the present invention 1 before Node.js.
Fig. 2 is the method schematic diagram that complete dom structures are obtained in the embodiment of the present invention 1.
Fig. 3 is the method schematic diagram that static html contents are obtained in the embodiment of the present invention 1.
Embodiment
The present invention is described in detail by specific embodiment below in conjunction with the accompanying drawings, for a better understanding of this hair
It is bright, but following embodiments are not intended to limit the scope of the invention.In addition, it is necessary to illustrate, the diagram provided in following embodiments
Only illustrate the basic conception of the present invention in a schematic way, the component relevant with the present invention is only shown in accompanying drawing rather than according to reality
Component count, shape during implementation and size are drawn, it is actual when implementing shape, quantity and the ratio of each component can be one kind with
The change of meaning, and its assembly layout form may also be increasingly complex.
Embodiment 1
As shown in figure 1, the present embodiment is rendered complete by rectifying static method before Node.js of the present invention
Dom structures, and form complete html structures, specifically comprise the following steps：
1. acting on behalf of local file by configuring Nginx according to url addresses, or sent by url addresses to remote server
Static resource file is downloaded in request；Static resource file includes html files, css files, img pictures, js files；Should can be with
Understand that these file types are not considered a disclaimer of those alternate embodiments；
2. the static resource file of acquisition is rendered by chrome v8 kernels, complete dom structures and temporary are obtained
Exist in internal memory；
Chrome V8 kernels are called to be compiled to the static resource file of download locally with Node.js, are obtained
Complete dom structures are simultaneously temporarily stored in internal memory；Described local, refer to the computerized environment of current operation code；
3. the code for taking out body parts in dom structures renders in locally progress static, static html contents are obtained simultaneously
The static html contents are written as cache file；
Static html codes can be rendered in local newly-built html files, and be written in cache file, be stored in this
Ground.
Further optimize on the basis of this above-mentioned steps, to better implement the present invention described method, described basis
Url addresses send to server and asked, and can have following more preferable implementation：
1. localling create a configuration file first, some for preserving and configuring during positive static set ginseng
Number；
2. read configuration file, address on remote server or local client are judged according to configuration parameter
File address；Described local, refer to the computerized environment of current operation code；
3. if local file, then server agent, such as nginx are opened, automatically passes through local file in nginx
Switch to http pattern simulations remote address to operate；If remote address, then continue；
4. according to the catalogue parameter of configuration file, complete request address is combined into, server is then sent according to address
Request, the static resource of request include html files, css files, img pictures, js files.
As shown in Fig. 2 further optimize on the basis of above-mentioned steps, to better implement the present invention, described calling
Chrome V8 kernels are compiled to the content of download, are obtained complete dom structures and are comprised the following steps：
1. the chrome v8 kernels perform the html codes in the static resource file, the html codes can be after
The continuous js codes and img resources for downloading current network address；
Html codes can first be compiled, the label in code may proceed to download css codes, img pictures and picture path, group
Into Part I static page content；
2. the chrome v8 kernels perform the js codes, and go to ask back end interface data on server, by json
The data field of form is resolved in corresponding html label containers, and the data render on backstage has been arrived in html；
3. the js codes continue executing with css codes, there will be the css code analysis in js codes into style labels,
And it is inserted into the head labels for the dom structures being now temporarily stored in internal memory；
After 4. all static resource files have been performed, the chrome v8 core analogs browser engine will render
The complete dom structure outputs completed.
As shown in figure 3, further optimization on the basis of the above, to better implement the present invention, renders static html codes
System, comprise the following steps：
Wherein, the default template：Code snippet set in advance, including header labels, title, keywords,
description；The framework js：The integrated tool bag that the third party that the page is used provides, such as：Vue；The resource js：
The js code files for some business that page loading is used.
1. pair dom structure contents parse, the code snippet of body parts described in the dom structures is taken out；
2. compiling to obtain a header content according to default template, the header contents include the correlation of SEO information
Title, meta label and current network address framework js quote path；It is described in the alternative embodiments of the present invention
Header content also includes：Keywords, description etc..
3. the header contents and body codes are spliced, path and at random generation one are quoted plus page resource js
32 hash character strings, splice and quoted in resource js behind path, that is, complete the render process of static html contents；And will
The html contents are written as cache file.
The framework js that the page can be first added in header contents quotes path and resource js references path, adds
Body codes, and path is quoted in face plus the js of this page behind, and a hash is generated at random, it is added in behind js, completes
Whole static html assembling.
For user when accessing the page rendered by front end js parsings, what is had access to is the html caching texts of above step generation
The content of part, by the browser software of most of market popularity, such as：Google's browser, the page is checked using browser
Source code function, it will be observed that in the source code of the page, there are the dom cache contents of webpage, likewise, the crawl of search engine is climbed
Worm, obtain and identical content, this addresses the problem the page that front end js renders class, captures less than page in a search engine
The problem of face dynamic content.
Above content is to combine specific preferred embodiment further description made for the present invention, it is impossible to is assert
The specific implementation of the present invention is confined to these explanations.For those skilled in the art, do not taking off
On the premise of from present inventive concept, some equivalent substitutes or obvious modification can also be made, and performance or purposes are identical, all should
When being considered as belonging to protection scope of the present invention.
Claims (3)
1. rectify static method before a kind of Node.js, it is characterised in that comprise the following steps：
T1：Local file is acted on behalf of by configuring Nginx according to url addresses, or is sent and asked to remote server by url addresses
Download static resource file；
T2：The static resource file of acquisition is rendered by chrome v8 kernels, complete dom structures is obtained and keeps in
In internal memory；
T3：The code for taking out body parts in the dom structures renders in locally progress static, obtains static html contents simultaneously
The static html contents are written as cache file.
2. rectify static method before Node.js as claimed in claim 1, it is characterised in that the step T2 includes as follows
Step：
T21：The chrome v8 kernels perform the html codes in the static resource file, and the html codes may proceed to
Download the js codes and img resources of current network address；
T22：The chrome v8 kernels perform the js codes, and go to ask back end interface data on server, by json lattice
The data field of formula is resolved in corresponding html label containers, and the data render on backstage has been arrived in html；
T23：The js codes continue executing with css codes, there will be the css code analysis in js codes into style labels, and
It is inserted into the head labels for the dom structures being now temporarily stored in internal memory；
T24：After all static resource files have been performed, the chrome v8 core analogs browser engine will render
Into complete dom structure outputs.
3. rectify static method before Node.js as claimed in claim 1, it is characterised in that the step T3 includes as follows
Step：
T31：The dom structure contents are parsed, take out the code snippet of body parts described in the dom structures；
T32：Compiled to obtain a header content according to default template, the header contents include the related of SEO information
Title, meta label and the framework js of current network address quote path；
T33：The header contents and body codes are spliced, path and at random generation one 32 are quoted plus page resource js
Position hash character strings, splice and are quoted in resource js behind path, that is, complete the render process of static html contents；And by institute
State html contents and be written as cache file.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201711025357.5A CN107766532A (en) | 2017-10-27 | 2017-10-27 | A kind of front end Node.js automates positive static method |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201711025357.5A CN107766532A (en) | 2017-10-27 | 2017-10-27 | A kind of front end Node.js automates positive static method |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN107766532A true CN107766532A (en) | 2018-03-06 |
Family
ID=61271891
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201711025357.5A Pending CN107766532A (en) | 2017-10-27 | 2017-10-27 | A kind of front end Node.js automates positive static method |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN107766532A (en) |
Cited By (13)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108519903A (en) * | 2018-04-09 | 2018-09-11 | 平安普惠企业管理有限公司 | Static resource adaptation method, device, computer equipment and storage medium |
| CN109324792A (en) * | 2018-10-09 | 2019-02-12 | 深圳点猫科技有限公司 | A kind of the route construction automatic method and electronic equipment of language based on programming |
| CN109324788A (en) * | 2018-09-05 | 2019-02-12 | 湖南华诺科技有限公司 | A kind of server-side rendering method based on React and Nodejs |
| CN109388425A (en) * | 2018-08-17 | 2019-02-26 | 东莞数汇大数据有限公司 | A kind of interface switching method, system, device and the storage medium of front end engineering |
| CN109543127A (en) * | 2018-11-26 | 2019-03-29 | 杭州安恒信息技术股份有限公司 | A kind of page furbishing method, device, equipment and readable storage medium storing program for executing |
| CN109614162A (en) * | 2018-11-15 | 2019-04-12 | 福建天泉教育科技有限公司 | Based on the loaded and optimized method in front end under component development paradigm, storage medium |
| CN111045990A (en) * | 2019-11-07 | 2020-04-21 | 武汉融卡智能信息科技有限公司 | Document management system |
| CN111062041A (en) * | 2019-11-22 | 2020-04-24 | 成都市映潮科技股份有限公司 | Data processing method and system implemented based on font library |
| CN111104587A (en) * | 2018-10-26 | 2020-05-05 | 北京金山云网络技术有限公司 | Webpage display method and device and server |
| CN111314429A (en) * | 2020-01-19 | 2020-06-19 | 上海交通大学 | Network request processing system and method |
| CN112083966A (en) * | 2020-08-14 | 2020-12-15 | 杭州当虹科技股份有限公司 | Method for loading remote vue component |
| CN113835740A (en) * | 2021-11-29 | 2021-12-24 | 山东捷瑞数字科技股份有限公司 | Search engine optimization-oriented automatic front-end code repairing method |
| CN116302294A (en) * | 2023-05-18 | 2023-06-23 | 安元科技股份有限公司 | Method and system for automatically identifying component attribute through interface |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2014134234A1 (en) * | 2013-03-01 | 2014-09-04 | Facebook, Inc. | Caching pagelets of structured documents |
| CN104216768A (en) * | 2014-09-22 | 2014-12-17 | 北京金山安全软件有限公司 | Data processing method and device |
| US20150082440A1 (en) * | 2013-09-18 | 2015-03-19 | Jeremy Dale Pickett | Detection of man in the browser style malware using namespace inspection |
| CN105893014A (en) * | 2015-12-08 | 2016-08-24 | 乐视云计算有限公司 | Project development method and system for front end |
| CN105912693A (en) * | 2016-04-22 | 2016-08-31 | 北京搜狗科技发展有限公司 | Network request processing method and apparatus, network data acquisition method, and server |
| CN107179920A (en) * | 2016-03-09 | 2017-09-19 | 阿里巴巴集团控股有限公司 | Network engine starts method and device |
-
2017
- 2017-10-27 CN CN201711025357.5A patent/CN107766532A/en active Pending
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2014134234A1 (en) * | 2013-03-01 | 2014-09-04 | Facebook, Inc. | Caching pagelets of structured documents |
| US20150082440A1 (en) * | 2013-09-18 | 2015-03-19 | Jeremy Dale Pickett | Detection of man in the browser style malware using namespace inspection |
| CN104216768A (en) * | 2014-09-22 | 2014-12-17 | 北京金山安全软件有限公司 | Data processing method and device |
| CN105893014A (en) * | 2015-12-08 | 2016-08-24 | 乐视云计算有限公司 | Project development method and system for front end |
| CN107179920A (en) * | 2016-03-09 | 2017-09-19 | 阿里巴巴集团控股有限公司 | Network engine starts method and device |
| CN105912693A (en) * | 2016-04-22 | 2016-08-31 | 北京搜狗科技发展有限公司 | Network request processing method and apparatus, network data acquisition method, and server |
Non-Patent Citations (2)
| Title |
|---|
| 郑天民: "《向技术管理者转型 软件开发人员跨行业、技术、管理的转型思维与实践》", 31 October 2017 * |
| 黑马程序员: "《Node.js核心技术教程》", 30 April 2017 * |
Cited By (20)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108519903A (en) * | 2018-04-09 | 2018-09-11 | 平安普惠企业管理有限公司 | Static resource adaptation method, device, computer equipment and storage medium |
| CN109388425A (en) * | 2018-08-17 | 2019-02-26 | 东莞数汇大数据有限公司 | A kind of interface switching method, system, device and the storage medium of front end engineering |
| CN109388425B (en) * | 2018-08-17 | 2021-08-31 | 东莞数汇大数据有限公司 | Interface switching method, system, device and storage medium for front-end engineering |
| CN109324788A (en) * | 2018-09-05 | 2019-02-12 | 湖南华诺科技有限公司 | A kind of server-side rendering method based on React and Nodejs |
| CN109324788B (en) * | 2018-09-05 | 2020-11-06 | 湖南华诺科技有限公司 | React and Nodejs-based server rendering method |
| CN109324792A (en) * | 2018-10-09 | 2019-02-12 | 深圳点猫科技有限公司 | A kind of the route construction automatic method and electronic equipment of language based on programming |
| CN111104587A (en) * | 2018-10-26 | 2020-05-05 | 北京金山云网络技术有限公司 | Webpage display method and device and server |
| CN109614162A (en) * | 2018-11-15 | 2019-04-12 | 福建天泉教育科技有限公司 | Based on the loaded and optimized method in front end under component development paradigm, storage medium |
| CN109614162B (en) * | 2018-11-15 | 2023-10-10 | 福建天泉教育科技有限公司 | Front-end loading optimization method based on component development mode and storage medium |
| CN109543127A (en) * | 2018-11-26 | 2019-03-29 | 杭州安恒信息技术股份有限公司 | A kind of page furbishing method, device, equipment and readable storage medium storing program for executing |
| CN111045990A (en) * | 2019-11-07 | 2020-04-21 | 武汉融卡智能信息科技有限公司 | Document management system |
| CN111045990B (en) * | 2019-11-07 | 2023-08-15 | 无锡融卡科技有限公司 | Document management system |
| CN111062041A (en) * | 2019-11-22 | 2020-04-24 | 成都市映潮科技股份有限公司 | Data processing method and system implemented based on font library |
| CN111314429A (en) * | 2020-01-19 | 2020-06-19 | 上海交通大学 | Network request processing system and method |
| CN111314429B (en) * | 2020-01-19 | 2021-07-13 | 上海交通大学 | Network request processing system and method |
| CN112083966A (en) * | 2020-08-14 | 2020-12-15 | 杭州当虹科技股份有限公司 | Method for loading remote vue component |
| CN112083966B (en) * | 2020-08-14 | 2024-02-27 | 杭州当虹科技股份有限公司 | Method for loading remote vue component |
| CN113835740A (en) * | 2021-11-29 | 2021-12-24 | 山东捷瑞数字科技股份有限公司 | Search engine optimization-oriented automatic front-end code repairing method |
| CN116302294A (en) * | 2023-05-18 | 2023-06-23 | 安元科技股份有限公司 | Method and system for automatically identifying component attribute through interface |
| CN116302294B (en) * | 2023-05-18 | 2023-09-01 | 安元科技股份有限公司 | Method and system for automatically identifying component attribute through interface |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN107766532A (en) | A kind of front end Node.js automates positive static method | |
| CN103502983B (en) | Memoizing Web-browsing computation with DOM-based isomorphism | |
| CN110806863A (en) | Interface document generation method and device, electronic equipment and storage medium | |
| US20100306738A1 (en) | Templating system and method for updating content in real time | |
| CN110908712A (en) | Data processing method and equipment for cross-platform mobile terminal | |
| Zakas | High performance JavaScript: build faster web application interfaces | |
| CN110020278A (en) | Displaying, providing method, client and the server of page data | |
| KR20160061305A (en) | Method and apparatus for customized software development kit (sdk) generation | |
| CN106372130B (en) | A kind of static resource management method | |
| CN109582909A (en) | Webpage automatic generation method, device, electronic equipment and storage medium | |
| CN107729531A (en) | A kind of dynamic renders class front page optimization method | |
| CN109388766A (en) | The method and apparatus of page load | |
| CN106997298A (en) | A kind of application resource acquisition methods and device | |
| CN111241793B (en) | Method, system and medium for resolving rich text editor content to render to native client | |
| US20140337326A1 (en) | Topical Mapping | |
| CN109657125A (en) | Data processing method, device, equipment and storage medium based on web crawlers | |
| Freeman | Pro Angular 9: build powerful and dynamic web apps | |
| CN111723314B (en) | Webpage display method and device, electronic equipment and computer readable storage medium | |
| US20240069932A1 (en) | Content Display Method and Terminal Device | |
| CN102955852A (en) | Method, device and equipment for webpage resource processing | |
| CN112612943A (en) | Asynchronous processing framework-based data crawling method with automatic testing function | |
| CN107506597A (en) | Medical files acquisition methods, terminal and server | |
| CN105025065B (en) | Web site is converted to the method, apparatus and system of Web application | |
| CN107679168B (en) | Target website content acquisition method based on java platform | |
| Lathkar | Building Web Apps with Python and Flask: Learn to Develop and Deploy Responsive RESTful Web Applications Using Flask Framework (English Edition) |
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 | ||
| TA01 | Transfer of patent application right | ||
| TA01 | Transfer of patent application right |
Effective date of registration: 20210923 Address after: 518000 Room 201, building A, 1 front Bay Road, Shenzhen Qianhai cooperation zone, Shenzhen, Guangdong Applicant after: SHENZHEN QIANHAI KUAHAIXIA KUAJING E-COMMERCE Co.,Ltd. Address before: 518000 801, Zone C, Jinxing building, Heping Industrial Zone, Changyong Road, Dalang street, Longhua new area, Shenzhen, Guangdong Applicant before: SHENZHEN XINGYUN YITONG TECHNOLOGY Co.,Ltd. |
|
| RJ01 | Rejection of invention patent application after publication | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20180306 |