CN110083383A - Browser style compatibility method, device, computer equipment and storage medium - Google Patents
Browser style compatibility method, device, computer equipment and storage medium Download PDFInfo
- Publication number
- CN110083383A CN110083383A CN201910204014.8A CN201910204014A CN110083383A CN 110083383 A CN110083383 A CN 110083383A CN 201910204014 A CN201910204014 A CN 201910204014A CN 110083383 A CN110083383 A CN 110083383A
- Authority
- CN
- China
- Prior art keywords
- file
- browser
- style
- cascading style
- page data
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/60—Software deployment
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/70—Software maintenance or management
- G06F8/71—Version control; Configuration management
Abstract
The invention discloses a kind of browser style compatibility method, device, computer equipment and storage mediums, which comprises obtains the kernel information of browser；The browser page data that server-side is sent are received, and obtain the script file in the browser page data, wherein the script file is for configuring the cascading style list file in the browser page data；The script file is executed, obtains carrying out the cascading style list file target cascading style sheets file with postponing；The browser page data are rendered according to the target cascading style sheets file, obtain objective browser page data；Load the objective browser page data, and the packing objective browser page data in objective browser.During technical solution of the present invention solves browser style compatibility, style matching real-time is poor, the slow problem of matching speed.
Description
Technical field
The present invention relates to field of information processing more particularly to browser style compatibility method, device, computer equipment and deposit
Storage media.
Background technique
Browser at present on the market is many kinds of, and IE browser, the red fox of Mozilla company including Microsoft are clear
Look at device, the Chrome browser of Google company, the Safari browser of Apple Inc., Opera browser and domestic
360 browsers, QQ browser, Cheetah Browser, sogou browser etc..
The core of browser is browser kernel, is also known as rendering engine (Rendering Engine).Browsing
Device kernel is roughly divided into three classes: Trident kernel, Gecko kernel and Webkit kernel.Wherein, using Trident kernel
Browser has IE browser, Cheetah Browser etc.；There is red fox browser etc. using the browser of Gecko kernel；Use Webkit
The browser of kernel has Chrome browser, Safari browser etc..Browser kernel determines how browser shows Web page
The content in face.Due to historical reasons, different browser kernels is based on different standards, therefore, together to the parsing of Web page
One Web page may be rendered into display effect not in specie.For example, the difference for cascading style sheets (CSS) file solves
Analysis, causes and shows inconsistent situation to same Web page, and What is more, and user will be caused to use and meet itself hobby
Browser but can not normally access the case where Web page.
To solve this compatibling problem, developer's different browser of having nothing for it but writes different codes, to realize
Browser style is compatible, but being increasing with navigator product, and the matched real-time of style is poor, and matching speed is slack-off, shadow
User experience is rung, meanwhile, development amount continues to increase, and development cost increases.
Summary of the invention
The embodiment of the present invention provides a kind of browser style compatibility method, device, computer equipment and storage medium, with solution
During certainly browser style is compatible, style matching real-time is poor, the slow problem of matching speed.
A kind of browser style compatibility method, comprising:
Obtain the kernel information of browser；
The browser page data that server-side is sent are received, and obtain the script file in the browser page data,
Wherein, the script file is for configuring the cascading style list file in the browser page data；
The script file is executed, obtains carrying out the cascading style list file target cascading style sheets text with postponing
Part；
The browser page data are rendered according to the target cascading style sheets file, obtain objective browser page number
According to；
Load the objective browser page data, and the packing objective browser page data in objective browser.
A kind of browser style compatible apparatus, comprising:
Acquisition module, for obtaining the kernel information of browser；
Receiving module for receiving the browser page data of server-side transmission, and obtains the browser page data
In script file, wherein the script file be used for in the browser page data cascading style list file carry out
Configuration；
Execution module obtains carrying out the cascading style list file in the mesh with postponing for executing the script file
Mark cascading style list file；
Rendering module obtains mesh for rendering the browser page data according to the target cascading style sheets file
Mark browser page data；
Loading module, for loading the objective browser page data, and in objective browser, packing objective is browsed
Device page data.
A kind of computer equipment, including memory, processor and storage are in the memory and can be in the processing
The computer program run on device, the processor realize above-mentioned browser style compatible parties when executing the computer program
Method.
A kind of computer readable storage medium, the computer-readable recording medium storage have computer program, the meter
Calculation machine program realizes above-mentioned browser style compatibility method when being executed by processor.
Above-mentioned browser style compatibility method, device, computer equipment and storage medium, the deployment script text in server-side
Part, script file is for configuring the cascading style list file in browser page data；Server-side is received by client
The browser page data of transmission, and obtain the script file in browser page data；Perform script file, obtains to described
Cascading style list file is carried out with the target cascading style sheets file postponed；I.e. by script file, with the shape of browser plug-in
Formula is loaded and is executed in client, and real time parsing cascading style list file obtains target cascading style sheets file, and according to target
Cascading style list file renders browser page data, obtains objective browser page data；Load objective browser page number
According to, and the packing objective browser page data in objective browser.That is, browser pattern matching process is placed at client
Reason, improves the real-time and matching speed of pattern matching, alleviates the processing load of server-side, meanwhile, script file function
It is independent, it is sufficiently decoupling with browser page data, it may be convenient to it is convenient for safeguarding by browser page data referencing, it reduces
In the development amount of server-side, development cost is reduced.
Detailed description of the invention
In order to illustrate the technical solution of the embodiments of the present invention more clearly, below by institute in the description to the embodiment of the present invention
Attached drawing to be used is needed to be briefly described, it should be apparent that, the accompanying drawings in the following description is only some implementations of the invention
Example, for those of ordinary skill in the art, without any creative labor, can also be according to these attached drawings
Obtain other attached drawings.
Fig. 1 is an application environment schematic diagram of browser style compatibility method in one embodiment of the invention；
Fig. 2 is the flow chart of browser style compatibility method in one embodiment of the invention；
Fig. 3 is the flow chart of step S3 in browser style compatibility method in one embodiment of the invention；
Fig. 4 is another flow chart of step S3 in browser style compatibility method in one embodiment of the invention；
If Fig. 5 is that network speed is less than or equal to preset threshold in browser style compatibility method in one embodiment of the invention
When, obtain the flow chart of target cascading style sheets file；
Fig. 6 is the flow chart of step S33 in browser style compatibility method in one embodiment of the invention；
Fig. 7 is literary according to the first script file and preset configuration in browser style compatibility method in one embodiment of the invention
The size of part obtains the flow chart of target cascading style sheets file；
Fig. 8 is the schematic diagram of browser style compatible apparatus in one embodiment of the invention；
Fig. 9 is the schematic diagram of computer equipment in one embodiment of the invention.
Specific embodiment
Following will be combined with the drawings in the embodiments of the present invention, and technical solution in the embodiment of the present invention carries out clear, complete
Site preparation description, it is clear that described embodiments are some of the embodiments of the present invention, instead of all the embodiments.Based on this hair
Embodiment in bright, every other implementation obtained by those of ordinary skill in the art without making creative efforts
Example, shall fall within the protection scope of the present invention.
Browser style compatibility method provided by the invention, can be applicable in the application environment such as Fig. 1, wherein Yong Hutong
Cross the Web page on the browser access internet in client；Server-side is to provide the server or server set of Web service
Group, client specifically can be various computer terminals, including but not limited to various personal computers, laptop,
Smart phone, tablet computer and portable wearable device；By network connection between client and server-side, network be can be
Finite element network or wireless network.Browser style compatibility method provided in an embodiment of the present invention is applied to client.
In one embodiment, as shown in Fig. 2, providing a kind of browser style compatibility method, specific implementation flow packet
Include following steps:
S1: the kernel information of browser is obtained.
The kernel information of browser mainly includes the type of browser kernel, and browser kernel type refers in Trident
Core, Gecko kernel and Webkit kernel etc..According to the technical standard of browser, browser is provided with API
(Application Programming Interface, application programming interface) interface can make to take by api interface
The information for the browser that business end is known to access, version number and kernel information including browser.
Specifically, client calls navigator object acquisition browser information by JavaScript script.Wherein,
JavaScript script, abbreviation JS script is a kind of literal translation formula, regime type, weak type, the scripting language based on prototype,
The function of dynamic interaction can be brought to webpage using JavaScript.The userAgent attribute of navigator object is one
Read-only character string, it states the value in browser for user agent's head of HTTP request, can be obtained according to this value
The kernel information of browser.For example, it is clear to can detecte this by method navigator.userAgent.indeOf (String)
Look at device title whether be variable string represent title.If method navigator.userAgent.indeOf (' IE8 ')
Value be not -1, then represent the browser as the IE browser based on Trident kernel, and version number be 8, obtained browser
Core type be " Trident "；If the value of navigator.userAgent.indeOf (' firefox ') is not -1, generation
The table browser is the red fox browser based on Gecko kernel, and obtained browser kernel information is character string " Gecko ".
S2: receiving the browser page data that server-side is sent, and obtain the script file in browser page data,
In, script file is for configuring the cascading style list file in browser page data.
Cascading style list file, i.e. CSS file, cascading style list file, full name in English CascadingStyle
Sheets is a kind of file for showing the making language documents pattern such as HTML or XML.CSS not only can be modified statically
Webpage can also cooperate various scripting languages to be dynamically formatted to webpage each element.CSS simplifies the format generation of webpage
Code, external style sheet can be also stored in caching by browser, accelerated the speed of downloading display, decreased and need to upload
Code quantity.
Browser page data are the Web page that server-side is sent, including html file, XML file, CSS file, picture
File, client script file etc..
Script file is to be deployed in server-side, and the client script file of client is downloaded to from server-side, common
Client script file such as JavaScript script.Client is by perform script file, to the layer in browser page data
Stacking style table file is configured, to obtain the target cascading style sheets file that browser can be rendered and be loaded.
By taking JavaScript script as an example, JavaScript can be cited in the label of html file, and browser exists
It can deal with to JavaScript script when parsing HTML.Wherein, way of reference includes two kinds:
(1) internal reference is directly quoted in html file, by JavaScript sentence be added to label to <
Script type></script>under；
(2) external reference, i.e., in label pair<script type></script>the lower chain ground connection for introducing JavaScript
Location, the storage location in server-side where the first script file of direction of chained address.
Preferably, for, to realize easy to maintain, JavaScript foot sufficiently decoupling with other browser page data
This reference is cited as leading with outside.
Specifically, it after client receives the browser page data that server-side is sent, parses, obtains since html file
Take label pair in html file<script type></script>in script file, if label centering includes script file
Chained address, then the position Download Script file being directed toward from chained address.
It is to be appreciated that including at least one JavaScript script in HTML, then script file can be by several
JavaScript script composition, is provided commonly for configuring the cascading style list file in browser page data.
S3: perform script file obtains carrying out cascading style list file the target cascading style sheets file with postponing.
Client executing script file obtains carrying out cascading style list file the target cascading style sheets text with postponing
Part.
Specifically, since script file can be made of several sub- scripts, then client can be different by executing
Sub- script in different ways configures cascading style list file, to obtain the mesh that browser can be rendered and be loaded
Mark cascading style list file.For example, client can directly solve the cascading style list file in browser page data
Analysis；Alternatively, client can obtain the target to match with the kernel information of browser stacking by presetting uniform resource address
Stylesheet files.
S4: browser page data are rendered according to target cascading style sheets file, obtain objective browser page data.
Wherein, client includes to html file to the rendering of browser page data according to target cascading style sheets file
It is parsed, obtains document object tree；Then document object tree constructs render tree to get target on a web browser to be shown is arrived
Browser page data.Its detailed process, may include steps of:
(1) html file is parsed, and constructs dom tree；
Document object tree is the standard programming interface of the expansible markup language of processing of W3C Organisation recommendations.DOM can be with
A kind of mode independently of platform and language accesses and modifies the content and structure of a document, it is to indicate and handle one
The common method of HTML or XML document.
Specifically, client obtains each layer of label in html file, by obtained mark by successively parsing html file
Label constitute the document object tree that ectonexine relationship forms tree structure, i.e. dom tree.
(2) dom tree is combined to construct render tree；
Render tree, i.e. Render Tree are product of the dom tree in conjunction with CSS rule tree.Wherein, CSS rule tree, i.e.,
CSS Rule Tree is the tree form data structure that will be obtained after cascading style sheets document analysis.
Specifically, if a CSS representation of file are as follows:
doc{display:block；text-indent:1em；}
title{display:block；font-size:3em；}
para{display:block；}
Wherein, doc, title, para have respectively corresponded the title of three nodes in dom tree, the representative in symbol " { } "
The corresponding CSS rule of DOM node.
It is three CSS rules are corresponding with DOM node and be associated storage in a manner of tree structure by parsing, it obtains
To render tree, i.e. objective browser page data.
S5: load objective browser page data, and the packing objective browser page data in objective browser.
Client loads objective browser page data, i.e., is laid out to objective browser page data, to be suitable for
A variety of different browsers, and the objective browser page data after layout is drawn, so that user sees on the screen
The display effect arrived.Its detailed process includes the following steps:
(1) it is laid out render tree；
Client recurrence down since the top label of render tree, calculates position of each node in screen, claims
For layout (layout).Wherein, it if some node is changed in dom tree, needs to render again, then this mistake to retract
Journey is referred to as to flow back (reflow).The process of Reflow is divided into asynchronous and synchronous two kinds again.For example, if having modified the sample of node
Formula, browser kernel can't reflow at once, but such operation can be saved bit by bit a batch, then be a reflow, this
It is the asynchronous reflow or asynchronous reflow of increment.If only redefining window size, the font for changing page fault etc.,
For these operations, client can carry out reflow at once, this is synchronous reflow, to improve the speed of browser loading page
Degree.
Specifically, for client since the top label of render tree, such as<htm>label traverses each section in render tree
Point is completed to be laid out with this.Wherein, ergodic process is divided into breadth traversal and extreme saturation again.Range or depth time are used in traversal
Going through algorithm will affect rendering speed, that is, loads the speed of Web page, can be customized according to the display content of actual pages.
(2) render tree after layout is drawn；
Client can call Native GUI interface to the drafting of the render tree after layout.Wherein, NativeGUI interface
Refer to that the GUI interface of native operating sys-tern, GUI, that is, graphical user interface, i.e. GraphicalUser Interface refer to and adopt
The computer operation user interface graphically shown.Different operating system has different GUI interfaces, such as Windows system
System and the GUI interface between Mac OS, linux system are all different.
Specifically, client will be drawn render tree is as input, can be with by the GUI interface of call operation system
Web page to be shown is plotted on indicator screen.
In the present embodiment, script file is disposed in server-side, script file is used for in browser page data
Cascading style list file is configured；The browser page data that server-side is sent are received by client, and obtain browser page
Script file in face data；Perform script file obtains carrying out the cascading style list file target stacking with postponing
Stylesheet files；It i.e. by script file, loads and executes in client in the form of browser plug-in, sample is laminated in real time parsing
Formula list file obtains target cascading style sheets file, and renders browser page data according to target cascading style sheets file, obtains
To objective browser page data；Load objective browser page data, and the packing objective browser page in objective browser
Face data.That is, browser pattern matching process is placed on client process, the real-time and matching speed of pattern matching are improved
Degree, alleviates the processing load of server-side, meanwhile, script file functional independence is sufficiently decoupling with browser page data, can
It is convenient for safeguarding with easily by browser page data referencing, reduce the development amount in server-side, reduce exploitation at
This.
Further, in one embodiment, it as shown in figure 3, being directed to step S3, i.e. perform script file, obtains to stacking
Stylesheet files are carried out with the target cascading style sheets file postponed, wherein script file includes the first script file, the first foot
This document is used to parse the cascading style list file in browser page data；The process that cascading style list file is configured
Specifically comprise the following steps:
S31: the first script file is executed, the Style Attributes information in cascading style list file is obtained.
First script file is deployed in server-side, specifically can be JavaScript script.
Style Attributes information includes Style Attributes name and Style Attributes value.For example, in a cascading style list file, one
Section CSS sentence can indicate are as follows:
div{transform:rotate(7deg)}
body{background-color:yellow}
h1{background-color:red}
h2{background-color:transparent}
Wherein, div, body, h1, h2 are the label in html file respectively, and div represents a paragraph, and body represents whole
The document content of a html file, h1 represent the title 1 of html file, and h2 represents the title 2 of html file；transform:
Rotate, background-color are Style Attributes names, and 7deg, yellow, red and transparent represent Style Attributes
Value, transform:rotate representative can rotate element div, background-color representative element body, h1, h2
Background color, be yellow, red and Transparent color respectively.
Parsing to cascading style list file is completed by CSS resolver.The all built-in CSS parsing of current browser
Device.Different browser kernels built-in CSS resolver be also slightly different.For example, CSS standard pattern attribute
" transform " will be resolvable to "-webkit-transform " in Chrome browser, will be solved in IE browser
Analyse into "-ms-transform ".Just because of these differences, according to the html file of the same CSS file layout, in Chrome
The different pages may be presented in browsing and IE browser.
Specifically, the first script of client executing parses cascading style list file, obtains Style Attributes name and sample
Formula attribute value.Shown in example as above, the Style Attributes parsed entitled transform:rotate and background-color,
Style Attributes value is 7deg, yellow, red and transparent
S32: the Style Attributes information in cascading style list file is modified as obtaining with the value of browser kernel information matches
To target cascading style sheets file.
It include the Style Attributes information with browser kernel information matches in first script file.For example, being directed to pattern
Attribute-name " transform ", the corresponding Style Attributes of browser based on Trident kernel are entitled "-ms-transform "；Base
It is entitled "-webkit-transform " in the corresponding Style Attributes of the browser of Webkit kernel；Browsing based on Gecko kernel
The corresponding Style Attributes of device are entitled "-moz-transform ".
Specifically, if the Style Attributes in cascading style list file are entitled " transform ", if detecting is chrome
Style Attributes name " transform " is then substituted for "-webkit-transform " by browser, if detecting is IE browser,
Then Style Attributes name " transform " is substituted for "-ms-transform " etc., and so on.Cascading style after modified
It is target cascading style sheets file in list file.
In the present embodiment, client obtains pattern therein by way of parsing to cascading style list file
Then Style Attributes information in cascading style list file is modified as the value with browser kernel information matches by attribute information,
Target cascading style sheets file is obtained, is realized in client real time parsing, compatible function, improves pattern matching in real time
Real-time and matching speed.
Further, in one embodiment, as shown in figure 4, being directed to step S3, that is, the script file is executed, is obtained pair
The cascading style list file is carried out with the target cascading style sheets file postponed, wherein script file further includes the second script
File, the second script are used to obtain the network speed between browser and server-side；Cascading style list file is configured
Process specifically comprises the following steps:
S33: the second script file is executed, the network speed between browser and server-side is obtained.
Second script is the client's end feet for being deployed in server-side and downloading to client from server-side as the first script
This document.It is with the difference of the first script, the second script is used to obtain the network speed between browser and server-side.Browsing
The network speed between network speed namely client and server-side between device and server-side.
Specifically, the second script of client executing calculates the time that browser obtains a picture file from server-side, and
The network speed between browser and server-side is calculated according to the size of picture file.For example, if the picture file of server-side
Size is 50K, and browser is 0.5 second from the time that server-side obtains the picture, then can calculate browser and server-side it
Between network speed be 100K.
S34: if network speed is greater than preset threshold speed, out of the acquisition of default uniform resource address and browser
The target cascading style sheets file that nuclear information matches.
Preset threshold speed is used to judge the critical value of the network speed between browser and server-side.Preferably, in advance
If threshold speed be set as 100M.
Default uniform resource address, i.e., preset network address, for store and the kernel information of browser matches
Target cascading style sheets file.Wherein, default uniform resource address is also possible to the address of server-side.
The target cascading style sheets file to match with the kernel information of browser is classified according to different browsers kernel
Target cascading style sheets file.For example, having in default uniform resource address for the cascading style list file that server-side provides
The corresponding target cascading style sheets file suitable for all kinds of browser kernels.
Specifically, client detects that network speed is greater than preset threshold speed, then under default uniform resource address
The target cascading style sheets file to match with the kernel information of browser is carried, and replaces former cascading style list file.
In the present embodiment, the second script file of client executing obtains the network between current browser and server-side
Speed；If network speed is greater than pre-set velocity threshold value, from the kernel information phase of default uniform resource address downloading and browser
Matched target cascading style sheets file, and replace former cascading style list file；It realizes in the case where network speed allows, directly
The target cascading style sheets file to match with the kernel information of browser is obtained from default uniform resource address, to skip visitor
Family end parses the step of cascading style sheets file, has not only improved the processing speed of the page, but also mitigate the processing pressure of client.
Further, in one embodiment, client can be in conjunction with the first script file and the second script file to browsing
Cascading style list file in device page data is configured, and obtains carrying out cascading style list file the target stacking with postponing
Stylesheet files.
Specifically, client obtains wire-speed detection script from browser page data, and executes wire-speed detection script.
Wherein, wire-speed detection script is used to obtain the network speed between browser and server-side；If network speed is greater than
Preset threshold speed then obtains the target cascading style to match with the kernel information of browser from default uniform resource address
List file；If network speed is less than or equal to preset threshold, the first script file is executed, is obtained in cascading style list file
Style Attributes information；And the Style Attributes information in cascading style list file is modified as and browser kernel information matches
Value, obtains target cascading style sheets file.
Alternatively, client can also obtain mesh by following embodiment when network speed is less than or equal to preset threshold
Mark cascading style list file.
Further, in one embodiment, as shown in figure 5, after step S33, that is, the second script file is being executed, obtained
To after the network speed between browser and server-side, can also include the following steps:
S35: if network speed is less than or equal to preset threshold, preset configuration text is obtained from default uniform resource address
Part.
It include the text file with the value of Style Attributes information matches in preset configuration file.
Preset configuration file can be stored in the form of JSON format.Wherein, JSON (JavaScript
ObjectNotation, JS object numbered musical notation) be a kind of lightweight data interchange format.JSON file is with ASCII coding staff
Formula storage, independent of operating system, quickly it can be read or be generated by computer program, be a kind of data exchange of prevalence
Format.
For example, a preset configuration file can indicate are as follows:
Wherein, Trident kernel, Webkit kernel, the corresponding value of Gecko kernel are respectively suitable for respective core type
Style Attributes name.
S36: using the value in preset configuration file with Style Attributes information matches, to the pattern in cascading style list file
Attribute information is replaced, and obtains target cascading style sheets file.
In preset configuration file and in the value of Style Attributes information matches, that is, step S10, different browsers core type pair
The value answered.
Specifically, client is when traversing cascading style list file, according to Style Attributes information from preset configuration file
Matching Style Attributes name is found, and is replaced, to obtain target cascading style sheets file.
In the present embodiment, due to the limited amount of incompatible Style Attributes name, the size of preset configuration file
Usually it is less than the size of target cascading style sheets file, so when network speed is less than or equal to preset threshold, client
Obtain preset configuration file from default uniform resource address, and using in preset configuration file with Style Attributes information matches
Value, is replaced the Style Attributes information in cascading style list file, so that can also obtain to the processing of the page fast with network speed
When same processing speed.
Further, in one embodiment, as shown in fig. 6, being directed to step S33, that is, the second script file is executed, is obtained clear
The network speed look between device and server-side, can specifically include following steps:
S331: the second script file is executed with prefixed time interval, obtaining one group includes between browser and server-side
The vector of network speed.
Wherein, prefixed time interval obtains the network between browser and server-side for client with Fixed Time Interval
Speed obtains the network speed in a period of time.The network speed that different time points are got constitutes one group of vector.Vector is specific
It can be by interim array representation.
Specifically, client can be expressed as every 1 second the second script file of execution, obtained network speed vector
[85,80,25,81,83,79,80,82...], it can be seen that, network speed is most of 80 or so, can be represented currently with this
Network state between browser and server-side.
S332: the average value of vector is calculated, and using average value as the network speed between browser and server-side.
Specifically, client can calculate the weighted average or arithmetic mean of instantaneous value of vector, and using average value as browsing
Network speed between device and server-side.
In the present embodiment, client executes the second script with prefixed time interval, carries out to the network speed got
Average computation, can to avoid network instantaneous velocity it is inconsistent caused by error, improve from default uniform resource address obtain file
Stability.
Further, in one embodiment, as shown in fig. 7, after step S33, that is, the second script file is being executed, obtained
Specifically further include following steps to after the network speed between browser and server-side:
S37: the file size of the first script file and the file size of preset configuration file are obtained respectively.
The chained address of first script file and preset configuration file may each comprise in browser page data, i.e., clear
Look at may include in device page data the first script file, the second script file and preset configuration file chained address.
Specifically, client can obtain the chain ground connection of the first script file and preset configuration file from html file
Then location obtains the file size of the first script file and the file size of preset configuration file with chained address；It can also be from
It is obtained in the label for the html file made an appointment.
S38: if the file size of the first script file is greater than the file size of preset configuration file, and network speed is small
In or be equal to preset threshold, then obtain preset configuration file from default uniform resource address, and using in preset configuration file with
The value of Style Attributes information matches is replaced the Style Attributes information in cascading style list file, obtains target stacking sample
Formula list file.
If the file size of the first script file is greater than the file size of preset configuration file, client downloads the are represented
The time of one script file cost will be more than the time that downloading preset configuration file is spent, therefore, and client is provided from default unification
Source address obtains preset configuration file, and using the value in preset configuration file with Style Attributes information matches, to cascading style
Style Attributes information in list file is replaced, and obtains target cascading style sheets file.
S39: if the file size of the first script file is less than or equal to the file size of preset configuration file, and network
Speed is less than or equal to preset threshold, then the first script file is obtained from browser page data, executes the first script file,
Obtain the Style Attributes information in cascading style list file, and by the Style Attributes information in cascading style list file be modified as with
The value of browser kernel information matches obtains target cascading style sheets file.
If the file size of the first script file is less than or equal to the file size of preset configuration file, client is represented
The time for downloading the cost of the first script file is less than the time that downloading preset configuration file is spent, and therefore, client is then from clear
It lookes in device page data and obtains the first script file, execute the first script file, obtain the pattern category in cascading style list file
Property information, and the Style Attributes information in cascading style list file is modified as the value with browser kernel information matches, it obtains
Target cascading style sheets file.
In the present embodiment, the case where being less than or equal to preset threshold for network speed, client is to the first script text
The file size of part and preset configuration file is compared, and client is downloaded in advance according to size relation by network
It is more preferably selected if being made between configuration file, local parsing cascading style list file, further increases Web page processing speed.
It should be understood that the size of the serial number of each step is not meant that the order of the execution order in above-described embodiment, each process
Execution sequence should be determined by its function and internal logic, the implementation process without coping with the embodiment of the present invention constitutes any limit
It is fixed.
In one embodiment, a kind of browser style compatible apparatus is provided, the browser style compatible apparatus and above-mentioned reality
Browser style compatibility method in example is applied to correspond.As shown in figure 8, the browser style compatible apparatus includes acquisition module
81, receiving module 82, execution module 83, rendering module 84 and loading module 85.Detailed description are as follows for each functional module:
Acquisition module 81, for obtaining the kernel information of browser；
Receiving module 82 for receiving the browser page data of server-side transmission, and obtains in browser page data
Script file, wherein script file is for configuring the cascading style list file in browser page data；
Execution module 83 is used for perform script file, obtains carrying out cascading style list file the target stacking with postponing
Stylesheet files；
Rendering module 84 obtains target browsing for rendering browser page data according to target cascading style sheets file
Device page data；
Loading module 85, for loading objective browser page data, and the packing objective browser in objective browser
Page data.
Further, execution module 83, comprising:
First implementation sub-module 831 obtains the Style Attributes in cascading style list file for executing the first script file
Information；
Submodule 832 is updated, for the Style Attributes information in cascading style list file to be modified as and browser kernel
The value of information matches obtains target cascading style sheets file；
Further, execution module 83, further includes:
Second implementation sub-module 833 obtains the network speed between browser and server-side for executing the second script file
Degree；
First replacement submodule 834, if being greater than preset threshold speed for network speed, from default unified resource
Location obtains the target cascading style sheets file to match with the kernel information of browser.
Further, execution module 83, further includes:
First file acquisition submodule 835, if being less than or equal to preset threshold for network speed, from default unified money
Source address obtains preset configuration file；
First matched sub-block 836, for using the value in preset configuration file with Style Attributes information matches, to stacking
Style Attributes information in stylesheet files is replaced, and obtains target cascading style sheets file.
Further, the second implementation sub-module 833, comprising:
Timing unit 8331, for executing second script file with prefixed time interval, it includes described for obtaining one group
The vector of network speed between browser and the server-side；
Computing unit 8332, for calculating the average value of the vector, and using the average value as the browser with
Network speed between the server-side.
Further, execution module 83, further includes:
Second file acquisition submodule 837, for obtaining the file size and preset configuration text of the first script file respectively
The file size of part；
Second replacement submodule 838, if being greater than the file of preset configuration file for the file size of the first script file
Size, and network speed is less than or equal to preset threshold, then obtains preset configuration file from default uniform resource address, and make
With the value in preset configuration file with Style Attributes information matches, the Style Attributes information in cascading style list file is replaced
It changes, obtains target cascading style sheets file；
Second matched sub-block 839, if the file size for the first script file is less than or equal to preset configuration file
File size, and network speed be less than or equal to preset threshold, then obtained from browser page data the first script text
Part executes the first script file, obtains the Style Attributes information in cascading style list file, and will be in cascading style list file
Style Attributes information is modified as the value with browser kernel information matches, obtains target cascading style sheets file.
Specific restriction about browser style compatible apparatus may refer to above for browser style compatibility method
Restriction, details are not described herein.Modules in above-mentioned browser style compatible apparatus can be fully or partially through software, hard
Part and combinations thereof is realized.Above-mentioned each module can be embedded in the form of hardware or independently of in the processor in computer equipment,
It can also be stored in a software form in the memory in computer equipment, execute the above modules in order to which processor calls
Corresponding operation.
In one embodiment, a kind of computer equipment is provided, which can be terminal, internal structure
Figure can be as shown in Figure 9.The computer equipment includes processor, the memory, network interface, display connected by system bus
Screen and input unit.Wherein, the processor of the computer equipment is for providing calculating and control ability.The computer equipment is deposited
Reservoir includes non-volatile memory medium, built-in storage.The non-volatile memory medium is stored with operating system and computer journey
Sequence.The built-in storage provides environment for the operation of operating system and computer program in non-volatile memory medium.The calculating
The network interface of machine equipment is used to communicate with external server by network connection.When the computer program is executed by processor with
The step of realizing client in a kind of browser style compatibility method.
In one embodiment, a kind of computer equipment is provided, including memory, processor and storage are on a memory
And the computer program that can be run on a processor, processor realize browser formula in above-described embodiment when executing computer program
The step of sample compatibility method, such as step S1 shown in Fig. 2 to step S5.Alternatively, processor is realized when executing computer program
The function of each module/unit of browser style compatible apparatus in above-described embodiment, such as module 81 shown in Fig. 8 is to module 85
Function.To avoid repeating, which is not described herein again.
In one embodiment, a computer readable storage medium is provided, computer program, computer program are stored thereon with
Browser style compatibility method in above method embodiment is realized when being executed by processor, alternatively, the computer program is processed
The function of each module/unit in browser style compatible apparatus in above-mentioned apparatus embodiment is realized when device executes.To avoid repeating,
Which is not described herein again.
Those of ordinary skill in the art will appreciate that realizing all or part of the process in above-described embodiment method, being can be with
Relevant hardware is instructed to complete by computer program, the computer program can be stored in a non-volatile computer
In read/write memory medium, the computer program is when being executed, it may include such as the process of the embodiment of above-mentioned each method.Wherein,
To any reference of memory, storage, database or other media used in each embodiment provided by the present invention,
Including non-volatile and/or volatile memory.Nonvolatile memory may include read-only memory (ROM), programming ROM
(PROM), electrically programmable ROM (EPROM), electrically erasable ROM (EEPROM) or flash memory.Volatile memory may include
Random access memory (RAM) or external cache.By way of illustration and not limitation, RAM is available in many forms,
Such as static state RAM (SRAM), dynamic ram (DRAM), synchronous dram (SDRAM), double data rate sdram (DDRSDRAM), enhancing
Type SDRAM (ESDRAM), synchronization link (Synchlink) DRAM (SLDRAM), memory bus (Rambus) direct RAM
(RDRAM), direct memory bus dynamic ram (DRDRAM) and memory bus dynamic ram (RDRAM) etc..
It is apparent to those skilled in the art that for convenience of description and succinctly, only with above-mentioned each function
Can unit, module division progress for example, in practical application, can according to need and by above-mentioned function distribution by different
Functional unit, module are completed, i.e., the internal structure of described device is divided into different functional unit or module, more than completing
The all or part of function of description.
Embodiment described above is merely illustrative of the technical solution of the present invention, rather than its limitations；Although referring to aforementioned reality
Applying example, invention is explained in detail, those skilled in the art should understand that: it still can be to aforementioned each
Technical solution documented by embodiment is modified or equivalent replacement of some of the technical features；And these are modified
Or replacement, the spirit and scope for technical solution of various embodiments of the present invention that it does not separate the essence of the corresponding technical solution should all
It is included within protection scope of the present invention.
Claims (10)
1. a kind of browser style compatibility method, which is characterized in that the browser style compatibility method includes:
Obtain the kernel information of browser；
The browser page data that server-side is sent are received, and obtain the script file in the browser page data, wherein
The script file is for configuring the cascading style list file in the browser page data；
The script file is executed, obtains carrying out the cascading style list file target cascading style sheets file with postponing；
The browser page data are rendered according to the target cascading style sheets file, obtain objective browser page data；
Load the objective browser page data, and the packing objective browser page data in objective browser.
2. browser style compatibility method as described in claim 1, which is characterized in that the script file includes the first script
File, first script file are used to parse the cascading style list file in the browser page data；The execution institute
Script file is stated, obtains carrying out the cascading style list file target cascading style sheets file with postponing, comprising:
First script file is executed, the Style Attributes information in the cascading style list file is obtained；
The Style Attributes information in the cascading style list file is modified as and the browser kernel information matches
Value, obtains target cascading style sheets file.
3. browser style compatibility method as claimed in claim 2, which is characterized in that the script file further includes crus secunda
This document, wherein second script is used to obtain the network speed between the browser and the server-side；The execution
The script file obtains carrying out the cascading style list file target cascading style sheets file with postponing, further includes:
Second script file is executed, the network speed between the browser and the server-side is obtained；
If the network speed is greater than preset threshold speed, out of the acquisition of default uniform resource address and the browser
The target cascading style sheets file that nuclear information matches.
4. browser style compatibility method as claimed in claim 3, which is characterized in that described to execute the crus secunda herein
Part, after obtaining the network speed between the browser and the server-side, the browser style compatibility method is also wrapped
It includes:
If the network speed is less than or equal to preset threshold, preset configuration text is obtained from the default uniform resource address
Part；
Using the value in the preset configuration file with the Style Attributes information matches, in the cascading style list file
The Style Attributes information is replaced, and obtains target cascading style sheets file.
5. browser style compatibility method as claimed in claim 3, which is characterized in that described to execute the crus secunda herein
Part obtains the network speed between the browser and the server-side, comprising:
Second script file is executed with prefixed time interval, obtaining one group includes between the browser and the server-side
Network speed vector；
The average value of the vector is calculated, and using the average value as the network speed between the browser and the server-side
Degree.
6. browser style compatibility method as claimed in claim 4, which is characterized in that described to execute the crus secunda herein
Part, after obtaining the network speed between the browser and the server-side, the browser style compatibility method is also wrapped
It includes:
The file size of first script file and the file size of the preset configuration file are obtained respectively；
If the file size of first script file is greater than the file size of the preset configuration file, and network speed
Degree is less than or equal to the preset threshold, then obtains the preset configuration file from the default uniform resource address, and use
In the preset configuration file with the value of the Style Attributes information matches, to the pattern in the cascading style list file
Attribute information is replaced, and obtains the target cascading style sheets file；
If first script file is less than or equal to the preset configuration file, and the network speed is less than or equal to institute
Preset threshold is stated, then obtains first script file from the browser page data, executes first script file,
Obtain the Style Attributes information in the cascading style list file, and by the Style Attributes in the cascading style list file
Information is modified as the value with the browser kernel information matches, obtains the target cascading style sheets file.
7. a kind of browser style compatible apparatus, which is characterized in that the browser style compatible apparatus, comprising:
Acquisition module, for obtaining the kernel information of browser；
Receiving module for receiving the browser page data of server-side transmission, and obtains in the browser page data
Script file, wherein the script file is for configuring the cascading style list file in the browser page data；
Execution module obtains carrying out the cascading style list file destination layer with postponing for executing the script file
Stacking style table file；
It is clear to obtain target for rendering the browser page data according to the target cascading style sheets file for rendering module
Look at device page data；
Loading module, for loading the objective browser page data, and the packing objective browser page in objective browser
Face data.
8. browser style compatible apparatus as claimed in claim 7, which is characterized in that the execution module, comprising:
First implementation sub-module obtains the pattern category in the cascading style list file for executing first script file
Property information；
Submodule is updated, for the Style Attributes information in the cascading style list file to be modified as and the browser
The matched value of kernel information obtains target cascading style sheets file.
9. a kind of computer equipment, including memory, processor and storage are in the memory and can be in the processor
The computer program of upper operation, which is characterized in that the processor realized when executing the computer program as claim 1 to
Any one of 6 browser style compatibility methods.
10. a kind of computer readable storage medium, the computer-readable recording medium storage has computer program, and feature exists
In realization browser style compatible parties as described in any one of claim 1 to 6 when the computer program is executed by processor
Method.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910204014.8A CN110083383A (en) | 2019-03-18 | 2019-03-18 | Browser style compatibility method, device, computer equipment and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910204014.8A CN110083383A (en) | 2019-03-18 | 2019-03-18 | Browser style compatibility method, device, computer equipment and storage medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN110083383A true CN110083383A (en) | 2019-08-02 |
Family
ID=67412462
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910204014.8A Pending CN110083383A (en) | 2019-03-18 | 2019-03-18 | Browser style compatibility method, device, computer equipment and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110083383A (en) |
Cited By (11)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110569082A (en) * | 2019-08-06 | 2019-12-13 | 阿里巴巴集团控股有限公司 | method and device for controlling page content |
| CN111061686A (en) * | 2019-10-24 | 2020-04-24 | 京东数字科技控股有限公司 | Resource processing method, device, server and storage medium |
| CN111199001A (en) * | 2019-12-03 | 2020-05-26 | 云深互联(北京)科技有限公司 | Resource overloading compatibility processing method and system for browser |
| CN111324376A (en) * | 2020-02-28 | 2020-06-23 | 北京无限光场科技有限公司 | Function configuration method and device, electronic equipment and computer readable medium |
| CN111444455A (en) * | 2020-03-25 | 2020-07-24 | 平安医疗健康管理股份有限公司 | Browser compatible method, system, computer device and storage medium |
| CN112099791A (en) * | 2020-09-10 | 2020-12-18 | 北京百度网讯科技有限公司 | Method, device, equipment and storage medium for setting style of page in browser |
| CN112558964A (en) * | 2020-11-27 | 2021-03-26 | 华帝股份有限公司 | Webpage generation method, computer equipment and storage medium |
| CN112738191A (en) * | 2020-12-23 | 2021-04-30 | 国家电网有限公司大数据中心 | Method and system for automatically switching compatible types and versions of browsers |
| CN115314561A (en) * | 2022-08-03 | 2022-11-08 | 平安付科技服务有限公司 | Page display method and device, storage medium and computer equipment |
| CN115470127A (en) * | 2022-09-06 | 2022-12-13 | 北京海泰方圆科技股份有限公司 | Page compatibility processing method and device, computer equipment and storage medium |
| CN116595284A (en) * | 2023-07-13 | 2023-08-15 | 太平金融科技服务（上海）有限公司 | Webpage system operation method, device, equipment, storage medium and program |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20070220480A1 (en) * | 2006-03-17 | 2007-09-20 | Microsoft Corporation | Dynamic generation of cascading style sheets |
| CN102637135A (en) * | 2011-02-09 | 2012-08-15 | 北京千橡网景科技发展有限公司 | Method and device for compiling CSS (cascading style sheet) |
| CN103634358A (en) * | 2012-08-27 | 2014-03-12 | 深圳中兴网信科技有限公司 | Browser adaption method and apparatus |
| CN107102877A (en) * | 2017-04-26 | 2017-08-29 | 国网辽宁省电力有限公司信息通信分公司 | A kind of adaptive approach of browser-cross plug-in unit |
| CN108090069A (en) * | 2016-11-22 | 2018-05-29 | 北京神州泰岳软件股份有限公司 | A kind of method and apparatus for showing web page resources in a browser |
-
2019
- 2019-03-18 CN CN201910204014.8A patent/CN110083383A/en active Pending
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20070220480A1 (en) * | 2006-03-17 | 2007-09-20 | Microsoft Corporation | Dynamic generation of cascading style sheets |
| CN102637135A (en) * | 2011-02-09 | 2012-08-15 | 北京千橡网景科技发展有限公司 | Method and device for compiling CSS (cascading style sheet) |
| CN103634358A (en) * | 2012-08-27 | 2014-03-12 | 深圳中兴网信科技有限公司 | Browser adaption method and apparatus |
| CN108090069A (en) * | 2016-11-22 | 2018-05-29 | 北京神州泰岳软件股份有限公司 | A kind of method and apparatus for showing web page resources in a browser |
| CN107102877A (en) * | 2017-04-26 | 2017-08-29 | 国网辽宁省电力有限公司信息通信分公司 | A kind of adaptive approach of browser-cross plug-in unit |
Non-Patent Citations (2)
| Title |
|---|
| WEIXIN_33785972: "CSS浏览器兼容性的4个解决方案：浏览器CSS样式初始化、浏览器私有属性，CSS hack语法和自动化插件...", pages 1 - 8, Retrieved from the Internet <URL:https://blog.csdn.net/weixin_33785972/article/details/88595483> * |
| 蒋回生;: "浅谈网页制作中浏览器差异性――样式兼容问题", 电脑知识与技术, no. 27 * |
Cited By (17)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110569082A (en) * | 2019-08-06 | 2019-12-13 | 阿里巴巴集团控股有限公司 | method and device for controlling page content |
| CN110569082B (en) * | 2019-08-06 | 2023-03-14 | 创新先进技术有限公司 | Method and device for controlling page content |
| CN111061686A (en) * | 2019-10-24 | 2020-04-24 | 京东数字科技控股有限公司 | Resource processing method, device, server and storage medium |
| CN111199001A (en) * | 2019-12-03 | 2020-05-26 | 云深互联(北京)科技有限公司 | Resource overloading compatibility processing method and system for browser |
| CN111324376A (en) * | 2020-02-28 | 2020-06-23 | 北京无限光场科技有限公司 | Function configuration method and device, electronic equipment and computer readable medium |
| CN111324376B (en) * | 2020-02-28 | 2023-11-21 | 北京有竹居网络技术有限公司 | Function configuration method, device, electronic equipment and computer readable medium |
| CN111444455A (en) * | 2020-03-25 | 2020-07-24 | 平安医疗健康管理股份有限公司 | Browser compatible method, system, computer device and storage medium |
| CN112099791B (en) * | 2020-09-10 | 2023-11-10 | 北京百度网讯科技有限公司 | Method, device, equipment and storage medium for setting page style in browser |
| CN112099791A (en) * | 2020-09-10 | 2020-12-18 | 北京百度网讯科技有限公司 | Method, device, equipment and storage medium for setting style of page in browser |
| CN112558964A (en) * | 2020-11-27 | 2021-03-26 | 华帝股份有限公司 | Webpage generation method, computer equipment and storage medium |
| CN112738191A (en) * | 2020-12-23 | 2021-04-30 | 国家电网有限公司大数据中心 | Method and system for automatically switching compatible types and versions of browsers |
| CN112738191B (en) * | 2020-12-23 | 2023-05-23 | 国家电网有限公司大数据中心 | Method and system for automatically switching compatible types and versions of browser |
| CN115314561A (en) * | 2022-08-03 | 2022-11-08 | 平安付科技服务有限公司 | Page display method and device, storage medium and computer equipment |
| CN115470127B (en) * | 2022-09-06 | 2023-08-15 | 北京海泰方圆科技股份有限公司 | Page compatibility processing method, device, computer equipment and storage medium |
| CN115470127A (en) * | 2022-09-06 | 2022-12-13 | 北京海泰方圆科技股份有限公司 | Page compatibility processing method and device, computer equipment and storage medium |
| CN116595284B (en) * | 2023-07-13 | 2023-10-03 | 太平金融科技服务（上海）有限公司 | Webpage system operation method, device, equipment, storage medium and program |
| CN116595284A (en) * | 2023-07-13 | 2023-08-15 | 太平金融科技服务（上海）有限公司 | Webpage system operation method, device, equipment, storage medium and program |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110083383A (en) | Browser style compatibility method, device, computer equipment and storage medium | |
| US6470349B1 (en) | Server-side scripting language and programming tool | |
| CN108572819A (en) | Method for updating pages, device, terminal and computer readable storage medium | |
| CN109684607B (en) | JSON data analysis method and device, computer equipment and storage medium | |
| CN108717437B (en) | Search result display method and device and storage medium | |
| CN104731589A (en) | Automatic generation method and device of user interface (UI) | |
| CN107992557A (en) | Static resource update method, device, storage medium and computer equipment | |
| US20140281859A1 (en) | Enhanced mobilization of existing web sites | |
| EP2987088A2 (en) | Client side page processing | |
| US11677809B2 (en) | Methods for transforming a server side template into a client side template and devices thereof | |
| CN110908712A (en) | Data processing method and equipment for cross-platform mobile terminal | |
| CN107301137A (en) | RSET interface realizing methods and device and electronic equipment and computer-readable recording medium | |
| CN104049991A (en) | Method and system for converting network applications into mobile applications | |
| CN106294658A (en) | The quick methods of exhibiting of webpage and device | |
| CN106202066A (en) | The interpretation method of website and device | |
| CN109725965A (en) | Cascading style listing maintenance, device, computer equipment and storage medium | |
| CN113382083B (en) | Webpage screenshot method and device | |
| CN111831384A (en) | Language switching method and device, equipment and storage medium | |
| CN110309457B (en) | Webpage data processing method, device, computer equipment and storage medium | |
| CN104978325B (en) | A kind of web page processing method, device and user terminal | |
| CN113495730A (en) | Resource package generation and analysis method and device | |
| CN111723314B (en) | Webpage display method and device, electronic equipment and computer readable storage medium | |
| CN109948085A (en) | Browser kernel initial method, calculates equipment and storage medium at device | |
| CN111580830A (en) | Binding and analyzing method for hypertext markup language document element | |
| WO2015183235A1 (en) | Response based on browser engine |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |