CN108108442A - 一种优化网页浏览的方法 - Google Patents
一种优化网页浏览的方法 Download PDFInfo
- Publication number
- CN108108442A CN108108442A CN201711396817.5A CN201711396817A CN108108442A CN 108108442 A CN108108442 A CN 108108442A CN 201711396817 A CN201711396817 A CN 201711396817A CN 108108442 A CN108108442 A CN 108108442A
- Authority
- CN
- China
- Prior art keywords
- mrow
- screen
- msub
- event
- unrelated
- 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
- G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Information Transfer Between Computers (AREA)
Abstract
本发明公开了一种优化网页浏览的方法，包括以下步骤：A、确定设备的首屏线位置和首屏区域；B、识别与显示无关的事件并判断其可移动性；C、调整代码次序将与现实无关且可移动的事件移至首屏区域外并更新首屏区域，重复此步骤，直至所有与现实无关且可移动的事件移至首屏区域外。通过识别与显示无关的事件并将该事件移出首屏区域，调整代码次序，整个方法步骤通过优化网页结构以减少端到端的ATF时间，缩短加载时间，提高用户体验感。
Description
技术领域
本发明涉及计算机网络应用程序领域，具体涉及一种优化网页浏览的方法。
背景技术
随着网络用户的增多，网页的访问流量日益增大；同时网页正在变得越来越丰富多彩，其结构的复杂度也日趋增加，这使得网页的加载任务更加繁重。如何提高用户体验质量成为了一个不可忽视的问题。由于越短的加载时间意味着更好的网络体验质量，现存在许多优化网页浏览的方法，大多通过减少网络时延或处理时延实现优化目标。尽管这些工作可以在一定程度上改善网络体验，但它们没有考虑到网页在结构方面还存在较大的优化空间。目前，网页结构往往由设计人员编写，例如一些放置在网页起始部分的事件可能无助于屏幕显示，但仍会产生相当大的加载时间。这可能对终端用户并不友好。
发明内容
本发明为了解决上述技术问题提供一种优化网页浏览的方法。
本发明通过下述技术方案实现：
一种优化网页浏览的方法，包括以下步骤：
A、确定设备的首屏线位置和首屏区域；
B、识别与显示无关的事件并判断其可移动性；
C、调整代码次序将与现实无关且可移动的事件移至首屏区域外并更新首屏区域，重复此步骤，直至所有与现实无关且可移动的事件移至首屏区域外。
本方案通过识别与显示无关的事件并将该事件移出首屏区域，调整代码次序，整个方法步骤通过优化网页结构以减少端到端的首屏时间，缩短加载时间，提高用户体验。
作为优选，首屏线位置根据以下方法确定：
A11、根据设备型号或网络浏览器提供的API获取设备的屏幕尺寸、浏览器的屏占比和网页字体；
A12、根据屏幕尺寸、浏览器的屏占比和网页字体确定首屏线位置。
作为优选，步骤B中识别与显示无关的事件的具体步骤为：
B11、依次检查事件的位置，并获取位于首屏线上方的所有事件；
B12、获取事件特征；
B13、将事件特征数值化并输入到支持向量机中，
B14、根据支持向量机的输出结果判断该事件与显示有无关系。
本方案采用支持向量机SVM识别事件，SVM结构简单，可以解决小样本情况下的机器学习问题，而决策树忽略了数据属性之间的相关性。
作为优选，步骤B中判断与现实无关的事件可移动性的具体方法为：针对与显示无关的事件，判断其是否被其他事件所依赖，若是，则该事件可移动；若不是，则该事件不可移动。
本发明与现有技术相比，具有如下的优点和有益效果：
1、本发明通过识别与显示无关的事件并将该事件移出首屏区域，调整代码次序，整个方法步骤通过优化网页结构以减少端到端的ATF时间，缩短加载时间，提高用户体验感。
具体实施方式
为使本发明的目的、技术方案和优点更加清楚明白，下面结合实施例，对本发明作进一步的详细说明，本发明的示意性实施方式及其说明仅用于解释本发明，并不作为对本发明的限定。
实施例1
一种优化网页浏览的方法，应用在网页加载之前，包括以下步骤：
A、确定设备的首屏线位置和首屏区域；
B、识别与显示无关的事件并判断其可移动性；
C、调整代码次序将与现实无关且可移动的事件移至首屏区域外并更新首屏区域，重复此步骤，直至所有与现实无关且可移动的事件移至首屏区域外。
整个网页优化方法在网页加载之前便进行事件与显示有无关系的识别，间接考虑了网络延时和计算延时，通过将与显示无关的事件移出首屏区域，减少加载时间，即减小端到端的ATF时间实现网页优化。
实施例2
基于上述实施例的原理，本实施例公开其详细实施方式。
根据设备型号或网络浏览器提供的API确认首屏线位置。具体的，对于移动设备，通过设备类型来推断确定屏幕尺寸、浏览器的屏占比和网页字体；对于屏幕尺寸和分辨率未知的非热门设备，利用网络浏览器提供的API获取屏幕尺寸、浏览器的屏占比和网页字体。根据屏幕尺寸、浏览器的屏占比和网页字体确定首屏线位置。
确定首屏区域。
识别与显示无关的事件：
B11、依次检查事件的位置，并获取位于首屏线上方的所有事件；
B12、获取首屏线上方的所有事件的特征；
B13、将事件特征数值化并输入到支持向量机中，
B14、根据支持向量机的输出结果判断该事件与显示有无关系。
针对与显示无关的事件，判断其是否被其他事件所依赖，若是，则该事件可移动；若不是，则该事件不可移动。
调整代码次序将与现实无关且可移动的事件移至首屏区域外，更新首屏区域和与显示无关的事件集合；重复此步骤，直至所有与现实无关且可移动的事件移至首屏区域外。
实施例3
一种优化网页浏览的方法，应用在网页加载之前，包括以下步骤：
计算首屏线位置，首屏线位置主要由用户的屏幕大小、浏览器的屏占比和网页字体设置决定，通过设备型号或网络浏览器提供的API可以获取上述信息从而确定首屏线位置。当用户使用移动设备浏览网页时，屏占比默认为1，屏幕尺寸可以由设备类型推断得出；当用户使用PC时，可利用网络浏览器提供的API直接读取上述信息，从而确定首屏线位置。
具体的，当为pc时首屏线位置根据以下方程确定：
其中，SDevice为设备屏幕的大小；Sbrowser为浏览器面积大小；α为浏览器的屏占比；n为元素个数；λ为网页字体的大小；βi为元素的样式大小；Oi为元素的大小；我们将第n个元素作为首屏线元素。
确定首屏区域，其约等于浏览器的屏幕尺寸。
依次检查事件的位置，并获取位于首屏线上方即首屏区域内的所有事件；
获取html中包含的js文件、css文件等事件的特征，例如文件名，域名和URL中的目录名。另外js代码段还包括代码行数量、函数名称等有用的特征；
将上述获得的特征数值化并输入到支持向量机SVM模型中。此前，通过手动分析事件，记录结果，得到SVM训练数据，作为SVM模型的输出判断依据；可采用计算MED、ASCLL向量表示、ASCLL求和这三种方法进行数值转换，方法选择的不同会影响SVM模型的输出准确率；
根据支持向量机的输出结果判断该事件与显示有无关系。具体的，SVM输出1表示该事件将会影响首屏显示，输出0表示该事件对首屏显示没有影响。重复此步骤，对所有事件依次进行判定。
若事件与显示无关，则进一步判断其是否被其他事件所依赖，若是，则该事件可移动；若不是，则该事件不可移动。重复该步骤，直至将所有与显示无关的事件判定完成。
调整html代码次序，将与现实无关且可移动的事件移至首屏区域外并更新首屏区域，更新首屏区域和与显示无关的事件集合，当首屏区域内的事件被移动，首屏线也将改变，从而影响与显示无关的事件的识别。重复此步骤，直至所有与现实无关且可移动的事件移至首屏区域外。
本方案所有实施例的方法均在网页加载之前实施，其可在发布者客户端实施，也可于云端实施。通过调整HTML代码进行事件重排序来改变网页结构和内容顺序，然后将其发布到不同设备上，从而优化网页浏览。
本发明是目前第一个通过优化网页结构以减少端到端的ATF时间实现网页优化目标的发明；在网页加载之前就进行事件的显示无关性识别，间接考虑了网络延时和计算延时；与现存方法相比，本发明在优化复杂的网页浏览更具有优越性；本发明的兼容性较强，能与现有的大多数成果同时使用，使得整体优化网络体验的性能更佳。
另对本方案提及的缩写进行解释：
Html：超级文本标记语言,用于网页创建和设计其它可在网页浏览器中看到的信息。
SVM：支持向量机，通常用来进行模式识别、分类以及回归分析。
MED：最小编辑距离，用于计算两字符串差异程度。
ASCII：统一的字符编码。
css文件：与HTML语言配合使用,制作网页。
js文件：以js为扩展名的文件，用javascript脚本语言编写，配合网页使用。
以上所述的具体实施方式，对本发明的目的、技术方案和有益效果进行了进一步详细说明，所应理解的是，以上所述仅为本发明的具体实施方式而已，并不用于限定本发明的保护范围，凡在本发明的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。
Claims (5)
1.一种优化网页浏览的方法，其特征在于，包括以下步骤：
A、确定设备的首屏线位置和首屏区域；
B、识别与显示无关的事件并判断其可移动性；
C、调整代码次序将与现实无关且可移动的事件移至首屏区域外并更新首屏区域，重复此步骤，直至所有与现实无关且可移动的事件移至首屏区域外。
2.根据权利要求1所述的一种优化网页浏览的方法，其特征在于，所述首屏线位置根据以下方法确定：
A11、根据设备型号或网络浏览器提供的API获取设备的屏幕尺寸、浏览器的屏占比和网页字体；
A12、根据屏幕尺寸、浏览器的屏占比和网页字体确定首屏线位置。
3.根据权利要求2所述的一种优化网页浏览的方法，其特征在于，所述首屏线位置确定方法为：
<mrow>
<munderover>
<mo>&Sigma;</mo>
<mrow>
<mi>i</mi>
<mo>=</mo>
<mn>1</mn>
</mrow>
<mi>n</mi>
</munderover>
<msub>
<mi>&lambda;&beta;</mi>
<mi>i</mi>
</msub>
<msub>
<mi>O</mi>
<mi>i</mi>
</msub>
<mo><</mo>
<mo>=</mo>
<msub>
<mi>S</mi>
<mrow>
<mi>b</mi>
<mi>r</mi>
<mi>o</mi>
<mi>w</mi>
<mi>s</mi>
<mi>e</mi>
<mi>r</mi>
</mrow>
</msub>
<mo>;</mo>
</mrow>
<mrow>
<munderover>
<mo>&Sigma;</mo>
<mrow>
<mi>i</mi>
<mo>=</mo>
<mn>1</mn>
</mrow>
<mrow>
<mi>n</mi>
<mo>+</mo>
<mn>1</mn>
</mrow>
</munderover>
<msub>
<mi>&lambda;&beta;</mi>
<mi>i</mi>
</msub>
<msub>
<mi>O</mi>
<mi>i</mi>
</msub>
<mo>></mo>
<mo>=</mo>
<msub>
<mi>S</mi>
<mrow>
<mi>b</mi>
<mi>r</mi>
<mi>o</mi>
<mi>w</mi>
<mi>s</mi>
<mi>e</mi>
<mi>r</mi>
</mrow>
</msub>
<mo>;</mo>
</mrow>
<mrow>
<mfrac>
<msub>
<mi>S</mi>
<mrow>
<mi>b</mi>
<mi>r</mi>
<mi>o</mi>
<mi>w</mi>
<mi>s</mi>
<mi>e</mi>
<mi>r</mi>
</mrow>
</msub>
<msub>
<mi>S</mi>
<mrow>
<mi>D</mi>
<mi>e</mi>
<mi>v</mi>
<mi>i</mi>
<mi>c</mi>
<mi>e</mi>
</mrow>
</msub>
</mfrac>
<mo>=</mo>
<mi>&alpha;</mi>
<mo>;</mo>
</mrow>
其中，SDevice为设备屏幕的大小；Sbrowser为浏览器面积大小；α为浏览器的屏占比；n为元素个数；λ为网页字体的大小；βi为元素的样式大小；Oi为元素的大小。
4.根据权利要求1所述的一种优化网页浏览的方法，其特征在于，步骤B中识别与显示无关的事件的具体步骤为：
B11、依次检查事件的位置，并获取位于首屏线上方的所有事件；
B12、获取事件特征；
B13、将事件特征数值化并输入到支持向量机中，
B14、根据支持向量机的输出结果判断该事件与显示有无关系。
5.根据权利要求4所述的一种优化网页浏览的方法，其特征在于，步骤B中判断与现实无关的事件可移动性的具体方法为：针对与显示无关的事件，判断其是否被其他事件所依赖，若是，则该事件可移动；若不是，则该事件不可移动。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201711396817.5A CN108108442A (zh) | 2017-12-21 | 2017-12-21 | 一种优化网页浏览的方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201711396817.5A CN108108442A (zh) | 2017-12-21 | 2017-12-21 | 一种优化网页浏览的方法 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN108108442A true CN108108442A (zh) | 2018-06-01 |
Family
ID=62212186
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201711396817.5A Pending CN108108442A (zh) | 2017-12-21 | 2017-12-21 | 一种优化网页浏览的方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN108108442A (zh) |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104133884A (zh) * | 2014-07-28 | 2014-11-05 | 百度在线网络技术（北京）有限公司 | 显示网页的方法及装置 |
| US20140365302A1 (en) * | 2012-01-06 | 2014-12-11 | Thomson Licensing | Method and system for providing dynamic advertising on a second screen based on social messages |
| CN106354873A (zh) * | 2015-09-22 | 2017-01-25 | 广州神马移动信息科技有限公司 | 网页加载方法、装置及系统 |
| CN106575303A (zh) * | 2015-04-20 | 2017-04-19 | 广州市动景计算机科技有限公司 | 显示网页的方法和设备 |
-
2017
- 2017-12-21 CN CN201711396817.5A patent/CN108108442A/zh active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20140365302A1 (en) * | 2012-01-06 | 2014-12-11 | Thomson Licensing | Method and system for providing dynamic advertising on a second screen based on social messages |
| CN104133884A (zh) * | 2014-07-28 | 2014-11-05 | 百度在线网络技术（北京）有限公司 | 显示网页的方法及装置 |
| CN106575303A (zh) * | 2015-04-20 | 2017-04-19 | 广州市动景计算机科技有限公司 | 显示网页的方法和设备 |
| CN106354873A (zh) * | 2015-09-22 | 2017-01-25 | 广州神马移动信息科技有限公司 | 网页加载方法、装置及系统 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US11675969B2 (en) | Dynamic native content insertion | |
| US11295074B2 (en) | Systems and methods for conversion of web content into reusable templates and components | |
| US8065667B2 (en) | Injecting content into third party documents for document processing | |
| CN102779167B (zh) | 在移动终端中显示网页的方法及系统 | |
| CN103389895B (zh) | 一种前端页面的生成方法及系统 | |
| US10049095B2 (en) | In-context editing of output presentations via automatic pattern detection | |
| JP5511609B2 (ja) | ウェブ・ページ作成システム、方法及びプログラム | |
| EP3156919A1 (en) | Methods for transforming a server side template into a client side template and devices thereof | |
| CN105589917B (zh) | 浏览器日志信息的分析方法和装置 | |
| CN109684584B (zh) | 一种浏览器内核的智能切换方法、装置、终端及存储介质 | |
| JP6866551B2 (ja) | 数式処理方法、装置、デバイス及びプログラム | |
| CN106155654B (zh) | 屏蔽网页操作的方法、装置及电子设备 | |
| CN109683895A (zh) | 基于css预处理器的网页适配多种浏览器尺寸的方法及系统 | |
| CN105718541A (zh) | 一种获取用户喜好信息的方法及装置 | |
| CN106095674B (zh) | 一种网站自动化测试方法和装置 | |
| CN108170409A (zh) | Web前端控件的开发方法和系统 | |
| CN108694043A (zh) | 页面装修方法和系统 | |
| CN108108442A (zh) | 一种优化网页浏览的方法 | |
| Pastushenko et al. | Generation of test samples for construction of dashboard design guidelines: Impact of color on layout balance | |
| US20170315971A1 (en) | Program for displaying webpage, terminal device, and server device | |
| JP7206863B2 (ja) | 表示制御方法、装置、及びプログラム | |
| DE112015004642T5 (de) | Erzeugen von Webbrowseransichten für Anwendungen | |
| Schefels et al. | Behavioral analysis of registered web site visitors with help of mouse tracking | |
| CN110209336B (zh) | 一种内容显示方法和装置 | |
| CN109284471A (zh) | 网页布局与维护的方法及系统 |
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 | ||
| RJ01 | Rejection of invention patent application after publication | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20180601 |