Webpages often include multiple elements (e.g., text, images, and/or interactive elements, among other examples). Usually, a user device (e.g., a laptop, a smartphone, or a desktop computer, among other examples) receives, over a network, one or more files encoding all the elements of a webpage.
Some implementations described herein relate to a system for using registries to selectively load website elements. The system may include one or more memories and one or more processors communicatively coupled to the one or more memories. The one or more processors may be configured to receive a webpage encoding a scaffold with a plurality of slots. The one or more processors may be configured to transmit a request for feature flags. The one or more processors may be configured to receive, in response to the request for feature flags, a set of feature flags. The one or more processors may be configured to transmit a request for website elements, from a registry, based on the set of feature flags. The one or more processors may be configured to receive, in response to the request for website elements, code for a plurality of website elements corresponding to the plurality of slots. The one or more processors may be configured to output the plurality of website elements in the plurality of slots.
Some implementations described herein relate to a method of using registries to selectively load website elements. The method may include receiving, from a website host, a webpage encoding a scaffold with a set of slots. The method may include transmitting, to a registry host, a request for website elements from a set of possible website elements. The method may include receiving, from the registry host and in response to the request for website elements, code for a subset of website elements from the set of possible website elements. The method may include outputting, by a user device, the subset of website elements in the set of slots.
Some implementations described herein relate to a non-transitory computer-readable medium that stores a set of instructions for using registries to selectively load website elements. The set of instructions, when executed by one or more processors of a device, may cause the device to receive a request for website elements from a set of possible website elements. The set of instructions, when executed by one or more processors of the device, may cause the device to retrieve, from at least one registry file, code for a subset of website elements from the set of possible website elements. The set of instructions, when executed by one or more processors of the device, may cause the device to transmit, in response to the request for website elements, the code for the subset of website elements.
The following detailed description of example implementations refers to the accompanying drawings. The same reference numbers in different drawings may identify the same or similar elements.
A webpage may include multiple elements (e.g., text, images, and/or interactive elements, among other examples). Usually, a user device (e.g., a laptop, a smartphone, or a desktop computer, among other examples) receives, over a network, one or more files encoding all the elements of the webpage. In order to improve render times for a webpage, some elements may be deferred, which is referred to as “lazy loading.” For example, an image or frame that is further down on a webpage may be deferred until a user, of the user device, scrolls down closer to the image or frame. In another example, JavaScript® elements may be delayed until activated (e.g., via an interaction from the user).
However, when a webpage is coded to render a selection of elements, out of a larger set of possible elements, the user device generally receives some code for the whole set of possible elements, even code that is not rendered. As a result, the user device wastes network overhead, processing resources, and memory and increases latency for the user (degrading the user's experience). Additionally, the user device may use a computationally-heavy switch statement (e.g., in JavaScript) to determine the selection of elements to render.
Some implementations described herein enable a user device to request website elements for a webpage, out of a set of possible website elements, from a registry host. As a result, the user device receives and processes only a portion of code included in a registry file at the registry host, which conserves network overhead, processing resources, and memory as compared with receiving and processing code for the whole set of possible website elements. Additionally, the webpage loads faster, which improves a user's experience. Some implementations additionally enable the user device to use feature flags to determine the website elements, out of the set of possible website elements, to request. As a result, the user device conserves processing resources as compared with using a computationally-heavy switch statement.
As shown in
In some implementations, a user of the user device may interact with a web browser (or another similar type of application) executed by the user device in order to trigger the user device to transmit the request. For example, the web browser may output (e.g., via an output component of the user device) a user interface (UI), such as a browser tab including a navigation bar. Accordingly, the user may input (e.g., via a keyboard, a microphone, and/or another input component of the user device) the domain name into the navigation bar and input a signal (e.g., by hitting an “Enter” key, clicking or tapping a confirmation button, or speaking a command, among other examples) that triggers the user device to transmit the query.
As shown by reference number 110, the DNS resolver may transmit, and the user device may receive, a response to the query. The response may include the IP address (or another type of machine-readable address) associated with the domain name. The response may include an HTTP response and/or may be returned based on a call to an API function (hosted by, or at least associated with, the DNS resolver).
Although the example 100 includes the user device receiving the machine-readable address from the DNS resolver, other examples may include the user device receiving the machine-readable address from a local memory (e.g., a cache controlled by the user device). For example, the user device may have previously resolved the domain name and cached the IP address associated with the domain name. Accordingly, the user device may use the cached IP address when the user inputs the same domain name.
As shown by reference number 115, the user device may transmit, and the website host may receive, a request for a webpage (e.g., associated with the domain name). The request may include an HTTP request and/or a file transfer protocol (FTP) request, among other examples. The user device may transmit the request based on the response to the query. For example, the user device may transmit the request to an endpoint (e.g., an IP address) indicated in the response to the query.
As shown by reference number 120, the website host may transmit, and the user device may receive, the webpage (in response to the request for the webpage). The webpage may include a hypertext markup language (HTML) file (e.g., at least one HTML file). Additionally, in some implementations, the webpage may include a cascading style sheets (CSS) file (e.g., at least one CSS file) and/or a JavaScript file (e.g., at least one JavaScript file), among other examples.
The webpage may encode a scaffold with a set of slots. The set of slots may include a plurality of slots. Each “slot” may define an area of pixels to be filled with a website element. For example, an “options” slot may define an area for sliders and/or buttons (as shown in
As shown in
Although the example 100 is described with the registry host being at least partially separate (e.g., logically, virtually, and/or physically) from the website host, other examples may include the registry host being integrated with the website host. Accordingly, the user device may transmit the request for feature flags to the website host (e.g., together with the request for the webpage or separately from the request for the webpage). Alternatively, a device at least partially separate (e.g., logically, virtually, and/or physically) from both the website host and the registry host may receive the request for feature flags and transmit the set of feature flags in response.
Furthermore, the registry host may transmit, and the user device may receive, the set of feature flags. The registry host may transmit the set of feature flags in response to the request for feature flags. The set of feature flags may be included in an HTTP response and/or may be returned based on a call to an API function (hosted by, or at least associated with, the registry host).
Additionally, or alternatively, as shown by reference number 125b, the user device may determine the set of feature flags. For example, the webpage may include code (e.g., in an HTML file and/or a JavaScript file) that the user device may execute to determine a set of bits (e.g., a set of Booleans) that comprise the set of feature flags.
As shown by reference number 130, the user device may transmit, and the registry host may receive, a request for website elements. The request for website elements may include an HTTP request and/or an FTP request, among other examples. The user device may transmit the request based on the set of feature flags. For example, the request may indicate the set of feature flags (e.g., as a bitmap or another type of data structure that encodes the set of feature flags). The request may include the set of feature flags in a header and/or a body of the request.
The request for website elements may be for a subset of website elements out of a set of possible website elements. As a result, the user device only requests code for website elements that will be output, which reduces network overhead, memory overhead, and processing overhead. The subset of website elements may include a plurality of website elements. The subset of website elements may be from a registry (e.g., stored and/or managed by the registry host). For example, the set of possible website elements may be encoded in a registry file (e.g., at least one registry file), such as a JavaScript file (or another type of file that defines website components). Accordingly, the registry host may retrieve code for the subset of website elements, from the registry file, based on the request. For example, the registry host may map the set of feature flags to the subset of website elements (e.g., using a table, a formula, or another type of data structure that maps feature flags to website elements).
Although the example 100 is described with the registry host processing the feature flags, other examples may include the user device processing the feature flags. For example, the webpage may include code (e.g., in an HTML file and/or a JavaScript file) that the user device may execute to identify the subset of website elements based on the set of feature flags. Accordingly, the request for website elements may indicate the subset of website elements (e.g., using names associated with the subset of websites) in addition to, or in lieu of, indicating the set of feature flags.
As shown by reference number 135, the registry host may transmit, and the user device may receive, code for the subset of website elements. The subset of website elements may correspond to the set of slots. For example, code for each website element may indicate a corresponding slot into which the website element may be output (or rendered). The registry host may transmit the code in response to the request for website elements.
As shown in
In some implementations, the code for the subset of website elements may define a plurality of placeholders. For example, a placeholder for a website element may define a set of pixels to reserve while the website element loads. The website element loading may depend on the user device processing code for the website element and/or the user device performing a lazy load of the website element (e.g., based on the website element being defined using a JavaScript import). As a result, the placeholder improves the user's experience (by displaying the set of pixels during a loading process). Additionally, the user device may output the subset of website elements to replace the plurality of placeholders. As a result, the placeholders conserve power and processing resources at the user device because the user device may refrain from re-arranging the webpage once the subset of website elements are loaded (which would happen if other parts of the webpage loaded and no placeholders were present for the subset of website elements).
The code for the subset of website elements may define shared properties. For example, a shared property for a website element may indicate a name of a variable on which the website element depends. For example, the variable may be a numerical value that is visually represented by the website element or that is input into a formula whose output is visually represented by the website element. Therefore, whenever the shared property changes, the website element may automatically update. As a result, power, processing resources, and memory overhead are conserved that otherwise would have been wasted in duplicating changes in a variable associated with one website element across other website elements.
The code for the subset of website elements may define subscribed events. For example, a subscribed event for a website element may indicate a name of an event that triggers a change to the website element. For example, the event may be associated with a different website element and/or input from the user. Therefore, whenever the subscribed event occurs, the website element may automatically update. Moreover, if the subscribed event for one website element is associated with a different website element that is unloaded (e.g., based on the set of feature flags), the user device may refrain from monitoring for the subscribed event. As a result, power, processing resources, and memory overhead are conserved that otherwise would have been wasted in initializing and maintaining separate event monitors for every website elements as well as initializing and maintaining event monitors for events that will not occur (e.g., because the events depend on unloaded website elements).
As shown by reference number 145, the user device may transmit, and the registry host may receive, a request for additional website elements. For example, the user of the user device may interact with a portion of the webpage (e.g., a tab, as described in connection with
As shown by reference number 150, the registry host may transmit, and the user device may receive, code for the additional subset of website elements (e.g., similarly as described above for the code for the subset of website elements). Because the user device only requests the additional subset of website elements when needed, the user device conserves memory overhead that otherwise would have been wasted on storing the code for the additional subset of website elements.
As shown in
Additionally, or alternatively, as shown by reference number 160, the user device may hide the subset of website elements based on a first interaction (e.g., based on the user selecting a tab associated with different elements, as described above and in connection with
By using techniques as described in connection with
As indicated above,
As shown in
As further shown in
In some implementations, the user device may output some website elements that are loaded even while other website elements are still loading. For example, as shown in
As indicated above,
As shown in
As further shown in
As indicated above,
The cloud computing system 402 may include computing hardware 403, a resource management component 404, a host operating system (OS) 405, and/or one or more virtual computing systems 406. The cloud computing system 402 may execute on, for example, an Amazon Web Services platform, a Microsoft Azure platform, or a Snowflake platform. The resource management component 404 may perform virtualization (e.g., abstraction) of computing hardware 403 to create the one or more virtual computing systems 406. Using virtualization, the resource management component 404 enables a single computing device (e.g., a computer or a server) to operate like multiple computing devices, such as by creating multiple isolated virtual computing systems 406 from computing hardware 403 of the single computing device. In this way, computing hardware 403 can operate more efficiently, with lower power consumption, higher reliability, higher availability, higher utilization, greater flexibility, and lower cost than using separate computing devices.
The computing hardware 403 may include hardware and corresponding resources from one or more computing devices. For example, computing hardware 403 may include hardware from a single computing device (e.g., a single server) or from multiple computing devices (e.g., multiple servers), such as multiple computing devices in one or more data centers. As shown, computing hardware 403 may include one or more processors 407, one or more memories 408, and/or one or more networking components 409. Examples of a processor, a memory, and a networking component (e.g., a communication component) are described elsewhere herein.
The resource management component 404 may include a virtualization application (e.g., executing on hardware, such as computing hardware 403) capable of virtualizing computing hardware 403 to start, stop, and/or manage one or more virtual computing systems 406. For example, the resource management component 404 may include a hypervisor (e.g., a bare-metal or Type 1 hypervisor, a hosted or Type 2 hypervisor, or another type of hypervisor) or a virtual machine monitor, such as when the virtual computing systems 406 are virtual machines 410. Additionally, or alternatively, the resource management component 404 may include a container manager, such as when the virtual computing systems 406 are containers 411. In some implementations, the resource management component 404 executes within and/or in coordination with a host operating system 405.
A virtual computing system 406 may include a virtual environment that enables cloud-based execution of operations and/or processes described herein using computing hardware 403. As shown, a virtual computing system 406 may include a virtual machine 410, a container 411, or a hybrid environment 412 that includes a virtual machine and a container, among other examples. A virtual computing system 406 may execute one or more applications using a file system that includes binary files, software libraries, and/or other resources required to execute applications on a guest operating system (e.g., within the virtual computing system 406) or the host operating system 405.
Although the registry host 401 may include one or more elements 403-412 of the cloud computing system 402, may execute within the cloud computing system 402, and/or may be hosted within the cloud computing system 402, in some implementations, the registry host 401 may not be cloud-based (e.g., may be implemented outside of a cloud computing system) or may be partially cloud-based. For example, the registry host 401 may include one or more devices that are not part of the cloud computing system 402, such as device 500 of
The network 420 may include one or more wired and/or wireless networks. For example, the network 420 may include a cellular network, a public land mobile network (PLMN), a local area network (LAN), a wide area network (WAN), a private network, the Internet, and/or a combination of these or other types of networks. The network 420 enables communication among the devices of the environment 400.
The user device 430 may include one or more devices capable of receiving, generating, storing, processing, and/or providing information associated with webpages, as described elsewhere herein. The user device 430 may include a communication device and/or a computing device. For example, the user device 430 may include a wireless communication device, a mobile phone, a user equipment, a laptop computer, a tablet computer, a desktop computer, a gaming console, a set-top box, a wearable communication device (e.g., a smart wristwatch, a pair of smart eyeglasses, a head mounted display, or a virtual reality headset), or a similar type of device. The user device 430 may communicate with one or more other devices of environment 400, as described elsewhere herein.
The DNS resolver 440 may include one or more devices capable of receiving, generating, storing, processing, providing, and/or routing information associated with domain names, as described elsewhere herein. The DNS resolver 440 may include a communication device and/or a computing device. For example, the DNS resolver 440 may include a server, such as an application server, a client server, a web server, a database server, a host server, a proxy server, a virtual server (e.g., executing on computing hardware), or a server in a cloud computing system. In some implementations, the DNS resolver 440 may include computing hardware used in a cloud computing environment. The DNS resolver 440 may communicate with one or more other devices of environment 400, as described elsewhere herein.
The website host 450 may include one or more devices capable of receiving, generating, storing, processing, and/or providing information associated with websites, as described elsewhere herein. The website host 450 may include a communication device and/or a computing device. For example, the website host 450 may include a database, a server, a database server, an application server, a client server, a web server, a host server, a proxy server, a virtual server (e.g., executing on computing hardware), a server in a cloud computing system, a device that includes computing hardware used in a cloud computing environment, or a similar type of device. The website host 450 may communicate with one or more other devices of environment 400, as described elsewhere herein.
The number and arrangement of devices and networks shown in
The bus 510 may include one or more components that enable wired and/or wireless communication among the components of the device 500. The bus 510 may couple together two or more components of
The memory 530 may include volatile and/or nonvolatile memory. For example, the memory 530 may include random access memory (RAM), read only memory (ROM), a hard disk drive, and/or another type of memory (e.g., a flash memory, a magnetic memory, and/or an optical memory). The memory 530 may include internal memory (e.g., RAM, ROM, or a hard disk drive) and/or removable memory (e.g., removable via a universal serial bus connection). The memory 530 may be a non-transitory computer-readable medium. The memory 530 may store information, one or more instructions, and/or software (e.g., one or more software applications) related to the operation of the device 500. In some implementations, the memory 530 may include one or more memories that are coupled (e.g., communicatively coupled) to one or more processors (e.g., processor 520), such as via the bus 510. Communicative coupling between a processor 520 and a memory 530 may enable the processor 520 to read and/or process information stored in the memory 530 and/or to store information in the memory 530.
The input component 540 may enable the device 500 to receive input, such as user input and/or sensed input. For example, the input component 540 may include a touch screen, a keyboard, a keypad, a mouse, a button, a microphone, a switch, a sensor, a global positioning system sensor, a global navigation satellite system sensor, an accelerometer, a gyroscope, and/or an actuator. The output component 550 may enable the device 500 to provide output, such as via a display, a speaker, and/or a light-emitting diode. The communication component 560 may enable the device 500 to communicate with other devices via a wired connection and/or a wireless connection. For example, the communication component 560 may include a receiver, a transmitter, a transceiver, a modem, a network interface card, and/or an antenna.
The device 500 may perform one or more operations or processes described herein. For example, a non-transitory computer-readable medium (e.g., memory 530) may store a set of instructions (e.g., one or more instructions or code) for execution by the processor 520. The processor 520 may execute the set of instructions to perform one or more operations or processes described herein. In some implementations, execution of the set of instructions, by one or more processors 520, causes the one or more processors 520 and/or the device 500 to perform one or more operations or processes described herein. In some implementations, hardwired circuitry may be used instead of or in combination with the instructions to perform one or more operations or processes described herein. Additionally, or alternatively, the processor 520 may be configured to perform one or more operations or processes described herein. Thus, implementations described herein are not limited to any specific combination of hardware circuitry and software.
The number and arrangement of components shown in
As shown in
As further shown in
As further shown in
As further shown in
Although
The foregoing disclosure provides illustration and description, but is not intended to be exhaustive or to limit the implementations to the precise forms disclosed. Modifications may be made in light of the above disclosure or may be acquired from practice of the implementations.
As used herein, the term “component” is intended to be broadly construed as hardware, firmware, or a combination of hardware and software. It will be apparent that systems and/or methods described herein may be implemented in different forms of hardware, firmware, and/or a combination of hardware and software. The hardware and/or software code described herein for implementing aspects of the disclosure should not be construed as limiting the scope of the disclosure. Thus, the operation and behavior of the systems and/or methods are described herein without reference to specific software code-it being understood that software and hardware can be used to implement the systems and/or methods based on the description herein.
As used herein, satisfying a threshold may, depending on the context, refer to a value being greater than the threshold, greater than or equal to the threshold, less than the threshold, less than or equal to the threshold, equal to the threshold, not equal to the threshold, or the like.
Although particular combinations of features are recited in the claims and/or disclosed in the specification, these combinations are not intended to limit the disclosure of various implementations. In fact, many of these features may be combined in ways not specifically recited in the claims and/or disclosed in the specification. Although each dependent claim listed below may directly depend on only one claim, the disclosure of various implementations includes each dependent claim in combination with every other claim in the claim set. As used herein, a phrase referring to “at least one of” a list of items refers to any combination and permutation of those items, including single members. As an example, “at least one of: a, b, or c” is intended to cover a, b, c, a-b, a-c, b-c, and a-b-c, as well as any combination with multiple of the same item. As used herein, the term “and/or” used to connect items in a list refers to any combination and any permutation of those items, including single members (e.g., an individual item in the list). As an example, “a, b, and/or c” is intended to cover a, b, c, a-b, a-c, b-c, and a-b-c.
When “a processor” or “one or more processors” (or another device or component, such as “a controller” or “one or more controllers”) is described or claimed (within a single claim or across multiple claims) as performing multiple operations or being configured to perform multiple operations, this language is intended to broadly cover a variety of processor architectures and environments. For example, unless explicitly claimed otherwise (e.g., via the use of “first processor” and “second processor” or other language that differentiates processors in the claims), this language is intended to cover a single processor performing or being configured to perform all of the operations, a group of processors collectively performing or being configured to perform all of the operations, a first processor performing or being configured to perform a first operation and a second processor performing or being configured to perform a second operation, or any combination of processors performing or being configured to perform the operations. For example, when a claim has the form “one or more processors configured to: perform X; perform Y; and perform Z,” that claim should be interpreted to mean “one or more processors configured to perform X; one or more (possibly different) processors configured to perform Y; and one or more (also possibly different) processors configured to perform Z.”
No element, act, or instruction used herein should be construed as critical or essential unless explicitly described as such. Also, as used herein, the articles “a” and “an” are intended to include one or more items, and may be used interchangeably with “one or more.” Further, as used herein, the article “the” is intended to include one or more items referenced in connection with the article “the” and may be used interchangeably with “the one or more.” Furthermore, as used herein, the term “set” is intended to include one or more items (e.g., related items, unrelated items, or a combination of related and unrelated items), and may be used interchangeably with “one or more.” Where only one item is intended, the phrase “only one” or similar language is used. Also, as used herein, the terms “has,” “have,” “having,” or the like are intended to be open-ended terms. Further, the phrase “based on” is intended to mean “based, at least in part, on” unless explicitly stated otherwise. Also, as used herein, the term “or” is intended to be inclusive when used in a series and may be used interchangeably with “and/or,” unless explicitly stated otherwise (e.g., if used in combination with “either” or “only one of”).