CN117725332A

CN117725332A - Web page layout self-adaption method, system, equipment and storage medium

Info

Publication number: CN117725332A
Application number: CN202311772461.6A
Authority: CN
Inventors: 郭昌盛; 孙国凯; 李华生; 王磊; 姜昱西
Original assignee: Beijing Jiangmin Xinke Technology Co ltd
Current assignee: Beijing Jiangmin Xinke Technology Co ltd
Priority date: 2023-12-21
Filing date: 2023-12-21
Publication date: 2024-03-19

Abstract

The invention discloses a Web page layout self-adaption method, a system, equipment and a storage medium, wherein the method comprises the following steps: when a user accesses a WEB page, detecting the characteristics of equipment; matching layout rules in a layout rule base based on the equipment characteristics; performing element analysis on the WEB page; and performing intelligent arrangement and style adjustment based on the element analysis result and the layout rule. Through the processing scheme, the display problem on different devices can be effectively solved, the consistency of a user interface can be ensured, and page layout suitable for various screens can be rapidly formed.

Description

Web page layout self-adaption method, system, equipment and storage medium

Technical Field

The present invention relates to the field of computer technologies, and in particular, to a Web page layout adaptive method, system, device, and storage medium.

Background

Web pages have become the core platform for information delivery, business communication, and entertainment media. With the popularity of mobile devices, users' demand for accessing Web pages on different devices is increasing. However, the screen size, resolution and orientation of the different devices are vastly different, resulting in a serious technical challenge: how to achieve consistent and quality page presentation on various devices.

The current Web page layout has poor display effect on different devices and poor user experience. Conventional fixed layout and media querying methods are difficult to meet the needs of various devices and require manual maintenance of multiple versions of pages. This results in increased development and maintenance costs, while affecting user satisfaction and page availability. With the diversification of mobile devices, a new approach is needed to address this problem.

In the prior art, the following techniques are generally used to solve the above problems:

scheme 1: and (3) response type design: based on the media query technique, device characteristics are detected by CSS media queries, and then different style rules are applied for different screen sizes and resolutions. However, responsive designs may require a large number of media query rules, are difficult to accommodate for all devices, and may lead to performance problems and development complexity.

Scheme 3: stream layout: the size of the page element is defined using a percentage width instead of a fixed pixel. This allows the element to be automatically adjusted on different screens. However, streaming layout may result in elements that are too dispersed on a large screen or too crowded on a small screen, affecting the user experience.

Scheme 3: adaptive layout: different versions of page layouts are designed for specific screen sizes and device types. While providing more precise control, multiple versions need to be maintained, increasing development and maintenance costs.

Scheme 4: javaScript library: some JavaScript libraries, such as Bootstrap, foundation, etc., provide predefined responsive components and styles to simplify the development process. However, these libraries may contain too much useless code, affecting load speed and performance.

Although the page layout method can adjust the page to a certain extent, in practical use, it is found that the method has several disadvantages, which can be summarized as follows, because the best use effect is not achieved:

1) The disadvantages for the responsive design are: although responsive designs may apply different styles depending on the different devices, a large number of media query rules need to be written, increasing development complexity, possibly leading to performance problems and maintenance difficulties. Furthermore, it does not always provide accurate layout control.

2) Disadvantages for the streaming layout scheme are: the streaming layout may automatically resize elements, but may result in too sparse or crowded an element distribution across different screen sizes, affecting the user experience.

3) The disadvantages for the adaptive layout are: while the adaptive layout may design different versions of a page for a particular device type, multiple versions need to be maintained, increasing development and maintenance costs. At the same time, the advent of new device types may still be unsatisfied.

4) The disadvantages for JavaScript libraries are: the use of existing JavaScript libraries may simplify the development process, but these libraries may contain large amounts of redundant code, impact loading speed and performance, and may lack flexibility.

Therefore, the above-mentioned existing Web page layout method is still inconvenient and disadvantageous, and needs to be further improved. How to create a new Web page layout method becomes the aim of improvement in the current industry.

Disclosure of Invention

In view of this, embodiments of the present disclosure provide a Web page layout adaptive method, which at least partially solves the problems existing in the prior art.

In a first aspect, an embodiment of the present disclosure provides a Web page layout adaptation method, including the steps of:

when a user accesses a WEB page, detecting the characteristics of equipment;

matching layout rules in a layout rule base based on the equipment characteristics;

Performing element analysis on the WEB page;

and performing intelligent arrangement and style adjustment based on the element analysis result and the layout rule.

According to a specific implementation of an embodiment of the disclosure, the method further includes:

the layout is adjusted in real time according to the interactive behaviors of the user;

dynamically applying CSS style according to device characteristics and layout rules by using media query, flexbox and Grid layout technology;

the capability of automatically adapting to new equipment types and screen sizes of the system is realized, the maintenance cost is reduced, and the continuous adaptability of pages is ensured;

in the intelligent arrangement and style application process, the page loading speed and performance are considered so as to provide faster user experience;

data driven optimization.

According to a specific implementation of an embodiment of the disclosure, the device characteristics include: screen size, resolution, orientation.

According to a specific implementation manner of the embodiment of the present disclosure, the matching the layout rule in the layout rule base based on the device characteristics includes:

traversing the layout rule base, and matching the device characteristics defined in the rules with the collected device characteristic information one by one to obtain a matching result;

scoring the matching result according to a preset matching degree score of the layout rule;

Selecting a layout rule with the highest matching degree as an optimal layout rule according to the matching degree score; when a plurality of rules with the same matching degree exist, selecting according to preset priority or preset weight;

and applying the layout mode of the optimal layout rule.

According to a specific implementation manner of the embodiment of the present disclosure, the element analysis on the WEB page includes:

analyzing the type, importance and content of the element, wherein the method comprises the following steps:

analyzing the HTML structure of the WEB page by using an HTML analyzer, and identifying the tag type of each element;

classifying according to the label types; the tag types include: a title element, a paragraph element, an image element, and a link element;

element type analysis is realized based on an HTML parsing library; the method comprises the steps of,

acquiring the position information of the element through a CSS selector or JavaScript DOM operation; the location information of the element includes: vertical position of an element and position relative to other elements;

calculating the importance of the elements according to the position information of the elements and the preset weights or the preset scores; the method comprises the steps of,

extracting and analyzing text content using natural language processing techniques;

Analyzing the image content using computer vision techniques;

and analyzing the target URL of the link, and acquiring the related information of the page pointed by the link.

According to a specific implementation manner of the embodiment of the present disclosure, the intelligent arrangement and style adjustment based on the element analysis result and the layout rule includes:

calculating the arrangement sequence of elements by using an intelligent algorithm based on the element analysis result and the layout rule;

adjusting the size and the position of the element according to the layout rule and the element analysis result;

operating on the elements according to the decision of the intelligent algorithm, including: reorder elements to meet specific needs, stack elements to save space, or hide unnecessary elements to improve page load speed and sharpness, etc.

In a second aspect, embodiments of the present disclosure provide a Web page layout adaptation system, the system comprising:

the characteristic detection module is configured to detect equipment characteristics when a user accesses a WEB page;

a matching module configured to match layout rules in a layout rule base based on the device characteristics;

the analysis module is configured to perform element analysis on the WEB page;

and the intelligent arrangement module is configured for intelligent arrangement and style adjustment based on the element analysis result and the layout rule.

According to a specific implementation of an embodiment of the disclosure, the system further includes:

the optimizing module is configured to adjust the layout in real time according to the interactive behaviors of the user;

data driven optimization.

In a third aspect, embodiments of the present disclosure further provide an electronic device, including:

at least one processor; the method comprises the steps of,

a memory communicatively coupled to the at least one processor; wherein,

the memory stores instructions executable by the at least one processor, which when executed by the at least one processor, cause the at least one processor to perform the Web page layout adaptation method of any one of the preceding first aspect or any implementation of the first aspect.

In a fourth aspect, the presently disclosed embodiments also provide a non-transitory computer-readable storage medium storing computer instructions that, when executed by at least one processor, cause the at least one processor to perform the Web page layout adaptation method of the first aspect or any implementation of the first aspect.

In a fifth aspect, embodiments of the present disclosure also provide a computer program product comprising a computer program stored on a non-transitory computer readable storage medium, the computer program comprising program instructions which, when executed by a computer, cause the computer to perform the Web page layout adaptation method of the first aspect or any implementation of the first aspect.

According to the Web page layout self-adaption method, through intelligent layout adjustment, the display problem on different devices can be effectively solved, the consistency of a user interface can be ensured, and page layouts suitable for various screens can be rapidly formed. The method provides a more intelligent and efficient solution for the field of Web page layout self-adaption, can optimize user experience, automate layout, reduce maintenance cost, have flexibility and adaptability, improve performance, optimize data driving, adapt to new technology and improve access rate: the optimized user experience and performance can attract more users to access the website and improve the stay time and page browsing amount of the users.

Drawings

The foregoing is merely an overview of the present invention, and the present invention is further described in detail below with reference to the accompanying drawings and detailed description.

Fig. 1 is a schematic flow chart of a Web page layout adaptive method according to an embodiment of the disclosure;

FIG. 2 is a flow chart of a method for Web page layout adaptation provided in an embodiment of the disclosure;

FIG. 3 is a schematic flow chart of an intelligent algorithm according to an embodiment of the disclosure;

fig. 4 is a schematic structural diagram of a Web page layout adaptive system according to an embodiment of the present disclosure; and

fig. 5 is a schematic diagram of an electronic device according to an embodiment of the disclosure.

Detailed Description

Embodiments of the present disclosure are described in detail below with reference to the accompanying drawings.

Other advantages and effects of the present disclosure will become readily apparent to those skilled in the art from the following disclosure, which describes embodiments of the present disclosure by way of specific examples. It will be apparent that the described embodiments are merely some, but not all embodiments of the present disclosure. The disclosure may be embodied or practiced in other different specific embodiments, and details within the subject specification may be modified or changed from various points of view and applications without departing from the spirit of the disclosure. It should be noted that the following embodiments and features in the embodiments may be combined with each other without conflict. All other embodiments, which can be made by one of ordinary skill in the art without inventive effort, based on the embodiments in this disclosure are intended to be within the scope of this disclosure.

It is noted that various aspects of the embodiments are described below within the scope of the following claims. It should be apparent that the aspects described herein may be embodied in a wide variety of forms and that any specific structure and/or function described herein is merely illustrative. Based on the present disclosure, one skilled in the art will appreciate that one aspect described herein may be implemented independently of any other aspect, and that two or more of these aspects may be combined in various ways. For example, an apparatus may be implemented and/or a method practiced using any number of the aspects set forth herein. In addition, such apparatus may be implemented and/or such methods practiced using other structure and/or functionality in addition to one or more of the aspects set forth herein.

In addition, in the following description, specific details are provided in order to provide a thorough understanding of the examples. However, it will be understood by those skilled in the art that the aspects may be practiced without these specific details.

In order to solve the problems existing in the prior art, web page layout self-adaption technology is generated. The technology adjusts the position, the size and the priority of the page elements in real time by dynamically detecting the equipment characteristics such as the screen size, the direction, the resolution and the like and the user interaction behavior so as to adapt to the display requirements on different equipment. The method enables the page to be automatically adapted on various devices, provides consistent and good user experience, and simultaneously reduces the burden of development and maintenance. Therefore, the invention aims to provide an innovative self-adaptive method and device for Web page layout, so as to solve the challenges brought by the diversity of mobile equipment to page display and improve the adaptability and user satisfaction of pages. Through intelligent algorithm and dynamic style application, the invention can effectively adjust page layout, and ensure that the best display effect can be presented on various screens.

With advances in technology and digitization, cross-device presentation of Web pages presents challenges. To ensure a seamless user experience, adaptive layout is critical. More and more mechanisms rely on Web pages to provide information and services. However, device diversity and screen diversity result in the new mobile device not showing the page well. The invention adopts intelligent layout adjustment to solve the problem of equipment compatibility, ensures the consistency of the user interface, quickly adapts to various screens, provides excellent experience, can effectively solve the display problem on different equipment, can ensure the consistency of the user interface, and quickly forms page layout suitable for various screens.

The embodiment of the invention provides a Web page layout self-adaption method, which dynamically adjusts the priority and layout of page elements by detecting the screen size of user equipment so as to adapt to the display requirements of different equipment. Based on intelligent algorithm and dynamic style application, automatic layout adjustment is realized according to element importance and screen size. The method not only can be effectively adapted to various devices and provide consistent user experience, but also can be quickly adapted to new device types and screen sizes without increasing maintenance cost. The invention aims to improve page adaptability, reduce development burden and improve user experience.

Web page layout adaptation: a technique automatically adjusts the layout of page elements to accommodate different screen sizes and resolutions based on device characteristics. Priority level: the relative importance of elements in a page determines the order and arrangement of their display on different devices.

Fig. 1 is a schematic diagram of a flow of a Web page layout adaptive method according to an embodiment of the disclosure.

Fig. 2 is a flow chart of a Web page layout adaptation method corresponding to fig. 1.

As shown in fig. 1, at step S110, when the user accesses a WEB page, device characteristic detection is performed.

In an embodiment of the present invention, the device characteristics include: screen size, resolution, orientation.

More specifically, the device characteristic detection includes: technologies capable of accurately acquiring characteristics of user equipment, including screen size, resolution, direction, etc., are developed based on JavaScript and CSS media queries.

More specifically, step S120 is next followed.

At step S120, the layout rules are matched in a layout rule base based on the device characteristics.

More specifically, a library of layout rules is created that contains a plurality of different devices and contexts for the system to select the appropriate layout rules based on the device characteristics.

In an embodiment of the present invention, the matching of the layout rules in the layout rule base based on the device characteristics includes:

and applying the layout mode of the optimal layout rule.

More specifically, device characteristic information is collected: first, characteristic information of the user equipment including screen size, resolution, direction, and the like is acquired. This can be achieved by the aforementioned techniques, such as JavaScript and CSS media queries, window object properties, etc.

Traversing a layout rule base: the system traverses each layout rule in the layout rule base and matches one by one.

Matching device characteristics: for each layout rule, the system compares the device characteristics defined in the rule to match the collected device characteristic information. The method of matching may be determined according to a specific rule base and requirements, and may be an exact match or a threshold-based match.

Determining the matching degree: based on the results of the matching, the system determines a matching degree score for each layout rule. The matching score may be calculated based on the number of device characteristics that match, the accuracy of the match, etc.

Selecting the best layout rule: and according to the matching degree score, the system selects the layout rule with the highest matching degree as the optimal layout rule. If there are multiple rules with the same degree of matching, the selection may be made according to priority or weight.

Applying layout rules: once the best layout rule is selected, the system will apply the corresponding layout style according to the rule to ensure that the best user interface is presented on the different devices.

It should be noted that the specific implementation of the matching method can be designed and adjusted according to the actual requirements. The matching process of layout rules may be implemented using techniques such as string matching, pattern matching, rule engines, etc. Meanwhile, rules in the layout rule base can be customized and updated according to actual requirements so as to adapt to different equipment characteristics and layout requirements.

Next, the process goes to step S130.

At step S130, element analysis is performed on the WEB page.

In an embodiment of the present invention, the performing element analysis on the WEB page includes: analyzing the type, importance and content of the element, wherein the method comprises the following steps:

analyzing the image content using computer vision techniques;

More specifically, before determining the order, size, and location of elements, the system first analyzes the individual elements in the page, including the type, importance, content, etc. of the elements.

Element type analysis:

and analyzing the HTML structure of the page by using an HTML analyzer, and identifying the tag type of each element.

Classification is performed according to tag types, such as title elements (h 1-h 6), paragraph elements (p), image elements (img), link elements (a), and the like.

Element type analysis may be implemented using existing HTML parsing libraries or self-developed parsers.

Element importance analysis:

the importance of an element is evaluated based on its position in the page layout. In general, elements located at the top of the page may be more important because they first attract the attention of the user.

The CSS selector or JavascriptDOM operation may be used to obtain location information for an element, such as the vertical position of the element, the position relative to other elements, and so on.

Elements may be given a weight or score based on their location information to indicate their importance.

Element content analysis:

for text elements, natural Language Processing (NLP) techniques may be used to extract and analyze text content. For example, text segmentation, part-of-speech tagging, entity recognition, etc. techniques are used to understand the meaning and structure of text.

For image elements, computer vision techniques may be used to analyze the image content. For example, techniques such as image classification, object detection, image description generation, etc., are used to understand the content and characteristics of the image.

For the link element, the target URL of the link may be parsed, and related information of the page to which the link points, such as a title, description, etc., may be obtained.

Elemental content analysis can be achieved using existing NLP libraries (e.g., NLTK, spaCy) and computer vision libraries (e.g., openCV, tensorFlow).

Next, the process goes to step S140.

At step S140, intelligent arrangement and style adjustment are performed based on the element analysis result and the layout rule.

More specifically, intelligent algorithms are developed to make layout adaptations based on device characteristics, page elements, and user behavior. Techniques such as machine learning, data mining, and pattern recognition are involved to ensure optimal element alignment and user experience.

In the embodiment of the invention, the intelligent arrangement and style adjustment based on the element analysis result and the layout rule comprises the following steps: calculating the arrangement sequence of elements by using an intelligent algorithm based on the element analysis result and the layout rule; adjusting the size and the position of the element according to the layout rule and the element analysis result; operating on the elements according to the decision of the intelligent algorithm, including: reorder elements to meet specific needs, stack elements to save space, or hide unnecessary elements to improve page load speed and sharpness, etc.

As shown in fig. 3, the ranking decision is first made and based on the results of the element analysis and layout rules, the system uses intelligent algorithms to decide the ranking of the elements, including determining which elements should be displayed first on the page and which elements should be displayed subsequently.

And secondly, carrying out size and position adjustment, wherein the system adjusts the size and position of the elements according to layout rules and element analysis results, and the adjustment of the width, height, margin, inner margin and the like of the elements is involved so as to ensure that the layout of the elements on the page accords with rules and user experience.

Finally, element operations (such as reordering, stacking and hiding) are performed, and according to the decision of the intelligent algorithm, the system performs the operations on the elements, including reordering the elements to meet specific requirements, stacking the elements to save space or hiding unnecessary elements to improve page loading speed and definition, etc.

More specifically, data collection: first, the system will collect a large amount of user behavior data and device characteristic data. The user behavior data includes page access records, click behaviors, scroll behaviors, etc. of the user on different devices. The device characteristic data includes screen size, resolution, orientation, and the like.

Feature extraction: based on the collected data, the system performs feature extraction to extract features related to layout adaptation. This may include characteristics of the device characteristics, such as width and height of the screen size, as well as characteristics of the page elements, such as element type, importance, etc.

Data preprocessing: data typically needs to be preprocessed before applying the machine learning algorithm. This may include steps of data cleansing, missing value processing, feature scaling, etc. to ensure quality and consistency of the data.

Model training: next, the system trains the layout adaptation model using machine learning algorithms, such as deep learning, decision trees, support vector machines, and the like. In the training process, the system correlates the features with the corresponding layout results to learn the relationship between the features and the layout.

Model evaluation and optimization: after training is completed, the system evaluates the model to ensure its performance and accuracy. Optimization and adjustment of the model can be performed to enhance the effect of layout adaptation, if desired.

Layout self-adaption: once the model training is complete and pass the assessment, the system will use the model for layout adaptation. According to the equipment characteristics of the user and the page elements, the system predicts the optimal element arrangement mode and adjusts and optimizes in real time according to the user behaviors.

It should be noted that the layout adaptation algorithm is a dynamic process that can be adjusted in real time according to different device and user behaviors.

These steps describe how the system uses intelligent algorithms to adjust and arrange page elements to optimize the layout and rendering of the page based on layout rules and element analysis results. This helps to ensure that pages are presented in an optimal manner on different devices, providing a better user experience.

For example:

element set: e= { E1, E2, E3, }

Calculating position coordinates (x, y) of the element:

for each element e, its position can be expressed as: p (e) = (x, y)

Calculate the importance of the element (importance score):

for each element e, its importance can be expressed as: i (e)

The elements are ordered by importance:

ordered element set: e_isolated=sort (E, key=i, reverse=true),

the size and height (width) of the element are calculated:

for each element e, its size can be expressed as: s (e) = (width, height)

Determining the position coordinates (x, y) of the element:

for each element e, its position may be determined from the layout rules and the positions of the preceding elements: p (E) =calculated_position (e_corrected, E)

Updating the size and position of the visible area:

visible area size: visible_area_size= (visible_width, visible_height)

Visible area position: visible_area_position= (visible_x, visible_y)

The location of the element is updated to accommodate the visible region, and for each element e, if it is outside the visible region, its location is updated to ensure it is within the visible region.

The importance (importance score) of the element is calculated based on the element type, element position, element size, and user behavior.

Element type: different types of elements may have different importance. For example, the title element may be more important than the ordinary paragraph element. A weight may be defined for each element type, the importance of which is assessed according to the element type.

Element position: the location of an element in the page layout may reflect its importance. In general, elements located at the top of the page may be more important because they first attract the attention of the user. The importance of an element may be evaluated based on its vertical position in the page.

Element size: the size of an element can affect its importance. Larger elements may be more attractive and thus may be considered more important. The importance of an element can be assessed in terms of its width and height.

User behavior: the clicking, scrolling and hovering actions of the user may provide clues about the importance of the element.

Updating the size and location of the visible area, including: it is checked whether the position of the element is within the visible region. If the location of the element is already within the visible region, no update is necessary.

If the position of the element exceeds the boundary of the visible region, a new position needs to be calculated according to the position of the element and the size of the visible region.

Visible area size update: the size of the visible region may be determined according to device characteristics and page layout rules. For example, the width and height of the visible region may be determined according to the screen size and resolution of the device. At the same time, page layout rules, such as fixed head or bottom navigation bars, etc., may also be considered to determine the actual size of the viewable area.

Visible area location update: the location of the visible region may be updated according to the scrolling behavior of the user. When the user scrolls the page, the position of the visible area changes accordingly. The distance and direction of the user's scrolling may be obtained by listening to the scrolling event and then updating the location of the visible area based on this information.

Relationship of element position to visible area: in determining the location of an element, the relationship of the element to the visible area needs to be considered. If the element is located entirely within the visible region, its position remains unchanged. If the element is partially or completely outside the visible region, the position of the element within the visible region needs to be calculated according to the layout rules and the scroll position.

Element visibility judgment: based on the location of the element and the size of the visible region, it can be determined whether the element is visible. If an element is completely within the visible region, its visibility is true; if an element is completely outside the visible region, its visibility is false; if the element portion is located within the visible region, its visibility may be determined according to the degree of overlap of the element with the visible region.

More specifically, calculating a new position from the position of the element and the size of the visible region includes:

a. for the horizontal position (x-coordinate) of the element, if the x-coordinate of the element is smaller than the x-coordinate of the visible region, the x-coordinate of the element is updated to the x-coordinate of the visible region to ensure that the element is within the visible region.

b. If the x-coordinate of the element plus the width of the element is greater than the x-coordinate of the visible region plus the width of the visible region, the x-coordinate of the element is updated to the x-coordinate of the visible region plus the width of the visible region minus the width of the element to ensure that the element is within the visible region.

c. For the vertical position (y-coordinate) of the element, if the y-coordinate of the element is less than the y-coordinate of the visible region, the y-coordinate of the element is updated to the y-coordinate of the visible region to ensure that the element is within the visible region.

d. If the y-coordinate of the element plus the height of the element is greater than the y-coordinate of the visible region plus the height of the visible region, the y-coordinate of the element is updated to the y-coordinate of the visible region plus the height of the visible region minus the height of the element to ensure that the element is within the visible region.

Through the above steps, it can be ensured that the position of the element is always within the visible region. Based on the current location of the element and the size of the visible region, a new location of the element can be calculated and updated to the appropriate value.

In an embodiment of the present invention, the method further includes: the layout is adjusted in real time according to the interactive behaviors of the user; dynamically applying CSS style according to device characteristics and layout rules by using media query, flexbox and Grid layout technology; the capability of automatically adapting to new equipment types and screen sizes of the system is realized, the maintenance cost is reduced, and the continuous adaptability of pages is ensured; in the intelligent arrangement and style application process, the page loading speed and performance are considered so as to provide faster user experience; data driven optimization.

More specifically, the interactive adaptation: the dynamic interaction adaptability is realized, the layout is adjusted in real time according to the interaction behavior of the user, and the consistency of user experience is ensured.

Dynamic style application: and using technologies such as media query, flexbox, grid layout and the like, and dynamically applying CSS style according to the device characteristics and layout rules to realize the adaptive arrangement and display of elements.

And (3) automatic maintenance: the system has the capabilities of automatically adapting to new equipment types and screen sizes, reduces maintenance cost and ensures continuous adaptability of pages.

Performance optimization: in the intelligent ranking and style application process, page loading speed and performance are considered to provide a faster user experience.

And (3) user experience design: the user body is checked at the core location, ensuring that a consistent and satisfactory user experience is provided by the adaptive layout.

The layout is adjusted in real time according to the interaction behavior of the user:

the user's interaction events (e.g., clicks, scrolls, touches, etc.) are monitored using JavaScript and related frameworks (e.g., act, vue. Js, etc.).

The position, size or display hidden state of the element is adjusted according to the usage state. The context of user interaction is moved by DOM operation

CSS Transition and Animation are utilized to provide a smooth visual Transition effect for layout changes.

The virtual DOM technology is adopted, and only the part needing to be changed is updated instead of the whole page, so that the response speed is improved.

CSS style is dynamically applied according to device characteristics and layout rules:

different style rules are applied according to different screen sizes and resolutions using CSS media queries.

Responsive designs are implemented using Flexbox and CSS Grid layout techniques, which can accommodate different screen sizes and device types.

Device characteristics (such as horizontal-vertical screen switching) are dynamically detected through JavaScript, and corresponding CSS classes are applied or patterns are directly modified.

The ability to automatically adapt the system to new device types and screen sizes is achieved:

the fluid layout is designed to allow the layout to naturally stretch using relative units (e.g., percentages, em, rem, vw/vh) rather than absolute units (e.g., pixels px).

The adoption of the modularized CSS enables the style to be easy to manage and update, and can be quickly adjusted when being suitable for new equipment.

Modern front end frameworks and libraries are used, which typically incorporate adaptability to new devices.

Implementing a continuous integration and continuous deployment (CI/CD) procedure ensures that the system can iterate quickly and adapt to new device characteristics.

The page loading speed and performance are improved:

optimizing pictures and multimedia content, reducing file size using appropriate formatting and compression techniques.

And by utilizing browser caching, repeated loading of resources is reduced by setting a reasonable caching strategy.

The page components are loaded on demand using code segmentation techniques, reducing initial loading time.

And (3) carrying out delayed loading on non-key resources by adopting a lazy loading technology, and preferentially loading the content in the viewport.

The CDN (content delivery network) is utilized to deliver resources, and delay caused by response time and geographic distance of a server is reduced.

And compressing and combining the CSS and the JavaScript to reduce the number and the size of the HTTP requests.

And the Web works is used for carrying out background processing, so that the blocking of a main thread is avoided, and the page response capability is improved.

And optimizing the key rendering path to ensure that the key content of the page is quickly presented.

Data driven optimization.

Through the whole scheme, the invention can overcome the limitation of the prior art in the aspect of Web page layout self-adaption, and provides a more efficient, automatic and intelligent solution to meet the requirements of equipment and users which are continuously changed.

The self-adaptive method for the layout of the Web page has the following effects:

optimizing user experience: through intelligent algorithm and dynamic style application, pages can be adaptively displayed on different devices, thereby providing a consistent, high quality user experience. The user can obtain the best display effect no matter the user uses the mobile phone, the tablet or the desktop computer to access, the scaling and the rolling are reduced, and the user satisfaction is improved.

Automated layout: the scheme of the invention allows the system to automatically select proper layout rules according to the equipment characteristics, and avoids manually creating a plurality of page versions suitable for different equipment, thereby reducing the workload of development and maintenance.

And the maintenance cost is reduced: because the system can automatically adapt to different devices, developers do not need to create a special layout for each new device, thereby reducing maintenance cost and development period.

Flexibility and adaptability: the intelligent arrangement and style adjustment technology in the scheme enables the page to adapt to the continuously changing equipment characteristics and user requirements. The advent of new devices no longer requires redesign and the system automatically adjusts to accommodate the new situation.

Improving the performance: by optimizing the arrangement and the style, the loading speed and the performance of the page are improved, so that the loading time is shortened, and the response speed of a user is improved.

Data driven optimization: collecting user data and behavior can help to continuously optimize layout and style, make it more fit user needs, and provide better user experience.

Consistent brand image: the layout and the style of the pages can keep the consistent brand image no matter what equipment is used by the user to access the website, and the uniformity of brands is enhanced.

The method is suitable for new technology: the automatic adaptability of the scheme enables the website to more easily cope with new screen technologies, interaction modes and device types, and keep synchronization with the technical development.

And (3) improving the access rate: the optimized user experience and performance can attract more users to access the website and improve the stay time and page browsing amount of the users.

In summary, the beneficial effects brought by the invention cover multiple aspects of user experience, development efficiency, maintenance cost, performance optimization, adaptability and the like, and a more intelligent and efficient solution is provided for the field of Web page layout adaptation.

Fig. 4 shows a Web page layout adaptation system 400 provided by the present invention, comprising a feature detection module 410, a matching module 420, an analysis module 430, and an intelligent ranking module 440.

The characteristic detection module 410 is configured to perform device characteristic detection when a user accesses a WEB page;

the matching module 420 is configured to match the layout rules in the layout rule base based on the device characteristics;

the analysis module 430 is configured to perform element analysis on the WEB page;

the intelligent arrangement module 440 is used for intelligent arrangement and style adjustment based on the element analysis result and the layout rule.

In an embodiment of the present invention, the system further includes:

data driven optimization.

Referring to fig. 5, an embodiment of the present disclosure also provides an electronic device 50, including:

at least one processor; the method comprises the steps of,

a memory communicatively coupled to the at least one processor; wherein,

the memory stores instructions executable by the at least one processor to enable the at least one processor to perform the Web page layout adaptation method of the method embodiments described above.

The disclosed embodiments also provide a non-transitory computer readable storage medium storing computer instructions for causing the computer to perform the Web page layout adaptation method in the foregoing method embodiments.

The disclosed embodiments also provide a computer program product comprising a computer program stored on a non-transitory computer readable storage medium, the computer program comprising program instructions which, when executed by a computer, cause the computer to perform the Web page layout adaptation method of the foregoing method embodiments.

Referring now to fig. 5, a schematic diagram of an electronic device 50 suitable for use in implementing embodiments of the present disclosure is shown. The electronic devices in the embodiments of the present disclosure may include, but are not limited to, mobile terminals such as mobile phones, notebook computers, digital broadcast receivers, PDAs (personal digital assistants), PADs (tablet computers), PMPs (portable multimedia players), in-vehicle terminals (e.g., in-vehicle navigation terminals), and the like, and stationary terminals such as digital TVs, desktop computers, and the like. The electronic device shown in fig. 5 is merely an example and should not be construed to limit the functionality and scope of use of the disclosed embodiments.

As shown in fig. 5, the electronic device 50 may include a processing means (e.g., a central processing unit, a graphics processor, etc.) 501, which may perform various appropriate actions and processes according to a program stored in a Read Only Memory (ROM) 502 or a program loaded from a storage means 508 into a Random Access Memory (RAM) 503. In the RAM 503, various programs and data required for the operation of the electronic device 50 are also stored. The processing device 501, the ROM 502, and the RAM 503 are connected to each other via a bus 504. An input/output (I/O) interface 505 is also connected to bus 504.

In general, the following devices may be connected to the I/O interface 505: input devices 506 including, for example, a touch screen, touchpad, keyboard, mouse, image sensor, microphone, accelerometer, gyroscope, etc.; an output device 507 including, for example, a Liquid Crystal Display (LCD), a speaker, a vibrator, and the like; storage 508 including, for example, magnetic tape, hard disk, etc.; and communication means 509. The communication means 509 may allow the electronic device 50 to communicate with other devices wirelessly or by wire to exchange data. While an electronic device 50 having various means is shown, it should be understood that not all of the illustrated means are required to be implemented or provided. More or fewer devices may be implemented or provided instead.

In particular, according to embodiments of the present disclosure, the processes described above with reference to flowcharts may be implemented as computer software programs. For example, embodiments of the present disclosure include a computer program product comprising a computer program embodied on a computer readable medium, the computer program comprising program code for performing the method shown in the flowcharts. In such an embodiment, the computer program may be downloaded and installed from a network via the communication means 509, or from the storage means 508, or from the ROM 502. The above-described functions defined in the methods of the embodiments of the present disclosure are performed when the computer program is executed by the processing device 501.

It should be noted that the computer readable medium described in the present disclosure may be a computer readable signal medium or a computer readable storage medium, or any combination of the two. The computer readable storage medium can be, for example, but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or a combination of any of the foregoing. More specific examples of the computer-readable storage medium may include, but are not limited to: an electrical connection having one or more wires, a portable computer diskette, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing. In the context of this disclosure, a computer-readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device. In the present disclosure, however, the computer-readable signal medium may include a data signal propagated in baseband or as part of a carrier wave, with the computer-readable program code embodied therein. Such a propagated data signal may take any of a variety of forms, including, but not limited to, electro-magnetic, optical, or any suitable combination of the foregoing. A computer readable signal medium may also be any computer readable medium that is not a computer readable storage medium and that can communicate, propagate, or transport a program for use by or in connection with an instruction execution system, apparatus, or device. Program code embodied on a computer readable medium may be transmitted using any appropriate medium, including but not limited to: electrical wires, fiber optic cables, RF (radio frequency), and the like, or any suitable combination of the foregoing.

The computer readable medium may be contained in the electronic device; or may exist alone without being incorporated into the electronic device.

The computer readable medium carries one or more programs which, when executed by the electronic device, cause the electronic device to: acquiring at least two internet protocol addresses; sending a node evaluation request comprising the at least two internet protocol addresses to node evaluation equipment, wherein the node evaluation equipment selects an internet protocol address from the at least two internet protocol addresses and returns the internet protocol address; receiving an Internet protocol address returned by the node evaluation equipment; wherein the acquired internet protocol address indicates an edge node in the content distribution network.

Alternatively, the computer-readable medium carries one or more programs that, when executed by the electronic device, cause the electronic device to: receiving a node evaluation request comprising at least two internet protocol addresses; selecting an internet protocol address from the at least two internet protocol addresses; returning the selected internet protocol address; wherein the received internet protocol address indicates an edge node in the content distribution network.

Computer program code for carrying out operations of the present disclosure may be written in one or more programming languages, including an object oriented programming language such as Java, smalltalk, C ++ and conventional procedural programming languages, such as the "C" programming language or similar programming languages. The program code may execute entirely on the user's computer, partly on the user's computer, as a stand-alone software package, partly on the user's computer and partly on a remote computer or entirely on the remote computer or server. In the case of a remote computer, the remote computer may be connected to the user's computer through any kind of network, including a Local Area Network (LAN) or a Wide Area Network (WAN), or may be connected to an external computer (for example, through the Internet using an Internet service provider).

The flowcharts and block diagrams in the figures illustrate the architecture, functionality, and operation of possible implementations of systems, methods and computer program products according to various embodiments of the present disclosure. In this regard, each block in the flowchart or block diagrams may represent a module, segment, or portion of code, which comprises one or more executable instructions for implementing the specified logical function(s). It should also be noted that, in some alternative implementations, the functions noted in the block may occur out of the order noted in the figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently, or the blocks may sometimes be executed in the reverse order, depending upon the functionality involved. It will also be noted that each block of the block diagrams and/or flowchart illustration, and combinations of blocks in the block diagrams and/or flowchart illustration, can be implemented by special purpose hardware-based systems which perform the specified functions or acts, or combinations of special purpose hardware and computer instructions.

The units involved in the embodiments of the present disclosure may be implemented by means of software, or may be implemented by means of hardware. The name of the unit does not in any way constitute a limitation of the unit itself, for example the first acquisition unit may also be described as "unit acquiring at least two internet protocol addresses".

It should be understood that portions of the present disclosure may be implemented in hardware, software, firmware, or a combination thereof.

The foregoing is merely specific embodiments of the disclosure, but the protection scope of the disclosure is not limited thereto, and any changes or substitutions that can be easily conceived by those skilled in the art within the technical scope of the disclosure are intended to be covered by the protection scope of the disclosure. Therefore, the protection scope of the present disclosure shall be subject to the protection scope of the claims.

Claims

1. A Web page layout adaptation method, the method comprising the steps of:

when a user accesses a WEB page, detecting the characteristics of equipment;

performing element analysis on the WEB page;

2. The Web page layout adaptation method according to claim 1, wherein the method further comprises:

data driven optimization.

3. The Web page layout adaptation method according to claim 1, wherein the device characteristics include: screen size, resolution, orientation.

4. The Web page layout adaptation method according to claim 1, wherein the matching layout rules in a layout rule base based on the device characteristics comprises:

and applying the layout mode of the optimal layout rule.

5. The Web page layout adaptation method according to claim 1, wherein the performing element analysis on the Web page comprises:

Analyzing the image content using computer vision techniques;

6. The Web page layout adaptation method according to claim 1, wherein the intelligent arrangement and style adjustment based on the element analysis result and the layout rule comprises:

7. A Web page layout adaptation system, the system comprising:

the analysis module is configured to perform element analysis on the WEB page;

8. The Web page layout adaptation system according to claim 7, wherein the system further comprises:

data driven optimization.

9. An electronic device, comprising:

at least one processor; the method comprises the steps of,

a memory communicatively coupled to the at least one processor; wherein,

the memory stores instructions executable by the at least one processor, which when executed by the at least one processor, cause the at least one processor to perform the Web page layout adaptation method of any one of claims 1 to 6.

10. A non-transitory computer-readable storage medium storing computer instructions that, when executed by at least one processor, cause the at least one processor to perform the Web page layout adaptation method of any of claims 1 to 6.