Browser code analysis method and system in credential environment
By detecting web page exceptions on the browser side and sending them to the server for multi-kernel analysis and clustering analysis, marking compatibility issues in the source code and generating layer displays, the problem of inconsistent web page display in different browsers is solved, and efficient and unified display effects are achieved.
Patent Information
- Application Number
- CN202411609302.9
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2024-11-12
- Publication Date
- 2025-02-28
- Estimated Expiration
- Not applicable · inactive patent
AI Technical Summary
The prior art is difficult to achieve a unified web page display effect in different browsers, and it relies on a large amount of programming work and a predefined rule library, resulting in insufficient detection accuracy and high development complexity.
Access the destination web page through the browser and present floating controls, detect exceptions and send web page screenshots and source code to the server. The server uses browsers of different kernels to parse the source code, generates multiple parsed pictures, performs cluster analysis, marks compatibility issues in the source code, and generates layers for display.
It realizes unified display effect in different browsers, reduces manual coding workload, improves detection accuracy and efficiency, and reduces development complexity.
Smart Images

Figure CN119537182A_ABST
Abstract
Description
Technical Field
[0001] The present invention relates to the field of browser technology, and more specifically, to a browser code parsing method and system in an information-based innovation environment. Background Art
[0002] Browser compatibility issues occur when different browsers interpret the same code differently, resulting in inconsistent page display. In most cases, we require consistent display regardless of the browser a user uses to view our website or log in to our system. Existing solutions often rely on extensive code to achieve style compatibility across multiple browsers.
[0003] Prior art 1 (application number: CN201410314265.9) provides a browser compatibility detection method and system. This invention addresses browser compatibility issues and proposes a detection method and system, which mainly provides source code files and custom configuration files, pre-processes source code files and detection rule files, compares the source code with the detection rules in the rule library, finds compatibility issues and generates a detection report. Although prior art 1 can detect compatibility issues in the source code, it only provides a detection method but does not solve the problem, thereby increasing the workload and complexity of developers. In addition, prior art 1 relies on a predefined rule library, which may lead to insufficient detection accuracy, and does not involve the unification of different browser styles and the solution of adaptability issues. Therefore, even if the compatibility problem is detected and solved, the display effect of the end user in different browsers may still be inconsistent.
[0004] Prior art 2 (application number: CN202111418124.8) provides a method and adjustment unit compatible with mainstream browser styles. This invention provides a method compatible with mainstream browser styles. By parsing the source code, it uses the screening of code rules, pre-selection of attributes, and addition of identifiers to perform intelligent adjustment of style attributes, effectively reducing manual participation. During the parsing process, different identifiers are directly set in the browser, and parsing is performed through the identifiers. The parsing method of prior art 2 also requires a lot of programming work, and if different identifiers are not pre-set, the problem cannot be solved.
[0005] In summary, existing technologies all solve the parsing problems of different browsers through pre-programming. Existing technologies require programming developers to study relevant codes in advance, which will lead to different parsing results in different browsers and are heavily dependent on the practice and experience of programming developers. Summary of the Invention
[0006] The technical solution of the present invention provides a browser code parsing method and system in a trusted computing environment to solve the problem of how to improve the unified display effect of web pages in different browsers.
[0007] In order to solve the above problems, the present invention provides a browser code parsing method in a trusted environment, the method comprising:
[0008] Accessing a target web page through a browser, and presenting a floating control after parsing the target web page;
[0009] Detecting the target webpage, and when detecting that the target webpage is abnormal, sending the first image captured and generated from the target webpage and the source code of the target webpage to the server by clicking the floating control;
[0010] Parsing the source code of the target webpage using browsers of different kernels on the server side, and capturing the target webpage displayed after parsing by the browsers of each kernel and generating a second image;
[0011] performing clustering analysis on the plurality of second images by the server, and selecting a category including the largest number of second images;
[0012] selecting a second image from the category with the largest number of second images and comparing it with the first image, determining locations of differences after comparison and locations of the source code of the target webpage corresponding to the locations of the differences, and marking the locations of the source code of the target webpage;
[0013] Based on the marked source code of the target webpage, the differences between the second image and the first image are described using a scripting language that can be parsed by the browser to generate a layer; and the layer is superimposed and displayed on the first image.
[0014] Preferably, the performing clustering analysis on the plurality of second images by the server and selecting the category including the largest number of second images comprises:
[0015] The server performs clustering analysis on the plurality of second images through an unsupervised learning algorithm.
[0016] Preferably, the performing clustering result analysis on the plurality of second images by the server side through an unsupervised learning algorithm includes:
[0017] extracting a feature vector from the second image;
[0018] The feature vectors are clustered using a clustering algorithm, and based on the determined number of clusters K, a plurality of second images in each cluster are obtained.
[0019] Preferably, the clustering algorithm is a K-means clustering algorithm, and clustering the feature vectors by the K-means clustering algorithm includes performing the following steps:
[0020] Step S1: Randomly select K initial cluster centers;
[0021] Step S2: assigning each of the feature vectors to the nearest cluster center;
[0022] Step S3: Calculate the new cluster center of each cluster until there is no more change in the cluster or a predetermined number of iterations is reached;
[0023] The number of clusters K is determined, including:
[0024] Calculate the total sum of square errors of the eigenvectors under different K values;
[0025] The point where the total square error sum reaches the preset threshold is selected as the determined cluster number K.
[0026] Preferably, after determining the locations of the compared differences and the locations of the source code of the target webpage corresponding to the locations of the differences, and marking the locations of the source code of the target webpage, the method further includes:
[0027] The marked source code is saved to the server.
[0028] According to another aspect of the present invention, the present invention provides a browser code parsing system in a trusted environment, the method comprising:
[0029] An initial unit is used to access a target web page through a browser, and the target web page is parsed and then presents a floating control;
[0030] a detection unit, configured to detect the target webpage, and when detecting that the target webpage is abnormal, send the first image captured and generated from the target webpage and the source code of the target webpage to the server by clicking the floating control;
[0031] a parsing unit, configured to parse the source code of the target webpage using browsers of different kernels on the server side, and capture the target webpage displayed after parsing by the browsers of each kernel and generate a second image;
[0032] a clustering unit, configured to perform clustering analysis on the plurality of second images through the server, and select a category including the largest number of second images;
[0033] a comparing unit, configured to select a second image from the category with the largest number of second images and compare it with the first image, determine a location of a difference after comparison and a location of the source code of the target webpage corresponding to the location of the difference, and mark the location of the source code of the target webpage;
[0034] The display unit is used to describe the differences between the second image and the first image using a scripting language that can be parsed by the browser based on the marked source code of the target web page, generate a layer, and overlay the layer on the first image.
[0035] Preferably, the clustering unit is configured to perform clustering result analysis on the plurality of second images through the server, select a category including the largest number of second images, and further configured to:
[0036] The server performs clustering analysis on the plurality of second images through an unsupervised learning algorithm.
[0037] Preferably, the clustering unit is used to perform clustering result analysis on the plurality of second images on the server side using an unsupervised learning algorithm, and is further used to:
[0038] extracting a feature vector from the second image;
[0039] The feature vectors are clustered using a clustering algorithm, and based on the determined number of clusters K, a plurality of second images in each cluster are obtained.
[0040] Preferably, the clustering algorithm is a K-means clustering algorithm, and clustering the feature vectors by the K-means clustering algorithm includes performing the following steps:
[0041] Step S1: Randomly select K initial cluster centers;
[0042] Step S2: assigning each of the feature vectors to the nearest cluster center;
[0043] Step S3: Calculate the new cluster center of each cluster until there is no more change in the cluster or a predetermined number of iterations is reached;
[0044] The number of clusters K is determined, including:
[0045] Calculate the total sum of square errors of the eigenvectors under different K values;
[0046] The point where the total square error sum reaches the preset threshold is selected as the determined cluster number K.
[0047] Preferably, the comparison unit is configured to determine the locations of the differences after comparison and the locations of the source code of the target webpage corresponding to the locations of the differences, and mark the locations of the source code of the target webpage, and further configured to:
[0048] The marked source code is saved to the server.
[0049] The technical solution of the present invention provides a browser code parsing method and system in an information and communication environment, wherein the method includes: accessing a target web page through a browser, and presenting a floating control after the target web page is parsed; detecting the target web page, and when an abnormality is detected in the target web page, sending the first image generated by crawling the target web page and the source code of the target web page to the server by clicking the floating control; parsing the source code of the target web page using browsers with different kernels on the server, and crawling the target web page displayed after parsing by the browser of each kernel and generating a second image; performing clustering result analysis on multiple second images on the server, and selecting the category with the largest number of second images; selecting a second image from the category with the largest number of second images and comparing it with the first image, determining the location of the difference after comparison and the location of the source code of the target web page corresponding to the location of the difference, and marking the location of the source code of the target web page; based on the marked source code of the target web page, describing the difference between the second image and the first image using a scripting language that can be parsed by the browser to generate a layer; and displaying the layer superimposed on the first image. The technical solution of the present invention sends screenshots and source code of web pages with display problems through the browser, and the server side performs classification and judgment and marks them. For problematic codes, the server can also provide a layer to revise the browser display. As the problematic source code data accumulates, the cooperation between the browser and the server can solve the problems of most web page code parsing. BRIEF DESCRIPTION OF THE DRAWINGS
[0050] A more complete understanding of exemplary embodiments of the present invention may be obtained by referring to the following drawings:
[0051] Figure 1 A flow chart of a browser code parsing method in a trusted environment according to a preferred embodiment of the present invention;
[0052] Figure 2 A flowchart of a browser point parsing method in a trusted environment according to a preferred embodiment of the present invention; and
[0053] Figure 3 This is a structural diagram of a browser code parsing system in a trusted computing environment according to a preferred embodiment of the present invention. DETAILED DESCRIPTION
[0054] Exemplary embodiments of the present invention will now be described with reference to the accompanying drawings. However, the present invention may be embodied in many different forms and is not limited to the embodiments described herein. These embodiments are provided to provide a thorough and complete disclosure of the present invention and to fully convey the scope of the present invention to those skilled in the art. The terminology used in the exemplary embodiments shown in the accompanying drawings is not intended to limit the present invention. In the accompanying drawings, identical elements are denoted by the same reference numerals.
[0055] Unless otherwise specified, the terms used herein (including technical terms) have the meanings commonly understood by those skilled in the art. In addition, it is understood that terms defined in commonly used dictionaries should be understood to have the same meanings as those in the context of the relevant fields, and should not be understood as idealized or overly formal meanings.
[0056] Figure 1 This is a flow chart of a browser code parsing method in a trusted computing environment according to a preferred embodiment of the present invention.
[0057] In order to simplify the existing parsing process and avoid developers from having to deal with the complex and changeable code parsing mechanisms between different browser kernels (such as Chrome's Blink, Firefox's Gecko, and old versions of IE's Trident, etc.) to cope with different display results that may appear, this invention also aims to solve the problem that some business systems in the information innovation environment are heavily dependent on the traditional IE kernel interface, causing them to not work properly.
[0058] The present invention ultimately provides a more efficient and easy-to-use solution to reduce the burden on programming developers and improve the unified display effect of web pages in different browsers.
[0059] like Figure 1 As shown, the present invention provides a browser code parsing method in a trusted environment, the method comprising:
[0060] Step 101: accessing a target web page through a browser, and rendering a floating control after parsing the target web page;
[0061] The present invention parses a reservation web page and displays a floating closable control.
[0062] This invention, through the help of business testing and adaptation specialists, presents a floating control when a business system webpage is accessed through a browser. After the page is parsed and rendered, this control allows the user to manipulate it independently. The control's primary function is to serve as a medium for user feedback, instantly identifying issues encountered while browsing the page. If an anomaly is detected, the user simply clicks the "OK" button within the control to easily provide feedback.
[0063] Step 102: Detect the target webpage. When an abnormality is detected on the target webpage, click a floating control to send a first image captured and generated from the target webpage and the source code of the target webpage to the server.
[0064] The present invention sends a page screenshot and source code to the server (the first image). After the browser receives the user's click on the OK button, it captures the displayed web page and generates an image that accurately records the real-time display effect of the web page. The browser sends the image (which can be called the first image) and the source code of the web page to the server.
[0065] Step 103: parsing the source code of the target webpage using browsers of different kernels on the server side, and capturing the target webpage displayed after parsing by the browsers of each kernel and generating a second image;
[0066] Step 104: performing clustering analysis on the plurality of second images on the server side, and selecting a category including the largest number of second images;
[0067] Preferably, clustering results analysis is performed on the plurality of second images by the server, and the category including the largest number of second images is selected, including:
[0068] The server side performs clustering analysis on multiple second images through an unsupervised learning algorithm.
[0069] Preferably, the server performs clustering analysis on the plurality of second images through an unsupervised learning algorithm, including:
[0070] Extracting a feature vector from the second image;
[0071] The feature vectors are clustered using a clustering algorithm, and based on the determined number of clusters K, a plurality of second images in each cluster are obtained.
[0072] Preferably, the clustering algorithm is a K-means clustering algorithm, and the feature vectors are clustered by the K-means clustering algorithm, including:
[0073] S1: Randomly select K initial cluster centers;
[0074] S2: Assign each feature vector to the nearest cluster center;
[0075] S3: Calculate the new cluster center of each cluster until there is no change in the cluster or the predetermined number of iterations is reached;
[0076] The number of clusters K is determined, including:
[0077] Calculate the total sum of square errors of the eigenvectors under different K values;
[0078] The point where the total square error sum reaches the preset threshold is selected as the determined cluster number K.
[0079] The present invention obtains parsing result images from browsers with different cores and classifies them (second images). The server of the present invention parses the source code using browsers with different cores and also takes screenshots of the display after parsing, obtaining second images corresponding to each parsed browser with different cores, each image representing the rendering result of a specific core browser. The server classifies the second images, and the classification purpose is to classify the same images (or images with a similarity greater than a threshold) among multiple second images.
[0080] Image classification can be performed through machine learning, which can be divided into supervised machine learning and unsupervised machine learning.
[0081] (1) Supervised learning
[0082] By training with existing training samples to obtain an optimal model, this model is then used to map all inputs to corresponding outputs. Simple judgments are then made on the outputs to achieve prediction and classification, thus enabling the system to predict and classify unknown data. This is similar to the practice of answering standard questions before taking an exam, which results in higher accuracy than practicing without the answers. Similarly, when children are young, they may not know whether cows and birds belong in the same category. However, as they grow older and gain more knowledge, their mental models become increasingly accurate, and their ability to judge animals becomes increasingly accurate.
[0083] Supervised learning can be divided into regression and classification.
[0084] Regression: Given a set of independent variables X and dependent variables Y, fit a function. These independent variables X are the feature vectors, and the dependent variables Y are the labels. And the values of the labels are continuous, such as LR.
[0085] Classification: Its data set consists of feature vectors X and their labels Y. After you use the data to train a model, you are given a data with only feature vectors but no labels, and asked to find its label. The output result is discrete, such as logistics, SVM, KNN, etc.
[0086] (2) Unsupervised Learning
[0087] Without any prior training samples, modeling is done directly on the data. For example, when people visit an art exhibition, they may know nothing about art, but after viewing multiple works, they can categorize them into different groups. The main algorithm in unsupervised learning is clustering, which aims to group similar objects together. This is achieved primarily by calculating distances between samples and groups. Key algorithms include Kmeans, hierarchical clustering, and the EM algorithm.
[0088] In the present invention, a second unsupervised learning algorithm is used to classify all second images into one or more categories. The server finds the category that includes the largest number of second images and selects the second image from that category for comparison with the first image.
[0089] In the present invention, we use an unsupervised learning algorithm to classify the second image after the browser has parsed it. The specific steps are as follows:
[0090] (1) Feature extraction: First, we extract features from the second image. These features can include the image's color histogram, texture features, edge features, etc. Feature extraction is the basis of unsupervised learning, and the extracted feature vector will be used in the subsequent clustering algorithm.
[0091] (2) Selecting a clustering algorithm: In the present invention, the GWO optimized K-means clustering algorithm is used to cluster the extracted feature vectors. K-means is a commonly used clustering algorithm that divides data points into K clusters through iterative optimization, so that the data points within each cluster are as similar as possible, while the data points between different clusters are as different as possible. The specific steps of the K-means algorithm include:
[0092] √ Randomly select K initial cluster centers.
[0093] √Assign each data point to the nearest cluster center.
[0094] √Calculate the new cluster center for each cluster.
[0095] Repeat the above steps until the cluster center no longer changes or the predetermined number of iterations is reached.
[0096] However, GWO optimizes the K-means clustering algorithm, mainly optimizing the selection of initial cluster centers to avoid falling into local optimal solutions.
[0097] (3) Determine the number of clusters K: The K-means algorithm requires the number of clusters K to be determined in advance. In order to determine the optimal K value, the present invention can use the "Elbow Method". The specific method is:
[0098] √Calculate the Sum of Squared Errors (SSE) for different K values.
[0099] √Select the point where SSE drops significantly as the optimal K value.
[0100] (4) Clustering result analysis: After clustering is completed, the set of images in each cluster can be obtained. For each cluster, we select the category with the largest number of second images and select a second image from this category for comparison with the first image. The specific selection criteria can be images near the cluster center, as these images are the most representative.
[0101] (5) Image comparison and source code marking: The second selected image is compared with the first image to find the differences between the two. Based on these differences, the location of the corresponding web page source code is found and marked. The marked source code is saved on the server for subsequent analysis and processing.
[0102] (6) Layer Generation and Display: Finally, the differences between the second image and the first image are described using a scripting language that can be parsed by the browser, generating a layer. This layer is then displayed over the first image to visually demonstrate the differences. The server also records the correspondence between the browser kernel that parsed the selected second image and the marked source code to facilitate further optimization and improvement.
[0103] (7) Optimization and parameter adjustment
[0104] In order to improve the accuracy and effect of classification, the clustering algorithm can be optimized and parameters adjusted:
[0105] √ Feature selection and optimization: Different features have different effects on clustering results. We can try multiple feature combinations and select the optimal feature set through cross-validation.
[0106] √ Algorithm parameter adjustment: Parameters such as the initial cluster center selection and the number of iterations of the K-means algorithm will affect the clustering effect. Through experiments and verification, the optimal parameter settings can be determined.
[0107] √ Clustering algorithm selection: In addition to K-means, the present invention can also try other clustering algorithms, such as hierarchical clustering or Gaussian mixture model (GMM), and compare their effects to select the algorithm that is most suitable for this technical solution.
[0108] √ Data preprocessing: Preprocessing images, such as normalization and noise reduction, can improve the quality of feature extraction and thus enhance clustering results.
[0109] This invention uses an unsupervised learning algorithm to effectively classify images parsed by different browser kernels, finding the most similar images for comparison, and thus achieving automated compatibility detection and difference marking. This not only improves detection efficiency and accuracy, but also reduces the workload of manual intervention, providing strong support for resolving browser compatibility issues.
[0110] Step 105: Select a second image from the category with the largest number of second images and compare it with the first image, determine the location of the difference after comparison and the location of the source code of the target webpage corresponding to the location of the difference, and mark the location of the source code of the target webpage;
[0111] Preferably, after determining the locations of the compared differences and the locations of the source code of the target webpage corresponding to the locations of the differences, and marking the locations of the source code of the target webpage, the method further includes:
[0112] Save the marked source code to the server.
[0113] The present invention marks the problematic source code and saves the source code. In the present invention, the server selects a second picture from the same picture, compares the selected second picture with the first picture, and finds the differences. According to the differences found, the location of the differences in the source code of the web page is found, and the source code is marked, wherein the marked source code is saved on the server. Figure 2 shown.
[0114] Step 106: Based on the source code of the marked target webpage, describe the differences between the second image and the first image using a scripting language that can be parsed by the browser to generate a layer; and overlay the layer on the first image for display.
[0115] The present invention generates an additional layer. The present invention describes the differences between the second image and the first image using a scripting language that can be parsed by the browser, generating a layer for displaying the result of parsing the scripting language after the description, and the layer is additionally displayed on the first image. The server also records the correspondence between the browser kernel that parsed the selected second image (i.e., the browser kernel that can correctly parse the source code) and the marked source code.
[0116] Through the above-mentioned operation, the server can store a large amount of problematic source code. When a browser parses a webpage and detects that the parsed webpage contains marked code, it will send this marked code back to the server. The server will then search for the browser kernel corresponding to this code and use it to parse it. The parsing results will be generated as a layer that will be superimposed on the webpage displayed by the browser, making it easier for users to view parsing differences and compatibility issues.
[0117] For example, when a user opens a webpage containing complex CSS animation effects in a browser, if the CSS code has previously been marked as having compatibility issues, the browser will automatically send the code to the server. The server will use multiple browser cores to parse it, such as Blink (Chrome core), Gecko (Firefox core), WebKit (Safari core), etc. The server will then generate a layer showing the parsing differences. This layer will be superimposed as a container on the corresponding position of the original webpage, allowing users to intuitively see the rendering effects of different browser cores on the CSS animation.
[0118] Furthermore, the server can also send the saved marked code and the corresponding correct browser kernel to programming tools, such as VS Code or JetBrains IDEs. When users enter source code into the programming tool, if the code contains marked sections, the tool will prompt the user with potential compatibility issues and recommend the optimal browser kernel to use. This prompt mechanism not only helps users avoid potential problems but also improves code compatibility and runtime efficiency.
[0119] Suppose a user writes a web page code containing CSS Grid layout in VS Code:
[0120]
[0121] If these codes behave inconsistently in certain browser kernels, VS Code will pop up the following prompt:
[0122] √ Compatibility Warning: CSS Grid Layout may not be compatible with some older browsers (such as IE 11).
[0123] It is recommended to use a Polyfill or ensure that users are using a modern browser.
[0124] √Best browser kernel: Blink, Gecko, WebKit.
[0125] This prompt mechanism not only helps users avoid potential compatibility issues, but also provides solutions such as using Polyfill or suggesting users to use modern browsers.
[0126] In order to improve the efficiency and accuracy of this process, some new technologies can be introduced:
[0127] WebAssembly (Wasm): Leverage WebAssembly to accelerate browser kernel parsing. WebAssembly is an efficient low-level bytecode format that runs at high speeds across various browsers. This can significantly increase the speed of multi-core parsing of source code on the server.
[0128] √ Deep Learning Model: Use deep learning models to automatically detect and flag potential compatibility issues in source code. For example, a convolutional neural network (CNN) is used to perform image classification on webpage screenshots to automatically identify anomalies in layout or rendering.
[0129] √ Real-time collaboration tools: Integrate real-time collaboration tools such as Microsoft Live Share or CodeSandbox, allowing multiple developers to see compatibility prompts and analysis results at the same time, enhancing team collaboration efficiency.
[0130] With the introduction of these new technologies, the entire system can not only automatically perform compatibility detection and difference marking, but also provide a more efficient and intelligent development support environment to help developers locate and solve problems more quickly.
[0131] In summary, by combining unsupervised learning algorithms with new technologies, the present invention can effectively containerize web pages parsed by different browser kernels and display the parsing differences in the container, thereby achieving automated compatibility detection and difference marking. This not only improves the efficiency and accuracy of detection, but also reduces the workload of manual intervention, providing strong support for resolving browser compatibility issues. By integrating programming tools, real-time prompts and optimization capabilities during the development process are further enhanced, ensuring that developers can identify and resolve potential compatibility issues while coding.
[0132] The present invention reduces manual coding and achieves page compatibility. The present invention provides a graphical interaction method with users, which implements low-code compatibility functions for display issues existing in web pages. The present invention adopts image layering and overlay technology to improve the consistency of display effects. Through interactive communication with users, the server will complete the image classification and screening of elements that cause compatibility issues, providing innovative image layering and overlay technology to achieve a unified effect of page display.
[0133] Figure 3 This is a structural diagram of a browser code parsing system in a trusted computing environment according to a preferred embodiment of the present invention.
[0134] like Figure 3 As shown, the present invention provides a browser code parsing system in a trusted environment, and the method includes:
[0135] Initial unit 301 is used to access a target web page through a browser, and present a floating control after parsing the target web page;
[0136] The detection unit 302 is configured to detect the target web page, and when an abnormality is detected in the target web page, the first image captured and generated from the target web page and the source code of the target web page are sent to the server by clicking a floating control;
[0137] The parsing unit 303 is configured to parse the source code of the target webpage using browsers of different kernels on the server side, and capture the target webpage displayed after parsing by the browsers of each kernel and generate a second image;
[0138] A clustering unit 304 is configured to perform clustering analysis on the plurality of second images through the server, and select a category including the largest number of second images;
[0139] A comparison unit 305 is configured to select a second image from the category with the largest number of second images and compare it with the first image, determine the location of a difference after comparison, and the location of the source code of the target webpage corresponding to the location of the difference, and mark the location of the source code of the target webpage;
[0140] The display unit 306 is configured to describe the differences between the second image and the first image using a scripting language that can be parsed by the browser based on the source code of the marked target webpage, generate a layer, and overlay the layer on the first image for display.
[0141] Preferably, the clustering unit 304 is configured to perform clustering analysis on the plurality of second images through the server, select a category including the largest number of second images, and further configured to:
[0142] The server side performs clustering analysis on multiple second images through an unsupervised learning algorithm.
[0143] Preferably, the clustering unit 304 is configured to perform clustering result analysis on the plurality of second images on the server side using an unsupervised learning algorithm, and is further configured to:
[0144] Extracting a feature vector from the second image;
[0145] The feature vectors are clustered using a clustering algorithm, and based on the determined number of clusters K, a plurality of second images in each cluster are obtained.
[0146] Preferably, the clustering algorithm is a K-means clustering algorithm, and the feature vectors are clustered by the K-means clustering algorithm, including:
[0147] S1: Randomly select K initial cluster centers;
[0148] S2: Assign each feature vector to the nearest cluster center;
[0149] S3: Calculate the new cluster center of each cluster until there is no change in the cluster or the predetermined number of iterations is reached;
[0150] The number of clusters K is determined, including:
[0151] Calculate the total sum of square errors of the eigenvectors under different K values;
[0152] The point where the total square error sum reaches the preset threshold is selected as the determined cluster number K.
[0153] Preferably, the comparison unit 305 is configured to determine the locations of the compared differences and the locations of the source code of the target webpage corresponding to the locations of the differences, and mark the locations of the source code of the target webpage, and further configured to:
[0154] Save the marked source code to the server.
[0155] A browser code parsing system under a trusted computing environment in a preferred embodiment of the present invention corresponds to a browser code parsing method under a trusted computing environment in another preferred embodiment of the present invention, and will not be described in detail here.
[0156] It will be understood by those skilled in the art that the embodiments of the present invention may be provided as methods, systems, or computer program products. Therefore, the present invention may take the form of a complete hardware embodiment, a complete software embodiment, or an embodiment combining software and hardware. Furthermore, the present invention may take the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code. The solutions in the embodiments of the present invention may be implemented in various computer languages, for example, the object-oriented programming language Java and the interpreted scripting language JavaScript.
[0157] The present invention is described with reference to flowcharts and / or block diagrams of methods, devices (systems), and computer program products according to embodiments of the present invention. It should be understood that each process and / or block in the flowcharts and / or block diagrams, as well as combinations of processes and / or blocks in the flowcharts and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing device to produce a machine, so that the instructions executed by the processor of the computer or other programmable data processing device generate instructions for implementing the processes in the flowcharts and / or block diagrams. Figure 1 a process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.
[0158] These computer program instructions may also be stored in a computer readable memory that can direct a computer or other programmable data processing device to work in a specific manner, so that the instructions stored in the computer readable memory produce an article of manufacture comprising an instruction device, which implements the process Figure 1 a process or multiple processes and / or boxes Figure 1 The function specified in one or more boxes.
[0159] These computer program instructions can also be loaded onto a computer or other programmable data processing device so that a series of operational steps are executed on the computer or other programmable device to produce a computer-implemented process, thereby providing the instructions executed on the computer or other programmable device for implementing the process. Figure 1 a process or multiple processes and / or boxes Figure 1 A step that specifies a function in one or more boxes.
[0160] Although the preferred embodiments of the present invention have been described, those skilled in the art may make additional changes and modifications to these embodiments once they have learned the basic creative concept. Therefore, the appended claims are intended to be interpreted as including the preferred embodiments and all changes and modifications that fall within the scope of the present invention.
[0161] Obviously, those skilled in the art may make various changes and modifications to the present invention without departing from the spirit and scope of the present invention. Thus, if such changes and modifications fall within the scope of the claims and their equivalents, the present invention is intended to include such changes and modifications.
[0162] The invention has been described above with reference to a few embodiments. However, it is readily apparent to a person skilled in the art that other embodiments than the ones disclosed above are equally within the scope of the invention, as defined by the appended patent claims.
[0163] Generally, all terms used in the claims are to be interpreted according to their ordinary meaning in the technical field, unless explicitly defined otherwise herein. All references to "a / the [means, component, etc.]" are to be interpreted openly as referring to at least one instance of the means, component, etc., unless explicitly stated otherwise. The steps of any method disclosed herein do not necessarily need to be performed in the exact order disclosed, unless explicitly stated otherwise.
Claims
1. A browser code parsing method in a trusted environment, the method comprising: Accessing a target web page through a browser, wherein the target web page is parsed and a floating control is presented; Detecting the target webpage, and when detecting that the target webpage is abnormal, sending the first image generated by crawling the target webpage and the source code of the target webpage to the server by clicking the floating control; The server uses browsers with different kernels to parse the source code of the target webpage, and captures the target webpage displayed after parsing by the browsers with each kernel and generates a second image; Performing clustering result analysis on the plurality of second images by the server, and selecting a category including the largest number of second images; Select a second image from the category with the largest number of second images and compare it with the first image, determine the position of the difference after comparison and the position of the source code of the target webpage corresponding to the position of the difference, and mark the position of the source code of the target webpage; Based on the marked source code of the target webpage, the difference between the second image and the first image is described using a scripting language that can be parsed by the browser to generate a layer; The layer is overlaid and displayed on the first picture.
2. The method according to claim 1, wherein the server performs clustering analysis on the plurality of second images and selects the category including the largest number of second images, comprising: The server performs clustering result analysis on the plurality of second images through an unsupervised learning algorithm.
3. The method according to claim 2, wherein the step of performing clustering analysis on the plurality of second images by the server using an unsupervised learning algorithm comprises: Extracting a feature vector from the second picture; The feature vectors are clustered by using a clustering algorithm, and based on the determined number of clusters K, a plurality of second pictures in each cluster are obtained.
4. The method according to claim 3, wherein the clustering algorithm is a K-means clustering algorithm, and clustering the feature vectors by the K-means clustering algorithm comprises performing the following steps: Step S1: Randomly select K initial cluster centers; Step S2: assigning each of the feature vectors to the nearest cluster center; Step S3: Calculate the new cluster center of each cluster until there is no change in the cluster or a predetermined number of iterations is reached; in, Determine the number of clusters K, including: Calculate the total sum of square errors of the eigenvectors under different K values; The point where the total square error sum reaches the preset threshold is selected as the determined clustering number K.
5. The method according to claim 1, after determining the position of the compared difference and the position of the source code of the target webpage corresponding to the position of the difference, and marking the position of the source code of the target webpage, further comprises: The marked source code is saved to the server.
6. A browser code parsing system in a trusted environment, the method comprising: The initial unit is used to access the target web page through the browser, and the target web page is parsed and presents a floating control; A detection unit, configured to detect the target webpage, and when detecting that the target webpage is abnormal, send the first image generated by capturing the target webpage and the source code of the target webpage to the server by clicking the floating control; A parsing unit, used to parse the source code of the target webpage by using browsers with different kernels on the server side, and to capture the target webpage displayed after parsing by the browsers with each kernel and generate a second image; A clustering unit, configured to perform clustering result analysis on the plurality of second images through the server, and select a category including the largest number of second images; a comparison unit, configured to select a second image from the category with the largest number of second images and compare it with the first image, determine the position of the difference after comparison and the position of the source code of the target webpage corresponding to the position of the difference, and mark the position of the source code of the target webpage; The display unit is used to describe the difference between the second image and the first image using a scripting language that can be parsed by the browser based on the marked source code of the target web page, generate a layer, and overlay the layer on the first image.
7. The system according to claim 6, wherein the clustering unit is used to perform clustering result analysis on the plurality of second images through the server, select the category including the largest number of second images, and further to: The server performs clustering result analysis on the plurality of second images through an unsupervised learning algorithm.
8. The system according to claim 7, wherein the clustering unit is used to analyze the clustering results of the plurality of second images on the server side by an unsupervised learning algorithm, and is also used to: Extracting a feature vector from the second picture; The feature vectors are clustered by using a clustering algorithm, and based on the determined number of clusters K, a plurality of second pictures in each cluster are obtained.
9. The system according to claim 8, wherein the clustering algorithm is a K-means clustering algorithm, and clustering the feature vectors by the K-means clustering algorithm comprises performing the following steps: Step S1: Randomly select K initial cluster centers; Step S2: assigning each of the feature vectors to the nearest cluster center; Step S3: Calculate the new cluster center of each cluster until there is no change in the cluster or a predetermined number of iterations is reached; in, Determine the number of clusters K, including: Calculate the total sum of square errors of the eigenvectors under different K values; The point where the total square error sum reaches the preset threshold is selected as the determined clustering number K.
10. The system according to claim 6, wherein the comparison unit is used to determine the position of the difference after comparison and the position of the source code of the target webpage corresponding to the position of the difference, and after marking the position of the source code of the target webpage, further used to: The marked source code is saved to the server.
Citation Information
Patent Citations
A browser compatibility detection method and system
CN104156307B
Method and adjusting unit compatible with mainstream browser style
CN114281325A
Webpage compatibility automatic testing method, device and equipment and medium
CN109947637A
Webpage code-oriented visual collection tool
CN113741766A
User behavior mining method and system based on artificial intelligence
CN115062200A