CN110377205A - Control the method and device of data visualization large-size screen monitors page automatic adaptive frequency - Google Patents
Control the method and device of data visualization large-size screen monitors page automatic adaptive frequency Download PDFInfo
- Publication number
- CN110377205A CN110377205A CN201910616675.1A CN201910616675A CN110377205A CN 110377205 A CN110377205 A CN 110377205A CN 201910616675 A CN201910616675 A CN 201910616675A CN 110377205 A CN110377205 A CN 110377205A
- Authority
- CN
- China
- Prior art keywords
- page
- timer
- screen monitors
- size screen
- event
- 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
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Human Computer Interaction (AREA)
- Data Mining & Analysis (AREA)
- Software Systems (AREA)
- Digital Computer Display Output (AREA)
Abstract
The device of control data visualization large-size screen monitors page automatic adaptive frequency is related to information technology field.The present invention is by event sniffer, timer, page self-adapted signal trigger, time window definer composition.The device of control data visualization large-size screen monitors page automatic adaptive frequency of the invention monitors onresize event using event sniffer, the time window of triggering page furbishing instruction is defined using time window definer, delay timing is carried out often according to time window using timer, page furbishing instruction is executed using page self-adapted signal trigger, achieve the purpose that effectively to control large-size screen monitors page furbishing number by way of triggering onresize event timer reclocking every time, user experience effect has been taken into account by the setting of time window.
Description
Technical field
The present invention relates to information technology fields, especially field of software development.
Background technique
The page that the data visualization page has an important branch specially to show on some professional equipments, claims in the industry
Be the large-size screen monitors displayed page abbreviation large-size screen monitors page.The environment of this kind of large-size screen monitors page presentation is often the projector of high definition, either
Under LED screen, or the huge curtain environment of similar movie theatre.
This large-size screen monitors page has the characteristics that itself is exclusive in design and exploitation, these features are summarized as follows:
Related definition: visual section, that is, browser-presented content section of browser, visual section do not include the ground of browser
These elements of location column, toolbar and scroll bar.
Feature 1: the browser-presented large-size screen monitors page, the content of large-size screen monitors often take the visual section of entire browser, greatly
Shielding the page, there can be no scroll bars vertically and horizontally；
Feature 2: the large-size screen monitors page needs the function of adaptive screen, is can guarantee under the different types of displaying medium of the large-size screen monitors page in this way
It can guarantee correct and beautiful bandwagon effect.
By two above feature, the technology of large-size screen monitors, which is realized, has following technical requirements, specific as follows:
It is required that 1: the large-size screen monitors page will forbid the appearance of scroll bar；
It is required that 2: the large-size screen monitors page needs to obtain the width and height in the visual section of browser, and the content of large-size screen monitors shows all visual with this
The size in section carries out the layout that imposition layout and related content are shown；
It is required that 3: needing dynamic monitoring browser to visualize the wide high method in section, when discovery browser visualization section size hair
After changing, the page executes the method for resetting the page, allows the displaying content of the page according to the width and height in actual visualization section
Degree is laid out again.
The method in the industry cycle solving the fixed visualization section of browser be substantially it is unified, i.e., using css technology for
The body element of the page carries out pattern control.Overflow attribute value is hidden in code, this just allows body element in level
Scroll bar is all forbidden to use with vertical direction.Also width and height can be arranged all on body element in some scene lower pages
It is 100%, allows for the further Max. Clearance _M. in visual section and height of browser in this way.
About the technological means in page self-adapted page visualization section, the page is typically all to use under page window
Onresize event, onresize event can all be successfully triggered in the variation that 1px occurs for the width and height of browser.
After the page monitors browser width and height change, the page just needs to call the call back function of onresize by page
The displaying element in face carries out imposition layout again, and typesetting technique is the entire adaptive technological difficulties place of the page to the page again,
The processing method that the present inventor collects industry summarizes to get off substantially there are two types of scheme, specific as follows:
Scheme 1: after the page is notified page layout operation again to be executed, the page each can be needed to reset by developer
Element all carry out imposition layout again operation.Program function implements special cumbersome and complicated, research staff's need
The element of each needs imposition layout again of combing page-out that will be very careful, greatly to being used for typesetting than more prominent in the page
The container of layout, small to an one title even small icon will carry out imposition layout again, if encountering page use
Different types of imposition layout's technology can be allowed then the page resets the otherness for also needing compatible imposition layout using this scheme
Exist in the page largely dedicated for page self-adapted code, this also causes the code of full page to become too fat to move, code
Robustness and maintainability all greatly reduce.Therefore in production application, the program, which is substantially, makees limited large-size screen monitors
Adaptive operation guarantees that important imposition layout is reset, and subtle displaying element is often ignored.The but program
There is an advantage, this advantage is exactly that the operation of imposition layout again of the page does not need refresh page again, this is also the program
Although cumbersome, appoint a major reason being so widely used.
Scheme 2: the imposition layout of page presentation element is closely related with the size in the visualization section of browser, page exhibition
Show the size in the visualization section of the adaptive browser of element, in the industry cycle general there are two types of implementations, the first scheme is page
Face shows that the width of element is high and position is positioned by ratio, such as: in the box model of CSS width or
Height uses percentage, and the flex layout of css is visualizing the ratio in section using flex element setting element；Second
Scheme is exactly that page visualized elements all use absolute fix relative to body element, under the visualization section that one refers to
Dynamic calculates the value of width, height and the top and left that show element.
It is exactly that the page is allowed to refresh again that scheme 2, which triggers the method that page presentation element is reset, shown in following code:
window.onresize=function(){
window.location.reload()
}。
Scheme 2 is easy to operate, and code is also easy to be multiplexed in the different large-size screen monitors pages, therefore it is more than scheme 1
Add the common and general adaptive solution of displaying element.
All screen adaptation schemes, the page can all call the onresize method of window, as long as this method browser
Width or height the variation of 1px has occurred and can all be triggered.Problem brought by such event is exactly each large-size screen monitors page
The automatic adaptive in face can all be called repeatedly, every time adaptively will be multiple if adaptation scheme is executed by scheme 2
Request service end data, this results in page load slower, under some extreme scenes, results even in the page for a long time all
It can not normally show that even resulting in running quickly for browser bursts；Even if there is no problem for page load performance, the short time quickly triggers screen
Curtain adaptation function, the page can generate serious jitter phenomenon, and the effect of visualization of such large-size screen monitors page is had a greatly reduced quality.
How effectively to control the number of page automatic adaptive is also to optimize large-size screen monitors page self-adapted one important to ask
Topic, the device of control data visualization large-size screen monitors page automatic adaptive frequency of the invention are monitored using event sniffer
Onresize event, using time window definer define triggering page furbishing instruction time window, using timer according to
Time window carries out delay timing often, page furbishing instruction is executed using page self-adapted signal trigger, by every
The mode of secondary triggering onresize event timer reclocking achievees the purpose that effectively to control large-size screen monitors page furbishing number, pass through
The setting of time window has taken into account user experience effect.
It introduces a common solution and frequently triggers the scheme for automatically updating page operation, this is also before the present invention generates
The solution page frequently offend a kind of scheme refreshed automatically, particular content is as follows:
Program mode is that the automatic refresh operation of the page is allowed to trigger one fixed time interval of definition, such as 1000 millisecond (1
Second).Namely regardless of user adjust page-size time have how long, it is adaptive just to trigger a page every a set time
Function is answered, this method has following problem in actual production:
Problem 1: if interval time is too short, although the page reduces the number refreshed automatically, page shake and frequently
The case where load, appoints so than more serious
Problem 2: if interval time is too long, user can be clearly felt that the delay of page load, and at this time user, which will be considered that, is
The performance of system is problematic
How problem 3: determining a moderate time interval, this is a very difficult thing again, it is most important the reason is that
The time of the corresponding matter of time of server-side, the corresponding browser end of server-side also influences the setting of time interval value, such as such as
Fruit server-side respond quickly, the reasonable value of interval time should set it is shorter, the server-side response time it is too long so be spaced when
Between should set long point, but everybody not can guarantee this time when president when can be short, therefore it is moderate when
Between to be spaced all be that stochastic and dynamic is unable to control at all.
Shared technical description
Onresize event
Definition and usage:
Onresize event can be when window or frame be resized；
Grammer:
onresize="SomeJavaScriptCode"。
Summary of the invention
The device for controlling data visualization large-size screen monitors page automatic adaptive frequency, by event sniffer, timer, the page is certainly
Adapt to signal trigger, time window definer composition；
Onresize event is added by event sniffer, onresize is directed toward timer, event sniffer is added to large-size screen monitors exhibition
Show in the sentence of the page, complete the onresize event of large-size screen monitors displayed page trigger event monitor when changing page-size,
And it is directed toward timer；
The timing duration that timer is defined by time window definer is counted as defined in timer load time window definition device
Timer is added in the sentence of large-size screen monitors displayed page by Shi Shichang, completes to be pointing directly at timing after onresize event occurs
Device and the function of starting timing；
It is completed to issue page self-adapted instruction by page self-adapted signal trigger, and page self-adapted signal trigger is added
It is downloaded to after large-size screen monitors displayed page Timer sentence；Reach after timer completes timing duration and triggers page self-adapted signal touching
Send out the function of device；
Time window definer defines the value range of the timing duration of timer between 200 milliseconds to 500 milliseconds.
Beneficial effect
Onresize can be triggered repeatedly in the extremely short time less than 0.01 millisecond, when this value is much smaller than time window
Between delay time, when onresize for the first time be triggered when, timer setTimeout just prolongs according to the time window time
When invoking page self-adapting signal trigger triggering screen it is adaptive, at this time if onresize is triggered again, will remove
Then new is adaptively operated with timer by the operation of the timer setTimeout delayed execution defined originally
SetTimeout and time window time delay is redefined one time, and such repetitive operation can constantly repeat, in this way
Design available following operating result:
As a result 1: if user frequently adjusts the size of browser, this time very long that has I guess reached tens seconds, then using
During adjusting browser, the page will not trigger page self-adapted function at family；
As a result 2: the browser size if user's adjustment is over, we can trigger page in a reasonable time interval at once
The automatic refresh operation in face, according to the practical experience of the present inventor, the delay operation of 300 milliseconds of effects, user can feel page substantially
The face reaction time quickly, if furthermore the spaced adjustment browser size of user, 300 milliseconds or so times are that manpower has been difficult
At a continuous operation.
Page self-adapted function is a most basic function of the data visualization large-size screen monitors page, in order to adaptive frequent
Refresh page either frequently redraw the page, the bandwagon effect for influencing the page can be all allowed, if frequent invoking page
Adaptation function has been delayed page loading efficiency, this is often one of the major issue that large-size screen monitors client often feeds back to the page, this
The scheme of invention adequately solves the problems, such as user experience, allows large-size screen monitors not in the effect for frequently being refreshed and being influenced its displaying.
If the refresh page mode again for adaptively taking reload of the page, it is seen that above onresize is every
It will be triggered every 0.01 millisecond, this just allows a simple screen adaptive process to generate the interaction of hundreds of and server-side
Request, this is a kind of serious wasting of resources, and the present inventor is in production practice, and such short time sends a large amount of
Front end http request is also that certain page loads are slow, and the page is to routed major reason, therefore present invention optimizes the moneys of project
Source uses, while also improving the stability and robustness of system.
Detailed description of the invention
Fig. 1 is system flow chart of the invention；
Fig. 2 is the example code figure of timer.
Specific embodiment
Embodiment one
Referring to the device of Fig. 1 control data visualization large-size screen monitors page automatic adaptive frequency, by event sniffer 1, timer 2,
Page self-adapted signal trigger 3, time window definer 4 form；
Onresize event is added by event sniffer 1, onresize is directed toward timer 2, event sniffer 1 is added to large-size screen monitors
In the sentence of displayed page, the onresize thing of large-size screen monitors displayed page trigger event monitor 1 when changing page-size is completed
Part, and it is directed toward timer 2；
The timing duration that timer 2 is defined by time window definer 4, is defined by 2 load time of timer window definition device 4
Timing duration, timer 2 is added in the sentence of large-size screen monitors displayed page, complete onresize event occur after be pointing directly at
Timer 2 and the function of starting timing；
Page self-adapted instruction is issued by page self-adapted signal trigger 3, and page self-adapted signal trigger 3 is loaded
To after 2 sentence of large-size screen monitors displayed page Timer；Reach after timer 2 completes timing duration and triggers page self-adapted signal touching
Send out the function of device 3；
Time window definer 4 defines the value range of the timing duration of timer 2 between 200 milliseconds to 500 milliseconds.
Embodiment two
The present inventor has investigated the temporal frequency that onresize is triggered, it is found that the limit of the calling frequency of onresize will not
More than 0.01 millisecond.
In general human eye refresh page operation below for 300 milliseconds can all feel that the page significantly loads delay,
In conjunction with the two reference datas, the present invention takes following method to solve discussed technical problem, the method is as follows:
Present invention provide that the time interval of an automatic refresh page, this time interval reasonable value is in 200 milliseconds and 500 milliseconds
Between, this time interval is exactly timing duration, is defined in the present invention by time window definer 4.
Timer 2 be according to time window definer 4 define timing duration by way of call back function invoking page
The function of self-adapting signal trigger 3 is the realization code of timer 2 shown in Fig. 2.
The fn parameter of Fig. 2 is the method for invoking page self-adapting signal trigger 3, and delay is that time window definer 4 defines
The timing duration of timer 2.
Claims (1)
1. controlling the device of data visualization large-size screen monitors page automatic adaptive frequency, it is characterised in that by event sniffer, timing
Device, page self-adapted signal trigger, time window definer composition；
Onresize event is added by event sniffer, onresize is directed toward timer, event sniffer is added to large-size screen monitors exhibition
Show in the sentence of the page, complete the onresize event of large-size screen monitors displayed page trigger event monitor when changing page-size,
And it is directed toward timer；
The timing duration that timer is defined by time window definer is counted as defined in timer load time window definition device
Timer is added in the sentence of large-size screen monitors displayed page by Shi Shichang, completes to be pointing directly at timing after onresize event occurs
Device and the function of starting timing；
It is completed to issue page self-adapted instruction by page self-adapted signal trigger, and page self-adapted signal trigger is added
It is downloaded to after large-size screen monitors displayed page Timer sentence；Reach after timer completes timing duration and triggers page self-adapted signal touching
Send out the function of device；
Time window definer defines the value range of the timing duration of timer between 200 milliseconds to 500 milliseconds.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910616675.1A CN110377205A (en) | 2019-07-09 | 2019-07-09 | Control the method and device of data visualization large-size screen monitors page automatic adaptive frequency |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910616675.1A CN110377205A (en) | 2019-07-09 | 2019-07-09 | Control the method and device of data visualization large-size screen monitors page automatic adaptive frequency |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN110377205A true CN110377205A (en) | 2019-10-25 |
Family
ID=68252490
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910616675.1A Pending CN110377205A (en) | 2019-07-09 | 2019-07-09 | Control the method and device of data visualization large-size screen monitors page automatic adaptive frequency |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110377205A (en) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111399732A (en) * | 2020-03-13 | 2020-07-10 | 深圳市珍爱云信息技术有限公司 | Webpage screenshot method and device, computer equipment and storage medium |
| CN111460350A (en) * | 2020-04-07 | 2020-07-28 | 上海熙菱信息技术有限公司 | Anti-shake and throttling packaging method and system |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102067161A (en) * | 2008-06-18 | 2011-05-18 | 微软公司 | Presenting advertisements based on web-page interaction |
| CN102902789A (en) * | 2012-09-29 | 2013-01-30 | 北京奇虎科技有限公司 | Display control equipment and method for changing contents displayed in browser window |
| CN103942202A (en) * | 2013-01-18 | 2014-07-23 | 腾讯科技（深圳）有限公司 | High self-adaptation zooming method and device for webpage text field |
| CN105630566A (en) * | 2016-02-26 | 2016-06-01 | 北京奇虎科技有限公司 | Application page loading duration determining method and application page loading duration determining device |
| CN105912348A (en) * | 2016-06-02 | 2016-08-31 | 浪潮软件集团有限公司 | Method for self-adapting position of mobile phone APP software text box along with soft keyboard |
| CN106610824A (en) * | 2015-10-23 | 2017-05-03 | 北京国双科技有限公司 | Page height self-adaptation method and apparatus |
-
2019
- 2019-07-09 CN CN201910616675.1A patent/CN110377205A/en active Pending
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102067161A (en) * | 2008-06-18 | 2011-05-18 | 微软公司 | Presenting advertisements based on web-page interaction |
| CN102902789A (en) * | 2012-09-29 | 2013-01-30 | 北京奇虎科技有限公司 | Display control equipment and method for changing contents displayed in browser window |
| CN103942202A (en) * | 2013-01-18 | 2014-07-23 | 腾讯科技（深圳）有限公司 | High self-adaptation zooming method and device for webpage text field |
| CN106610824A (en) * | 2015-10-23 | 2017-05-03 | 北京国双科技有限公司 | Page height self-adaptation method and apparatus |
| CN105630566A (en) * | 2016-02-26 | 2016-06-01 | 北京奇虎科技有限公司 | Application page loading duration determining method and application page loading duration determining device |
| CN105912348A (en) * | 2016-06-02 | 2016-08-31 | 浪潮软件集团有限公司 | Method for self-adapting position of mobile phone APP software text box along with soft keyboard |
Non-Patent Citations (4)
| Title |
|---|
| TAT老教授: "浅谈javascript的函数节流", 《ALLOYTEAM》 * |
| 今晚DE老虎: "js中的函数防抖和函数节流", 《CSDN》 * |
| 李翠: "Web前端地理数据可视化技术研究与实践", 《中国优秀硕士学位论文全文数据库 基础科学辑A008-7》 * |
| 胡锦亮: "大规模复杂BIM场景的Web展示方案", 《电脑知识与技术》 * |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111399732A (en) * | 2020-03-13 | 2020-07-10 | 深圳市珍爱云信息技术有限公司 | Webpage screenshot method and device, computer equipment and storage medium |
| CN111399732B (en) * | 2020-03-13 | 2021-02-19 | 深圳市珍爱云信息技术有限公司 | Webpage screenshot method and device, computer equipment and storage medium |
| CN111460350A (en) * | 2020-04-07 | 2020-07-28 | 上海熙菱信息技术有限公司 | Anti-shake and throttling packaging method and system |
| CN111460350B (en) * | 2020-04-07 | 2023-06-09 | 上海熙菱信息技术有限公司 | Anti-shake and throttling packaging method and system |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110377205A (en) | Control the method and device of data visualization large-size screen monitors page automatic adaptive frequency | |
| RU2520361C2 (en) | Method of preventing false interruption of multi-page browser and corresponding device | |
| CN108089856B (en) | Page element monitoring method and device | |
| CN104252354B (en) | Refresh the method and apparatus of the data list of intelligent terminal | |
| KR20170083578A (en) | Contextual tabs in ribbons-based graphical user interfaces for mobile devices | |
| CN112130790B (en) | Picture refreshing method and device and computer readable storage medium | |
| CN105208442A (en) | Video playing method of video playing application program and apparatus thereof | |
| CN112130943A (en) | Method for self-defining visual layout design | |
| CN110910477B (en) | Page animation display method and device and computer readable storage medium | |
| CN107038736B (en) | Animation display method based on frame rate and terminal equipment | |
| CN110262952A (en) | It is a kind of to send the method and apparatus for burying an exposure data | |
| WO2017146696A1 (en) | Application content display at target screen resolutions | |
| US11942062B2 (en) | Frame rate adjusting method and apparatus for display screen, terminal, and storage medium | |
| CN113986107A (en) | Touch processing method and device based on graphic display system, electronic equipment and storage medium | |
| US20130083034A1 (en) | Animation engine decoupled from animation catalog | |
| CN110647704A (en) | Page updating method, device and equipment | |
| CN113467738A (en) | Screen adaptation method and device for display object, electronic equipment and storage medium | |
| CN113434138A (en) | Information display method and device and electronic equipment | |
| US10936365B2 (en) | Data processing systems | |
| CN112118484B (en) | Video bullet screen display method and device, computer equipment and readable storage medium | |
| CN110557627B (en) | Performance monitoring method and device and storage medium | |
| CN110347392B (en) | Method and device for self-adaptive typesetting and refreshing of data visualization large-screen display page | |
| WO1995030219A1 (en) | Animation system having variable video display rate | |
| CN110046051B (en) | Control method and device, client and electronic equipment | |
| CN111314751A (en) | Multi-screen linkage playing method and device, intelligent terminal and storage medium |
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 | ||
| WD01 | Invention patent application deemed withdrawn after publication |
Application publication date: 20191025 |
|
| WD01 | Invention patent application deemed withdrawn after publication |