Page resource loading method and device, electronic equipment and storage medium

Abstract

This application provides a page resource loading method, apparatus, electronic device, and storage medium, belonging to the field of Internet technology. The method includes: obtaining file attribute information and file type of the resource to be loaded; determining the target byte position in the file attribute information based on the file type; obtaining target byte data at the target byte position; and determining the size information of the resource to be loaded based on the target byte data; creating a view container and adjusting the size of the view container according to the size information; and filling the adjusted view container with the resource to be loaded. This application can first read the size information from the file attribute information, adjust the size of the view container based on the read size information, and then directly fill the view container with the file content data when receiving it later, thus preventing page jitter, improving page loading stability, and reducing page jitter during loading.

Description

Technical Field

[0001] This application relates to the field of Internet technology, and in particular to a method and apparatus for loading page resources, an electronic device, and a storage medium. Background Technology

[0002] A webpage is composed of various elements called Views (view containers), such as buttons, horizontal lines, color blocks, and displayed images. Currently, common methods for drawing Views include: 1. Setting the View size first, then loading and filling resources before changing the View size. This method can cause significant page jumps on the client side. 2. Downloading the complete resource first to determine its size, then drawing the View to the screen. However, the larger the resource size, the longer the download time, and consequently, the longer the waiting time. Furthermore, larger resource sizes are more susceptible to network conditions. 3. Including image width and height parameters in the HTTP address of the remote resource, thus knowing the View size during drawing. However, this method requires the server to handle image width and height separately and append them to the HTTP address, consuming processing resources. Also, not all resource links include image width and height information in the HTTP address. In summary, existing methods either cause significant page jumps or consume substantial server resources, and cannot address all situations. Summary of the Invention

[0003] The main objective of this application is to provide a page resource loading method, apparatus, electronic device, and storage medium, which aims to improve the stability of page loading and reduce page jitter during the loading process.

[0004] To achieve the above objectives, a first aspect of this application proposes a page resource loading method, the method comprising: obtaining file attribute information and file type of a resource to be loaded; determining a target byte position in the file attribute information based on the file type; obtaining target byte data at the target byte position; determining size information of the resource to be loaded based on the target byte data; creating a view container and adjusting the size of the view container based on the size information; and filling the resource to be loaded into the adjusted view container.

[0005] In some embodiments, obtaining the file type of the resource to be loaded includes: obtaining the first byte data at the first preset byte position in the file attribute information; and determining the file type of the resource to be loaded based on the first byte data.

[0006] In some embodiments, obtaining the file attribute information of the resource to be loaded includes: receiving byte stream data of the resource to be loaded from the server; obtaining second byte data at a second preset position in the byte stream data, wherein the second byte data is the file attribute information of the resource to be loaded.

[0007] In some embodiments, the resource to be loaded includes image resources and video resources, and obtaining the file attribute information and file type of the resource to be loaded includes one of the following: when the resource to be loaded is an image resource, directly obtain the file attribute information and file type of the resource to be loaded; when the resource to be loaded is a video resource, determine the target frame image of the video resource, and obtain the file attribute information and file type of the target frame image.

[0008] In some embodiments, filling the adjusted view container with the resource to be loaded includes: obtaining the file content data of the resource to be loaded; parsing the file content data and filling it with the view container.

[0009] In some embodiments, before obtaining the file attribute information and file type of the resource to be loaded, the page resource loading method further includes: sending request information for the resource to be loaded to the server, so that the server queries the storage status of the resource to be loaded based on the request information; when the storage status is that the resource to be loaded is stored on the server, receiving a request failure status code and byte stream data of the resource to be loaded from the server based on the request information, wherein the byte stream data includes the file attribute information and file content data.

[0010] In some embodiments, after sending the request information for the resource to be loaded to the server, the page resource loading method further includes: when the storage status is that the resource to be loaded is not stored on the server, receiving a request failure status code fed back by the server based on the request information.

[0011] To achieve the above objectives, a second aspect of this application provides a page resource loading apparatus, the apparatus comprising: a data receiving module, configured to acquire file attribute information and file type of a resource to be loaded, and determine the target byte position in the file attribute information according to the file type; a byte acquisition module, configured to acquire target byte data at the target byte position, and determine the size information of the resource to be loaded according to the target byte data; a view container creation module, configured to create a view container and adjust the size of the view container according to the size information; and a resource filling module, configured to fill the resource to be loaded into the adjusted view container.

[0012] To achieve the above objectives, a third aspect of this application provides an electronic device, which includes a memory and a processor. The memory stores a computer program, and the processor executes the computer program to implement the method described in the first aspect.

[0013] To achieve the above objectives, a fourth aspect of the present application provides a computer-readable storage medium storing a computer program that, when executed by a processor, implements the method described in the first aspect.

[0014] The page resource loading method, apparatus, electronic device, and storage medium proposed in this application obtain the file attribute information and file type of the resource to be loaded before receiving the content of the resource to be loaded. Based on the file type, the target byte position in the file attribute information is determined. After determining the target byte position, the target byte data at the target byte position is obtained. Based on the target byte data, the size information of the resource to be loaded is determined. A view container is created on the page to fill the resource to be loaded. Then, the file content data of the resource to be loaded is received, and the resource to be loaded is filled into the adjusted view container. Since the file attribute information of the resource to be loaded is sent from the server to the client before the file content data, and the size information of the resource to be loaded is stored in the file attribute information, the client first reads the size information from the file attribute information and adjusts the size of the view container according to the read size information. The size of the view container is the appropriate size for the resource to be loaded. When the file content data is received later, it is directly filled into the view container, thus preventing page jitter, improving the stability of page loading, and reducing page jitter during loading. Attached Figure Description

[0015] Figure 1 This is an optional flowchart of the page resource loading method provided in the embodiments of this application;

[0016] Figure 2 This is a flowchart illustrating the process of obtaining the file type of the resource to be loaded in the page resource loading method provided in this application embodiment;

[0017] Figure 3 This is a flowchart illustrating the process of obtaining file attribute information of the resource to be loaded in the page resource loading method provided in this application embodiment;

[0018] Figure 4 This is a flowchart illustrating the process of obtaining file attribute information and file type of the resource to be loaded in the page resource loading method provided in this application embodiment;

[0019] Figure 5This is a flowchart illustrating the process of obtaining file attribute information and file type of the resource to be loaded in the page resource loading method provided in this application embodiment;

[0020] Figure 6 This is a flowchart of the page resource loading method provided in this application embodiment for filling a view container;

[0021] Figure 7 This is an optional flowchart of the page resource loading method provided in the embodiments of this application;

[0022] Figure 8 This is an optional flowchart of the page resource loading method provided in the embodiments of this application;

[0023] Figure 9 This is a schematic diagram of the structure of the page resource loading device provided in the embodiments of this application;

[0024] Figure 10 This is a schematic diagram of the hardware structure of the electronic device provided in the embodiments of this application. Detailed Implementation

[0025] To make the objectives, technical solutions, and advantages of this application clearer, the following detailed description is provided in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative and not intended to limit the scope of this application.

[0026] It should be noted that although functional modules are divided in the device schematic diagram and a logical order is shown in the flowchart, in some cases, the steps shown or described may be performed in a different order than the module division in the device or the order in the flowchart. The terms "first," "second," etc., in the specification, claims, and the aforementioned drawings are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence.

[0027] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as commonly understood by one of ordinary skill in the art to which this application belongs. The terminology used herein is for the purpose of describing embodiments of this application only and is not intended to limit this application.

[0028] First, let's analyze some of the terms used in this application:

[0029] Artificial intelligence (AI) is a new branch of computer science that studies, develops, and applies theories, methods, technologies, and systems to simulate, extend, and expand human intelligence. It aims to understand the essence of intelligence and produce intelligent machines that can react in a way similar to human intelligence. Research in this field includes robotics, speech recognition, image recognition, natural language processing, and expert systems. AI can simulate the information processes of human consciousness and thought. Furthermore, AI utilizes digital computers or machines controlled by digital computers to simulate, extend, and expand human intelligence, perceiving the environment, acquiring knowledge, and using that knowledge to achieve optimal results.

[0030] Natural Language Processing (NLP): NLP uses computers to process, understand, and utilize human language (such as Chinese and English). NLP is a branch of artificial intelligence and an interdisciplinary field of computer science and linguistics, often referred to as computational linguistics. NLP includes syntactic analysis, semantic analysis, and discourse understanding. It is commonly used in machine translation, handwritten and printed character recognition, speech recognition and text-to-speech conversion, intent recognition, information extraction and filtering, text classification and clustering, sentiment analysis, and opinion mining. It involves data mining, machine learning, knowledge acquisition, knowledge engineering, artificial intelligence research, and linguistic research related to language computation.

[0031] Information extraction is a text processing technique that extracts factual information such as entities, relationships, and events from natural language text and outputs it as structured data. Information extraction is a technique for extracting specific information from text data. Text data is composed of specific units, such as sentences, paragraphs, and chapters. Text information is composed of smaller, specific units, such as characters, words, phrases, sentences, paragraphs, or combinations of these units. Extracting noun phrases, names of people, and place names from text data is an example of text information extraction. Of course, text information extraction techniques can extract information of various types.

[0032] Image captioning generates natural language descriptions for images, helping applications understand the semantics expressed in the visual scene. For example, image captioning can convert image retrieval into text retrieval, classify images, and improve retrieval results. While people can often describe the details of a visual scene with a quick glance, automatically adding descriptions to images is a comprehensive and challenging computer vision task, requiring the conversion of complex information contained in the image into natural language descriptions. Compared to ordinary computer vision tasks, image captioning not only requires identifying objects in an image but also associating the identified objects with natural semantics and describing them in natural language. Therefore, image captioning requires extracting deep features from the image, associating them with semantic features, and converting them to generate descriptions.

[0033] Hypertext Transfer Protocol (HTTP): HTTP is a simple request-response protocol that typically runs on top of TCP. It specifies what messages a client might send to a server and what responses it might receive. Request and response message headers are given in ASCII format, while the message content has a MIME-like format. HTTP is an application layer protocol, and like other application layer protocols, it is a protocol designed to implement a specific type of application, and its functionality is implemented by an application running in user space. HTTP is a protocol specification documented in writing, outlining the implementation programs that actually communicate using HTTP. HTTP is based on a browser / server (B / S) architecture, and server-side implementations of HTTP include httpd and nginx, while client-side implementations are primarily web browsers.

[0034] The Joint Photographic Experts Group (JPEG) is a standard for compressing continuous-tone still images. Files with the extension .jpg or .jpeg are the most commonly used image file format. It primarily employs a joint coding method using predictive coding (DPCM), discrete cosine transform (DCT), and entropy coding to remove redundant image and color data. It is a lossy compression format, capable of compressing images into a very small storage space, but this inevitably causes some damage to the image data. Especially when using excessively high compression ratios, the quality of the decompressed image will be reduced. However, JPEG compression technology is very advanced; it can remove redundant image data using lossy compression methods. In other words, it can achieve relatively good image quality with less disk space. Furthermore, JPEG is a very flexible format with adjustable image quality, allowing for different compression ratios and supporting multiple compression levels.

[0035] Portable Network Graphics (PNG) is a bitmap format that uses lossless compression algorithms and supports indexed color schemes, grayscale, RGB, and alpha channels. It was designed to replace GIF and TIFF file formats while adding features not found in GIF. PNG uses a lossless data compression algorithm derived from LZ77 and is commonly used in Java programs, web pages, or S60 applications due to its high compression ratio and small file size. PNG files have the .png extension and are characterized by small file size, lossless compression, indexed color mode, optimized network transmission and display, and support for transparency effects.

[0036] Graphics Interchange Format (GIF): The name GIF is an abbreviation for Graphics Interchange Format. It was developed in 1987 by Compu Serve to fill the gap in cross-platform image formats. GIFs are supported on multiple platforms, including PCs and Mattetosh. A GIF is a bitmap image. The basic principle of a bitmap image is that it consists of many pixels, each assigned a color, and these pixels together form the image. GIFs use the Lempel-Zev-Welch (LZW) compression algorithm and support up to 256 colors. Due to this characteristic, GIFs are more suitable for images with fewer colors, such as cartoon characters and company logos. However, their expressive power is limited when true color is required. GIFs typically include a color palette containing all the necessary colors. In web applications, the file size of an image significantly impacts download speed. Therefore, we can optimize the color palette of a GIF by reducing the number of colors used in the image (some unnecessary colors can be discarded) without affecting image quality. The biggest difference between GIF and other image formats is that it was designed entirely as a public standard, and many platforms support GIF due to the popularity of the Compu Serve network.

[0037] Streams: In Java, I / O (input / output) is handled through streams. A stream is an abstract concept referring to a continuous stream of data (characters or bytes), sent in a first-in, first-out (FIFO) manner. When a program needs to read data, it opens a stream to a data source, which can be a file, memory, or a network connection. Similarly, when a program needs to write data, it opens a stream to a destination. You can imagine the data "flowing" through these streams. Generally, the characteristics of streams include: FIFO: The data written to the output stream first is read by the input stream first. Sequential access: Bytes can be written to the stream one after another, and bytes can be read out in the same order; random access is not allowed. Read-only or write-only: Each stream can only be either an input stream or an output stream; it cannot have both functions simultaneously. Input streams can only be read, and output streams can only be written. In a data transmission channel, if both writing and reading data are required, two separate streams must be provided.

[0038] InputStream is an abstract class used to process files such as images, videos, audio, PowerPoint presentations, and Word documents. Byte streams themselves do not have a buffer; buffered byte streams offer significantly higher efficiency compared to traditional byte streams.

[0039] Internet Protocol Address (IP Address): The IP protocol is a protocol designed for communication between interconnected computer networks. In the Internet, it is a set of rules that enables all computer networks connected to the network to communicate with each other, specifying the rules that computers must follow when communicating on the Internet. Computer systems from any manufacturer can interconnect with the Internet as long as they comply with the IP protocol. Network systems and devices from different manufacturers, such as Ethernet and packet-switched networks, cannot communicate with each other. The main reason for this incompatibility is the different formats of the basic units of data they transmit (technically called "frames"). The IP protocol is actually a set of software programs that unify the conversion of various "frames" into the "IP datagram" format. This conversion is one of the most important characteristics of the Internet, enabling all kinds of computers to communicate with each other on the Internet, i.e., it has the characteristic of "openness".

[0040] Based on this, embodiments of this application propose a page resource loading method and apparatus, electronic device and storage medium, aiming to improve the stability of page loading and reduce the jitter that occurs during page loading.

[0041] The page resource loading method, apparatus, electronic device, and storage medium provided in this application are specifically described through the following embodiments. First, the page resource loading method in this application is described.

[0042] The embodiments of this application can acquire and process relevant data based on artificial intelligence technology. Artificial intelligence (AI) refers to the theories, methods, technologies, and application systems that use digital computers or machines controlled by digital computers to simulate, extend, and expand human intelligence, perceive the environment, acquire knowledge, and use that knowledge to obtain optimal results.

[0043] Foundational technologies for artificial intelligence generally include sensors, dedicated AI chips, cloud computing, distributed storage, big data processing, operating / interactive systems, and mechatronics. AI software technologies mainly encompass computer vision, robotics, biometrics, speech processing, natural language processing, and machine learning / deep learning.

[0044] The page resource loading method provided in this application relates to the field of Internet technology. This method can be applied to a terminal, a server, or software running on either a terminal or a server. In some embodiments, the terminal can be a smartphone, tablet, laptop, desktop computer, etc.; the server can be configured as an independent physical server, a server cluster or distributed system composed of multiple physical servers, or a cloud server providing basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communication, middleware services, domain name services, security services, CDN, and big data and artificial intelligence platforms; the software can be an application implementing the page resource loading method, but is not limited to the above forms.

[0045] This application can be used in a wide variety of general-purpose or special-purpose computer system environments or configurations. Examples include: personal computers, server computers, handheld or portable devices, tablet devices, multiprocessor systems, microprocessor-based systems, set-top boxes, programmable consumer electronics, network PCs, minicomputers, mainframe computers, and distributed computing environments including any of the above systems or devices. This application can be described in the general context of computer-executable instructions executed by a computer, such as program modules. Generally, program modules include routines, programs, objects, components, data structures, etc., that perform specific tasks or implement specific abstract data types. This application can also be practiced in distributed computing environments where tasks are performed by remote processing devices connected via a communication network. In distributed computing environments, program modules can reside in local and remote computer storage media, including storage devices.

[0046] It should be noted that in all specific embodiments of this application, when processing data related to user identity or characteristics, such as user information, user behavior data, user historical data, and user location information, user permission or consent is obtained first. Furthermore, the collection, use, and processing of this data comply with relevant laws, regulations, and standards. In addition, when embodiments of this application require access to sensitive personal information of users, separate permission or consent from the user is obtained through pop-ups or redirection to confirmation pages. Only after obtaining the user's separate permission or consent is the necessary user-related data required for the proper functioning of these embodiments acquired.

[0047] Figure 1 This is an optional flowchart of the page resource loading method provided in the embodiments of this application. The method in the page resource loading method provided in the embodiments of this application may include, but is not limited to, steps S101 to S104.

[0048] Step S101: Obtain the file attribute information and file type of the resource to be loaded, and determine the target byte position in the file attribute information based on the file type;

[0049] Step S102: Obtain the target byte data at the target byte location, and determine the size information of the resource to be loaded based on the target byte data;

[0050] Step S103: Create a view container and adjust its size according to the size information;

[0051] Step S104: Fill the adjusted view container with the resources to be loaded.

[0052] Steps S101 to S104 as illustrated in this embodiment involve obtaining the file attribute information and file type of the resource to be loaded before receiving its content. Since the target byte position storing size information differs in the file attribute information of different file types, it is necessary to determine the target byte position based on the file type. After determining the target byte position, the target byte data is obtained, and the size information of the resource to be loaded is determined based on the target byte data. A view container is then created on the page to fill the resource to be loaded. Finally, the file content data of the resource to be loaded is received, and the resource to be loaded is filled into the adjusted view container. In this mechanism, since the file attribute information of the resource to be loaded is sent to the client by the server before the file content data, and the size information of the resource to be loaded is stored in the file attribute information, the client first reads the size information from the file attribute information, adjusts the size of the view container according to the read size information, and the size of the view container is the appropriate size of the resource to be loaded. When receiving and parsing the file content data later, the file content data can be directly filled into the view container. This avoids the situation where the page shakes due to adjusting the size of the view container after filling the data into the view container, thus improving the stability of page loading and reducing the occurrence of page shaking during the loading process.

[0053] For example, when the obtained file type is JPEG, the format of JPEG files is fixed, consisting of different tags arranged sequentially. As shown in Table 1, the JPEG file structure table, starting from the SOF (Start of Frame) tag, the width and height information of the JPEG file is contained: specifically, bytes 4-5 represent the height in pixels, and bytes 6-7 represent the width in pixels. Converted to the bytecode position within the entire file resource, bytes 163-164 represent the height in pixels, and bytes 165-166 represent the width in pixels. Bytes 163-164 and 165-166 are the target byte positions of the JPEG file. By retrieving bytes 163-164 and 165-166, the width and height information of the image—that is, the dimensions of the JPEG file—can be obtained. The size of the view container can then be directly set based on this JPEG file size (before the image resource content is filled), without waiting for all data to load before adjusting the view container size and then filling it with the image resource content. This reduces page jitter caused by adjusting the view container after filling it with data, improving page loading stability and minimizing page jitter during loading.

[0054]

[0055]

[0056] Table 1. JPEG File Structure

[0057] Figure 2 This is a flowchart of obtaining the file type of the resource to be loaded in the page resource loading method provided in this application embodiment. The method in the page resource loading method provided in this application embodiment may include, but is not limited to, steps S201 to S202.

[0058] Step S201: Obtain the first byte data at the first preset byte position in the file attribute information;

[0059] Step S202: Determine the file type of the resource to be loaded based on the first byte of data.

[0060] In steps S201 to S202 of this embodiment, each file attribute information of the resource to be loaded has a specific byte position storing the file type of the resource. The first byte data at the first preset byte position in the file attribute information of the resource to be loaded is obtained, and the file type of the resource to be loaded is obtained by parsing the first byte data. For example, for a JPEG image resource, the first 4 bytes of its file attribute information are represented in hexadecimal as "FFD8FFE0"; for a PNG file, the first 4 bytes are represented in hexadecimal as "89504E47"; and for a GIF file, the first 4 bytes are represented in hexadecimal as "47494638". When the file attribute information is obtained, the first 4 bytes (i.e., the first preset byte position) are parsed. If the parsed result is "FFD8FFE0", it means the file type is JPEG; if the parsed result is "89504E47", it means the file type is PNG; and if the parsed result is "47494638", it means the file type is GIF. Since the byte positions of information stored in resources of different file types are different, obtaining the file type by parsing file attribute information first is beneficial to improving the speed and efficiency of reading relevant information subsequently.

[0061] It should be noted that network resource transmission is performed in binary data form. After the client and server establish a connection, the client generates an InputStream object to obtain the binary data sent from the server (this binary data is processed through routing, gateways, client network frameworks, etc., and then converted into bytecode before being given to the caller, i.e., to the InputStream). The caller then obtains the data at the corresponding byte position using methods such as InputStream.read(byte position). In another embodiment of this application, the file type is obtained by using InputStream to obtain the first byte data at the first preset byte position in the file attribute information.

[0062] Figure 3 This is a flowchart illustrating the process of obtaining file attribute information of the resource to be loaded in the page resource loading method provided in this application embodiment. The method in the page resource loading method provided in this application embodiment may include, but is not limited to, steps S301 to S302:

[0063] Step S301: Receive byte stream data of the resource to be loaded from the server;

[0064] Step S302: Obtain the second byte data at the second preset position in the byte stream data, wherein the second byte data is the file attribute information of the resource to be loaded.

[0065] Steps S301 to S302 of this application embodiment involve receiving byte stream data of the resource to be loaded from the server and obtaining the second byte data at a second preset position in the byte stream data. The second byte data is the file attribute information of the resource to be loaded. By obtaining the file attribute information at the second preset byte position in the byte stream data from the server first, it is beneficial to improve the speed and efficiency of reading relevant information subsequently. At the same time, by obtaining the file attribute information of the resource to be loaded before obtaining and parsing the file content data of the resource to be loaded, some basic information of the resource to be loaded, such as size information, can be determined in advance. This allows the size of the view container to be adjusted according to the size information before filling the file content data of the resource to be loaded into the view container, which greatly reduces the occurrence of page jitter caused by adjusting the view container after filling the data into the view container, improves the stability of page loading, and reduces the occurrence of jitter during page loading.

[0066] It should be noted that network resource transmission is performed in binary data form. After the client and server establish a connection, the client generates an InputStream object to obtain the binary data sent from the server (this binary data is processed through routing, gateways, client network frameworks, etc., and then converted into bytecode before being given to the caller, i.e., to the InputStream). The caller then obtains the data at the corresponding byte position using methods such as InputStream.read(byte position). In another embodiment of this application, the second byte data at the second preset byte position in the file attribute information is obtained by using InputStream to obtain the file attribute information.

[0067] Figure 4 This is a flowchart illustrating the process of obtaining file attribute information and file type of the resource to be loaded in the page resource loading method provided in this application embodiment. The method in the page resource loading method provided in this application embodiment may include, but is not limited to, step S401:

[0068] Step S401: When the resource to be loaded is an image resource, directly obtain the file attribute information and file type of the resource to be loaded.

[0069] In step S401 of this application embodiment, the resource to be loaded includes image resources and video resources. When the resource to be loaded is an image resource, the file attribute information and file type of the resource to be loaded are directly obtained, that is, as in the above embodiment, the byte stream data of the resource to be loaded from the server is received, the second byte data at the second preset position in the byte stream data is obtained, wherein the second byte data is the file attribute information of the resource to be loaded, and then the first byte data at the first preset byte position in the file attribute information of the resource to be loaded is obtained, and the file type of the resource to be loaded is obtained by parsing the first byte data.

[0070] Figure 5 This is a flowchart illustrating the process of obtaining file attribute information and file type of the resource to be loaded in the page resource loading method provided in this application embodiment. The method in the page resource loading method provided in this application embodiment may include, but is not limited to, step S501:

[0071] Step S501: When the resource to be loaded is a video resource, determine the target frame image of the video resource and obtain the file attribute information and file type of the target frame image.

[0072] In step S501 of this embodiment, the resources to be loaded include image resources and video resources. The video resources are ultimately presented as frame animations on the client, that is, the images are played in sequence to form the animation. When the resource to be loaded is a video resource, the target frame image is determined, and the file attribute information and file type of the target frame image are obtained. That is, as in the above embodiment, the byte stream data of the target frame image of the resource to be loaded from the server is received, and the second byte data at the second preset position in the byte stream data is obtained. The second byte data is the file attribute information of the target frame image. Then, the first byte data at the first preset byte position in the file attribute information of the target frame image is obtained, and the file type of the target frame image is obtained by parsing the first byte data.

[0073] Figure 6 This is a flowchart illustrating the process of filling a view container in the page resource loading method provided in this application embodiment. The method in the page resource loading method provided in this application embodiment may include, but is not limited to, steps S601 to S602:

[0074] Step S601: Obtain the file content data of the resource to be loaded;

[0075] Step S602: Parse the file content data and populate it into the view container.

[0076] Steps S601 to S602, as shown in this embodiment, involve obtaining the file content data of the resource to be loaded, parsing the file content data, and filling it into the view container. After obtaining the size information of the resource to be loaded and adjusting the size of the view container in the above embodiment, obtaining the file content data of the resource to be loaded, parsing the file content data, and filling it into the view container will prevent page jitter caused by adjusting the size of the view container after filling the data into the view container. This improves the stability of page loading and reduces the jitter that occurs during page loading.

[0077] Figure 7This is an optional flowchart of the page resource loading method provided in this application embodiment. The method in the page resource loading method provided in this application embodiment may include, but is not limited to, steps S701 to S702:

[0078] Step S701: Send a request for the resource to be loaded to the server so that the server can query the storage status of the resource to be loaded based on the request.

[0079] Step S702: When the storage status is that the resource to be loaded is stored on the server, receive the request failure status code and the byte stream data of the resource to be loaded from the server based on the request information. The byte stream data includes file attribute information and file content data.

[0080] In steps S701 to S702 of this embodiment, the client sends a request for a resource to be loaded to the server, so that the server can query the storage status of the resource to be loaded based on the request information. When the storage status is that the resource to be loaded is stored on the server, the client receives a request success status code and byte stream data of the resource to be loaded from the server based on the request information. The byte stream data includes file attribute information and file content data.

[0081] In another embodiment of this application, the client sends a request for a resource to be loaded to the server, so that the server first determines whether the client is a legitimate connection and whether it is in the whitelist based on the request information; if the IP address of the client requesting the data is blocked, the resource cannot be returned; then the server queries the storage status of the resource to be loaded based on the request information. When the storage status is that the resource to be loaded is stored on the server, and the client and the server are still in a connected state, the client receives the request success status code and the byte stream data of the resource to be loaded from the server based on the request information, wherein the byte stream data includes file attribute information and file content data.

[0082] Figure 8 This is an optional flowchart of the page resource loading method provided in this application embodiment. The method in the page resource loading method provided in this application embodiment may include, but is not limited to, step S801:

[0083] Step S801: When the storage status is that the resource to be loaded is not stored on the server, receive the request failure status code fed back by the server based on the request information.

[0084] In step S801 of this application embodiment, the client sends a request information for a resource to be loaded to the server, so that the server can query the storage status of the resource to be loaded based on the request information. If the storage status is that the resource to be loaded is not stored on the server, the client receives a request failure status code from the server based on the request information.

[0085] In another embodiment of this application, the client sends a request for a resource to be loaded to the server, so that the server first determines whether the client is a legitimate connection and whether it is in the whitelist based on the request information. If the IP address of the client requesting the data is blocked, the resource cannot be returned. Then the server queries the storage status of the resource to be loaded based on the request information. When the storage status is that the resource to be loaded is not stored on the server and the client and the server are still in a connected state, the client receives a request failure status code fed back by the server based on the request information.

[0086] Please see Figure 9 This application also provides a page resource loading apparatus that can implement the above-described page resource loading method. The apparatus includes:

[0087] The data receiving module is used to obtain the file attribute information and file type of the resource to be loaded, and to determine the position of the target byte in the file attribute information based on the file type;

[0088] The byte acquisition module is used to acquire the target byte data at the target byte location and determine the size information of the resource to be loaded based on the target byte data;

[0089] The view container creation module is used to create view containers and adjust their size according to the size information.

[0090] The resource population module is used to populate the adjusted view container with the resources to be loaded.

[0091] The specific implementation of this page resource loading device is basically the same as the specific embodiment of the page resource loading method described above, and will not be repeated here.

[0092] This application also provides an electronic device, which includes a memory and a processor. The memory stores a computer program, and the processor executes the computer program to implement the above-described page resource loading method. This electronic device can be any smart terminal, including tablet computers, in-vehicle computers, etc.

[0093] Please see Figure 10 , Figure 10 The hardware structure of an electronic device according to another embodiment is illustrated. The electronic device includes:

[0094] The processor 1001 can be implemented using a general-purpose CPU (Central Processing Unit), microprocessor, application-specific integrated circuit (ASIC), or one or more integrated circuits, and is used to execute relevant programs to implement the technical solutions provided in the embodiments of this application.

[0095] The memory 1002 can be implemented as a read-only memory (ROM), static storage device, dynamic storage device, or random access memory (RAM). The memory 1002 can store the operating system and other applications. When the technical solutions provided in the embodiments of this specification are implemented through software or firmware, the relevant program code is stored in the memory 1002 and is called and executed by the processor 1001 using the page resource loading method of the embodiments of this application.

[0096] Input / output interface 1003 is used to implement information input and output;

[0097] The communication interface 1004 is used to enable communication and interaction between this device and other devices. Communication can be achieved through wired means (such as USB, network cable, etc.) or wireless means (such as mobile network, WIFI, Bluetooth, etc.).

[0098] Bus 1005 transmits information between various components of the device (e.g., processor 1001, memory 1002, input / output interface 1003, and communication interface 1004);

[0099] The processor 1001, memory 1002, input / output interface 1003 and communication interface 1004 are connected to each other within the device via bus 1005.

[0100] This application also provides a computer-readable storage medium storing a computer program that, when executed by a processor, implements the above-described page resource loading method.

[0101] Memory, as a non-transitory computer-readable storage medium, can be used to store non-transitory software programs and non-transitory computer-executable programs. Furthermore, memory may include high-speed random access memory, and may also include non-transitory memory, such as at least one disk storage device, flash memory device, or other non-transitory solid-state storage device. In some embodiments, memory may optionally include memory remotely located relative to the processor, and these remote memories can be connected to the processor via a network. Examples of such networks include, but are not limited to, the Internet, intranets, local area networks, mobile communication networks, and combinations thereof.

[0102] The page resource loading method, page resource loading device, electronic device, and storage medium provided in this application embodiment obtain the file attribute information and file type of the resource to be loaded before receiving the content of the resource to be loaded. Since the target byte position for storing size information in the file attribute information of different file types of the resource to be loaded is different, it is necessary to determine the target byte position in the file attribute information according to the file type. After determining the target byte position, the target byte data of the target byte position is obtained. The size information of the resource to be loaded is determined according to the target byte data. A view container for filling the resource to be loaded is created on the page. Then, the file content data of the resource to be loaded is received, and the resource to be loaded is filled into the view container. In the adjusted view container, since the file attribute information of the resource to be loaded is sent to the client by the server before the file content data, and the size information of the resource to be loaded is stored in the file attribute information, the client first reads the size information from the file attribute information, adjusts the size of the view container according to the read size information, and the size of the view container is the appropriate size for the resource to be loaded. When receiving and parsing the file content data later, the file content data can be directly filled into the view container. This avoids the page shaking caused by adjusting the size of the view container after filling the data, thus improving the stability of page loading and reducing page shaking during the loading process.

[0103] The embodiments described in this application are for the purpose of more clearly illustrating the technical solutions of the embodiments of this application, and do not constitute a limitation on the technical solutions provided by the embodiments of this application. As those skilled in the art will know, with the evolution of technology and the emergence of new application scenarios, the technical solutions provided by the embodiments of this application are also applicable to similar technical problems.

[0104] Those skilled in the art will understand that the technical solutions shown in the figures do not constitute a limitation on the embodiments of this application, and may include more or fewer steps than shown, or combine certain steps, or different steps.

[0105] The device embodiments described above are merely illustrative. The units described as separate components may or may not be physically separate; that is, they may be located in one place or distributed across multiple network units. Some or all of the modules can be selected to achieve the purpose of this embodiment according to actual needs.

[0106] Those skilled in the art will understand that all or some of the steps in the methods disclosed above, as well as the functional modules / units in the systems and devices, can be implemented as software, firmware, hardware, or suitable combinations thereof.

[0107] The terms “first,” “second,” “third,” “fourth,” etc. (if present) in the specification and accompanying drawings of this application are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that such data can be interchanged where appropriate so that the embodiments of this application described herein can be implemented in orders other than those illustrated or described herein. Furthermore, the terms “comprising” and “having,” and any variations thereof, are intended to cover non-exclusive inclusion; for example, a process, method, system, product, or apparatus that comprises a series of steps or units is not necessarily limited to those steps or units explicitly listed, but may include other steps or units not explicitly listed or inherent to such processes, methods, products, or apparatus.

[0108] It should be understood that in this application, "at least one (item)" means one or more, and "more than" means two or more. "And / or" is used to describe the relationship between related objects, indicating that three relationships can exist. For example, "A and / or B" can represent three cases: only A exists, only B exists, and both A and B exist simultaneously, where A and B can be singular or plural. The character " / " generally indicates that the preceding and following related objects are in an "or" relationship. "At least one (item) of the following" or similar expressions refer to any combination of these items, including any combination of single or plural items. For example, at least one (item) of a, b, or c can represent: a, b, c, "a and b", "a and c", "b and c", or "a and b and c", where a, b, and c can be single or multiple.

[0109] In the several embodiments provided in this application, it should be understood that the disclosed apparatus and methods can be implemented in other ways. For example, the apparatus embodiments described above are merely illustrative; for instance, the division of the units described above is only a logical functional division, and in actual implementation, there may be other division methods. For example, multiple units or components may be combined or integrated into another system, or some features may be ignored or not executed. Furthermore, the coupling or direct coupling or communication connection shown or discussed may be through some interfaces; the indirect coupling or communication connection between apparatuses or units may be electrical, mechanical, or other forms.

[0110] The units described above as separate components may or may not be physically separate. The components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the units can be selected to achieve the purpose of this embodiment according to actual needs.

[0111] Furthermore, the functional units in the various embodiments of this application can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. The integrated unit can be implemented in hardware or as a software functional unit.

[0112] If the integrated unit is implemented as a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, or all or part of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes multiple instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods of the various embodiments of this application. The aforementioned storage medium includes various media capable of storing programs, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.

[0113] The preferred embodiments of the present application have been described above with reference to the accompanying drawings, but this does not limit the scope of the claims of the present application. Any modifications, equivalent substitutions, and improvements made by those skilled in the art without departing from the scope and substance of the embodiments of the present application shall be within the scope of the claims of the present application.

Claims

1. A method for loading page resources, characterized in that, Applied to the client side, the page resource loading method includes: Send a request for a resource to be loaded to the server, so that the server can query the storage status of the resource to be loaded based on the request. When the storage condition is that the resource to be loaded is stored on the server, the server receives a request success status code based on the request information and byte stream data of the resource to be loaded. The byte stream data includes file attribute information and file content data, and the file attribute information is sent before the file content data. Obtaining the file attribute information and file type of the resource to be loaded includes: obtaining the second byte data at a second preset position in the byte stream data, wherein the second byte data is the file attribute information of the resource to be loaded; obtaining the first byte data at a first preset byte position in the file attribute information; and determining the file type of the resource to be loaded based on the first byte data. Determine the target byte position in the file attribute information based on the file type; Obtain the target byte data at the target byte location, and determine the size information of the resource to be loaded based on the target byte data; Before the resources to be loaded are populated, a view container is created and its size is adjusted according to the size information. The resources to be loaded are then populated into the adjusted view container.

2. The page resource loading method according to claim 1, characterized in that, The resources to be loaded include image resources and video resources. Obtaining the file attribute information and file type of the resources to be loaded includes one of the following: When the resource to be loaded is an image resource, directly obtain the file attribute information and file type of the resource to be loaded; When the resource to be loaded is a video resource, the target frame image of the video resource is determined, and the file attribute information and file type of the target frame image are obtained.

3. The page resource loading method according to claim 1, characterized in that, The step of filling the resource to be loaded into the adjusted view container includes: Obtain the file content data of the resource to be loaded; The file content data is parsed and populated into the view container.

4. The page resource loading method according to claim 1, characterized in that, After sending the request information for the resource to be loaded to the server, the page resource loading method further includes: When the storage status is that the resource to be loaded is not stored on the server, a request failure status code is received from the server based on the request information.

5. A page resource loading device, characterized in that, The device includes: The data receiving module is used to acquire file attribute information and file type of the resource to be loaded, and determine the target byte position in the file attribute information according to the file type, including: acquiring second byte data at a second preset position in byte stream data, wherein the second byte data is the file attribute information of the resource to be loaded; acquiring first byte data at a first preset byte position in the file attribute information; and determining the file type of the resource to be loaded according to the first byte data. The byte acquisition module is used to acquire the target byte data at the target byte position and determine the size information of the resource to be loaded based on the target byte data; A view container creation module is used to create a view container before the resource to be loaded is populated and to adjust the size of the view container according to the size information. The resource filling module is used to fill the resource to be loaded into the adjusted view container; Before obtaining the file attribute information and file type of the resource to be loaded, the device is further configured to: Send a request for a resource to be loaded to the server, so that the server can query the storage status of the resource to be loaded based on the request. When the storage condition is that the resource to be loaded is stored on the server, the server receives a request success status code based on the request information and byte stream data of the resource to be loaded. The byte stream data includes file attribute information and file content data, and the file attribute information is sent before the file content data.

6. An electronic device, characterized in that, The electronic device includes a memory and a processor, the memory storing a computer program, and the processor executing the computer program to implement the page resource loading method according to any one of claims 1 to 4.

7. A computer-readable storage medium storing a computer program, characterized in that, When the computer program is executed by a processor, it implements the page resource loading method according to any one of claims 1 to 4.

Images