WO2021057674A1 - 一种卡片渲染方法及电子设备 - Google Patents

一种卡片渲染方法及电子设备 Download PDF

Info

Publication number
WO2021057674A1
WO2021057674A1 PCT/CN2020/116588 CN2020116588W WO2021057674A1 WO 2021057674 A1 WO2021057674 A1 WO 2021057674A1 CN 2020116588 W CN2020116588 W CN 2020116588W WO 2021057674 A1 WO2021057674 A1 WO 2021057674A1
Authority
WO
WIPO (PCT)
Prior art keywords
electronic device
card
rendering
instruction set
target card
Prior art date
Application number
PCT/CN2020/116588
Other languages
English (en)
French (fr)
Inventor
李军
杨昌俊
余枝强
Original Assignee
华为技术有限公司
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 华为技术有限公司 filed Critical 华为技术有限公司
Priority to EP20869611.2A priority Critical patent/EP4027238A4/en
Priority to US17/764,042 priority patent/US11934352B2/en
Publication of WO2021057674A1 publication Critical patent/WO2021057674A1/zh

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G06F16/986—Document structures and storage, e.g. HTML extensions
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/10—File systems; File servers
    • G06F16/16—File or folder operations, e.g. details of user interfaces specifically adapted to file systems
    • G06F16/168—Details of user interfaces specifically adapted to file systems, e.g. browsing and visualisation, 2d or 3d GUIs
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/10—File systems; File servers
    • G06F16/11—File system administration, e.g. details of archiving or snapshots
    • G06F16/128—Details of file system snapshots on the file-level, e.g. snapshot creation, administration, deletion
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/04817—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance using icons
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/12—Use of codes for handling textual entities
    • G06F40/151—Transformation
    • G06F40/154—Tree transformation for tree-structured or markup documents, e.g. XSLT, XSL-FO or stylesheets
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/166—Editing, e.g. inserting or deleting
    • G06F40/174—Form filling; Merging
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T11/00—2D [Two Dimensional] image generation
    • G06T11/60—Editing figures and text; Combining figures or text
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T15/00—3D [Three Dimensional] image rendering
    • G06T15/005—General purpose rendering architectures
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T2200/00—Indexing scheme for image data processing or generation, in general
    • G06T2200/24—Indexing scheme for image data processing or generation, in general involving graphical user interfaces [GUIs]
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
    • H04L67/00—Network arrangements or protocols for supporting network services or applications
    • H04L67/34—Network arrangements or protocols for supporting network services or applications involving the movement of software or configuration parameters 

Definitions

  • This application relates to the field of terminal technology, and in particular to a card rendering method and electronic equipment.
  • Cards are a new form of service that can directly present users with information that users care about or are interested in, so as to better meet user needs. For example, for weather cards, the weather information of the user's location can be presented to the user. For another example, for a stock card, the user may be presented with information about the stocks that the user has purchased or the stocks of interest.
  • the electronic device can only present the information on the card to the user after rendering the card.
  • an electronic device based on the JS-Native architecture needs to go through at least three steps, namely, JSBundle analysis of the card, document object model (DOM) template construction, and layout calculation. Rendering the card and presenting it to the user has low rendering efficiency. Therefore, research on how to render the card so that the electronic device can quickly present the information on the card to the user is of great significance for improving the user experience.
  • the embodiments of the present application provide a card rendering method and an electronic device, so that the electronic device can quickly present the card, which helps to improve user experience.
  • the first aspect is a card rendering method according to an embodiment of this application, and the method includes:
  • the electronic device sends a request for obtaining relevant information of the target card to the server; and receives the relevant information of the target card sent by the server.
  • the relevant information of the target card includes the first file package set and the first rendering of the target card.
  • Instruction set and the first layout snapshot then, the electronic device performs preliminary rendering of the target card according to the first layout snapshot, and displays the preliminary rendered target card on the display screen; and responds to the target card Parse the first set of file packages to obtain the second rendering instruction set; filter out the rendering instructions in the second rendering instruction set other than the first rendering instruction set; finally, according to the filtered rendering instructions,
  • the target card is rendered again, and the target card displayed on the display screen is updated.
  • the electronic device can first render the card according to the first rendering instruction set and the first layout snapshot, so that the electronic device is The display of the card on the display screen reduces the steps of parsing the file package collection and layout calculation, thereby improving the efficiency of card rendering, thereby helping the electronic device to quickly present the card to the user and improving the user experience.
  • the electronic device constructs a first document object model DOM template according to the first rendering instruction set; and according to the first DOM template and the first layout snapshot, the target The card is initially rendered. Helps simplify the implementation.
  • the related information of the target card further includes a first DOM template; the electronic device performs preliminary rendering on the target card according to the first DOM template and the first layout snapshot. It helps to further improve the speed of the electronic device presenting the card to the user.
  • the electronic device when it receives a request to load the target card, it sends a request for obtaining relevant information of the target card to the server. Helps simplify the implementation.
  • the electronic device when it receives a request to search for the target card, it sends a request for obtaining relevant information of the target card to the server. Helps simplify the implementation.
  • the first rendering instruction set includes the rendering instructions between the start instruction of constructing the DOM template and the end instruction of constructing the DOM template in the second rendering instruction set, and includes the constructing DOM template The start instruction and the end instruction to build the DOM template. Help reduce the complexity of implementation.
  • the electronic device saves the second rendering instruction set and the first layout snapshot.
  • the electronic device again receives a request to load the target card or a request to search for the target card, and sends the file package collection acquisition request of the target card to the server;
  • the target card is rendered according to the pre-stored second rendering instruction set and the first layout snapshot, and the target card is displayed on the display screen;
  • the second file package set is analyzed to obtain the third rendering instruction set of the target card;
  • the second rendering instruction is verified according to the third rendering instruction set Set; and when the verification of the second rendering instruction set fails, re-render the target card according to the third rendering instruction set, and display the re-rendered target card on the display screen .
  • the electronic device can render the target card according to the pre-stored first related information of the target card, compared with the electronic device rendering the card according to the file package set obtained from the server, the electronic device can improve the display of the card on the display screen. Speed, improve user experience.
  • the electronic device when the verification of the second rendering instruction set fails, deletes the second rendering instruction set and the first layout snapshot, and stores the third rendering instruction set And a layout snapshot obtained according to the third rendering instruction set. Helps improve the reliability of card rendering.
  • another card rendering method includes:
  • the electronic device sends a file package collection acquisition request of the target card to the server; renders the target card according to the first related information of the target card stored in advance, and displays the target card on the display screen; A piece of related information is obtained based on a first file package set, which is a file package set used by the electronic device to render the target card before; the electronic device is receiving the first file package sent by the server After the second file package is assembled, obtain the second related information of the target card according to the second file package set;
  • the electronic device verifies the first related information according to the second related information
  • the electronic device When the verification of the first related information fails, the electronic device re-renders the target card according to the second related information, and displays the re-rendered target card on the display screen.
  • the electronic device can render the target card according to the pre-stored first related information of the target card, compared with the electronic device rendering the card according to the file package set obtained from the server, the electronic device's performance can be improved.
  • the speed at which cards are presented on the display improves the user experience.
  • the electronic device when the verification of the first related information fails, deletes the first related information and stores the second related information. It helps to improve the reliability of the electronic device to present the card.
  • the first related information includes: a first rendering instruction set; the electronic device parses the second file package set to obtain a second rendering instruction set;
  • the electronic device determines whether the first rendering instruction set and the second rendering instruction set are the same; when the first rendering instruction set is the same as the second rendering instruction set, the first rendering instruction set is checked Success; when the first rendering in-line and the second rendering instruction set are different, the verification of the first rendering instruction set fails. It helps to simplify the verification method of the first related information.
  • the electronic device when it receives a request to load a target card or a request to search for a target card, it sends a request for obtaining relevant information of the target card to the server. Helps simplify the implementation.
  • an electronic device provided by an embodiment of the present application includes a device that executes the foregoing aspects and any possible design method involved in each aspect of the embodiment of the present application.
  • a chip provided by an embodiment of the present application includes a processor and an interface, configured to call and run the program instructions stored in the memory from the memory, and execute the above-mentioned aspects and the various aspects related to the embodiments of the present application. Any possible design method.
  • a computer storage medium stores program instructions.
  • the program instructions run on an electronic device, the electronic device executes the above aspects and aspects of the embodiments of the present application. Any possible design method involved.
  • a computer program product of an embodiment of the present application when the computer program product runs on an electronic device, causes the electronic device to execute and implement the foregoing aspects of the embodiments of the present application and any possibility involved in each aspect The method of design.
  • FIG. 1 is a schematic diagram of a JS-Native architecture according to an embodiment of the application
  • FIG. 2 is a schematic flowchart of a card rendering method according to an embodiment of the application
  • FIG. 3 is a schematic diagram of the hardware architecture of an electronic device according to an embodiment of the application.
  • FIG. 4 is a schematic flowchart of another card rendering method according to an embodiment of the application.
  • FIG. 5 is a schematic diagram of an interface according to an embodiment of the application.
  • FIG. 6 is a schematic diagram of a card setting interface according to an embodiment of the application.
  • FIG. 7 is a schematic diagram of another interface of an embodiment of the application.
  • FIG. 8 is a schematic diagram of another interface of an embodiment of the application.
  • FIG. 9 is a schematic diagram of the relationship between rendering instruction sets according to an embodiment of the application.
  • FIG. 10 is a schematic diagram of another card according to an embodiment of the application.
  • FIG. 11 is a schematic flowchart of another card rendering method according to an embodiment of the application.
  • FIG. 12 is a schematic flowchart of another card rendering method according to an embodiment of the application.
  • FIG. 13 is a schematic flowchart of another card rendering method according to an embodiment of the application.
  • FIG. 14 is a schematic flowchart of another card rendering method according to an embodiment of the application.
  • 15 is a schematic diagram of the structure of an electronic device according to an embodiment of the application.
  • FIG. 16 is a schematic structural diagram of another electronic device according to an embodiment of the application.
  • A/B can mean A or B.
  • the "and/or” in this application is only an association relationship describing the associated objects, which means that there may be three types of relationships.
  • a and/or B can mean: A alone exists, A and B exist at the same time, and B exists alone.
  • At least one means one or more, and "plurality” means two or more.
  • the electronic device in the embodiment of the present application may be a portable terminal, such as a mobile phone, a tablet computer, a wearable device, an augmented reality (AR)/virtual reality (VR) device, etc.
  • exemplary embodiments of electronic devices include, but are not limited to, carrying Or other operating systems.
  • the electronic device may also be a smart screen, a notebook computer, a vehicle-mounted terminal, and so on.
  • a card is a form of electronic equipment presenting information to users, and it can include pictures, text, links, controls and other information about the same topic. For example, weather cards, stock cards, news cards, etc.
  • the card may also be the entrance of an application (application, APP) corresponding to the card.
  • the user can open the application corresponding to the card by operating on the card, so that the electronic device presents the user with the corresponding card
  • the interface of the application so that the user can view more detailed information on the interface.
  • the user can also perform corresponding operations on the interface of the application after opening the application corresponding to the card to meet their own needs.
  • the application corresponding to the weather card is weather.
  • the user can open the weather application program by operating the weather card, so that the electronic device presents the weather interface to the user. Users can operate the weather interface, set the information displayed on the weather card, or view the weather conditions of a certain city, to meet their own needs.
  • the application program corresponding to the card may be installed on the electronic device or not installed on the electronic device, which is not limited.
  • Host application Applications used to present cards on electronic devices, such as negative one screen, voice assistant, etc. For example, weather cards, stock cards, etc. can be presented on the negative screen.
  • the electronic device may respond to the user's voice instruction and present the corresponding card in the voice assistant.
  • the host application may or may not be installed on the electronic device, which is not limited.
  • the file package collection is a collection of files and related resources used to describe the card.
  • the file package collection can also be called JSBundle. Among them, different cards have different JSBundles.
  • DOM Document object model
  • the DOM module is used to describe the relationship between different elements on the card. It should be noted that elements can be understood as information such as controls and pictures on the card.
  • the server may be an electronic device, a general-purpose server, or a cloud server, etc., and is used to provide card-related information for the electronic device, for example, a file package collection, a DOM template, etc.
  • the electronic device when the host application requests to load a certain card, the electronic device first needs to render the card, and can only present the information on the card to the user after the rendering of the card is completed. For example, the electronic device can implement the rendering of the card based on the Web architecture or the JS-Native architecture.
  • the electronic device can implement the rendering of the card based on the Web architecture or the JS-Native architecture.
  • the solution based on the Web architecture to achieve card rendering due to the more restrictions on performance and experience, it is usually based on the JS-Native architecture to achieve the card rendering.
  • JS-Native architecture uses JavaScript dynamic language.
  • FIG. 1 it is a schematic diagram of a JS-Native architecture.
  • JS-Native architecture includes JSFramework and JS-Native engine.
  • JSFramework provides various functional foundations for JavaScript.
  • JS-Native engine includes JS engine (V8/JSCore) and JS-Native rendering engine.
  • the JS engine provides a runtime environment for JavaScript, and the JS-Native rendering engine is used for DOM template construction, Layout calculation and card rendering.
  • the JS-Native architecture also includes a user interface (UI) thread, a DOM thread, and a JS thread.
  • the UI thread can be used to render cards
  • the DOM thread can be used to build DOM templates, layout calculations, etc.
  • the JS thread can be used to parse the JSBundle.
  • the method of card rendering by electronic equipment is introduced.
  • the UI thread initializes the JS-Native engine
  • the host application requests to load card 1
  • it sends a file package collection acquisition request of card 1 to the server.
  • the server After receiving the file package collection acquisition request of card 1, the server returns the JSBundle of card 1 to the electronic device.
  • the electronic device After the electronic device obtains the JSBundle of card 1 from the server, it passes the JSBundle of card 1 to JSFramework.
  • JSBundle is parsed by JSFramework to obtain the rendering instruction set of card 1.
  • the rendering instruction set of Card 1 includes a plurality of rendering instructions for rendering Card 1.
  • the electronic device renders Card 1 according to the DOM template and the Layout snapshot file, and presents Card 1 to the user.
  • the electronic device needs to go through at least three steps of JSBundle analysis, DOM template construction, and Layout calculation to realize the rendering of the card and present it to the user. Therefore, the above-mentioned card rendering method takes a long time, which easily leads to a slower speed of the electronic device presenting the card to the user. Especially when the host application requests to load a certain card for the first time, or the host application requests to load multiple cards, the electronic device presents the cards to the user slowly. Among them, the more cards the host application requests to load, the more serious the jam phenomenon may be.
  • the embodiment of the present application provides a method for rendering a card, so that the electronic device can quickly present the card to the user, reducing the jam of the electronic device and improving the user experience.
  • the electronic device includes a processor 110, an internal memory 121, an external memory interface 122, a camera 130, a display screen 140, a sensor module 150, an audio module 160, a speaker 161, a receiver 162, a microphone 163, a headphone interface 164, and a user
  • the electronic device may also include motors, indicators, buttons, and so on.
  • FIG. 3 is only an example.
  • the electronic device of the embodiment of the present application may have more or fewer components than the electronic device shown in the figure, may combine two or more components, or may have different component configurations.
  • the various components shown in the figure may be implemented in hardware, software, or a combination of hardware and software including one or more signal processing and/or application specific integrated circuits.
  • the processor 110 may include one or more processing units.
  • the processor 110 may include an application processor (AP), a modem, a graphics processing unit (GPU), an image signal processor (ISP), a video codec, and a digital signal processing unit.
  • AP application processor
  • GPU graphics processing unit
  • ISP image signal processor
  • video codec video codec
  • DSP digital signal processor
  • DSP baseband processor
  • NPU neural-network processing unit
  • different processing units may be independent devices, or may be integrated in one or more devices.
  • a buffer may also be provided in the processor 110 for storing programs and/or data.
  • the programs in the embodiments of the present application may also be referred to as program instructions, computer programs, code instructions, instructions, etc., which are not limited.
  • the buffer in the processor 110 may be a cache memory.
  • the buffer may be used to store programs and/or data that have just been used, generated, or recycled by the processor 110. If the processor 110 needs to use the program and/or data, it can be directly called from the buffer. It helps to reduce the time for the processor 110 to obtain programs or data, thereby improving the efficiency of the system.
  • the internal memory 121 may be used to store programs and/or data.
  • the internal memory 121 includes a program storage area and a data storage area.
  • the storage program area can be used to store an operating system (such as Android, IOS, and other operating systems), a program required for at least one function (such as a display function), and the like.
  • the storage data area may be used to store data (such as JSBundle, Layout snapshot files) created, preset, and/or acquired during the use of the electronic device.
  • the processor 110 may call the program and/or data stored in the internal memory 121 to cause the electronic device to execute a corresponding method, thereby implementing one or more functions.
  • the processor 110 calls certain programs and/or data in the internal memory to make the electronic device execute the card rendering method provided in the embodiments of the present application, so that the electronic device can quickly present the card to the user, which helps improve the user Experience.
  • the internal memory 121 may be a high-speed random access memory, and/or a non-volatile memory, etc.
  • the non-volatile memory may include at least one of one or more magnetic disk storage devices, flash memory devices, and/or universal flash storage (UFS).
  • the external memory interface 122 may be used to connect an external memory card (for example, a Micro SD card) to expand the storage capacity of the electronic device.
  • the external memory card communicates with the processor 110 through the external memory interface 122 to realize the data storage function.
  • the electronic device can save content such as images, music, videos, and documents in an external memory card through the external memory interface 122.
  • the camera 130 may be used to capture moving and static images, etc.
  • the camera 130 includes a lens and an image sensor.
  • the optical image generated by the object through the lens is projected onto the image sensor, and then converted into an electrical signal for subsequent processing.
  • the image sensor may be a charge coupled device (CCD) or a complementary metal-oxide-semiconductor (CMOS) phototransistor.
  • CMOS complementary metal-oxide-semiconductor
  • the image sensor converts the light signal into an electrical signal, and then transfers the electrical signal to the ISP to convert it into a digital image signal.
  • the electronic device may include one or more cameras 130, which is not limited.
  • the electronic device includes five cameras 130, for example, three rear cameras and two front cameras.
  • the electronic device includes three cameras 130, for example, two rear cameras and one front camera.
  • the display screen 140 may include a display panel.
  • the user can display different interfaces on the display screen 140 according to his own needs, so as to meet the needs of the user.
  • the display panel may adopt a liquid crystal display (LCD), an organic light-emitting diode (organic light-emitting diode, OLED), an active matrix organic light-emitting diode, or an active matrix organic light-emitting diode (active-matrix organic light-emitting diode).
  • LCD liquid crystal display
  • OLED organic light-emitting diode
  • OLED organic light-emitting diode
  • active matrix organic light-emitting diode active-matrix organic light-emitting diode
  • matrix organic light emitting diode AMOLED
  • flexible light-emitting diode FLED
  • Miniled MicroLed, Micro-oLed, quantum dot light emitting diode (QLED), etc.
  • the electronic device 100 may implement a display function through a GPU, a display screen 140, an application processor, and the like. It should be noted that, in the embodiment of the present application, the electronic device may include one or more display screens 140, which is not limited.
  • the display screen 140 may be a foldable screen or a non-foldable screen, which is not limited.
  • the sensor module 150 may include one or more sensors. For example, touch sensor 150A, pressure sensor 150B, and so on. In other embodiments, the sensor module 150 may also include a gyroscope, an acceleration sensor, a fingerprint sensor, an ambient light sensor, a distance sensor, a proximity light sensor, a bone conduction sensor, a temperature sensor, and a positioning sensor (such as a global positioning system). system, GPS) sensor), etc., which are not limited.
  • the touch sensor 150A may also be referred to as a “touch panel”.
  • the touch sensor 150A may be provided on the display screen 140.
  • the touch sensor 150A and the display screen 140 form a touch screen, which can also be referred to as a “touch screen”.
  • the touch sensor 150A is used to detect touch operations acting on or near it.
  • the touch sensor 150A may transfer the detected touch operation to the application processor to determine the type of the touch event.
  • the electronic device can provide visual output related to touch operations and the like through the display screen 140. For example, the electronic device may switch the interface in response to the touch operation on or near the touch device 150A detecting the touch operation, and display the switched interface on the display screen 140.
  • the touch sensor 150A may also be disposed on the surface of the electronic device, which is different from the position of the display screen 140.
  • the pressure sensor 150B is used to sense pressure signals, and can convert the pressure signals into electrical signals.
  • the pressure sensor 150B may be provided on the display screen 140. Among them, touch operations that act on the same touch position but have different touch operation strengths can correspond to different operation instructions.
  • the electronic device can implement audio functions through the audio module 160, the speaker 161, the receiver 162, the microphone 163, the earphone interface 164, and the application processor. For example, audio playback function, recording function, voice wake-up function, etc.
  • the audio module 160 can be used to perform digital-to-analog conversion and/or analog-to-digital conversion on audio data, and can also be used to encode and/or decode audio data.
  • the audio module 160 may be provided in the processor 110, or part of the functional modules of the audio module 160 may be provided in the processor 110.
  • the speaker 161 also called a “speaker” is used to convert audio data into sound and play the sound.
  • the electronic device 100 may listen to music through the speaker 161, answer a hands-free call, or issue a voice prompt, etc.
  • the receiver 162 also called “earpiece” is used to convert audio data into sound and play the sound. For example, when the electronic device answers a phone call, it can be answered by bringing the receiver 162 close to the human ear.
  • the microphone 163, also called a "microphone” or a “microphone” is used to collect sounds (such as ambient sounds, including sounds made by people, sounds made by equipment, etc.), and convert the sounds into audio electrical data.
  • sounds such as ambient sounds, including sounds made by people, sounds made by equipment, etc.
  • the electronic device 100 may be provided with at least one microphone 163.
  • two microphones 163 are provided in the electronic device, in addition to collecting sound, it can also achieve a noise reduction function.
  • three, four or more microphones 163 may be provided in the electronic device, so that on the basis of sound collection and noise reduction, sound source identification or directional recording functions can also be realized.
  • the earphone interface 164 is used to connect wired earphones.
  • the earphone interface 164 can be a USB interface 170, a 3.5mm open mobile terminal platform (OMTP) standard interface, a cellular telecommunications industry association (cellular telecommunications industry association of the USA, CTIA) standard interface, etc. .
  • OMTP open mobile terminal platform
  • CTIA cellular telecommunications industry association of the USA, CTIA
  • the SIM card interface 171 is used to connect to a SIM card.
  • the SIM card can be inserted into the SIM card interface 171 or pulled out from the SIM card interface 115 to achieve contact and separation with the electronic device.
  • the electronic device can support 1 or N SIM card interfaces, and N is a positive integer greater than 1.
  • the SIM card interface 171 may support Nano SIM cards, Micro SIM cards, SIM cards, and so on.
  • the same SIM card interface 171 can insert multiple cards at the same time. The types of the multiple cards can be the same or different.
  • the SIM card interface 171 can also be compatible with different types of SIM cards.
  • the SIM card interface 171 may also be compatible with external memory cards.
  • Electronic equipment interacts with the network through the SIM card to realize functions such as voice calls, video calls, and data communications.
  • the electronic device adopts an eSIM, that is, an embedded SIM card.
  • the eSIM card can be embedded in the electronic device and cannot be separated from the electronic device.
  • the USB interface 172 is an interface that complies with the USB standard specifications, and specifically may be a Mini USB interface, a Micro USB interface, a USB Type C interface, and so on.
  • the USB interface 172 can be used to connect a charger to charge the electronic device, and can also be used to transfer data between the electronic device and the peripheral device. It can also be used to connect earphones and play sound through earphones.
  • the USB interface 172 may not only be the earphone interface 164, but also be used to connect to other electronic devices, such as AR devices, computers, and so on.
  • the charging management module 180 is used to receive charging input from the charger.
  • the charger can be a wireless charger or a wired charger.
  • the charging management module 180 may receive the charging input of the wired charger through the USB interface 170.
  • the charging management module 180 may receive the wireless charging input through the wireless charging coil of the electronic device. While charging the battery 182, the charging management module 180 can also supply power to the electronic device through the power management module 180.
  • the power management module 181 is used to connect the battery 182, the charging management module 180, and the processor 110.
  • the power management module 181 receives input from the battery 182 and/or the charging management module 180, and supplies power to the processor 110, the internal memory 121, the camera 130, the display screen 140, and the like.
  • the power management module 181 can also be used to monitor parameters such as battery capacity, battery cycle times, and battery health status (leakage, impedance).
  • the power management module 181 may also be provided in the processor 110.
  • the power management module 181 and the charging management module 180 may also be provided in the same device.
  • the mobile communication module 191 can provide wireless communication solutions including 2G/3G/4G/5G, etc. applied to electronic devices.
  • the mobile communication module 191 may include filters, switches, power amplifiers, low noise amplifiers (LNA), and the like.
  • LNA low noise amplifiers
  • the wireless communication module 192 can provide applications in electronic devices including wireless local area networks (WLAN) (such as wireless fidelity (Wi-Fi) networks), Bluetooth (BT), and global navigation satellite systems. (global navigation satellite system, GNSS), frequency modulation (FM), near field communication (NFC), infrared technology (infrared, IR) and other wireless communication solutions.
  • WLAN wireless local area networks
  • BT Bluetooth
  • GNSS global navigation satellite system
  • FM frequency modulation
  • NFC near field communication
  • IR infrared technology
  • the wireless communication module 192 may be one or more devices integrating at least one communication processing module.
  • the antenna 1 of the electronic device is coupled with the mobile communication module 191, and the antenna 2 is coupled with the wireless communication module 192, so that the electronic device can communicate with other devices.
  • the mobile communication module 191 can communicate with other devices through the antenna 1, and the wireless communication module 191 can communicate with other devices through the antenna 2.
  • FIG. 4 it is a schematic flowchart of a method for rendering a card according to an embodiment of the application, which specifically includes the following steps.
  • Step 401 The electronic device sends a request for obtaining relevant information of the card 1 to the server.
  • the electronic device when it receives the request to load the card 1, it sends a request for acquiring the relevant information of the card 1 to the server. For example, the electronic device may respond to the operation of opening the host application to cause the host application to send a request to load the card 1 to the electronic device. For example, take the host application as a negative one screen as an example.
  • the electronic device currently displays a main interface on the display screen, for example, the main interface is an interface 510 as shown in A in FIG. 5.
  • the electronic device detects the user's operation of sliding to the left on the main interface, and in response to the operation, displays a negative screen on the display screen.
  • a negative screen is an interface 520 as shown in B in FIG. 5.
  • the electronic device 5 includes a card 501 and a card 502.
  • the electronic device In order to enable the electronic device to normally display the card 501 and the card 502 on the negative screen, the electronic device also responds to the user's operation of sliding to the left on the main interface, so that the negative screen requests the card 501 and the card 502 to be loaded.
  • the electronic device Taking the card 1 as the card 501 as an example, when the electronic device requests to load the card 501 by one screen, it sends a request for obtaining relevant information of the card 501 to the server.
  • the card displayed on the negative screen of the electronic device can be subscribed according to the user's needs, or the electronic device can determine whether to present a certain card on the negative screen based on a preset strategy (such as the user's historical usage records, etc.).
  • a preset strategy such as the user's historical usage records, etc.
  • the electronic device can subscribe to the corresponding card according to demand through the contextual intelligent setting interface.
  • the contextual intelligence setting interface is an interface 600 as shown in FIG. 6, including virtual buttons for controlling the contextual intelligence to turn on or off, one or more subscription options, and so on. Among them, when the virtual key used to control the intelligent opening or closing of the situation is turned on (ON), the user can select the corresponding subscription option according to his own needs.
  • the electronic device displays the weather card and the application usage card on the negative screen.
  • the electronic device can display a card of the route and mode of work on the negative screen during the working hours.
  • Electronic equipment can also display travel time and train number cards on a negative screen after purchasing train tickets or airplane tickets.
  • the host application as a fast application as an example.
  • the electronic device displays the main interface on the current display screen, for example, the main interface is an interface 710 as shown in A in FIG. 7.
  • the electronic device detects the user's operation of clicking the quick application icon 701, and in response to the operation, displays the interface of the quick application on the display screen.
  • the interface of the quick app is the interface 720 shown in B in FIG. 7.
  • the interface 720 includes a card 702.
  • the electronic device also responds to the user's operation of clicking the quick app icon 701 to cause the quick app to request the card 702 to be loaded.
  • the electronic device receives a request to load the card 702, it sends a request for obtaining relevant information of the card 702 to the server.
  • the electronic device displays an interface 810 of the voice assistant on the display screen.
  • the electronic device receives the user's voice instruction for checking the weather, and in response to the user's voice instruction for checking the weather, displays the interface 820 shown in B in FIG. 8 on the display screen.
  • the interface 820 includes a card 802.
  • the card 802 is used to display weather conditions.
  • the electronic device also responds to the user's voice instruction to check the weather, causing the voice assistant to request the card 802 to be loaded.
  • the electronic device receives a request to load the card 802, it sends a request for obtaining relevant information of the card 802 to the server.
  • the electronic device when it receives the request to search for the card 1, it sends a request for obtaining the relevant information of the card 1 to the server.
  • the electronic device may respond to a user's operation on a certain host application, causing the host application to send a request to search for the card 1 to the electronic device.
  • the electronic device Taking the interface 720 shown in B in FIG. 7 as an example, the electronic device responds to the operation of inputting the weather in the search box, and the quick application sends a request for searching the weather card to the electronic device.
  • the electronic device can also respond to a user's operation of turning on the device or an operation of awakening the electronic device from a sleep state, so that the host application sends a request to load the card 1 to the electronic device, and sends a request for obtaining relevant information of the card 1 to the server.
  • the electronic device may also send a request for acquiring relevant information of the card 1 to the server when detecting the refresh of the interface of the host application.
  • the server receives the related information acquisition request of the card 1, and sends the related information of the card 1 to the electronic device.
  • the related information of the card 1 may include the JSBundle of the card 1, the first rendering instruction set and the Layout snapshot.
  • the first rendering instruction set is used to construct the DOM template of the card 1.
  • the related information of the card 1 may also include the DOM template of the card 1.
  • Layout snapshots which can also be called layout snapshots, snapshot files, layout files or layout data, are the results of Layout calculations, and can also be called Layout snapshots, which are used to describe the layout of an element on the card. , Such as the position and size of the element on the card.
  • the related information of the card 1 may be uploaded to the server by the developer through an electronic device (such as a laptop, etc.).
  • the JSBundle, the first rendering instruction set, the Layout snapshot, etc. of the card 1 may be uploaded to the server by the developer through the electronic device.
  • the developer uploads the JSBundle of card 1 to the server through an electronic device, and after receiving the JSBundle of card 1, the server parses the JSBundle to obtain a rendering instruction set. Then the first rendering instruction set is filtered out from the rendering instruction set and saved; according to the rendering instruction set, a DOM template is constructed, and the Layout layout calculation is performed to obtain a Layout snapshot, and the Layout snapshot is saved.
  • the server also saves the DOM module.
  • the first rendering instruction set is a rendering instruction between the first target instruction and the second target instruction in the rendering instruction set, and includes the first target instruction and the second target instruction.
  • the server may filter out the first rendering instruction set by determining whether the rendering instructions in the rendering instruction set are located between the first target instruction and the second target instruction.
  • the first target instruction and the second target instruction may be determined by the server according to a preset strategy, or may be pre-configured in the server.
  • the first target instruction is an initial instruction for building a DOM template, such as CreateBody
  • the second target instruction is an ending instruction for building a DOM template, such as CreateFinish.
  • the server can also send the first rendering instruction set, Layout snapshot or DOM template to the electronic device, so that the electronic device can use the first rendering instruction set, Layout snapshots or DOM templates first render the card and present it to the user without the need to parse the JSBundle first, which helps to improve the rendering efficiency of the card.
  • Step 403 After receiving the relevant information of the card 1, the electronic device constructs a DOM template according to the first rendering instruction set; and preliminarily renders the card according to the DOM template and the Layout snapshot, and displays the card 1 on the display screen.
  • the electronic device when the electronic device includes the DOM template in the related information of card 1, after receiving the related information of card 1, the electronic device can perform preliminary rendering of the card according to the DOM template and the Layout snapshot, and display it on the display screen. Card 1.
  • the electronic device After receiving the relevant information of the card 1, the electronic device transmits the first rendering instruction set and the Layout snapshot of the card 1 to the JS-Native architecture through the application programming interface (API) of the host application.
  • the JS-Native engine constructs a DOM template on the DOM thread according to the first rendering instruction set, and performs preliminary rendering of the card on the UI thread according to the DOM template and Layout snapshots, and presents it on the display screen.
  • step 404 the electronic device parses the JSBundle in the related information of the card 1 to obtain a rendering instruction set.
  • the electronic device can pass the JSBundle of the card 1 to the JSFramework in the JS-Native architecture through the API of the host application. JSFramework parses the JSBundle on the JS thread to obtain the rendering instruction set.
  • Step 405 The electronic device filters out rendering instructions other than the first rendering instruction set from the rendering instruction set.
  • Example 1 each time the electronic device uses the method of Example 1 to render the card, it needs to filter the rendering instruction set to avoid rendering repeated card views and causing memory leakage.
  • the first rendering instruction set and the rendering instruction set are shown in FIG. 7.
  • the rendering instruction set is obtained by the electronic device analyzing the JSBundle in the related information of the card 1.
  • the first rendering instruction set is sent by the server to the electronic device.
  • the shaded rendering instructions in FIG. 9 are rendering instructions outside the first rendering instruction set out of the rendering instruction set.
  • the first rendering instruction set is a set of rendering instructions between the first target instruction and the second target instruction.
  • the electronic device can determine whether the rendering instruction in the rendering instruction set is not between the first target instruction and the second target instruction, so as to filter out the rendering instructions in the rendering instruction set other than the first rendering instruction set.
  • the first target instruction and the second target instruction may be determined by the electronic device according to the rendering instructions of the start position and the end position in the first rendering instruction set. For example, as shown in FIG. 7, the rendering instruction at the start position of the first rendering instruction set is CreateBody, and the rendering instruction at the end position of the first rendering instruction set is CreateFinish.
  • the first target instruction and the second target instruction may be pre-configured in the electronic device.
  • the electronic device may use JSFramework on the JS thread to filter out rendering instructions other than the first rendering instruction set from the rendering instruction set.
  • Step 406 The electronic device performs secondary rendering on the card according to the filtered rendering instructions other than the first rendering instruction set, and updates the card 1 displayed on the display screen.
  • the secondary rendering of the card by the electronic device may include: the electronic device updates the DOM template and/or information on the card based on the filtered rendering instructions other than the first rendering instruction set. This helps to prevent the electronic device from rendering repeated card views according to the rendering instruction set obtained by parsing the JSBundle, causing memory leakage.
  • step 403 and step 404 are usually executed on different threads. For example, if step 403 builds the DOM template on the DOM thread, the card is rendered on the UI thread, and step 404 resolves the JSBundle on the JS thread. Therefore, the electronic device may perform step 403 and step 404 at the same time, or may perform step 403 first and then perform step 404, which is not limited.
  • the server can send the first rendering instruction set, Layout snapshot or DOM template to the electronic device
  • the electronic device can first render the card based on the DOM template and the Layout snapshot and present it to the user, which is helpful To improve the efficiency of the electronic device presenting the card to the user, and reduce the possibility of jams caused when the electronic device presents the card.
  • the electronic device can also parse the JSBundle of the card, and continue to render the card according to the parsed rendering instructions other than the first rendering instruction set, so that the electronic device can respond to the user's operation on the card. Delete, share, edit, etc. Take the card 801 shown in FIG. 10 as an example.
  • the user can operate the virtual key 800, so that the electronic device displays a menu bar on the display screen in response to the operation of the virtual key 1000.
  • the menu bar includes multiple virtual buttons. For example, when the user selects to remove, the card 1001 is no longer displayed on the negative screen. However, when the electronic device executes step 403 and the user operates the virtual button 1000, the electronic device may not be able to respond to the event of the user operating the virtual button 1000.
  • the electronic device Take the related information of card 1 as the JSBundle, the first rendering instruction set and the Layout snapshot of card 1 as an example.
  • the electronic device sends a request for acquiring the relevant information of the card 1 to the server.
  • the server After receiving the request for obtaining the relevant information of the card 1, the server sends the relevant information of the card 1 to the electronic device.
  • the electronic device can buffer the relevant information of the card 1 in a certain memory, such as a buffer in a processor, or an internal memory, or an external memory interfaced with the external memory, or a dedicated memory, etc.
  • the electronic device transmits the first rendering instruction set in the memory to the JS-Native engine through the API of the host application, and the JS-Native engine constructs the DOM template according to the first rendering instruction set on the DOM thread, and transfers the DOM template through the API of the host application.
  • the Layout snapshot in the memory is passed to the JS-Native engine, and the JS-Native engine performs preliminary rendering on the card 1 according to the DOM template and the Layout snapshot on the UI thread, and presents the card 1 on the display screen.
  • the electronic device passes the JSBundle of the memory card 1 to the JSFramework through the API of the host application, and the JSFramework parses the JSBundle on the JS thread to obtain the rendering instruction set, and then filters out the rendering instruction set except the first rendering instruction set from the rendering instruction set Rendering instructions.
  • the DOM thread On the DOM thread, the DOM template is updated according to the filtered rendering instructions. Finally, on the UI thread, according to the updated DOM template, etc., update the card 1 displayed on the display screen, and the process ends.
  • the JSBundle of card 1 is uploaded to the server by the developer, and the first rendering instruction set and the Layout snapshot file are obtained by analyzing the JSBundle uploaded by the developer by the server, or it can be uploaded to the server by the developer.
  • the method for rendering a card provided by the embodiment of the application shown in FIG. 12 can first construct a DOM template, and realize the preliminary rendering of the card to the user according to the Layout snapshot file. This greatly improves the efficiency of the electronic device in presenting the card to the user.
  • the functions implemented by the server can also be integrated and implemented in an integrated development environment (IDE).
  • IDE integrated development environment
  • FIG. 13 it is a schematic flowchart of another card rendering method according to an embodiment of the application, which specifically includes the following steps.
  • Step 1301 The electronic device sends a file package collection acquisition request of the card 1 to the server.
  • step 1301 refer to the related introduction of the request for obtaining the related information of the card 1 sent by the electronic device to the server in step 401, which will not be repeated here.
  • step 1302 the electronic device preliminarily renders the card 1 based on the pre-stored related information of the card 1, and displays the card 1 on the display screen.
  • the pre-stored related information of the card 1 may be stored when the electronic device previously rendered the card 1.
  • the pre-stored related information of the card 1 may be stored when the electronic device rendered the card 1 last time.
  • the pre-stored related information of the card 1 may include the rendering instruction set and Layout snapshot obtained by analyzing the JSBundle used for rendering the card 1 before the electronic device; or the pre-stored related information of the card 1 may include 1
  • the rendering instruction set obtained by analyzing the JSBundle used for rendering; or the pre-stored related information of Card 1 includes the rendering instruction set, DOM template and Layout snapshot obtained by analyzing the JSBundle used for rendering of card 1 before the electronic device. This is not limited.
  • the electronic device constructs the DOM template according to the first rendering instruction set. Then, according to the DOM template and Layout snapshot, the card 1 is initially rendered, and the card 1 is displayed on the display screen. Taking the pre-stored information of card 1 as the rendering instruction set obtained by analyzing the JSBundle used by the electronic device to render card 1 as an example, the electronic device can construct a DOM template according to the rendering instruction set, and perform layout calculations to obtain Layout snapshot, and then preliminary rendering of Card 1 based on the DOM template and Layout snapshot.
  • the electronic device can pass the pre-stored first rendering instruction set and Layout snapshot of the card 1 to the JS-Native engine through the API of the host application, and the JS-Native engine constructs the DOM according to the first rendering instruction set on the DOM thread.
  • Template and based on the DOM template and Layout snapshot on the UI thread, the card 1 is rendered preliminary, and the card 1 after the preliminary rendering is presented to the user.
  • step 1303 the server receives the file package collection acquisition request of card 1, and sends the JSBundle of card 1 to the electronic device.
  • Step 1304 After receiving the JSBundle of the card 1 sent by the server, the electronic device obtains relevant information of the card 1 according to the JSBundle.
  • the electronic device After receiving the JSBundle of Card 1 sent by the server, the electronic device passes the JSBundle to the JSFramework in the JS-Native architecture through the API of the host application.
  • the JSBundle is parsed by JSFramework to obtain the rendering instruction set, and the rendering instruction set is passed to the JS-Native engine.
  • the JS-Native engine constructs the DOM template according to the rendering instruction set, and performs the layout calculation to obtain the Layout snapshot, thereby obtaining the card 1 Related Information.
  • Step 1305 the electronic device obtains the related information of the card 1 according to the JSBundle sent by the server, and verifies the pre-stored related information of the card 1.
  • the relevant information of card 1 obtained according to the JSBundle of card 1 sent by the server is related to the pre-stored relevant information of card 1.
  • the electronic device may parse the JSBundle after receiving the JSBundle of card 1 sent by the server to obtain the rendering instruction set of card 1.
  • the pre-stored rendering instruction set is the same as the rendering instruction set obtained by analyzing the received JSBundle from the server
  • the pre-stored related information of the card 1 is verified.
  • the pre-stored rendering instruction set is different from the rendering instruction set obtained by analyzing the received JSBundle from the server, the verification fails.
  • the pre-stored rendering instruction set is the same as the rendering instruction set obtained by parsing the received JSBundle from the server, the verification is successful.
  • the pre-stored related information of the card 1 includes the DOM template of the card 1.
  • the electronic device may analyze the JSBundle to obtain the rendering instruction set of card 1, and construct a DOM template according to the obtained rendering instruction set of card 1. By comparing whether the DOM template constructed based on the received JsBundle from the server is the same as the DOM template of the card 1 stored in advance.
  • Step 1306 When the verification fails, the electronic device deletes the pre-stored related information of Card 1 and stores the related information of Card 1 obtained according to the JSBundle of Card 1 sent by the server; and the related information obtained according to the JSBundle of Card 1 sent by the server For the related information of card 1, re-render card 1 and present the re-rendered card 1 on the display screen.
  • the electronic device determines to complete rendering.
  • the electronic device may parse the JSBundle of the card 1 obtained from the server to obtain the rendering instruction set. Then, according to the rendering instruction set, the DOM template is constructed, and the Layout layout calculation is performed to obtain the Layout snapshot, and then the card is rendered and displayed on the display screen.
  • the card rendering method in example two does not require the server to pre-parse the card's JSBundle. Moreover, the electronic device first performs card rendering based on the pre-stored card 1 information, and then performs card rendering on the pre-stored card 1 Relevant information is verified, which helps to improve the efficiency of the display screen to present the card to the user. Moreover, after the verification fails, the card is re-rendered according to a JSBundle sent by the server, which helps to ensure the accuracy of the card presented by the electronic device to the user.
  • step 1301 and step 1302. the electronic device can verify the pre-stored card 1 related information according to the JSBundle sent by the server, while rendering the card according to the pre-stored card 1 related information, and then after the verification fails, it can be based on the information sent by the server.
  • JSBundle re-renders the card.
  • the relevant information of the card 1 pre-stored by the electronic device in the embodiment of the present application may also be the first rendering instruction set or Layout snapshot, where the first rendering instruction set is the rendering of the card before the electronic device.
  • the rendering instruction set obtained by the analysis of the used JSBundle is used to construct the rendering instruction set of the DOM template.
  • the electronic device also needs to filter out the rendering instructions other than the first rendering instruction set from the rendering instruction set received from the JSBundle parsed by the server, and update the preliminary according to the filtered rendering instructions Rendered cards.
  • the electronic device Take the pre-stored related information of Card 1 as the rendering instruction set and Layout snapshot of Card 1 as an example.
  • the electronic device sends a file package collection acquisition request of card 1 to the server.
  • the server After receiving the request for obtaining the file package set of card 1, the server sends the JSBundle of card 1 to the electronic device.
  • the electronic device can buffer the JSBundle of the card 1 in a certain memory, such as a buffer in a processor, or an internal memory, or an external memory interfaced with the external memory, or a dedicated memory.
  • the electronic device obtains the pre-stored rendering instruction set of Card 1 from the corresponding memory on the DOM thread, constructs a DOM template according to the rendering instruction set, and obtains a Layout snapshot from the corresponding memory, and initializes the layout according to the Layout snapshot, and then Based on the Layout snapshot and DOM template on the UI thread, Card 1 is initially rendered, and Card 1 is presented on the display screen. Further, the electronic device parses the JSBundle of card 1 received from the server on the JS thread to obtain the rendering instruction set, and then parses the JSBundle of card 1 received from the server to obtain the rendering instruction set, and performs the pre-stored rendering The instruction set is verified.
  • the JSBundle of Card 1 received from the server is parsed to obtain the rendering instruction set, the DOM template is constructed, and the Layout layout calculation is performed to obtain the Layout snapshot.
  • the UI thread according to the DOM template and Layout snapshot obtained based on the JSBundle received from the server, re-render Card 1, and display the re-rendered Card 1 on the display screen, and the process ends.
  • the function implemented by the server may also be integrated with IDE).
  • the above embodiments can be used alone or in combination with each other to achieve different technical effects.
  • the card rendering method shown in example 1 when the electronic device renders the card 1 for the first time, the card rendering method shown in example 1 can be used, and when the electronic device is not rendering the card 1 for the first time, the card rendering method shown in example 2 can be used.
  • the method provided in the embodiments of the present application is introduced from the perspective of an electronic device as an execution subject.
  • the electronic device may include a hardware structure and/or a software module, and realize the above functions in the form of a hardware structure, a software module, or a hardware structure plus a software module. Whether a certain function of the above-mentioned functions is executed by a hardware structure, a software module, or a hardware structure plus a software module depends on the specific application and design constraint conditions of the technical solution.
  • FIG. 15 shows an apparatus 1500 provided in this application for executing the card rendering method shown in FIG. 4 or FIG. 13.
  • the apparatus 1500 may be an electronic device or a chip.
  • the apparatus 1500 includes a processing module 1501, a communication module 1502, and a display module 1503.
  • the processing module 1501 is used to perform rendering according to relevant information of the card.
  • the communication module 1502 is used to interact with the server, such as sending a request for obtaining card-related information to the server, receiving card-related information from the server, and so on.
  • the display module 1503 is used to display the card after the card is rendered.
  • the communication module 1502 may be a transceiver.
  • the communication module 1502 may be an interface.
  • FIG. 16 shows an apparatus 1600 provided by this application.
  • the device 1600 includes at least one processor 1601, a communication interface 1602, and a display screen 1603.
  • the apparatus 1600 may be an electronic device or a chip.
  • the processor 1601 may be a general-purpose processor, a digital signal processor, an application specific integrated circuit, a field programmable gate array or other programmable logic device, a discrete gate or transistor logic device, or a discrete hardware component, which can implement Or execute the methods, steps, and logical block diagrams disclosed in the embodiments of the present application.
  • the general-purpose processor may be a microprocessor or any conventional processor or the like.
  • the steps of the method disclosed in the embodiments of the present application may be directly embodied as being executed and completed by a hardware processor, or executed and completed by a combination of hardware and software modules in the processor.
  • the communication interface 1602 is used to interact with the server.
  • the communication interface 1602 may be a transceiver, a circuit, a bus, a module, or other types of communication interfaces.
  • the communication interface 1602 is a transceiver.
  • the communication interface 1602 is an interface.
  • the display screen 1603 is used to display cards.
  • the device 1600 further includes a memory 1604.
  • the memory 1604 is used to store program instructions and/or data.
  • the memory 1604 may be a non-volatile memory, such as a hard disk drive (HDD) or a solid-state drive (SSD), etc., or a volatile memory (volatile memory).
  • a non-volatile memory such as a hard disk drive (HDD) or a solid-state drive (SSD), etc.
  • volatile memory volatile memory
  • RAM random-access memory
  • the memory is any other medium that can be used to carry or store desired program codes in the form of instructions or data structures and that can be accessed by a computer, but is not limited to this.
  • the processor 1601 is coupled with the memory 1604, the communication interface 1602, and the display screen 1603.
  • the coupling in the embodiment of the present application is an indirect coupling or a communication connection between devices, units or modules, and may be electrical, mechanical or other. Form, used for information exchange between devices, units or modules.
  • the communication interface 1602, the processor 1601, the display screen 1603, and the memory 1604 may be connected by a bus.
  • the bus may be divided into an address bus, a data bus, a control bus, and the like.
  • apparatus 1300 and the apparatus 1600 may be used to implement the methods shown in FIG. 4 and FIG. 13 in the embodiments of the present application, and related features can be referred to the above, and details are not described herein again.
  • the embodiments of the present application can be implemented by hardware, firmware, or a combination of them.
  • the above-mentioned functions can be stored in a computer-readable medium or transmitted as one or more instructions or codes on the computer-readable medium.
  • the computer-readable medium includes a computer storage medium and a communication medium, where the communication medium includes any medium that facilitates the transfer of a computer program from one place to another.
  • the storage medium may be any available medium that can be accessed by a computer.
  • computer-readable media can include RAM, ROM, electrically erasable programmable read-only memory (EEPROM), compact disc read-only memory, CD- ROM) or other optical disk storage, magnetic disk storage media or other magnetic storage devices, or any other media that can be used to carry or store desired program codes in the form of instructions or data structures and that can be accessed by a computer.
  • EEPROM electrically erasable programmable read-only memory
  • CD- ROM compact disc read-only memory
  • Any connection can suitably become a computer-readable medium.
  • disks and discs include compact discs (CDs), laser discs, optical discs, digital video discs (digital video discs, DVDs), floppy discs, and Blu-ray discs. Disks usually copy data magnetically, while disks use lasers to copy data optically. The above combination should also be included in the protection scope of the computer-readable medium.

Abstract

一种卡片渲染方法及电子设备，涉及终端技术领域。该方法包括：电子设备向服务器发送目标卡片的相关信息获取请求；并接收服务器发送的目标卡片的相关信息。电子设备根据第一布局快照，对目标卡片进行初步渲染，并在显示屏上显示目标卡片；并对目标卡片的第一文件包集合进行解析，得到第二渲染指令集；筛选出第二渲染指令集中除第一渲染指令集以外的渲染指令；根据筛选出的渲染指令，对目标卡片进行再次渲染，更新在显示屏上显示的目标卡片。这种技术方案有助于使得电子设备能够快速向用户呈现卡片，提高用户体验。

Description

一种卡片渲染方法及电子设备
相关申请的交叉引用
本申请要求在2019年09月26日提交中国专利局、申请号为201910919665.5、申请名称为“一种卡片渲染方法及电子设备”的中国专利申请的优先权，其全部内容通过引用结合在本申请中。
技术领域
本申请涉及终端技术领域，特别涉及一种卡片渲染方法及电子设备。
背景技术
卡片是一种新的服务形态，可以直接向用户呈现用户关心或感兴趣的信息，更好的满足用户的需求。例如，对于天气类卡片，可以向用户呈现用户所在位置的天气信息。再例如，对于股票类卡片，可以向用户呈现用户已购买的股票、或者感兴趣的股票的信息。
其中，电子设备对卡片渲染完成后才能够向用户呈现卡片上的信息。而现有技术中，电子设备基于JS-Native架构至少需要依次经历对卡片的文件包集(JSBundle)解析、文档对象模型(document object model，DOM)模板构建、以及布局计算三个步骤，才能实现对卡片渲染，呈现给用户，渲染效率较低。因此，针对如何渲染卡片，使得电子设备能够快速向用户呈现卡片上的信息的研究，对于提高用户体验有重要意义。
发明内容
本申请实施例提供一种卡片渲染方法及电子设备，使得电子设备能够快速呈现卡片，有助于提高用户体验。
第一方面，为本申请实施例的一种卡片渲染的方法，该方法包括：
电子设备向服务器发送目标卡片的相关信息获取请求；并接收所述服务器发送的所述目标卡片的相关信息，所述目标卡片的相关信息包括所述目标卡片的第一文件包集合、第一渲染指令集和第一布局快照；然后，电子设备根据所述第一布局快照，对所述目标卡片进行初步渲染，并在显示屏上显示初步渲染后的所述目标卡片；并对所述目标卡片的第一文件包集合进行解析，得到第二渲染指令集；筛选出所述第二渲染指令集中除所述第一渲染指令集以外的渲染指令；最后，根据所述筛选出的渲染指令，对所述目标卡片进行再次渲染，更新在所述显示屏上显示的所述目标卡片。
本申请实施例中，服务器由于可以将第一渲染指令集和第一布局快照发送给电子设备，使得电子设备可以先根据第一渲染指令集和第一布局快照先对卡片渲染，使得电子设备在显示屏上呈现卡片，减少了解析文件包集合、以及布局计算的步骤，因而提高了卡片渲染的效率，从而有助于使得电子设备能够快速向用户呈现卡片，提高用户体验。
在一种可能的设计中，所述电子设备根据所述第一渲染指令集，构建第一文档对象模型DOM模板；并根据所述第一DOM模板和所述第一布局快照，对所述目标卡片进行初步渲染。有助于简化实现方式。
在一种可能的设计中，所述目标卡片的相关信息还包括第一DOM模板；所述电子设备根据所述第一DOM模板和第一布局快照，对所述目标卡片进行初步渲染。有助于进一步提高电子设备向用户呈现卡片的速度。
在一种可能的设计中，所述电子设备接收到加载目标卡片的请求时，向服务器发送目标卡片的相关信息获取请求。有助于简化实现方式。
在一种可能的设计中，所述电子设备接收到搜索目标卡片的请求时，向服务器发送目标卡片的相关信息获取请求。有助于简化实现方式。
在一种可能的设计中，所述第一渲染指令集包括所述第二渲染指令集中构建DOM模版的起始指令和构建DOM模版的结束指令之间的渲染指令，且包括所述构建DOM模版的起始指令和构建DOM模版的结束指令。有助于降低实现的复杂性。
在一种可能的设计中，所述电子设备保存所述第二渲染指令集、和所述第一布局快照。
在一种可能的设计中，所述电子设备再次接收到加载所述目标卡片的请求、或者搜索所述目标卡片的请求，向所述服务器发送目标卡片的文件包集合获取请求；并在接收到加载所述目标卡片的请求时，根据预先存储的所述第二渲染指令集、和所述第一布局快照，对所述目标卡片进行渲染，并在显示屏上显示所述目标卡片；接收所述服务器发送的第二文件包集合；并对所述第二文件包集合解析，得到所述目标卡片的第三渲染指令集；根据所述第三渲染指令集，校验所述第二渲染指令集；并当所述第二渲染指令集校验失败时，根据所述第三渲染指令集，重新对所述目标卡片进行渲染，并在所述显示屏上显示重新渲染后的所述目标卡片。
由于电子设备可以根据预先存储的目标卡片的第一相关信息对目标卡片进行渲染，与电子设备根据从服务器获取的文件包集合对卡片进行渲染相比，可以提高电子设备在显示屏上呈现卡片的速度，提高用户体验。
在一种可能的设计中，所述电子设备当所述第二渲染指令集校验失败时，删除所述第二渲染指令集、和所述第一布局快照，存储所述第三渲染指令集、以及根据所述第三渲染指令集得到的布局快照。有助于提高卡片渲染的可靠性。
第二方面，本申请实施例的另一卡片渲染的方法，该方法包括：
电子设备向服务器发送目标卡片的文件包集合获取请求；根据预先存储的所述目标卡片的第一相关信息，对所述目标卡片进行渲染，并在显示屏上显示所述目标卡片；所述第一相关信息是基于第一文件包集合得到的，所述第一文件包集合为所述电子设备之前渲染所述目标卡片所使用的文件包集合；所述电子设备在接收所述服务器发送的第二文件包集合后，根据所述第二文件包集合，得到所述目标卡片的第二相关信息；
所述电子设备根据所述第二相关信息，校验所述第一相关信息；
所述电子设备当所述第一相关信息校验失败时，根据所述第二相关信息，重新对所述目标卡片进行渲染，并在所述显示屏上显示重新渲染后的所述目标卡片。
本申请实施例中，由于电子设备可以根据预先存储的目标卡片的第一相关信息对目标卡片进行渲染，与电子设备根据从服务器获取的文件包集合对卡片进行渲染相比，可以提高电子设备在显示屏上呈现卡片的速度，提高用户体验。
在一种可能的设计中，所述电子设备当所述第一相关信息校验失败时，删除所述第一相关信息，存储所述第二相关信息。有助于提高电子设备呈现卡片的可靠性。
在一种可能的设计中，所述第一相关信息包括：第一渲染指令集；所述电子设备对所 述第二文件包集合解析，得到第二渲染指令集；
所述电子设备判断所述第一渲染指令集与所述第二渲染指令集是否相同；所述第一渲染指令集与所述第二渲染指令集相同时，所述第一渲染指令集校验成功；所述第一渲染直联机与所述第二渲染指令集不同时，所述第一渲染指令集校验失败。有助于简化第一相关信息的校验方式。
在一种可能的设计中，所述电子设备接收到加载目标卡片的请求或者搜索目标卡片的请求时，向所述服务器发送的目标卡片的相关信息获取请求。有助于简化实现方式。
第三方面，本申请实施例提供的一种电子设备，包括执行本申请实施例上述各个方面以及各个方面涉及的任一可能设计的方法的装置。
第四方面，本申请实施例提供的一种芯片，包括：处理器和接口，用于从存储器中调用并运行所述存储器中存储的程序指令，执行本申请实施例上述各个方面以及各个方面涉及的任一可能设计的方法。
第五方面，本申请实施例的一种计算机存储介质，该计算机存储介质存储有程序指令，当所述程序指令在电子设备上运行时，使得电子设备执行本申请实施例上述各个方面以及各个方面涉及的任一可能设计的方法。
第六方面，本申请实施例的一种计算机程序产品，当所述计算机程序产品在电子设备上运行时，使得所述电子设备执行实现本申请实施例上述各个方面以及各个方面涉及的任一可能设计的方法。
另外，第三方面至第六方面中任一种可能设计方式所带来的技术效果可参见方法部分相关中不同设计方式所带来的技术效果，此处不再赘述。
附图说明
图1为本申请实施例的一种JS-Native架构的示意图；
图2为本申请实施例的一种卡片渲染方法的流程示意图；
图3为本申请实施例的一种电子设备的硬件架构示意图；
图4为本申请实施例的另一卡片渲染方法的流程示意图；
图5为本申请实施例的一种界面的示意图；
图6为本申请实施例的一种卡片设置界面的示意图；
图7为本申请实施例的另一界面的示意图；
图8为本申请实施例的另一界面的示意图；
图9为本申请实施例的渲染指令集的关系示意图；
图10为本申请实施例的另一卡片的示意图；
图11为本申请实施例的另一卡片渲染方法的流程示意图；
图12为本申请实施例的另一卡片渲染方法的流程示意图；
图13为本申请实施例的另一卡片渲染方法的流程示意图；
图14为本申请实施例的另一卡片渲染方法的流程示意图；
图15为本申请实施例的电子设备的结构示意图；
图16为本申请实施例的另一电子设备的结构示意图。
具体实施方式
应理解，本申请中除非另有说明，“/”表示或的意思。例如，A/B可以表示A或B。本申请中的“和/或”仅仅是一种描述关联对象的关联关系，表示可以存在三种关系。例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B三种情况。“至少一个”是指一个或者多个，“多个”是指两个或两个以上。
在本申请中，“示例的”、“在一些实施例中”、“在另一些实施例中”等用于表示作例子、例证或说明。本申请中被描述为“示例”的任何实施例或设计方案不应被解释为比其它实施例或设计方案更优选或更具优势。确切而言，使用示例的一词旨在以具体方式呈现概念。
另外，本申请中涉及的“第一”、“第二”等词汇，仅用于区分描述的目的，而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量，也不能理解为指示或暗示顺序。
首先，对本申请涉及相关术语进行相应的解释，以便于本领域技术人员理解。
1、电子设备。本申请实施例中的电子设备可以为便携式终端，比如手机、平板电脑、可穿戴设备、增强现实(augmented reality，AR)/虚拟现实(virtual reality，VR)设备等。具体的，电子设备的示例性实施例包括但不限于搭载
Figure PCTCN2020116588-appb-000001
或者其它操作系统。在另一些实施例中，电子设备还可以为智慧屏、笔记本电脑、车载终端等。
2、卡片。卡片是一种电子设备向用户呈现信息的形式，可以包括有关同一个主题的图片、文本、链接、控件等信息。例如，天气类卡片、股票类卡片和新闻类卡片等。在一些实施例中，卡片还可以为与卡片对应的应用程序(application，APP)的入口，用户可以通过对卡片操作，打开与卡片对应的应用程序，使得电子设备向用户呈现与该卡片对应的应用程序的界面，从而使得用户可以在该界面上查看更详细的信息。进一步的，用户还可以在打开卡片对应的应用程序后，在应用程序的界面上进行相应的操作，来满足自身的需求。例如，天气类卡片对应的应用程序为天气。用户可以通过对天气类卡片的操作，打开应用程序天气，使得电子设备向用户呈现天气的界面。用户可以通过对天气的界面进行操作，可以设置天气类卡片上显示的信息、或者查看某一城市的天气情况等，来满足自身的需求。需要说明的是，与卡片对应的应用程序可以安装在电子设备上，也可以未安装在电子设备上，对此不作限定。
3、宿主应用。电子设备上用于呈现卡片的应用程序，例如负一屏、语音助手等。例如，负一屏上可以呈现天气类卡片、股票类卡片等。例如，电子设备可以响应于用户的语音指令，在语音助手中呈现相应的卡片。需要说明的是，宿主应用可以安装在电子设备上，也可以不安装在电子设备上，对此不作限定。
4、文件包集合。文件包集合为用于描述卡片的文件及其相关资源的集合。文件包集合又可以称之为JSBundle。其中，不同卡片的JSBundle不同。
5、文档对象模型(document object model，DOM)模板。DOM模块用于描述卡片上不同元素之间的关系。需要说明的是，元素可以理解为卡片上的控件、图片等信息。
6、服务器。本申请实施例中服务器可以为电子设备、通用服务器、或者云服务器等，用于为电子设备提供卡片的相关信息，例如，文件包集合、DOM模板等。
通常，电子设备当宿主应用请求加载某一卡片时，先要对该卡片进行渲染，并在对卡片渲染完成后才能够向用户呈现该卡片上的信息。示例的，电子设备可以基于Web架构或 者JS-Native架构实现对卡片的渲染。然而，基于Web架构实现对卡片渲染的方案中，由于性能和体验等问题限制较多，因此通常采用基于JS-Native架构实现对卡片的渲染。
其中，JS-Native架构采用JavaScript动态语言。示例的，如图1所示，为一种JS-Native架构的示意图。如图所示，JS-Native架构包括JSFramework和JS-Native引擎。JSFramework为JavaScript提供了各种功能基础。JS-Native引擎包括JS引擎(V8/JSCore)和JS-Native渲染引擎。JS引擎为JavaScript提供运行环境，JS-Native渲染引擎用于DOM模板的构建、Layout布局计算以及卡片的渲染。另外，JS-Native架构还包括用户界面(user interface，UI)线程、DOM线程和JS线程。具体的，UI线程可用于渲染卡片，DOM线程可用于构建DOM模板、Layout布局计算等，JS线程可用于JSBundle的解析。
以卡片1为例，对电子设备进行卡片渲染的方法进行介绍。示例的，如图2所示，电子设备在UI线程对JS-Native引擎初始化后，当宿主应用请求加载卡片1时，向服务器发送卡片1的文件包集合获取请求。服务器在接收到卡片1的文件包集合获取请求后，将卡片1的JSBundle返回给电子设备。电子设备从服务器获取到卡片1的JSBundle后，将卡片1的JSBundle传递给JSFramework。在JS线程上，由JSFramework对JSBundle进行解析，得到卡片1的渲染指令集。卡片1的渲染指令集包括多个用于渲染卡片1的渲染指令。然后，在DOM线程上，根据卡片1的渲染指令集，构建DOM模板，并进行Layout布局计算，得到Layout快照文件。最后，电子设备在UI线程上，根据DOM模板和Layout快照文件，对卡片1进行渲染，向用户呈现卡片1。
换句话说，电子设备需要至少经过JSBundle解析、DOM模板构建以及Layout布局计算的三个步骤，才能实现对卡片的渲染，呈现给用户。因此，上述卡片渲染方法的耗时较长，容易导致电子设备向用户呈现卡片的速度较慢。尤其是在宿主应用首次请求加载某一卡片、或者宿主应用请求加载多张卡片时，电子设备向用户呈现卡片的速度较慢。其中，其中，宿主应用请求加载卡片越多，卡顿现象可能会更为严重。
有鉴于此，本申请实施例提供了一种卡片渲染的方法，使得电子设备能够快速向用户呈现卡片，减少电子设备的卡顿，提高用户体验。
以下介绍电子设备、和用于使用这样的电子设备的实施例。示例的，如图3所示，为本申请实施例的一种电子设备的硬件结构示意图。如图所示，电子设备包括处理器110、内部存储器121、外部存储器接口122、摄像头130、显示屏140、传感器模块150、音频模块160、扬声器161、受话器162、麦克风163、耳机接口164、用户标识模块(subscriber identification module，SIM)卡接口171、通用串行总线(universal serial bus，USB)接口172、充电管理模块180、电源管理模块181、电池182、移动通信模块191和无线通信模块192。此外，在另一些实施例中，电子设备还可以包括马达、指示器和按键等。
应理解，图3所示的硬件结构仅是一个示例。本申请实施例的电子设备可以具有比图中所示电子设备更多的或者更少的部件，可以组合两个或更多的部件，或者可以具有不同的部件配置。图中所示出的各种部件可以在包括一个或多个信号处理和/或专用集成电路在内的硬件、软件、或硬件和软件的组合中实现。
其中，处理器110可以包括一个或多个处理单元。例如，处理器110可以包括应用处理器(application processor，AP)、调制解调器、图形处理器(graphics processing unit，GPU)、图像信号处理器(image signal processor，ISP)、视频编解码器、数字信号处理器(digital signal  processor，DSP)、基带处理器、和/或神经网络处理器(neural-network processing unit，NPU)等。在具体实现时，不同的处理单元可以是独立的器件，也可以集成在一个或多个器件中。
在一些实施例中，处理器110中还可以设置缓存器，用于存储程序和/或数据。需要说明的是，本申请实施例中的程序又可以称之为程序指令、计算机程序、代码指令、指令等，对此不作限定。示例的，处理器110中的缓存器可以为高速缓冲存储器。该缓存器可以用于保存处理器110刚用过的、生成的、或循环使用的程序和/或数据。如果处理器110需要使用该程序和/或数据，可从该缓存器中直接调用。有助于减少处理器110获取程序或数据的时间，从而提高系统的效率。
内部存储器121可以用于存储程序和/或数据。在一些实施例中，内部存储器121包括存储程序区和存储数据区。其中，存储程序区可以用于存储操作系统(如Android、IOS等操作系统)、至少一个功能所需的程序(比如显示功能)等。存储数据区可以用于存储电子设备使用过程中所创建、预先设置和/或获取的数据(比如JSBundle、Layout快照文件)等。示例的，处理器110可以通过调用内部存储器121中存储的程序和/或数据，使得电子设备执行相应的方法，从而实现一种或多种功能。例如，处理器110调用内部存储器中的某些程序和/或数据，使得电子设备执行本申请实施例中所提供的卡片渲染方法，以使得电子设备能够快速向用户呈现卡片，有助于提高用户体验。其中，内部存储器121可以采用高速随机存取存储器、和/或非易失性存储器等。例如，非易失性存储器可以包括一个或多个磁盘存储器件、闪存器件、和/或通用闪存存储器(universal flash storage，UFS)等中的至少一个。
外部存储器接口122可以用于连接外部存储卡(例如，Micro SD卡)，实现扩展电子设备的存储能力。外部存储卡通过外部存储器接口122与处理器110通信，实现数据存储功能。例如，电子设备可以通过外部存储器接口122将图像、音乐、视频、文档等内容保存在外部存储卡中。
摄像头130可以用于捕获动、静态图像等。通常情况下，摄像头130包括镜头和图像传感器。其中，物体通过镜头生成的光学图像投射到图像传感器上，然后转换为电信号，在进行后续处理。示例的，图像传感器可以是电荷耦合器件(charge coupled device，CCD)或互补金属氧化物半导体(complementary metal-oxide-semiconductor，CMOS)光电晶体管。图像传感器把光信号转换成电信号，之后将电信号传递给ISP转换成数字图像信号。需要说明的是，本申请实施例中，电子设备可以包括一个或多个摄像头130，对此不作限定。示例的，电子设备包括5个摄像头130，例如，3个后置摄像头和2个前置摄像头。又示例的，电子设备包括3个摄像头130，例如2个后置摄像头和1个前置摄像头。
显示屏140可以包括显示面板。用户可以根据自身的需要，使得显示屏140上显示不同的界面，从而满足用户的需求。具体的，显示面板可以采用液晶显示屏(liquid crystal display，LCD)、有机发光二极管(organic light-emitting diode，OLED)、有源矩阵有机发光二极体或主动矩阵有机发光二极体(active-matrix organic light emitting diode，AMOLED)、柔性发光二极管(flex light-emitting diode，FLED)、Miniled、MicroLed、Micro-oLed、量子点发光二极管(quantum dot light emitting diodes，QLED)等。示例的，电子设备100可以通过GPU、显示屏140、应用处理器等实现显示功能。需要说明的是，本申请实施例中，电子设备可以包括一个或多个显示屏140，对此不作限定。其中，显示屏140可以为可折叠屏幕，也可以为不可折叠屏幕，对此不作限定。
传感器模块150可以包括一个或多个传感器。例如，触摸传感器150A、压力传感器150B等。在另一些实施例中，传感器模块150还可以包括陀螺仪、加速度传感器、指纹传感器、环境光传感器、距离传感器、接近光传感器、骨传导传感器、温度传感器、定位传感器(如全球定位系统(global positioning system，GPS)传感器)等中的一个或多个，对此不作限定。
触摸传感器150A也可称为“触控面板”。触摸传感器150A可以设置于显示屏140。当触摸传感器150A设置于显示屏140时，由触摸传感器150A与显示屏140组成触摸屏，也可以称为“触控屏”。触摸传感器150A用于检测作用于其上或附近的触摸操作。触摸传感器150A可以将检测到的触摸操作传递给应用处理器，以确定触摸事件类型。电子设备可以通过显示屏140提供与触摸操作相关的视觉输出等。例如，电子设备可以响应于触摸器150A检测到作用于其上或附近的触摸操作，进行界面切换，并在显示屏140上显示切换后的界面。在另一些实施例中，触摸传感器150A也可以设置于电子设备的表面，与显示屏140所处的位置不同。
压力传感器150B用于感受压力信号，可以将压力信号转换成电信号。示例的，压力传感器150B可以设置于显示屏140。其中，作用于相同触摸位置，但不同触摸操作强度的触摸操作，可以对应不同的操作指令。
电子设备可以通过音频模块160、扬声器161、受话器162、麦克风163、耳机接口164以及应用处理器等实现音频功能。例如，音频播放功能、录音功能、语音唤醒功能等。
音频模块160可以用于对音频数据进行数模转换、和/或模数转换，还可以用于对音频数据进行编码和/或解码。示例的，音频模块160可以设置于处理器110中，或将音频模块160的部分功能模块设置于处理器110中。
扬声器161，也称“喇叭”，用于将音频数据转换为声音，并播放声音。例如，电子设备100可以通过扬声器161收听音乐、接听免提电话、或者发出语音提示等。
受话器162，也称“听筒”，用于将音频数据转换成声音，并播放声音。例如，当电子设备接听电话时，可以通过将受话器162靠近人耳进行接听。
麦克风163，也称“话筒”、“传声器”，用于采集声音(例如周围环境声音，包括人发出的声音、设备发出的声音等)，并将声音转换为音频电数据。当拨打电话或发送语音时，用户可以通过人嘴靠近麦克风163发出声音，麦克风163采集用户发出的声音。需要说明的是，电子设备100可以设置至少一个麦克风163。例如，电子设备中设置两个麦克风163，除了采集声音，还可以实现降噪功能。又示例如，电子设备中还可以设置三个、四个或更多个麦克风163，从而可以在实现声音采集、降噪的基础上，还可以实现声音来源的识别、或定向录音功能等。
耳机接口164用于连接有线耳机。耳机接口164可以是USB接口170，也可以是3.5mm的开放移动电子设备平台(open mobile terminal platform，OMTP)标准接口、美国蜂窝电信工业协会(cellular telecommunications industry association of the USA，CTIA)标准接口等。
SIM卡接口171用于连接SIM卡。SIM卡可以通过插入SIM卡接口171，或从SIM卡接口115拔出，实现和电子设备的接触和分离。电子设备可以支持1个或N个SIM卡接口，N为大于1的正整数。SIM卡接口171可以支持Nano SIM卡、Micro SIM卡、SIM卡等。同一个SIM卡接口171可以同时插入多张卡。所述多张卡的类型可以相同，也可以不同。SIM卡接口171也可以兼容不同类型的SIM卡。SIM卡接口171也可以兼容外部存储 卡。电子设备通过SIM卡和网络交互，实现语音通话、视频通话以及数据通信等功能。在一些实施例中，电子设备采用eSIM，即：嵌入式SIM卡。eSIM卡可以嵌在电子设备中，不能和电子设备分离。
USB接口172是符合USB标准规范的接口，具体可以是Mini USB接口、Micro USB接口、USB Type C接口等。USB接口172可以用于连接充电器为电子设备充电，也可以用于电子设备与外围设备之间传输数据。也可以用于连接耳机，通过耳机播放声音。示例的，USB接口172除了可以为耳机接口164以外，还可以用于连接其他电子设备，例如AR设备、计算机等。
充电管理模块180用于从充电器接收充电输入。其中，充电器可以是无线充电器，也可以是有线充电器。在一些有线充电的实施例中，充电管理模块180可以通过USB接口170接收有线充电器的充电输入。在一些无线充电的实施例中，充电管理模块180可以通过电子设备的无线充电线圈接收无线充电输入。充电管理模块180为电池182充电的同时，还可以通过电源管理模块180为电子设备供电。
电源管理模块181用于连接电池182、充电管理模块180与处理器110。电源管理模块181接收电池182和/或充电管理模块180的输入，为处理器110、内部存储器121、摄像头130、显示屏140等供电。电源管理模块181还可以用于监测电池容量、电池循环次数、电池健康状态(漏电、阻抗)等参数。在其他一些实施例中，电源管理模块181也可以设置于处理器110中。在另一些实施例中，电源管理模块181和充电管理模块180也可以设置于同一个器件中。
移动通信模块191可以提供应用在电子设备上的包括2G/3G/4G/5G等无线通信的解决方案。移动通信模块191可以包括滤波器、开关、功率放大器、低噪声放大器(low noise amplifier，LNA)等。
无线通信模块192可以提供应用在电子设备上的包括无线局域网(wireless local area networks，WLAN)(如无线保真(wireless fidelity，Wi-Fi)网络)、蓝牙(Bluetooth，BT)、全球导航卫星系统(global navigation satellite system，GNSS)、调频(frequency modulation，FM)、近距离无线通信技术(near field communication，NFC)、红外技术(infrared，IR)等无线通信的解决方案。无线通信模块192可以是集成至少一个通信处理模块的一个或多个器件。
在一些实施例中，电子设备的天线1和移动通信模块191耦合，天线2和无线通信模块192耦合，使得电子设备可以与其他设备通信。具体的，移动通信模块191可以通过天线1与其它设备通信，无线通信模块191可以通过天线2与其它设备通信。
以下实施例均可以在具有上述硬件结构的电子设备中实现。下面以对卡片1为例，对本申请实施例的卡片渲染的方法进行相应的介绍。
示例一：
如图4所示，为本申请实施例的一种卡片渲染的方法的流程示意图，具体包括以下步骤。
步骤401，电子设备向服务器发送卡片1的相关信息获取请求。
在一些实施例中，电子设备接收到加载卡片1的请求时，向服务器发送卡片1的相关信息获取请求。示例的，电子设备可以响应于打开宿主应用的操作，使得宿主应用向电子设备发送加载卡片1的请求。例如，以宿主应用为负一屏为例。电子设备当前在显示屏上显 示主界面，例如，主界面如图5中的A所示的界面510。电子设备检测到用户在主界面上向左滑动的操作，响应于该操作，在显示屏上显示负一屏。例如，负一屏如图5中的B所示的界面520。如图5中的B所示的界面上包括卡片501和卡片502。为了使得电子设备在负一屏上能够正常显示卡片501和卡片502，电子设备还响应于用户在主界面上向左滑动的操作，使得负一屏请求加载卡片501和卡片502。以卡片1为卡片501为例，电子设备当负一屏请求加载卡片501时，向服务器发送卡片501的相关信息获取请求。
示例的，电子设备在负一屏上显示的卡片可以是根据用户需要订阅的，也可以是电子设备当基于预设策略(例如用户的历史使用记录等)，确定是否在负一屏上呈现某一个或多个卡片的。例如，电子设备可以通过在情境智能设置界面上根据需求订阅相应的卡片。例如，情境智能设置界面为如图6所示的界面600，包括用于控制情境智能开启或关闭的虚拟按键、一个或多个订阅选项等。其中，用于控制情境智能开启或关闭的虚拟按键开启(ON)时，用户可以根据自身需求选择相应的订阅选项。例如，用户选中的订阅选项为应用使用情况和天气，则电子设备在负一屏上显示天气卡片和应用使用情况卡片。再例如，用户当开启电子设备的情境智能时，电子设备可以在上班时间段，在负一屏上显示上班路线以及方式的卡片。电子设备还可以在购买火车票或飞机票后，在负一屏上显示出行时间和车次的卡片等。
再例如，以宿主应用为快应用为例。电子设备在当前的显示屏上显示主界面，例如，主界面如图7中的A所示的界面710。电子设备检测到用户点击快应用图标701的操作，响应于该操作，在显示屏上显示快应用的界面。例如快应用的界面为图7中B所示的界面720。界面720上包括卡片702。为了使得电子设备在界面720上正常显示卡片702，电子设备还响应于用户点击快应用图标701的操作，使得快应用请求加载卡片702。以卡片1为卡片702为例，电子设备当接收到加载卡片702的请求时，向服务器发送卡片702的相关信息获取请求。
以宿主应用为语音助手为例。如图8中的A所示，电子设备在显示屏上显示语音助手的界面810。电子设备接收到用户查看天气的语音指令，响应于用户查看天气的语音指令，在显示屏上显示图8中B所示的界面820。其中，界面820上包括卡片802。卡片802用于显示天气情况。为了使得电子设备在界面820上正常显示卡片802，电子设备还响应于用户查看天气的语音指令，使得语音助手请求加载卡片802。以卡片1为卡片802为例，电子设备当接收到加载卡片802的请求时，向服务器发送卡片802的相关信息获取请求。
在另一些实施例中，电子设备接收到搜索卡片1的请求时，向服务器发送卡片1的相关信息获取请求。示例的，电子设备可以响应于用户对某一宿主应用的操作，使得宿主应用向电子设备发送搜索卡片1的请求。以图7中B所示的界面720为例，电子设备响应于在搜索框中输入天气的操作，快应用向电子设备发送搜索天气卡片的请求。
又示例的，以电子设备为智慧屏为例。电子设备还可以响应于用户开机的操作、或者将电子设备从睡眠状态唤醒的操作，使得宿主应用向电子设备发送加载卡片1的请求，向服务器发送卡片1的相关信息获取请求。
在另一些实施例中，电子设备还可以当检测到宿主应用的界面的刷新时，向服务器发送卡片1的相关信息获取请求。
步骤402，服务器接收到卡片1的相关信息获取请求，向电子设备发送卡片1的相关信息。卡片1的相关信息可以包括卡片1的JSBundle、第一渲染指令集和Layout快照。第一渲染指令集用于构建卡片1的DOM模板。在另一些实施例中，卡片1的相关信息还可以包括卡 片1的DOM模板。
需要说明的是，Layout快照，又可以称之为布局快照、快照文件、布局文件或布局数据等，为Layout布局计算的结果，又可以称之为Layout快照，用于描述卡片上个元素的布局，例如元素在卡片上的位置、大小等。
示例的，对于服务器来说，卡片1的相关信息可以是开发者通过电子设备(例如笔记本电脑等)上传给服务器。例如，卡片1的JSBundle、第一渲染指令集、Layout快照等可以是开发者通过电子设备上传给服务器的。或者，开发者通过电子设备将卡片1的JSBundle上传给服务器，服务器在接收到卡片1的JSBundle后，对JSBundle解析，得到渲染指令集。然后从渲染指令集中筛选出第一渲染指令集，并保存；根据渲染指令集，构够DOM模板，以及进行Layout布局计算得到Layout快照，并保存Layout快照。在一些实施例中，服务器还保存DOM模块。
其中，第一渲染指令集为渲染指令集中第一目标指令与第二目标指令之间的渲染指令，且包括第一目标指令和第二目标指令。例如，服务器可以通过判断渲染指令集中的渲染指令是否位于第一目标指令和第二目标指令之间，来筛选出第一渲染指令集。第一目标指令和第二目标指令可以是服务器根据预设策略确定的，也可以是预配置在服务器中的。例如，第一目标指令为构建DOM模板的起始指令，例如CreateBody，第二目标指令为构建DOM模板的结束指令，例如CreateFinish。
由于服务器除了可以将卡片1的JSBundle发送给电子设备以外，还可以将第一渲染指令集、Layout快照或者DOM模板发送给电子设备，使得电子设备在卡片渲染时，可以使用第一渲染指令集、Layout快照或者DOM模板先对卡片渲染，呈现给用户，无需先JSBundle解析，从而有助于提高卡片的渲染效率。
步骤403，电子设备接收到卡片1的相关信息后，根据第一渲染指令集构建DOM模板；并根据DOM模板以及Layout快照对卡片进行初步渲染，在显示屏上显示卡片1。
需要说明的是，电子设备在卡片1的相关信息中包括DOM模板的情况下，电子设备接收到卡片1的相关信息后，可以根据DOM模板以及Layout快照对卡片进行初步渲染，在显示屏上显示卡片1。
示例的，电子设备可以接收到卡片1的相关信息后，通过宿主应用的应用程序编程接口(application programming interface，API)将卡片1的第一渲染指令集、Layout快照传递给JS-Native架构中的JS-Native引擎，由JS-Native引擎在DOM线程上，根据第一渲染指令集构建DOM模板，并在UI线程上根据DOM模板以及Layout快照，对卡片进行初步渲染，呈现在显示屏上。
步骤404，电子设备对卡片1的相关信息中的JSBundle进行解析，得到渲染指令集。
示例的，电子设备可以接收到卡片1的相关信息后，通过宿主应用的API将卡片1的JSBundle传递给JS-Native架构中的JSFramework。由JSFramework在JS线程上，对JSBundle进行解析，得到渲染指令集。
步骤405，电子设备从渲染指令集中筛选出除第一渲染指令集以外的渲染指令。
需要说明的是，电子设备每次采用示例一的方式对卡片渲染时，均需要进行渲染指令集的筛选，以避免渲染出重复的卡片视图，造成内存泄露。
示例的，第一渲染指令集和渲染指令集如图7所示。渲染指令集为电子设备对卡片1的相关信息中的JSBundle进行解析得到的。第一渲染指令集时服务器发送给电子设备的。而 图9中阴影部分的渲染指令为渲染指令集中出第一渲染指令集以外的渲染指令。
例如，第一渲染指令集为第一目标指令和第二目标指令之间的渲染指令的集合。电子设备可以判断渲染指令集中的渲染指令是否不在第一目标指令和第二目标指令之间，从而筛选出渲染指令集中除第一渲染指令集以外的渲染指令。比如，第一目标指令与第二目标指令可以是电子设备根据第一渲染指令集中起始位置和结束位置的渲染指令确定的。比如，如图7所示，第一渲染指令集的起始位置的渲染指令为CreateBody，第一渲染指令集的结束位置的渲染指令为CreateFinish。再例如，第一目标指令和第二目标指令可以是预先配置在电子设备中的。
在一些实施例中，电子设备可以是通过JSFramework在JS线程上，从渲染指令集中筛选出除第一渲染指令集以外的渲染指令。
步骤406，电子设备根据筛选出的除第一渲染指令集以外的渲染指令，对卡片进行二次渲染，更新在显示屏上显示的卡片1。
示例的，电子设备对卡片进行二次渲染，可以包括：电子设备基于筛选出的第一渲染指令集以外的渲染指令更新DOM模板、和/或卡片上的信息等。从而有助于避免电子设备根据解析JSBundle得到渲染指令集渲染出重复的卡片视图，造成内存泄露。
需要说明的是，通常执行步骤403和步骤404是在不同的线程上，例如，步骤403否构建DOM模板在DOM线程上，对卡片进行渲染在UI线程上，而步骤404解析JSBundle在JS线程上，因此电子设备可以同时执行步骤403和步骤404，也可以先执行步骤403在执行步骤404，对此不作限定。本申请实施例中，由于服务器可以将第一渲染指令集、Layout快照或者DOM模板发送给电子设备，使得电子设备可以先根据DOM模板和Layout快照对卡片进行初步渲染，呈现给用户，从而有助于提高电子设备向用户呈现卡片的效率，降低电子设备呈现卡片时导致的卡顿的可能性。另外，由于电子设备还能够对卡片的JSBundle进行解析，并继续根据解析得到的渲染指令除第一渲染指令集以外的渲染指令继续对卡片渲染，从而使得电子设备可以响应于用户对卡片的操作，进行删除、分享、编辑等。以图10所示的卡片801为例。电子设备在执行步骤406后，用户可以对虚拟按键800进行操作，使得电子设备响应于对虚拟按键1000的操作，在显示屏上显示菜单栏。其中，菜单栏中包括多个虚拟按键。例如，用户当选中移除时，负一屏上不再显示卡片1001。然而，当电子设备执行步骤403后，用户对虚拟按键1000操作，电子设备可能无法响应用户对虚拟按键1000操作的事件。
以卡片1的相关信息为卡片1的JSBundle、第一渲染指令集和Layout快照为例。如图11所示，电子设备在UI线程检测到宿主应用请求加载卡片1时，向服务器发送卡片1的相关信息获取请求。服务器接收到卡片1的相关信息的获取请求后，将卡片1的相关信息发送给电子设备。电子设备可以将卡片1的相关信息缓存到某一存储器中，例如处理器中的缓存器、或者内部存储器、或者与外部存储器接口连接的外部存储器、或者专用存储器中等。电子设备通过宿主应用的API将存储器中的第一渲染指令集传递给JS-Native引擎，并由JS-Native引擎在DOM线程上根据第一渲染指令集构建DOM模板，以及通过宿主应用的API将存储器中的Layout快照传递给JS-Native引擎，由JS-Native引擎在UI线程上根据DOM模板和Layout快照，对卡片1进行初步渲染，并在显示屏上呈现卡片1。进一步的，电子设备通过宿主应用的API将存储器的卡片1的JSBundle传递给JSFramework，并由JSFramework在JS线程上对JSBundle解析得到渲染指令集，然后从渲染指令集中筛选出除第一渲染指令集以 外的渲染指令。在DOM线程上，根据筛选出的渲染指令，更新DOM模板。最后，在UI线程上根据更新后的DOM模板等，更新在显示屏上显示的卡片1，本流程结束。其中，卡片1的JSBundle是开发者上传到服务器的，第一渲染指令集、Layout快照文件是服务器对开发者上传的JSBundle解析得到的，也可以是开发者上传到服务器的。
与图2所示的卡片渲染方法相比，图12中所示的本申请实施例提供的渲染卡片的方法，可以先构建DOM模板，并根据Layout快照文件实现对卡片的初步渲染呈现给用户，从而大大提高了电子设备向用户呈现卡片的效率。
需要说明的是，如图4所示的卡片渲染的方法中，由服务器的实现功能还可以集成在集成开发环境(integrated development environment，IDE)上实现。
示例二：
如图13所示，为本申请实施例的另一种卡片渲染的方法的流程示意图，具体包括以下步骤。
步骤1301，电子设备向服务器发送卡片1的文件包集合获取请求。
步骤1301可以参见步骤401中电子设备向服务器发送卡片1的相关信息的获取请求的相关介绍，在此不再赘述。
步骤1302，电子设备根据预先存储的卡片1的相关信息，对卡片1进行初步渲染，并在显示屏上显示卡片1。
示例的，预先存储的卡片1的相关信息，可以为电子设备之前对卡片1渲染时存储的，例如，预先存储的卡片1的相关信息可以为电子设备最近一次对卡片1渲染时存储的。其中，预先存储的卡片1的相关信息可以包括对电子设备之前对卡片1渲染所使用的JSBundle解析得到的渲染指令集、Layout快照；或者预先存储的卡片1的相关信息包括对电子设备之前对卡片1渲染所使用的JSBundle解析得到的渲染指令集；或者预先存储的卡片1的相关信息包括对电子设备之前对卡片1渲染所使用的JSBundle解析得到的渲染指令集、DOM模板和Layout快照等，对此不作限定。
以预先存储的卡片1的相关信息包括第一渲染指令集、和Layout快照为例。电子设备根据第一渲染指令集，构建DOM模板。然后根据DOM模板和Layout快照，对卡片1进行初步渲染，并在显示屏上显示卡片1。以预先存储的卡片1的相关信息为对电子设备之前对卡片1渲染所使用的JSBundle解析得到的渲染指令集为例，电子设备可以根据渲染指令集，构建DOM模板，以及进行Layout布局计算，得到Layout快照，然后根据DOM模板和Layout快照对卡片1进行初步渲染。
例如，电子设备可以通过宿主应用的API将预先存储的卡片1的第一渲染指令集和Layout快照传递给JS-Native引擎，由JS-Native引擎在DOM线程上根据第一渲染指令集，构建DOM模板，并在UI线程上根据DOM模板和Layout快照，对卡片1进行渲初步渲染，并向用户呈现初步渲染后的卡片1。
步骤1303，服务器接收到卡片1的文件包集合获取请求，向电子设备发送卡片1的JSBundle。
步骤1304，电子设备接收到服务器发送的卡片1的JSBundle后，根据JSBundle，得到卡片1的相关信息。
示例的，电子设备接收到服务器发送的卡片1的JSBundle后，通过宿主应用的API将 JSBundle传递给JS-Native架构中的JSFramework。由JSFramework对JSBundle进行解析得到渲染指令集，并将渲染指令集传递给JS-Native引擎，由JS-Native引擎根据渲染指令集构建DOM模板、以及进行Layout布局计算得到Layout快照，从而得到卡片1的相关信息。
步骤1305，电子设备根据服务器发送的JSBundle得到卡片1的相关信息，对预先存储的卡片1的相关信息进行校验。
需要说明的是，根据服务器发送的卡片1的JSBundle得到卡片1的相关信息，与预先存储的卡片1的相关信息相关。示例的，预先存储的卡片1的相关信息包括渲染指令集时，步骤1304中，电子设备可以在接收到服务器发送的卡片1的JSBundle后，对JSBundle解析，得到卡片1的渲染指令集，通过比较预先存储的渲染指令集与对接收到的来自服务器的JSBundle解析得到的渲染指令集是否相同，对预先存储的卡片1的相关信息进行校验。但预先存储的渲染指令集与对接收到的来自服务器的JSBundle解析得到的渲染指令集不同时，校验失败。当预先存储的渲染指令集与对接收到的来自服务器的JSBundle解析得到的渲染指令集相同时，校验成功。
再例如，预先存储的卡片1的相关信息包括卡片1的DOM模板。示例的，步骤1104中，电子设备可以在接收到服务器发送的卡片1的JSBundle后，对JSBundle解析，得到卡片1的渲染指令集，并根据得到的卡片1的渲染指令集，构建DOM模板。通过比较基于接收到的来自服务器的JsBundle构建的DOM模板与预先存储的卡片1的DOM模板是否相同。当基于接收到的来自服务器的JsBundle构建的DOM模板与预先存储的卡片1的DOM模板不同时，校验失败；当基于接收到的来自服务器的JsBundle构建的DOM模板与预先存储的卡片1的DOM模板相同时，校验成功。
步骤1306，电子设备当校验失败时，删除预先存储的卡片1的相关信息，并存储根据服务器发送的卡片1的JSBundle得到的卡片1的相关信息；以及根据服务器发送的卡片1的JSBundle得到的卡片1的相关信息，对卡片1进行重新渲染，并在显示屏上呈现重现渲染后的卡片1。
示例的，电子设备当校验成功时，电子设备确定完成渲染。
在一些实施例中，电子设备中未存储卡片1的相关信息时，电子设备可以对从服务器获取的卡片1的JSBundle进行解析，得到渲染指令集。然后根据渲染指令集，构建DOM模板，以及进行Layout布局计算，得到Layout快照，然后对卡片进行渲染，在显示屏上显示该卡片。
与示例一相比，示例二中卡片渲染的方法无需服务器对卡片的JSBundle进行预解析，而且，电子设备先基于预先存储的卡片1的相关信息进行卡片渲染，然后再对预先存储的卡片1的相关信息进行校验，从而有助于提高显示屏向用户呈现卡片的效率。而且，在校验失败后，根据服务器发送个JSBundle重新渲染卡片，有助于保证电子设备向用户呈现的卡片的准确性。
需要说明是，步骤1301和步骤1302没有必然的先后顺序。或者，电子设备可以一边根据服务器发送的JSBundle对预先存储的卡片1的相关信息进行校验，一边根据预先存储的卡片1的相关信息对卡片进行渲染，再校验失败后，再根据服务器发送的JSBundle重新渲染卡片。
另外，还需要说明的是，本申请实施例中电子设备预先存储的卡片1的相关信息还可以为第一渲染指令集、Layout快照，其中第一渲染指令集为对电子设备之前对卡片进行渲 染所使用的JSBundle解析得到的渲染指令集中用于构建DOM模板的渲染指令集。在这种情况下，如果校验成功，电子设备还需要对从服务器接收到的JSBundle解析得到的渲染指令集中筛选出除第一渲染指令集以外的渲染指令，并根据筛选出的渲染指令更新初步渲染的卡片。
以预先存储的卡片1的相关信息为卡片1的渲染指令集和Layout快照为例。如图14所示，电子设备在UI线程检测到宿主应用请求加载卡片1时，向服务器发送卡片1的文件包集合获取请求。服务器接收到卡片1的文件包集合的获取请求后，将卡片1的JSBundle发送给电子设备。电子设备可以将卡片1的JSBundle缓存到某一存储器中，例如处理器中的缓存器、或者内部存储器、或者与外部存储器接口连接的外部存储器、或者专用存储器中等。电子设备在DOM线程上从相应的存储器中获取预先存储的卡片1的渲染指令集，并根据渲染指令集构建DOM模板，以及从相应的存储器中获取Layout快照，并根据Layout快照进行初始化布局，然后在UI线程上根据Layout快照和DOM模板，对卡片1进行初步渲染，并在显示屏上呈现卡片1。进一步的，电子设备在JS线程上对从服务器接收到的卡片1的JSBundle进行解析得到渲染指令集，然后根据对从服务器接收到的卡片1的JSBundle进行解析得到渲染指令集，对预先存储的渲染指令集进行校验。当检验失败时，在DOM线程上，根据对从服务器接收到的卡片1的JSBundle进行解析得到渲染指令集，构建DOM模板，以及进行Layout布局计算得到Layout快照。最后，在UI线程上根据基于从服务器接收到的JSbundle得到的DOM模板和Layout快照，重新渲染卡片1，并在显示屏上显示的重新渲染后的卡片1，本流程结束。
需要说明的是，如图13所示的卡片渲染的方法中，由服务器的实现功能还可以集成IDE)实现。
还需要说明的是，对于示例一和示例二来说，不同宿主应用可以共用同一JS-Native架构，也可以不同的宿主应用分别对应不同的JS-Native架构，对此不作限定。
上述各个实施例可以单独使用，也可以相互结合使用，以达到不同的技术效果。例如，对于电子设备来说，当电子设备首次渲染卡片1时，可以采用示例一所示的卡片渲染方法，当电子设备非首次渲染卡片1时，可采用示例二所示的卡片渲染方法。
上述本申请提供的实施例中，从电子设备作为执行主体的角度对本申请实施例提供的方法进行了介绍。为了实现上述本申请实施例提供的方法中的各功能，电子设备可以包括硬件结构和/或软件模块，以硬件结构、软件模块、或硬件结构加软件模块的形式来实现上述各功能。上述各功能中的某个功能以硬件结构、软件模块、还是硬件结构加软件模块的方式来执行，取决于技术方案的特定应用和设计约束条件。
基于相同的构思，图15所示为本申请提供的一种装置1500，用于执行图4、或图13所示的卡片渲染方法。示例的，该装置1500可以为电子设备，也可以为芯片。示例的，装置1500包括处理模块1501、通信模块1502和显示模块1503。
示例的，处理模块1501用于根据卡片的相关信息进行渲染。通信模块1502用于与服务器进行交互，例如向服务器发送卡片的相关信息的获取请求、接收来自服务器的卡片的相关信息等。显示模块1503用于在卡片完成渲染后，显示卡片。例如，装置1500为电子设备时，通信模块1502可以为收发器。再例如，装置1502为芯片时，通信模块1502可以为接口。
基于相同的构思，图16所示为本申请提供的一种装置1600。装置1600包括至少一个 处理器1601、通信接口1602和显示屏1603。示例的，该装置1600可以为电子设备，也可以为芯片。在本申请实施例中，处理器1601可以是通用处理器、数字信号处理器、专用集成电路、现场可编程门阵列或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件，可以实现或者执行本申请实施例中的公开的各方法、步骤及逻辑框图。通用处理器可以是微处理器或者任何常规的处理器等。结合本申请实施例所公开的方法的步骤可以直接体现为硬件处理器执行完成，或者用处理器中的硬件及软件模块组合执行完成。
通信接口1602用于与服务器进行交互。示例性地，通信接口1602可以是收发器、电路、总线、模块或其它类型的通信接口等。例如，装置1600为电子设备时，通信接口1602为收发器。再例如，装置1600为芯片时，通信接口1602为接口。
显示屏1603用于显示卡片。
在一些实施例中，装置1600还包括存储器1604。存储器1604用于存储程序指令和/或数据。在本申请实施例中，存储器1604可以是非易失性存储器，比如硬盘(hard disk drive，HDD)或固态硬盘(solid-state drive，SSD)等，还可以是易失性存储器(volatile memory)，例如随机存取存储器(random-access memory，RAM)。存储器是能够用于携带或存储具有指令或数据结构形式的期望的程序代码并能够由计算机存取的任何其他介质，但不限于此。
其中，处理器1601与存储器1604、通信接口1602、和显示屏1603耦合，本申请实施例中的耦合是装置、单元或模块之间的间接耦合或通信连接，可以是电性，机械或其它的形式，用于装置、单元或模块之间的信息交互。本申请实施例中不限定上述通信接口1602、处理器1601、显示屏1603以及存储器1604之间可以通过总线连接，所述总线可以分为地址总线、数据总线、控制总线等。
应理解，该装置1300和装置1600可以用于实现本申请实施例的图4和图13所示的方法，相关特征可以参照上文，此处不再赘述。
所属领域的技术人员可以清楚地了解到本申请实施例可以用硬件实现，或固件实现，或它们的组合方式来实现。当使用软件实现时，可以将上述功能存储在计算机可读介质中或作为计算机可读介质上的一个或多个指令或代码进行传输。计算机可读介质包括计算机存储介质和通信介质，其中通信介质包括便于从一个地方向另一个地方传送计算机程序的任何介质。存储介质可以是计算机能够存取的任何可用介质。以此为例但不限于：计算机可读介质可以包括RAM、ROM、电可擦可编程只读存储器(electrically erasable programmable read only memory，EEPROM)、只读光盘(compact disc read-Only memory，CD-ROM)或其他光盘存储、磁盘存储介质或者其他磁存储设备、或者能够用于携带或存储具有指令或数据结构形式的期望的程序代码并能够由计算机存取的任何其他介质。此外。任何连接可以适当的成为计算机可读介质。例如，如果软件是使用同轴电缆、光纤光缆、双绞线、数字用户线(digital subscriber line，DSL)或者诸如红外线、无线电和微波之类的无线技术从网站、服务器或者其他远程源传输的，那么同轴电缆、光纤光缆、双绞线、DSL或者诸如红外线、无线和微波之类的无线技术包括在所属介质的定影中。如本申请实施例所使用的，盘(disk)和碟(disc)包括压缩光碟(compact disc，CD)、激光碟、光碟、数字通用光碟(digital video disc，DVD)、软盘和蓝光光碟，其中盘通常磁性的复制数据，而碟则用激光来光学的复制数据。上面的组合也应当包括在计算机可读介质的保护范围之内。
总之，以上所述仅为本申请的实施例而已，并非用于限定本申请的保护范围。凡根据 本申请的揭露，所作的任何修改、等同替换、改进等，均应包含在本申请的保护范围之内。

Claims (11)

  1. 一种卡片渲染的方法，其特征在于，所述方法包括：
    电子设备向服务器发送目标卡片的相关信息获取请求；
    所述电子设备接收所述服务器发送的所述目标卡片的相关信息，所述目标卡片的相关信息包括所述目标卡片的第一文件包集合、第一渲染指令集和第一布局快照；
    所述电子设备根据所述第一布局快照，对所述目标卡片进行初步渲染，并在显示屏上显示初步渲染后的所述目标卡片；
    所述电子设备对所述目标卡片的第一文件包集合进行解析，得到第二渲染指令集；
    所述电子设备筛选出所述第二渲染指令集中除所述第一渲染指令集以外的渲染指令；
    所述电子设备根据所述筛选出的渲染指令，对所述目标卡片进行再次渲染，更新在所述显示屏上显示的所述目标卡片。
  2. 如权利要求1所述的方法，其特征在于，所述电子设备根据所述第一快照文件，对所述目标卡片进行初步渲染，包括：
    所述电子设备根据所述第一渲染指令集，构建第一文档对象模型DOM模板；
    所述电子设备根据所述第一DOM模板和所述第一布局快照，对所述目标卡片进行初步渲染。
  3. 如权利要求1所述的方法，其特征在于，所述目标卡片的相关信息还包括第一DOM模板；
    所述电子设备根据所述第一布局快照，对所述目标卡片进行初步渲染，包括：
    所述电子设备根据所述第一DOM模板和第一布局快照，对所述目标卡片进行初步渲染。
  4. 如权利要求1至3任一所述的方法，其特征在于，所述电子设备向服务器发送目标卡片的相关信息获取请求，包括：
    所述电子设备接收到加载所述目标卡片的请求、或者搜索所述目标卡片的请求时，向所述服务器发送的目标卡片的相关信息获取请求。
  5. 如权利要求1至4任一所述的方法，其特征在于，所述第一渲染指令集包括所述第二渲染指令集中构建DOM模版的起始指令和构建DOM模板的结束指令之间的渲染指令，且包括所述构建DOM模版的起始指和所述构建DOM模板的结束指令。
  6. 如权利要求1至5任一所述的方法，其特征在于，所述方法还包括：
    所述电子设备保存所述第二渲染指令集、和所述第一布局快照。
  7. 如权利要求6所述的方法，其特征在于，所述方法还包括：
    所述电子设备再次接收到加载所述目标卡片的请求、或者搜索所述目标卡片的请求，向所述服务器发送目标卡片的文件包集合获取请求；
    所述电子设备根据预先存储的所述第二渲染指令集、和所述第一布局快照，对所述目标卡片进行渲染，并在显示屏上显示所述目标卡片；
    所述电子设备接收所述服务器发送的第二文件包集合；
    所述电子设备对所述第二文件包集合解析，得到所述目标卡片的第三渲染指令集；
    所述电子设备根据所述第三渲染指令集，校验所述第二渲染指令集；
    所述电子设备当所述第二渲染指令集校验失败时，根据所述第三渲染指令集，重新对 所述目标卡片进行渲染，并在所述显示屏上显示重新渲染后的所述目标卡片。
  8. 如权利要求7所述的方法，其特征在于，所述电子设备当所述第二渲染指令集校验失败时，还包括：
    所述电子设备删除所述第二渲染指令集、和所述第一布局快照，存储所述第三渲染指令集、以及根据所述第三渲染指令集得到的布局快照。
  9. 一种电子设备，其特征在于，所述电子设备包括处理器和存储器；
    所述存储器中存储有程序指令；
    当所述程序指令被执行时，使得所述电子设备执行如权利要求1至8任一所述的方法。
  10. 一种芯片，其特征在于，所述芯片与电子设备中的存储器耦合，使得所述芯片在运行时调用所述存储器中存储的程序指令，实现如权利要求1至8任一所述的方法。
  11. 一种计算机可读存储介质，其特征在于，所述计算机可读存储介质包括程序指令，当所述程序指令在设备上运行时，使得所述设备执行如权利要求1至8任一项所述的方法。
PCT/CN2020/116588 2019-09-26 2020-09-21 一种卡片渲染方法及电子设备 WO2021057674A1 (zh)

Priority Applications (2)

Application Number Priority Date Filing Date Title
EP20869611.2A EP4027238A4 (en) 2019-09-26 2020-09-21 CARD PLAYING METHOD AND ELECTRONIC DEVICE
US17/764,042 US11934352B2 (en) 2019-09-26 2020-09-21 Card rendering method and electronic device

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN201910919665.5A CN112559098B (zh) 2019-09-26 2019-09-26 一种卡片渲染方法及电子设备
CN201910919665.5 2019-09-26

Publications (1)

Publication Number Publication Date
WO2021057674A1 true WO2021057674A1 (zh) 2021-04-01

Family

ID=75030120

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2020/116588 WO2021057674A1 (zh) 2019-09-26 2020-09-21 一种卡片渲染方法及电子设备

Country Status (4)

Country Link
US (1) US11934352B2 (zh)
EP (1) EP4027238A4 (zh)
CN (1) CN112559098B (zh)
WO (1) WO2021057674A1 (zh)

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113885967A (zh) * 2021-10-22 2022-01-04 北京字跳网络技术有限公司 一种小程序的启动方法、装置、设备及介质
CN114900571A (zh) * 2022-07-13 2022-08-12 工业信息安全(四川)创新中心有限公司 一种基于模板解析可信密码指令的方法、设备及介质

Families Citing this family (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114764360A (zh) * 2021-01-14 2022-07-19 钉钉控股（开曼）有限公司 虚拟卡片的生成方法及其交互实现方法、装置
US20220358129A1 (en) * 2021-05-06 2022-11-10 Thoughtspot, Inc. Visualization Data Reuse In A Data Analysis System
CN114461874B (zh) * 2021-08-27 2022-12-13 荣耀终端有限公司 一种运动信息的显示方法及电子设备
CN115550295A (zh) * 2022-09-01 2022-12-30 钉钉(中国)信息技术有限公司 消息处理方法、消息显示方法及计算设备
CN116700852A (zh) * 2022-09-14 2023-09-05 荣耀终端有限公司 一种卡片展示方法、终端、存储介质以及程序产品
CN115391582A (zh) * 2022-09-27 2022-11-25 杭州涂鸦信息技术有限公司 一种卡片处理方法、电子设备及系统
CN117786260A (zh) * 2022-09-27 2024-03-29 华为终端有限公司 一种卡片的更新方法及相关装置
CN117130688A (zh) * 2023-09-06 2023-11-28 南京荣耀软件技术有限公司 快应用卡片加载方法、电子设备及存储介质

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104572084A (zh) * 2014-12-22 2015-04-29 百度在线网络技术（北京）有限公司 卡片业务中用户界面生成及数据下发方法、装置
CN106095460A (zh) * 2016-06-21 2016-11-09 上海联彤网络通讯技术有限公司 实现终端内嵌浏览器优化网页加载的系统及方法
US20170199864A1 (en) * 2014-10-09 2017-07-13 Wrap Media, LLC Authoring tool for the authoring of wrap packages of cards
CN108733738A (zh) * 2017-04-25 2018-11-02 腾讯科技（深圳）有限公司 一种页面加载方法、系统、服务器及终端
CN109145238A (zh) * 2018-07-06 2019-01-04 阿里巴巴集团控股有限公司 一种卡片显示方法、装置及移动设备
CN109684008A (zh) * 2018-12-19 2019-04-26 Oppo广东移动通信有限公司 卡片渲染方法、装置、终端及计算机可读存储介质

Family Cites Families (16)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2000065763A2 (en) * 1999-04-26 2000-11-02 Dodots, Inc. Apparatus and method for delivering internet content
US7546543B2 (en) * 2004-06-25 2009-06-09 Apple Inc. Widget authoring and editing environment
US8103445B2 (en) * 2005-04-21 2012-01-24 Microsoft Corporation Dynamic map rendering as a function of a user parameter
EP1997038A4 (en) * 2006-03-01 2011-12-21 Infogin Ltd METHODS AND APPARATUS FOR USING WEB CONTENT ON VARIOUS TYPES OF DEVICES
US8595186B1 (en) * 2007-06-06 2013-11-26 Plusmo LLC System and method for building and delivering mobile widgets
US20110022945A1 (en) * 2009-07-24 2011-01-27 Nokia Corporation Method and apparatus of browsing modeling
US8645491B2 (en) 2010-12-18 2014-02-04 Qualcomm Incorporated Methods and apparatus for enabling a hybrid web and native application
US9058401B2 (en) * 2011-08-16 2015-06-16 Fabebook, Inc. Aggregating plug-in requests for improved client performance
AU2014324893B2 (en) * 2013-09-26 2020-05-14 William Knight Foster Providing targeted content based on a user's values
US20160321222A1 (en) * 2014-10-09 2016-11-03 Wrap Media, LLC Card based package for distributing electronic media and services
CN105808277A (zh) 2014-12-31 2016-07-27 阿里巴巴集团控股有限公司 一种卡片式桌面的实现方法、装置和系统
US10896286B2 (en) * 2016-03-18 2021-01-19 Audioeye, Inc. Modular systems and methods for selectively enabling cloud-based assistive technologies
CN106354490B (zh) * 2016-08-19 2019-08-27 成都卓影科技股份有限公司 Epg页面动态布局方法
CN109614563B (zh) * 2018-12-05 2021-06-08 北京达佳互联信息技术有限公司 显示网页的方法、装置、设备及存储介质
CN109656592B (zh) * 2018-12-06 2022-02-08 Oppo广东移动通信有限公司 卡片管理方法、装置、终端及计算机可读存储介质
CN110209444B (zh) * 2019-03-20 2021-07-09 华为技术有限公司 一种图形渲染方法和电子设备

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20170199864A1 (en) * 2014-10-09 2017-07-13 Wrap Media, LLC Authoring tool for the authoring of wrap packages of cards
CN104572084A (zh) * 2014-12-22 2015-04-29 百度在线网络技术（北京）有限公司 卡片业务中用户界面生成及数据下发方法、装置
CN106095460A (zh) * 2016-06-21 2016-11-09 上海联彤网络通讯技术有限公司 实现终端内嵌浏览器优化网页加载的系统及方法
CN108733738A (zh) * 2017-04-25 2018-11-02 腾讯科技（深圳）有限公司 一种页面加载方法、系统、服务器及终端
CN109145238A (zh) * 2018-07-06 2019-01-04 阿里巴巴集团控股有限公司 一种卡片显示方法、装置及移动设备
CN109684008A (zh) * 2018-12-19 2019-04-26 Oppo广东移动通信有限公司 卡片渲染方法、装置、终端及计算机可读存储介质

Cited By (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113885967A (zh) * 2021-10-22 2022-01-04 北京字跳网络技术有限公司 一种小程序的启动方法、装置、设备及介质
CN113885967B (zh) * 2021-10-22 2024-02-13 北京字跳网络技术有限公司 一种小程序的启动方法、装置、设备及介质
CN114900571A (zh) * 2022-07-13 2022-08-12 工业信息安全(四川)创新中心有限公司 一种基于模板解析可信密码指令的方法、设备及介质
CN114900571B (zh) * 2022-07-13 2022-09-27 工业信息安全(四川)创新中心有限公司 一种基于模板解析可信密码指令的方法、设备及介质

Also Published As

Publication number Publication date
CN112559098B (zh) 2022-04-26
US11934352B2 (en) 2024-03-19
EP4027238A4 (en) 2022-11-02
CN112559098A (zh) 2021-03-26
EP4027238A1 (en) 2022-07-13
US20220318195A1 (en) 2022-10-06

Similar Documents

Publication Publication Date Title
WO2021057674A1 (zh) 一种卡片渲染方法及电子设备
WO2021213120A1 (zh) 投屏方法、装置和电子设备
US20220334697A1 (en) Screen capture method and related device
WO2021018274A1 (zh) 一种投屏方法及电子设备
WO2021023220A1 (zh) 一种内容接续方法、系统及电子设备
CN112394895B (zh) 画面跨设备显示方法与装置、电子设备
WO2021057673A1 (zh) 一种图像显示方法及电子设备
WO2017050090A1 (zh) 生成gif文件的方法、设备及计算机可读存储介质
KR20220016544A (ko) 오디오 공유를 지원하는 전자 장치
WO2022135157A1 (zh) 页面显示的方法、装置、电子设备以及可读存储介质
CN113703849B (zh) 投屏应用打开方法和装置
CN110768900B (zh) 一种数据传输方法及电子设备
WO2023179123A1 (zh) 蓝牙音频播放方法、电子设备及存储介质
CN115022982A (zh) 多屏协同无感接入方法、电子设备及存储介质
KR20180038792A (ko) 전자 장치 및 전자 장치에서 이어폰 잭 인식 방법
CN115086888A (zh) 消息通知方法与装置、电子设备
CN115485685A (zh) 应用程序安全检测方法、装置、存储介质及电子设备
WO2023102934A1 (zh) 数据处理方法、智能终端及存储介质
CN111221544A (zh) 一种预装应用软件的管理方法及终端
CN113271577B (zh) 媒体数据播放系统、方法及相关装置
WO2023185590A1 (zh) 媒体信息的获取方法及电子设备
CN114268689B (zh) 蓝牙设备的电量显示方法、终端及存储介质
WO2022218197A1 (zh) 一种跨设备交互方法及设备
WO2023207890A1 (zh) 一种界面显示方法及电子设备
WO2021227847A1 (zh) 一种文件应用方法及装置

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 20869611

Country of ref document: EP

Kind code of ref document: A1

NENP Non-entry into the national phase

Ref country code: DE

ENP Entry into the national phase

Ref document number: 2020869611

Country of ref document: EP

Effective date: 20220406