Web page skeleton diagram generation method, device, terminal and storage medium

Abstract

The present disclosure provides a method, device, terminal and storage medium for generating a web page skeleton diagram, and belongs to the field of computer technology. The method comprises: reading a web page configuration file of a specified web page, the web page configuration file comprises a structural attribute code of a web page skeleton diagram of the specified web page, which is used to indicate the structure of the web page skeleton diagram; obtaining a style code and an execution code of the web page skeleton diagram; inserting the structural attribute code, the style code and the execution code into the specified web page; when displaying the specified web page, generating a web page skeleton diagram according to the style code, the execution code and the structural attribute code. The present disclosure does not need to download an additional browser, and can obtain the structure of the web page skeleton diagram by reading a web page configuration file of a specified web page including a structural attribute code of the web page skeleton diagram, and inserting the web page skeleton diagram related code into the specified web page by executing the web page skeleton diagram related code, thereby reducing the storage resources consumed when the web page skeleton diagram is generated.

Description

Technical Field

[0001] The present disclosure relates to the field of computer technology, and in particular to a method, device, terminal and storage medium for generating a web page skeleton diagram. Background Art

[0002] When users browse web pages, blank pages may appear when refreshing due to the large amount of web page content. The appearance of blank pages seriously affects the web page display effect and reduces the user's browsing experience. In order to improve the user's browsing experience, during the web page loading process, the general style of the web page, i.e., the web page skeleton diagram, can be presented to the user first. When the web page is loaded, the web page content is filled into the corresponding placeholder area of ​​the web page skeleton diagram, so that the user can browse the web page content.

[0003] At present, when generating a web page skeleton diagram, the following method is generally adopted: pre-download a headless browser plug-in, which is a browser without a user interface; open an HTML (Hyper Text Markup Language) web page based on the headless browser plug-in; generate a web page skeleton diagram code according to the opened HTML web page; insert the web page skeleton diagram code into the HTML web page; when displaying the HTML web page, generate a web page skeleton diagram according to the web page skeleton diagram code.

[0004] However, since a headless browser needs to be downloaded and the headless browser occupies a large storage space, generating a web page skeleton diagram consumes a large amount of storage resources. Summary of the invention

[0005] The embodiment of the present disclosure provides a method, device, terminal and storage medium for generating a web page skeleton diagram. The technical solution is as follows:

[0006] In one aspect, a method for generating a web page skeleton diagram is provided, the method comprising:

[0007] Reading a web page configuration file of a specified web page, wherein the web page configuration file includes a structural attribute code of a web page skeleton diagram of the specified web page, wherein the structural attribute code is used to indicate a structure of the web page skeleton diagram;

[0008] Obtaining the style code and execution code of the web page skeleton diagram;

[0009] Inserting the structural attribute code, the style code and the execution code into the designated web page;

[0010] When the designated web page is displayed, a web page skeleton diagram is generated according to the style code, the execution code and the structural attribute code.

[0011] In another embodiment of the present disclosure, after generating the web page skeleton diagram according to the style code, the execution code and the structure attribute code, the method further includes:

[0012] When a modification operation on the webpage configuration file is detected, obtaining the modified webpage configuration file;

[0013] A new web page skeleton diagram is generated based on the modified web page configuration file, the web page style code and the execution code.

[0014] In another embodiment of the present disclosure, the method further includes:

[0015] When it is detected that the display time of the webpage skeleton diagram reaches a preset time, the webpage skeleton diagram is controlled to disappear.

[0016] In another embodiment of the present disclosure, when it is detected that the display time of the webpage skeleton diagram reaches a preset time, controlling the webpage skeleton diagram to disappear includes:

[0017] When it is detected that the display time of the webpage skeleton diagram reaches a preset time, the webpage skeleton diagram is controlled to disappear using a preset effect.

[0018] In another embodiment of the present disclosure, before reading the webpage configuration file of the specified webpage, the method further includes:

[0019] The structural attribute code is generated according to the size of the designated web page, and the size of the web page skeleton diagram indicated by the structural attribute code matches the size.

[0020] In another embodiment of the present disclosure, after generating the web page skeleton diagram according to the style code, the execution code and the structure attribute code, the method further includes:

[0021] The size of the web page skeleton diagram is adjusted according to the screen size of the terminal.

[0022] On the other hand, a device for generating a web page skeleton diagram is provided, the device comprising:

[0023] A reading module, used for reading a web page configuration file of a specified web page, wherein the web page configuration file includes a structural attribute code of a web page skeleton diagram of the specified web page, wherein the structural attribute code is used for indicating a structure of the web page skeleton diagram;

[0024] An acquisition module, used to acquire the style code and execution code of the web page skeleton diagram;

[0025] An inserting module, used for inserting the structural attribute code, the style code and the execution code into the designated web page;

[0026] The generating module is used to generate a web page skeleton diagram according to the style code, the execution code and the structure attribute code when displaying the designated web page.

[0027] In another embodiment of the present disclosure,

[0028] The acquisition module is further used to acquire the modified webpage configuration file when a modification operation on the webpage configuration file is detected;

[0029] The generating module is also used to generate a new web page skeleton diagram based on the modified web page configuration file, the web page style code and the execution code.

[0030] In another embodiment of the present disclosure, the device further comprises:

[0031] The control module is used to control the web page skeleton diagram to disappear when it is detected that the display time of the web page skeleton diagram reaches a preset time.

[0032] In another embodiment of the present disclosure, the control module is used to control the web page skeleton diagram to disappear with a preset effect when it is detected that the display time of the web page skeleton diagram reaches a preset time.

[0033] In another embodiment of the present disclosure,

[0034] The generating module is further used to generate the structural attribute code according to the size of the specified web page, and the size of the web page skeleton diagram indicated by the structural attribute code matches the size.

[0035] In another embodiment of the present disclosure, the device further comprises:

[0036] The adjustment module is used to adjust the size of the web page skeleton diagram according to the screen size of the terminal.

[0037] The technical solution provided by the embodiments of the present disclosure has the following beneficial effects:

[0038] There is no need to download an additional browser. The structure of the web page skeleton diagram can be obtained by reading the web page configuration file of the specified web page including the structural attribute code of the web page skeleton diagram. By executing the code related to the web page skeleton diagram, the code related to the web page skeleton diagram is inserted into the specified web page, thereby reducing the storage resources consumed when generating the web page skeleton diagram. BRIEF DESCRIPTION OF THE DRAWINGS

[0039] In order to more clearly illustrate the technical solutions in the embodiments of the present disclosure, the drawings required for use in the description of the embodiments will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present disclosure. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.

[0040] Figure 1 It is a flow chart of a method for generating a web page skeleton diagram provided by an embodiment of the present disclosure;

[0041] Figure 2 It is a flow chart of a method for generating a web page skeleton diagram provided by an embodiment of the present disclosure;

[0042] Figure 3 It is a schematic diagram of the structure of a device for generating a web page skeleton diagram provided by an embodiment of the present disclosure;

[0043] Figure 4 A structural block diagram of a terminal provided by an exemplary embodiment of the present disclosure is shown. DETAILED DESCRIPTION

[0044] In order to make the objectives, technical solutions and advantages of the present disclosure more clear, the embodiments of the present disclosure will be further described in detail below with reference to the accompanying drawings.

[0045] It can be understood that the terms "each", "multiple", and "any" used in the embodiments of the present disclosure include two or more, each refers to each of the corresponding multiple, and any refers to any one of the corresponding multiple. For example, the multiple words include 10 words, and each word refers to each word of the 10 words, and any word refers to any one of the 10 words.

[0046] The present disclosure provides a method for generating a web page skeleton diagram, see Figure 1 , the method flow provided by the embodiment of the present disclosure includes:

[0047] 101. Read a web page configuration file of a specified web page, where the web page configuration file includes a structural attribute code of a web page skeleton diagram of the specified web page, where the structural attribute code is used to indicate the structure of the web page skeleton diagram.

[0048] 102. Get the style code and execution code of the web page skeleton diagram.

[0049] 103. Insert the structural attribute code, style code and execution code into the specified web page.

[0050] 104. When displaying a designated web page, a web page skeleton diagram is generated according to the style code, the execution code and the structural attribute code.

[0051] The method provided by the embodiment of the present disclosure does not require downloading an additional browser. The structure of the web page skeleton diagram can be obtained by reading the web page configuration file of the specified web page including the structural attribute code of the web page skeleton diagram. The code related to the web page skeleton diagram is inserted into the specified web page by executing the code related to the web page skeleton diagram, thereby reducing the storage resources consumed when generating the web page skeleton diagram.

[0052] In another embodiment of the present disclosure, after generating a web page skeleton diagram according to the style code, the execution code and the structure attribute code, the method further includes:

[0053] When a modification operation on the webpage configuration file is detected, obtaining the modified webpage configuration file;

[0054] A new web page skeleton diagram is generated based on the modified web page configuration file, web page style code and execution code.

[0055] In another embodiment of the present disclosure, the method further comprises:

[0056] When it is detected that the display time of the web page skeleton image reaches a preset time, the web page skeleton image is controlled to disappear.

[0057] In another embodiment of the present disclosure, when it is detected that the display time of the webpage skeleton diagram reaches a preset time, controlling the webpage skeleton diagram to disappear includes:

[0058] When it is detected that the display time of the web page skeleton image reaches a preset time, the web page skeleton image is controlled to disappear using a preset effect.

[0059] In another embodiment of the present disclosure, before reading the webpage configuration file of the specified webpage, the method further includes:

[0060] According to the size of the specified web page, a structural attribute code is generated, and the size of the web page skeleton diagram indicated by the structural attribute code matches the size.

[0061] In another embodiment of the present disclosure, after generating a web page skeleton diagram according to the style code, the execution code and the structure attribute code, the method further includes:

[0062] Adjust the size of the web page skeleton image according to the terminal screen size.

[0063] All the above optional technical solutions can be arbitrarily combined to form optional embodiments of the present disclosure, and will not be described in detail here.

[0064] The embodiment of the present disclosure provides a method for generating a web page skeleton diagram. The method provided by the embodiment of the present disclosure is applied in a terminal. Figure 2 , the method flow provided by the embodiment of the present disclosure includes:

[0065] 201. The terminal reads a webpage configuration file of a specified webpage.

[0066] The terminal may be a tablet computer, a desktop computer, a laptop computer, or other devices, and the embodiments of the present disclosure do not specifically limit the product type of the terminal.

[0067] The designated web page is a web page to be published, and the designated web page may be a native page in the application, or may be an HTML5 page, etc.

[0068] The web page configuration file is the file required for generating a web page skeleton diagram. The web page configuration file includes the structural attribute code of the web page skeleton diagram of the specified web page. The structural attribute code is used to indicate the structure of the web page skeleton diagram. The structure of the web page skeleton diagram includes the shape and size of each placeholder area in the web page skeleton diagram, etc.

[0069] When the terminal reads the webpage configuration file of the specified webpage, the specified interface may be used to read the webpage configuration file. The specified interface may be webpack, which is an open source front-end packaging tool.

[0070] In another embodiment of the present disclosure, before reading the web page configuration file of the specified web page, the terminal will also generate a structural attribute code according to the size of the specified web page, thereby obtaining the web page configuration file. Among them, the size of the web page skeleton diagram indicated by the structural attribute code matches the size of the specified web page. The meaning of this matching can be that the size of the web page skeleton diagram is the same as the size of the specified web page. For example, if the width of the specified web page is 20 units and the height is 30 units, the size of the web page skeleton diagram can be 20 units wide and 30 units high; the meaning of this matching can also be that the size of the web page skeleton diagram is the same as the size ratio of the specified web page. For example, if the aspect ratio of the specified web page is 2:3, the aspect ratio of the web page skeleton diagram can also be 2:3.

[0071] In another embodiment of the present disclosure, the terminal may provide width and height input options for a specified web page design drawing. Based on the width and height input options of the web page design drawing, the front-end developer may input the width and height of the specified web page by himself. The terminal detects the input operation of the front-end developer, obtains the width and height of the specified web page as the size of the specified web page, and determines the size of the web page skeleton diagram based on the size of the specified web page. The size of the web page skeleton diagram matches the size of the specified web page.

[0072] The method provided by the embodiment of the present disclosure enables front-end developers to design the webpage size by themselves by providing input options for the width and height of a specified webpage, thereby obtaining a webpage that meets the needs of the front-end developer. For the front-end developer, it is only necessary to simply fill in the relevant configuration according to the specification without performing other additional operations to generate a webpage skeleton diagram with a unified style and smooth transition, which greatly shortens the production time of the webpage skeleton diagram, reduces the difficulty and risk of producing the webpage skeleton diagram, and improves the user experience, providing users with a more comfortable experience of page loading.

[0073] 202. The terminal obtains the style code and execution code of the web page skeleton diagram.

[0074] The style code may be a CSS (Cascading Style Sheets) code, which is different from the structural code of the web page skeleton diagram. The style code is used to modify the content of the specified web page, for example, indicating the color, font, layout and other display characteristics of the specified web page. The execution code may be a JavaScript code, which can trigger the execution of the web page display process, and the JavaScript code includes the image node information and text node information of the specified web page.

[0075] When the terminal obtains the style code of the web page skeleton diagram, the terminal may adopt the following method: perform CSS parsing on the source code of the specified web page, and obtain the CSS code of the web page skeleton diagram by performing CSS parsing on the source code of the specified web page.

[0076] When the terminal obtains the execution code of the web page skeleton diagram, it can adopt the following method: perform JavaScript parsing on the source code of the specified web page, and obtain the JavaScript code of the web page skeleton diagram by performing JavaScript parsing on the source code of the specified web page. During the parsing process, the attribute information of the web page can be obtained from the specified web page in real time. The web page attribute information includes the image node information and text node information of the specified web page.

[0077] 203. The terminal inserts the structure attribute code, the style code and the execution code into the designated web page.

[0078] During the web page development process, the terminal can use webpack to package the acquired structural attribute code, style code and execution code. By packaging the structural attribute code, style code and execution code of the specified web page, the structural attribute code, style code and execution code can be inserted into the specified web page.

[0079] 204. When displaying the designated web page, the terminal generates a web page skeleton diagram according to the style code, the execution code and the structure attribute code.

[0080] After the structural attribute code, style code and execution code are inserted into the specified web page, when a display instruction for the specified web page is received, the terminal generates a web page skeleton diagram of the specified web page by executing the style code, execution code and structural attribute code of the web page skeleton diagram, and displays the generated web page skeleton diagram of the specified web page.

[0081] During the web page development process, if the web page skeleton diagram generated based on the style code, execution code and structural attribute code deviates from the specified web page design diagram, the front-end developer can modify the web page configuration file. When the modification operation of the web page configuration file is detected, the terminal obtains the modified web page configuration file and generates a new web page skeleton diagram based on the modified web page configuration file, web page style code and execution code.

[0082] Since the method provided by the embodiment of the present disclosure can display the generated web page skeleton diagram in real time, there is no need to modify the web page skeleton diagram code again according to the display effect after the web page skeleton diagram is published. The method provided by the embodiment of the present disclosure can change the generated web page skeleton diagram by modifying the web page configuration file in the development environment. In this way, the relationship between web page skeleton diagram development and project development is completely decoupled, the problem of difficulty in generating and debugging web page skeleton diagrams is overcome, and the generation and debugging process of web page skeleton diagrams is simplified.

[0083] In another embodiment of the present disclosure, the terminal may provide a first disappearance control function, which is used to control the disappearance time of the web page skeleton diagram. When the web page content is loaded, the web page skeleton diagram can be controlled to disappear by calling the first disappearance function, thereby avoiding the displayed web page skeleton diagram from interfering with the user's browsing. In specific implementation, the terminal may record the display time of the web page skeleton diagram. When it is detected that the display time of the web page skeleton diagram reaches the preset time, the first disappearance control function is called. By calling the first disappearance control function, the displayed web page skeleton diagram is controlled to disappear. Among them, the preset time can be the loading time of the web page content, and the preset time is determined according to the network condition and the web page content. When the web page condition is good and the web page content is less, the preset time can be relatively short; when the network condition is poor and the web page content is more, the preset time can be relatively long. Usually the preset time can be 1 second, 2 seconds, etc.

[0084] In another embodiment of the present disclosure, the terminal may further provide a second disappearance control function, which is used to control the disappearance effect of the web page skeleton image when it disappears. By calling the second disappearance control function to control the disappearance of the web page skeleton image, the fun of the specified web page display process can be increased. In specific implementation, when it is detected that the display time of the web page skeleton image reaches a preset time, the terminal calls the second disappearance control function. By calling the second disappearance control function, the web page skeleton image can be controlled to disappear with a preset effect. The preset effect can be fade-in, fade-out, etc.

[0085] Furthermore, when the web page skeleton image disappears with a preset effect, the web page content may also appear with a specified effect. For example, when it is detected that the disappearance time of the web page skeleton image reaches a preset time, the web page skeleton image may disappear with a fade-out effect, and the web page content may appear with a fade-in effect; when it is detected that the disappearance time of the web page skeleton image reaches a preset time, the web page skeleton image may disappear with a fade-in effect, and the web page content may appear with a fade-out effect, and so on.

[0086] The method provided in the embodiment of the present disclosure can enable front-end developers to achieve the desired presentation effect by providing a first disappearance control function and a second disappearance control function.

[0087] 205. The terminal adjusts the size of the web page skeleton diagram according to the screen size of the terminal.

[0088] Based on the generated web page skeleton diagram, the terminal will also adjust the size of the web page skeleton diagram according to the screen size of the terminal, so that the size of the adjusted web page skeleton diagram can meet the display requirements of terminals with different screen sizes.

[0089] This method can automatically generate a web page skeleton diagram that meets screen adaptation. By combining the first screen display and adaptation, the front-end developer only needs to configure the web page skeleton diagram according to the size of the web page design drawing.

[0090] The method provided by the embodiment of the present disclosure does not require downloading an additional browser. The structure of the web page skeleton diagram can be obtained by reading the web page configuration file of the specified web page including the structural attribute code of the web page skeleton diagram. The code related to the web page skeleton diagram is inserted into the specified web page by executing the code related to the web page skeleton diagram, thereby reducing the storage resources consumed when generating the web page skeleton diagram.

[0091] See also Figure 3 The embodiment of the present disclosure provides a device for generating a web page skeleton diagram, the device comprising:

[0092] The reading module 301 is used to read a web page configuration file of a specified web page, wherein the web page configuration file includes a structural attribute code of a web page skeleton diagram of the specified web page, and the structural attribute code is used to indicate the structure of the web page skeleton diagram;

[0093] The acquisition module 302 is used to acquire the style code and execution code of the web page skeleton diagram;

[0094] Insertion module 303, used to insert the structure attribute code, style code and execution code into the specified web page;

[0095] The generation module 304 is used to generate a web page skeleton diagram according to the style code, the execution code and the structure attribute code when displaying the specified web page.

[0096] In another embodiment of the present disclosure,

[0097] The acquisition module 302 is further used to acquire the modified webpage configuration file when a modification operation on the webpage configuration file is detected;

[0098] The generation module 304 is further used to generate a new web page skeleton diagram based on the modified web page configuration file, web page style code and execution code.

[0099] In another embodiment of the present disclosure,

[0100] The control module is used to control the web page skeleton image to disappear when it is detected that the display time of the web page skeleton image reaches a preset time.

[0101] In another embodiment of the present disclosure,

[0102] The control module is used to control the web page skeleton image to disappear with a preset effect when it is detected that the display time of the web page skeleton image reaches a preset time.

[0103] In another embodiment of the present disclosure,

[0104] The generating module 304 is further used to generate a structural attribute code according to the size of the specified web page, and the size of the web page skeleton diagram indicated by the structural attribute code matches the size.

[0105] In another embodiment of the present disclosure, the device further comprises:

[0106] The adjustment module is used to adjust the size of the web page skeleton diagram according to the screen size of the terminal.

[0107] In summary, the device provided by the embodiment of the present disclosure does not require downloading an additional browser. It can obtain the structure of the web page skeleton diagram by reading the web page configuration file of the specified web page including the structural attribute code of the web page skeleton diagram. By executing the code related to the web page skeleton diagram, the code related to the web page skeleton diagram is inserted into the specified web page, thereby reducing the storage resources consumed when generating the web page skeleton diagram.

[0108] Figure 4The structure block diagram of a terminal 400 provided by an exemplary embodiment of the present disclosure is shown. The terminal 400 may be: a smart phone, a tablet computer, an MP3 player (Moving Picture Experts Group Audio Layer III), an MP4 (Moving Picture Experts Group Audio Layer IV), a laptop computer or a desktop computer. The terminal 400 may also be called a user device, a portable terminal, a laptop terminal, a desktop terminal or other names.

[0109] Typically, the terminal 400 includes a processor 401 and a memory 402 .

[0110] The processor 401 may include one or more processing cores, such as a 4-core processor, an 8-core processor, etc. The processor 401 may be implemented in at least one hardware form of DSP (Digital Signal Processing), FPGA (Field-Programmable Gate Array), and PLA (Programmable Logic Array). The processor 401 may also include a main processor and a coprocessor. The main processor is a processor for processing data in the awake state, also known as a CPU (Central Processing Unit); the coprocessor is a low-power processor for processing data in the standby state. In some embodiments, the processor 401 may be integrated with a GPU (Graphics Processing Unit), which is responsible for rendering and drawing the content to be displayed on the display screen. In some embodiments, the processor 401 may also include an AI (Artificial Intelligence) processor, which is used to process computing operations related to machine learning.

[0111] The memory 402 may include one or more computer-readable storage media, which may be non-transitory. The memory 402 may also include a high-speed random access memory, and a non-volatile memory, such as one or more disk storage devices, flash memory storage devices. In some embodiments, the non-transitory computer-readable storage medium in the memory 402 is used to store at least one instruction, which is used to be executed by the processor 401 to implement the method for generating a web page skeleton diagram provided in the method embodiment of the present application.

[0112] In some embodiments, the terminal 400 may further optionally include: a peripheral device interface 403 and at least one peripheral device. The processor 401, the memory 402 and the peripheral device interface 403 may be connected via a bus or a signal line. Each peripheral device may be connected to the peripheral device interface 403 via a bus, a signal line or a circuit board. Specifically, the peripheral device includes: at least one of a radio frequency circuit 404, a display screen 405, a camera assembly 406, an audio circuit 407, a positioning assembly 408 and a power supply 409.

[0113] The peripheral device interface 403 may be used to connect at least one peripheral device related to I / O (Input / Output) to the processor 401 and the memory 402. In some embodiments, the processor 401, the memory 402, and the peripheral device interface 403 are integrated on the same chip or circuit board; in some other embodiments, any one or two of the processor 401, the memory 402, and the peripheral device interface 403 may be implemented on a separate chip or circuit board, which is not limited in this embodiment.

[0114] The radio frequency circuit 404 is used to receive and transmit RF (Radio Frequency) signals, also known as electromagnetic signals. The radio frequency circuit 404 communicates with the communication network and other communication devices through electromagnetic signals. The radio frequency circuit 404 converts the electrical signal into an electromagnetic signal for transmission, or converts the received electromagnetic signal into an electrical signal. Optionally, the radio frequency circuit 404 includes: an antenna system, an RF transceiver, one or more amplifiers, a tuner, an oscillator, a digital signal processor, a codec chipset, a user identity module card, and the like. The radio frequency circuit 404 can communicate with other terminals through at least one wireless communication protocol. The wireless communication protocol includes, but is not limited to: a metropolitan area network, various generations of mobile communication networks (2G, 3G, 4G and 5G), a wireless local area network and / or a WiFi (Wireless Fidelity) network. In some embodiments, the radio frequency circuit 404 may also include circuits related to NFC (Near Field Communication), which is not limited in this application.

[0115] The display screen 405 is used to display the UI (User Interface). The UI may include graphics, text, icons, videos and any combination thereof. When the display screen 405 is a touch display screen, the display screen 405 also has the ability to collect touch signals on the surface or above the surface of the display screen 405. The touch signal can be input to the processor 401 as a control signal for processing. At this time, the display screen 405 can also be used to provide virtual buttons and / or virtual keyboards, also known as soft buttons and / or soft keyboards. In some embodiments, the display screen 405 can be one, and the front panel of the terminal 400 is set; in other embodiments, the display screen 405 can be at least two, which are respectively set on different surfaces of the terminal 400 or are folded; in some other embodiments, the display screen 405 can be a flexible display screen, which is set on the curved surface or folded surface of the terminal 400. Even, the display screen 405 can also be set to a non-rectangular irregular shape, that is, a special-shaped screen. The display screen 405 can be made of materials such as LCD (Liquid Crystal Display), OLED (Organic Light-Emitting Diode) and the like.

[0116] The camera assembly 406 is used to capture images or videos. Optionally, the camera assembly 406 includes a front camera and a rear camera. Typically, the front camera is arranged on the front panel of the terminal, and the rear camera is arranged on the back of the terminal. In some embodiments, there are at least two rear cameras, which are any one of a main camera, a depth of field camera, a wide-angle camera, and a telephoto camera, so as to realize the fusion of the main camera and the depth of field camera to realize the background blur function, the fusion of the main camera and the wide-angle camera to realize the panoramic shooting and VR (Virtual Reality) shooting function or other fusion shooting functions. In some embodiments, the camera assembly 406 may also include a flash. The flash can be a monochrome temperature flash or a dual-color temperature flash. A dual-color temperature flash refers to a combination of a warm light flash and a cold light flash, which can be used for light compensation at different color temperatures.

[0117] The audio circuit 407 may include a microphone and a speaker. The microphone is used to collect sound waves from the user and the environment, and convert the sound waves into electrical signals and input them into the processor 401 for processing, or input them into the radio frequency circuit 404 to achieve voice communication. For the purpose of stereo acquisition or noise reduction, there may be multiple microphones, which are respectively arranged at different parts of the terminal 400. The microphone may also be an array microphone or an omnidirectional acquisition microphone. The speaker is used to convert the electrical signal from the processor 401 or the radio frequency circuit 404 into sound waves. The speaker may be a traditional film speaker or a piezoelectric ceramic speaker. When the speaker is a piezoelectric ceramic speaker, it can not only convert the electrical signal into sound waves audible to humans, but also convert the electrical signal into sound waves inaudible to humans for purposes such as ranging. In some embodiments, the audio circuit 407 may also include a headphone jack.

[0118] Positioning component 408 is used to locate the current geographical location of terminal 400 to implement navigation or LBS (Location Based Service). Positioning component 408 can be a positioning component based on the US GPS (Global Positioning System), China's Beidou system, Russia's Grenas system or the European Union's Galileo system.

[0119] The power supply 409 is used to power various components in the terminal 400. The power supply 409 can be an alternating current, a direct current, a disposable battery, or a rechargeable battery. When the power supply 409 includes a rechargeable battery, the rechargeable battery can support wired charging or wireless charging. The rechargeable battery can also be used to support fast charging technology.

[0120] In some embodiments, the terminal 400 further includes one or more sensors 410 , including but not limited to: an acceleration sensor 411 , a gyroscope sensor 412 , a pressure sensor 413 , a fingerprint sensor 414 , an optical sensor 415 , and a proximity sensor 416 .

[0121] The acceleration sensor 411 can detect the magnitude of acceleration on the three coordinate axes of the coordinate system established by the terminal 400. For example, the acceleration sensor 411 can be used to detect the components of gravity acceleration on the three coordinate axes. The processor 401 can control the display screen 405 to display the user interface in a horizontal view or a vertical view according to the gravity acceleration signal collected by the acceleration sensor 411. The acceleration sensor 411 can also be used to collect game or user motion data.

[0122] The gyro sensor 412 can detect the body direction and rotation angle of the terminal 400, and the gyro sensor 412 can cooperate with the acceleration sensor 411 to collect the user's 3D actions on the terminal 400. The processor 401 can implement the following functions based on the data collected by the gyro sensor 412: motion sensing (such as changing the UI according to the user's tilt operation), image stabilization during shooting, game control, and inertial navigation.

[0123] The pressure sensor 413 can be set on the side frame of the terminal 400 and / or the lower layer of the display screen 405. When the pressure sensor 413 is set on the side frame of the terminal 400, it can detect the user's holding signal of the terminal 400, and the processor 401 performs left and right hand recognition or shortcut operation according to the holding signal collected by the pressure sensor 413. When the pressure sensor 413 is set on the lower layer of the display screen 405, the processor 401 controls the operability controls on the UI interface according to the user's pressure operation on the display screen 405. The operability controls include at least one of a button control, a scroll bar control, an icon control, and a menu control.

[0124] The fingerprint sensor 414 is used to collect the user's fingerprint, and the processor 401 identifies the user's identity based on the fingerprint collected by the fingerprint sensor 414, or the fingerprint sensor 414 identifies the user's identity based on the collected fingerprint. When the user's identity is identified as a trusted identity, the processor 401 authorizes the user to perform relevant sensitive operations, which include unlocking the screen, viewing encrypted information, downloading software, paying, and changing settings. The fingerprint sensor 414 can be set on the front, back, or side of the terminal 400. When a physical button or a manufacturer logo is set on the terminal 400, the fingerprint sensor 414 can be integrated with the physical button or the manufacturer logo.

[0125] The optical sensor 415 is used to collect the ambient light intensity. In one embodiment, the processor 401 can control the display brightness of the display screen 405 according to the ambient light intensity collected by the optical sensor 415. Specifically, when the ambient light intensity is high, the display brightness of the display screen 405 is increased; when the ambient light intensity is low, the display brightness of the display screen 405 is decreased. In another embodiment, the processor 401 can also dynamically adjust the shooting parameters of the camera assembly 406 according to the ambient light intensity collected by the optical sensor 415.

[0126] The proximity sensor 416, also called a distance sensor, is usually disposed on the front panel of the terminal 400. The proximity sensor 416 is used to collect the distance between the user and the front of the terminal 400. In one embodiment, when the proximity sensor 416 detects that the distance between the user and the front of the terminal 400 is gradually decreasing, the processor 401 controls the display screen 405 to switch from the screen-on state to the screen-off state; when the proximity sensor 416 detects that the distance between the user and the front of the terminal 400 is gradually increasing, the processor 401 controls the display screen 405 to switch from the screen-off state to the screen-on state.

[0127] Those skilled in the art will understand that Figure 4 The structure shown in the figure does not constitute a limitation on the terminal 400, and the terminal 400 may include more or less components than those shown in the figure, or combine some components, or adopt a different component arrangement.

[0128] The terminal provided by the embodiment of the present disclosure can obtain the structure of the web page skeleton diagram by reading the web page configuration file of the specified web page including the structural attribute code of the web page skeleton diagram, without downloading an additional browser. By executing the code related to the web page skeleton diagram, the code related to the web page skeleton diagram is inserted into the specified web page, thereby reducing the storage resources consumed when generating the web page skeleton diagram.

[0129] The present disclosure provides a computer-readable storage medium, wherein the storage medium stores at least one program code, and the at least one program code is loaded and executed by a processor to implement Figure 1 or Figure 2 The method for generating a web page skeleton diagram shown in the figure. The computer-readable storage medium may be non-transitory. For example, the computer-readable storage medium may be a read-only memory (ROM), a random access memory (RAM), a CD-ROM, a magnetic tape, a floppy disk, an optical data storage device, etc.

[0130] The computer-readable storage medium provided by the embodiment of the present disclosure can obtain the structure of the web page skeleton diagram by reading the web page configuration file of the specified web page including the structural attribute code of the web page skeleton diagram, without downloading an additional browser. By executing the code related to the web page skeleton diagram, the code related to the web page skeleton diagram is inserted into the specified web page, thereby reducing the storage resources consumed when generating the web page skeleton diagram.

[0131] A person skilled in the art will understand that all or part of the steps to implement the above embodiments may be accomplished by hardware or by instructing related hardware through a program, and the program may be stored in a computer-readable storage medium, and the above-mentioned storage medium may be a read-only memory, a disk or an optical disk, etc.

[0132] The above description is only a preferred embodiment of the present disclosure and is not intended to limit the present disclosure. Any modifications, equivalent substitutions, improvements, etc. made within the spirit and principles of the present disclosure should be included in the protection scope of the present disclosure.

Claims

1. A method for generating a web page skeleton diagram, characterized in that: Applied to a terminal, the method comprises: Generate a structure attribute code according to the size of the specified web page, wherein the structure attribute code is used to indicate the structure of the web page skeleton diagram, and the size of the web page skeleton diagram indicated by the structure attribute code matches the size of the specified web page; Reading a webpage configuration file of the specified webpage, wherein the webpage configuration file includes a structural attribute code of a webpage skeleton diagram of the specified webpage; Performing Cascading Style Sheet (CSS) parsing on the source code of the specified web page to obtain the style code of the web page skeleton diagram; Parsing the source code of the designated web page in scripting language JavaScript to obtain the execution code of the web page skeleton diagram; Inserting the structural attribute code, the style code and the execution code into the designated web page; When displaying the designated web page, generating a web page skeleton diagram according to the style code, the execution code and the structural attribute code; When a modification operation on the webpage configuration file is detected, the modified webpage configuration file is obtained, and a new webpage skeleton diagram is generated based on the modified webpage configuration file, the style code and the execution code.

2. The method according to claim 1, characterized in that The method further comprises: When it is detected that the display time of the webpage skeleton diagram reaches a preset time, the webpage skeleton diagram is controlled to disappear.

3. The method according to claim 2, characterized in that When it is detected that the display time of the webpage skeleton diagram reaches a preset time, controlling the webpage skeleton diagram to disappear includes: When it is detected that the display time of the webpage skeleton diagram reaches a preset time, the webpage skeleton diagram is controlled to disappear using a preset effect.

4. The method according to claim 1, characterized in that: After generating the web page skeleton diagram according to the style code, the execution code and the structure attribute code, the method further includes: The size of the web page skeleton diagram is adjusted according to the screen size of the terminal.

5. A device for generating a web page skeleton diagram, characterized in that: Applied to a terminal, the device comprises: A generating module, used for generating a structural attribute code according to the size of the specified web page, wherein the structural attribute code is used for indicating the structure of the web page skeleton diagram, and the size of the web page skeleton diagram indicated by the structural attribute code matches the size of the specified web page; A reading module, used for reading a webpage configuration file of the specified webpage, wherein the webpage configuration file includes a structural attribute code of a webpage skeleton diagram of the specified webpage; The acquisition module is used to perform CSS parsing on the source code of the specified web page to obtain the style code of the web page skeleton diagram; perform JavaScript parsing on the source code of the specified web page to obtain the execution code of the web page skeleton diagram; An inserting module, used for inserting the structural attribute code, the style code and the execution code into the designated web page; The generating module is further used to generate a web page skeleton diagram according to the style code, the execution code and the structure attribute code when displaying the specified web page; The acquisition module is further used to acquire the modified webpage configuration file when a modification operation on the webpage configuration file is detected; The generating module is also used to generate a new web page skeleton diagram based on the modified web page configuration file, the web page style code and the execution code.

6. The device according to claim 5, characterized in that The device also includes: The control module is used to control the web page skeleton diagram to disappear when it is detected that the display time of the web page skeleton diagram reaches a preset time.

7. The device according to claim 6, characterized in that The control module is used to control the web page skeleton image to disappear with a preset effect when it is detected that the display time of the web page skeleton image reaches a preset time.

8. The device according to claim 5, characterized in that The device also includes: The adjustment module is used to adjust the size of the web page skeleton diagram according to the screen size of the terminal.

9. A terminal, characterized in that: The terminal includes a processor and a memory, wherein at least one program code is stored in the memory, and the at least one program code is loaded and executed by the processor to implement the method for generating a web page skeleton diagram according to any one of claims 1 to 4.

10. A computer-readable storage medium, characterized in that: At least one program code is stored in the storage medium, and the at least one program code is loaded and executed by the processor to implement the method for generating a web page skeleton diagram according to any one of claims 1 to 4.

Images