CN111159603A - 加载页面样式的方法和加载页面样式的装置 - Google Patents

加载页面样式的方法和加载页面样式的装置 Download PDF

Info

Publication number
CN111159603A
CN111159603A CN201911400844.4A CN201911400844A CN111159603A CN 111159603 A CN111159603 A CN 111159603A CN 201911400844 A CN201911400844 A CN 201911400844A CN 111159603 A CN111159603 A CN 111159603A
Authority
CN
China
Prior art keywords
style
page
style information
external
loading
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.)
Granted
Application number
CN201911400844.4A
Other languages
English (en)
Other versions
CN111159603B (zh
Inventor
田小杰
王守强
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
New Founder Holdings Development Co ltd
Beijing Founder Electronics Co Ltd
Original Assignee
Peking University Founder Group Co Ltd
Beijing Founder Electronics Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Peking University Founder Group Co Ltd, Beijing Founder Electronics Co Ltd filed Critical Peking University Founder Group Co Ltd
Priority to CN201911400844.4A priority Critical patent/CN111159603B/zh
Publication of CN111159603A publication Critical patent/CN111159603A/zh
Application granted granted Critical
Publication of CN111159603B publication Critical patent/CN111159603B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/957Browsing optimisation, e.g. caching or content distillation
    • YGENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02DCLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
    • Y02D10/00Energy efficient computing, e.g. low power processors, power management or thermal management

Abstract

本发明提供了一种加载页面样式的方法和一种加载页面样式的装置,包括:获取页面中对应的多个外部样式信息;根据预先设置的标签设定规则,将所述多个外部样式信息动态渲染到对应的页面特定样式标签中;根据所述页面特定样式标签加载所述页面样式,通过三种不同的实现方式,解决了动态将css信息注入页面中,在IE8浏览器上出现了页面空白卡死现象。

Description

加载页面样式的方法和加载页面样式的装置
技术领域
本发明涉及浏览器优化技术领域,具体而言,涉及一种加载页面样式的方法和一种加载页面样式的装置。
背景技术
当网页上有很多需要加载的网络字体时,同时将多个css样式信息追加到style标签中,在IE8浏览器上出现了页面空白卡死的现象,这个过程有时候会造成浏览器直接崩溃。
发明内容
本发明旨在至少解决现有技术中存在的技术问题之一。
为此,本发明的第一方面提供了一种加载页面样式的方法。
本发明的第二方面提供了一种加载页面样式的装置。
有鉴于此,根据本发明的第一方面,提供了一种加载页面样式的方法,包括:获取页面中对应的多个外部样式信息;根据预先设置的标签设定规则,将多个外部样式信息动态渲染到对应的页面特定样式标签中;根据页面特定样式标签加载页面样式。
本发明提供的加载页面样式的方法,获取页面需要加载的多个外部样式信息,可以说明的是,一个页面与多个外部样式信息之间是映射关系;根据预先设置的标签设定规则,将多个外部样式信息动态渲染到对应的页面特定样式标签中,由于动态渲染的过程能够缓解浏览器同时加载外部样式信息和页面特定样式标签,使外部样式信息与页面特定样式标签进行动态融合后,浏览器再加载动态融合后的样式,保证页面样式加载步骤的有序性,从而避免多个外部样式信息同时追加到页面特定样式标签后,浏览器加载页面时出现页面空白卡死的现象发生;最后根据页面特定样式标签加载页面样式,进一步保证了外部样式信息完全被浏览器加载,避免出现页面空白卡死或遗漏现象发生。
另外,根据本发明上述技术方案提供的基于可编辑模板的打印方法,还具有如下附加技术特征:
在上述技术方案中,进一步地,根据预先设置的标签注入规则,将多个外部样式信息动态渲染到对应的页面特定样式标签中,具体包括:从多个外部样式信息中获取单个外部样式信息,检测单个外部样式信息的状态是否属于第一次动态注入;确定单个外部样式信息的状态属于第一次动态注入,则动态追加到对应的页面特定样式标签;确定单个外部样式信息的状态不属于第一次动态注入,则检测上一次追加的单个外部样式信息是否完成动态注入;确定上一次追加的单个外部样式信息完成动态注入,则继续依次按序追加新的单个外部样式信息至页面特定样式标签中;确定上一次追加的单个外部样式信息完未成动态注入,则停止动态按序追加新的单个外部样式信息至页面特定样式标签中。
在该技术方案中,根据预先设置的标签注入规则,将多个外部样式信息动态渲染到对应的页面特定样式标签中,具体包括:从多个外部样式信息中按序获取每个外部样式信息,并且检测获取到的每个外部样式信息是否属于第一次动态注入,如果确定属于第一次动态注入,说明页面特定样式标签中没有动态注入过外部样式信息,因此需要动态追加到对应的页面特定样式标签中,然后进行下一次判断,即,确定不属于第一次动态注入,检测上一次追加的单个外部样式信息是否完成动态注入的过程,如果确定上一次追加的单个外部样式信息完成动态注入的过程,将外部样式信息追加注入页面特定样式标签中,可以说明的是,继续追加的过程仍然要进行第二次判断;并且如果上一次追加的外部样式信息属于未完成动态注入,则停止动态按序追加新的单个外部样式信息至页面特定样式标签中,从而保证了对每个外部样式信息进行动态注入的判断,避免出现外部样式信息因遗漏造成浏览器加载页面的过程空白卡死的问题发生。
在上述技术方案中,进一步地,停止动态按序追加新的单个外部样式信息之前,还包括:启动标签注入规则中的轮循时间规则;根据轮循时间规则中的循环时间设置循环询问频率;根据循环询问频率,重复加载上一次追加的单个外部样式信息动态注入的过程;上一次追加的单个外部样式信息完成动态注入,则停止运行轮循时间规则。
在该技术方案中,停止动态按序追加新的单个外部样式信息之前,还包括:启动标签注入规则中的轮循时间规则,并根据轮循时间规则中的循环时间设置循环询问频率,然后根据循环询问频率,重复加载上一次追加的单个外部样式信息动态注入的过程,一旦上一次追加的单个外部样式信息完成动态注入后,则停止运行轮循时间规则,从而保证只有单个外部样式信息实现完成注入后,才能继续执行,否则设置等待轮循环节,实现重复加载询问。
在上述技术方案中,进一步地,根据预先设置的标签注入规则,将多个外部样式信息文件动态渲染到对应的页面特定样式标签中,具体包括:获取标签注入规则中的样式合并规则;统计外部样式信息的总数;从外部样式信息中遍历获取单个外部样式信息文件,对单个外部样式信息文件执行插入合并操作;确认所有外部样式信息都完成插入合并操作,提取插入合并操作过程中设置的变量存储空间;控制变量存储空间内存放的合并样式,动态渲染到对应的页面特定样式标签中。
在该技术方案中,根据预先设置的标签注入规则,将多个外部样式信息文件动态渲染到对应的页面特定样式标签中,具体包括:获取标签注入规则中的样式合并规则,可以说明的是,这里采用的是先合并多个外部样式信息,再将合并后的样式信息一起添加到页面特定样式标签中,从而避免同时将单个外部样式信息一个一个添加到页面特定样式标签中,降低浏览器加载页面的处理速度;具体的,统计外部样式信息的总数,从外部样式信息中遍历获取单个外部样式信息文件,对单个外部样式信息文件执行插入合并操作,确认所有外部样式信息都完成插入合并操作,提取插入合并操作的过程中设置的变量存储空间,从而实现合并插入的过程中能够将获取的单个外部样式信息缓存到变量存储空间内;并且控制变量存储空间内存放的合并样式,能够动态渲染到对应的页面特定样式标签中,从而实现将多条外部样式信息合并为一条外部样式信息后,进行一次性追加注入,避免浏览器同时并发追加多条外部样式信息到页面特定样式标签中。
在上述技术方案中,进一步地,从外部样式信息中遍历获取单个外部样式信息文件时,对单个外部样式信息文件执行插入合并操作,具体包括:接收到插入合并操作发送的指令,将获取到单个外部样式信息暂存在变量存储空间内;根据样式合并规则,控制变量存储空间内暂存的外部样式信息执行合并处理;确认变量存储空间完成合并后,控制插入合并操作的次数递增阈值进行递增并标记。
在该技术方案中,从外部样式信息中遍历获取单个外部样式信息文件时,对单个外部样式信息文件执行插入合并操作,具体包括:接收到插入合并操作的发送的指令时,将获取到的单个外部样式信息暂存在变量存储空间内,从而使等待合并的外部样式信息进行缓存;根据样式合并规则,控制变量存储空间内暂存的外部样式信息执行合并处理,使得缓存起来的外部样式信息执行合并处理;确认变量存储空间完成合并后,控制插入合并操作的次数递增阈值进行递增并标记,从而对每一个需要合并的外部样式信息进行插入标记,避免出现无效合并的加载过程发生,进而出现异常报错现象。
在上述技术方案中,进一步地,确认所有外部样式信息都完成插入合并操作的步骤,具体包括:确定合并操作的次数等于外部样式信息的总数,并停止插入合并操作。
在该技术方案中,确认所有外部样式信息都完成插入合并操作的步骤,具体包括:确定合并操作的次数是等于外部样式信息的总数,如果等于,则说明此时所有需要合并的外部样式信息均已完成合并,需要停止插入合并操作,从而避免同时追加注入到页面特定样式标签中,出现页面空白卡死的现象发生。
在上述技术方案中,进一步地,根据预先设置的标签注入规则,将多个外部样式信息文件动态渲染到对应的页面特定样式标签中,还包括:确定页面中外部链接标签与页面特定样式标签的总数超过预设阈值,则执行页面特定样式标签判定操作;确定页面中外部链接标签与页面特定样式标签的总数未超过预设阈值,则执行外部链接标签引入操作。
在该技术方案中,根据预先设置的标签注入规则,将多个外部样式信息文件动态渲染到对应的页面特定样式标签中,还包括:确定页面中外部链接标签与页面特定样式标签的总数超过预设阈值,则说明此时外部链接标签已创建的足够多,无需再进行创建,可以执行页面特定样式标签判定操作;如果确定未超过预设阈值,则说明此时外部链接标签创建的不够多,需要执行外部链接标签引入操作,从而优先判断创建的外部链接标签的引入数量是否超过总数,则避免外部链接标签引入过多造成浏览器页面无法加载多余的外部链接标签,出现样式遗漏、页面空白的问题。
在上述技术方案中,进一步地,执行页面特定样式标签判定操作,具体包括:确定页面特定样式标签包含在浏览器加载页面,则进入从多个外部样式信息中获取单个外部样式信息,检测单个外部样式信息的状态是否属于第一次动态注入的步骤;或者进入获取标签注入规则中的样式合并规则的步骤;确定页面特定样式标签不包含在浏览器加载页面,则创建页面特定样式标签。
在该技术方案中,执行页面特定样式标签判定操作,具体包括:执行第二次判断,即,确定页面特定样式标签是否包含在浏览器加载页面,如果包含,则进入从多个外部样式信息中获取单个外部样式信息,即执行按序添加的步骤:检测单个外部样式信息的状态是否属于第一次动态注入的步骤;或者也可以执行合并添加的步骤:进入获取标签注入规则中的样式合并规则的步骤;如果确定不包含,则说明页面一定不包含页面特定样式标签,需要重新创建页面特定样式标签。
在上述技术方案中,进一步地,执行外部链接标签引入操作,具体包括:控制外部链接标签引入对应的外部样式信息,以生成对应于单个外部样式信息的单个外部链接标签。
在该技术方案中,执行外部链接标签引入操作,具体包括:控制外部链接标签引入对应的外部样式信息,以生成对应于单个外部样式信息的单个外部链接标签,从而实现优先级加载页面特定样式标签。
根据本发明的第二方面,提供了一种加载页面样式的装置,包括存储器和处理器,存储器被配置为存储计算机程序;处理器被配置为执行计算机程序以实现如上述任一技术方案的加载页面样式的方法的步骤,因而具备该加载页面样式的方法的全部有益技术效果,在此不再赘述。
根据本发明的附加方面和优点将在下面的描述部分中给出,部分将从下面的描述中变得明显,或通过本发明的实践了解到。
附图说明
本发明的上述和/或附加的方面和优点从结合下面附图对实施例的描述中将变得明显和容易理解,其中:
图1示出了本发明的一个实施例的加载页面样式的方法的示意流程图;
图2示出了本发明的另一个实施例的加载页面样式的方法的示意流程图;
图3示出了本发明的再一个实施例的加载页面样式的方法的示意流程图;
图4示出了本发明的又一个实施例的加载页面样式的方法的示意流程图;
图5示出了本发明的一个实施例的加载页面样式的方法的示意流程图;
图6示出了本发明的一个实施例的加载页面样式的方法的示意流程图;
图7示出了本发明的一个实施例的加载页面样式的方法的示意流程图。
具体实施方式
为了能够更清楚地理解本发明的上述目的、特征和优点,下面结合附图和具体实施方式对本发明进行进一步的详细描述。需要说明的是,在不冲突的情况下,本申请的实施例及实施例中的特征可以相互组合。
在下面的描述中阐述了很多具体细节以便于充分理解本发明,但是,本发明还可以采用其他不同于在此描述的方式来实施,因此,本发明的保护范围并不受下面公开的具体实施例的限制。
下面参照图1至图7描述根据本发明一些实施例的加载页面样式的方法和加载页面样式的装置。
实施例一:
本发明第一方面的实施例提供了一种加载页面样式的方法。
具体阐述关于加载页面样式的方法的详细内容。
下文将以IE浏览器8为应用场景,外部样式信息为css样式(层叠样式表,是一种用来表现HTML或XML等文件样式的计算机语言),页面特定样式标签为style标签(用于为HTML文档定义的样式信息,它可以是head部分中的元素),页面为html网页(HTML称为超文本标记语言,是一种标识性的语言。它包括一系列标签.通过这些标签可以说明文字,图形、动画、声音、表格、链接等),外部链接标签为link标签(link标签定义文档与外部资源的关系,通常用于链接外部的css样式文件),从而对本申请的实施例进行具体说明。
图1示出了本申请的一个实施例的加载页面样式的方法的示意流程图。
如图1所示,该加载页面样式的方法包括:
步骤S102,获取页面中对应的多个外部样式信息;
步骤S104,根据预先设置的标签设定规则,将多个外部样式信息动态渲染到对应的页面特定样式标签中;
步骤S106,根据页面特定样式标签加载页面样式。
本发明实施例提供的加载页面样式的方法,获取页面中存储的多个外部样式信息,可以说明的是,一个页面与多个外部样式信息之间是映射关系;根据预先设置的标签设定规则,将多个外部样式信息动态渲染到对应的页面特定样式标签中,由于动态渲染的过程能够缓解浏览器同时加载外部样式信息和页面特定样式标签,使外部样式信息与页面特定样式标签进行动态融合后,浏览器再加载动态融合后的样式,保证页面样式加载步骤的有序性,从而避免多个外部样式信息同时追加到页面特定样式标签后,浏览器加载页面时出现页面空白卡死的现象发生;最后根据页面特定样式标签加载页面样式,进一步保证了外部样式信息完全被浏览器加载,避免出现页面空白卡死或遗漏现象发生。
具体的,可以通过3种实现方式,使多个css样式动态注入到html网页中的style标签,其中渲染的过程可以是按序加载每个css样式信息;也可以采用合并加载的方式,使多个css样式信息进行合并后,一次性动态注入到html网页中的style标签中;还可以采用优先级加载css样式的方式,即,以创建link标签的方式,并判断link标签和style标签在html网页中存储的个数,一旦超过了预设的存储个数,则采用按序加载每个css样式信息的方法,或者采用合并加载的方法,从而通过3种并列的解决方式,避免浏览器加载html网页过程中出现页面空白卡死的现象发生。
图2示出了本申请的一个实施例的加载页面样式的方法的另一个示意流程图。
如图2所示,该加载页面样式的方法具体包括:
步骤S202,获取页面中对应的多个外部样式信息;
步骤S204,从多个外部样式信息中获取单个外部样式信息,检测单个外部样式信息的状态是否属于第一次动态注入;如果是,则执行步骤S206;否则,则执行步骤S208;
步骤S206,动态追加到对应的页面特定样式标签;
步骤S208,检测上一次追加的单个外部样式信息是否完成动态注入;如果是,则执行步骤S210;否则,则执行步骤S212;
步骤S210,停止运行轮循时间规则,继续依次按序追加新的单个外部样式信息至页面特定样式标签中;
步骤S212,启动标签注入规则中的轮循时间规则;
步骤S214,根据轮循时间规则中的循环时间设置循环询问频率;
步骤S216,根据循环询问频率,重复加载执行步骤S208。
在该实施例中,根据预先设置的标签注入规则,将多个外部样式信息动态渲染到对应的页面特定样式标签中,具体包括:从多个外部样式信息中按序获取每个外部样式信息,并且检测获取到的每个外部样式信息是否属于第一次动态注入,如果确定属于第一次动态注入,说明页面特定样式标签中没有动态注入过外部样式信息,因此需要动态追加到对应的页面特定样式标签中,然后进行下一次判断,即,确定不属于第一次动态注入,检测上一次追加的单个外部样式信息是否完成动态注入的过程,如果确定上一次追加的单个外部样式信息完成动态注入的过程,则继续获取下一个外部样式信息,将外部样式信息追加注入页面特定样式标签中,可以说明的是,继续追加的过程仍然要进行第二次判断;并且如果上一次追加的外部样式信息属于未完成动态注入,则停止动态按序追加新的单个外部样式信息至页面特定样式标签中,从而保证了对每个外部样式信息进行动态注入的判断,避免出现外部样式信息因遗漏造成浏览器加载页面的过程空白卡死的问题发生。
停止动态按序追加新的单个外部样式信息之前,还包括:启动标签注入规则中的轮循时间规则,并根据轮循时间规则中的循环时间设置循环询问频率,然后根据循环询问频率,重复加载上一次追加的单个外部样式信息动态注入的过程,一旦上一次追加的单个外部样式信息完成动态注入后,则停止运行轮循时间规则,从而保证只有单个外部样式信息实现完成注入后,才能继续执行,否则设置等待轮循环节,实现重复加载询问。
图3示出了本申请的一个实施例的加载页面样式的方法的另一个示意流程图。
如图3所示,该加载页面样式的方法具体包括:
步骤S302,第一次动态追加css样式;
步骤S304,判断css是否加载完毕,如果是,则执行步骤S306;否则,执行步骤S308;
步骤S306,第二次动态追加css样式,并执行步骤S310;
步骤S308,等待2s;
步骤S310,判断css是否加载完毕,如果是,则执行步骤S312;否则,执行步骤S314;
步骤S312,第三次动态追加css样式,并执行步骤S316;
步骤S314,等待2s;
步骤S316,判断css是否加载完毕,如果是,则执行步骤S318;否则,执行步骤S320;
步骤S318,第n次动态追加css样式;
步骤S320,等待2s。
具体的,每一次向html页面中的style标签中追加新的css样式时,都询问上一次追加注入的css样式文件是否加载完毕,如果加载完毕,那么就向style标签追加此次新的css样式信息;如果未加载完毕,那么不向style标签追加css样式信息,同时,根据设置的轮询时间2s,即,每隔2s再去询问一次上次的css是否加载完毕,若加载完毕,则追加新的css样式信息,未完毕,再轮询询问,直到加载完毕停止询问。通过该种方式,可以使得css样式信息,依次按序追加到style标签中,即保证了css样式信息完全被html网页加载,也解决了多个css样式信息同时追加到style标签中在IE8浏览器上带来的页面空白卡死等现象。
图4示出了本申请的一个实施例的加载页面样式的方法的再一个示意流程图。
如图4所示,该加载页面样式的方法还包括:
步骤S402,获取页面中对应的多个外部样式信息;
步骤S404,获取标签注入规则中的样式合并规则;
步骤S406,统计外部样式信息的总数;
步骤S408,接收到插入合并操作发送的指令,将获取到单个外部样式信息暂存在变量存储空间内;
步骤S410,根据样式合并规则,控制变量存储空间内暂存的外部样式信息执行合并处理;
步骤S412,确认变量存储空间完成合并后,控制插入合并操作的次数递增阈值进行递增并标记;
步骤S414,确定合并操作的次数是否等于外部样式信息的总数,如果是,则执行步骤S416;否则,则执行步骤S406;
步骤S416,停止插入合并操作,提取插入合并操作过程中设置的变量存储空间;
步骤S418,控制变量存储空间内存放的合并样式,动态渲染到对应的页面特定样式标签中。
在该实施例中,获取标签注入规则中的样式合并规则,可以说明的是,这里采用的是先合并多个外部样式信息,再将合并后的样式信息一起添加到页面特定样式标签中,从而避免同时将单个外部样式信息一个一个添加到页面特定样式标签中,降低浏览器加载页面的处理速度;具体的,统计外部样式信息的总数,从外部样式信息中遍历获取单个外部样式信息文件,对单个外部样式信息文件执行插入合并操作,确认所有外部样式信息都完成插入合并操作,提取插入合并操作的过程中设置的变量存储空间,从而实现合并插入的过程中能够将获取的单个外部样式信息缓存到变量存储空间内;并且控制变量存储空间内存放的合并样式,能够动态渲染到对应的页面特定样式标签中,从而实现将多条外部样式信息合并为一条外部样式信息后,进行一次性追加注入,避免浏览器同时并发追加多条外部样式信息到页面特定样式标签中。
从外部样式信息中遍历获取单个外部样式信息文件时,对单个外部样式信息文件执行插入合并操作,具体包括:接收到插入合并操作的发送的指令时,将获取到的单个外部样式信息暂存在变量存储空间内,从而使等待合并的外部样式信息进行缓存;根据样式合并规则,控制变量存储空间内暂存的外部样式信息执行合并处理,使得缓存起来的外部样式信息执行合并处理;确认变量存储空间完成合并后,控制插入合并操作的次数递增阈值进行递增并标记,从而对每一个需要合并的外部样式信息进行插入标记,避免出现无效合并的加载过程发生,进而出现异常报错现象。确认所有外部样式信息都完成插入合并操作的步骤,具体包括:确定合并操作的次数是否等于外部样式信息的总数,如果等于,则说明此时所有需要合并的外部样式信息均已完成合并,需要停止插入合并操作。
图5示出了本申请的一个实施例的加载页面样式的方法的另一个示意流程图。
如图5所示,该加载页面样式的方法具体包括:
步骤S502,存储第一次需要插入的css样式信息;
步骤S504,存储第二次需要插入的css样式信息;
步骤S506,存储第三次需要插入的css样式信息;
步骤S508,存储第n次需要插入的css样式信息;
步骤S510,动态将前n次存储的css样式信息合并,一次性插入style标签中。
具体的,该种实现方式采用:将多个css样式信息进行合并成一条css样式信息,将多条css样式信息同时追加style标签,改为将合并后的css样式信息,单次追加。
具体的实现方式如下:
假设一共有三条css样式信息,那么等待第一条css样式信息到来之后,将它缓存起来,等待第二条css样式信息到来之后,与前一条样式信息进行合并,等待第三条css样式信息到来之后,判断这是最后一条需要加载的css样式信息吗,如果是,那么等待该条css样式信息与前一条样式信息合并之后,就将合并的css样式信息追加到style标签中;如果不是,那么继续等待需要合并的css样式。
另外需要说明的是,其实,每次合并css样式信息都需要判断这是不是最后一条css样式信息,是的话就等待合并完成之后,一起追加到style标签中。通过该种方式,将多条需要同时追加到style标签中的css样式信息,合并为一条css样式信息,然后进行一次追加,解决了多个css样式信息同时追加到style标签中在IE8浏览器上带来的页面空白卡死等现象。
图6示出了本申请的一个实施例的加载页面样式的方法的另一个示意流程图。
如图6所示,该加载页面样式的方法还包括:
步骤S602,获取页面中对应的多个外部样式信息;
步骤S604,确定页面中外部链接标签与页面特定样式标签的总数是否超过预设阈值,如果是,则执行步骤S606;否则,则执行步骤S614;
步骤S606,确定页面特定样式标签是否包含在浏览器加载页面,如果是,则执行步骤S608或者执行步骤S610;否则,则执行步骤S612;
步骤S608,进入从多个外部样式信息中获取单个外部样式信息,检测单个外部样式信息的状态是否属于第一次动态注入的步骤;
步骤S610,进入获取标签注入规则中的样式合并规则的步骤;
步骤S612,创建页面特定样式标签;
步骤S614,控制外部链接标签引入对应的外部样式信息,以生成对应于单个外部样式信息的单个外部链接标签。
在该实施例中,确定页面中外部链接标签与页面特定样式标签的总数超过预设阈值,则说明此时外部链接标签已创建的足够多,无需再进行创建,可以执行页面特定样式标签判定操作;如果确定未超过预设阈值,则说明此时外部链接标签创建的不够多,需要执行外部链接标签引入操作,从而优先判断创建的外部链接标签的引入数量是否超过总数,则避免外部链接标签引入过多造成浏览器页面无法加载多余的外部链接标签,出现样式遗漏、页面空白的问题。
执行第二次判断,即,确定页面特定样式标签是否包含在浏览器加载页面,如果包含,则进入从多个外部样式信息中获取单个外部样式信息,即执行按序添加的步骤:检测单个外部样式信息的状态是否属于第一次动态注入的步骤;或者也可以执行合并添加的步骤:进入获取标签注入规则中的样式合并规则的步骤;如果确定不包含,则说明页面一定不包含页面特定样式标签,需要重新创建页面特定样式标签。执行外部链接标签引入操作,具体包括:控制外部链接标签引入对应的外部样式信息,以生成对应于单个外部样式信息的单个外部链接标签,从而实现优先级加载页面特定样式标签。
图7示出了本申请的一个实施例的加载页面样式的方法的另一个示意流程图。
如图7所示,该加载页面样式的方法还包括:
步骤S702,第一次需要加载css样式文件;
步骤S704,判断页面中link标签和style标签数量是否小于30,如果是,则执行步骤S706;否则,执行步骤S708;
步骤S706,创建link标签加载css样式;
步骤S708,创建style标签加载样式;
步骤S710,第二次需要加载css样式文件,然后执行步骤S712;
步骤S712,判断页面中link标签和style标签数量是否小于30,如果是,则执行步骤S714;否则,执行步骤S708;
步骤S714,创建link标签加载css样式;
步骤S716,第n次需要加载css样式文件,然后执行步骤S718;
步骤S718,判断页面中link标签和style标签数量是否小于30,如果是,则执行步骤S720;否则,执行步骤S708;
步骤S720,创建link标签加载css样式。
具体的,该种实现方式采用:当有需要追加的css样式信息时,优先采用直接创建link标签引入css样式信息的方式,这种方式的前提是:需要判断html页面中link标签数量和style标签数量是否达到设定的阈值,假设我们设置30个时,未达到,那么创建link标签引入css样式信息;达到了那么就创建style标签,并将该次的css样式信息追加到刚刚创建的stye标签中;当下次再来css样式信息时,这次的判断和上一次的有所不同,这次可以判断html页面上是否有我们创建的style标签,如果有,则代表我们之前肯定是判断了因为html页面中link和style标签数量超出了阈值,所以才会创建的style标签。因此如果有我们创建的style标签,那么此次的css样式信息追加形式,采用第一种:按序加载css样式方式或者第二种:合并css样式加载方式,添加到style标签中;如果没有我们创建的style标签,那么就需要判断html页面中link标签数量和style标签数量是否达到设定的阈值,假设我们设置30个,未达到,那么创建link标签引入css样式信息;达到了那么就创建style标签,并将该次的css样式信息追加到刚刚创建的stye标签中;当下来再来css样式信息时,重复这个流程。
通过该种方式,当html页面中link和style标签数量未达到阈值时候,优先创建link标签的形式可以使得当有css样式信息需要追加时,能够及时的添加到html中,进而作用于网页上,创建link标签引入css样式信息不会造成IE8浏览器出现的空白崩溃现象。
实施例二:
本发明第二方面的实施例提供了一种加载页面样式的装置。
根据本发明的实施例,其上存储有计算机程序,计算机程序被处理器执行时实现如上述任一实施例中提供的加载页面样式的方法,因此,该计算机可读存储介质包括如上述任一实施例中提供的加载页面样式的方法的全部有益效果,在此不再赘述。
在该实施例中,计算机可读存储介质,计算机程序被处理器执行时实现如上述任一技术方案的加载页面样式的方法的步骤,因此该计算机可读存储介质包括上述任一技术方案的加载页面样式的方法的全部有益效果。
具体地,计算机可读存储介质可以包括能够存储或传输信息的任何介质。计算机可读存储介质的例子包括电子电路、半导体存储器设备、ROM、闪存、可擦除ROM(EROM)、软盘、CD-ROM、光盘、硬盘、光纤介质、射频(RF)链路,等等。代码段可以经由诸如因特网、内联网等的计算机网络被下载。
在本申请中,术语“多个”则指两个或两个以上,除非另有明确的限定。术语“安装”、“相连”、“连接”、“固定”等术语均应做广义理解,例如,“连接”可以是固定连接,也可以是可拆卸连接,或一体地连接;“相连”可以是直接相连,也可以通过中间媒介间接相连。对于本领域的普通技术人员而言,可以根据具体情况理解上述术语在本申请中的具体含义。
在本说明书的描述中,术语“一个实施例”、“一些实施例”、“具体实施例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或特点包含于本申请的至少一个实施例或示例中。在本说明书中,对上述术语的示意性表述不一定指的是相同的实施例或实例。而且,描述的具体特征、结构、材料或特点可以在任何的一个或多个实施例或示例中以合适的方式结合。
以上所述仅为本申请的优选实施例而已,并不用于限制本申请,对于本领域的技术人员来说,本申请可以有各种更改和变化。凡在本申请的精神和原则之内,所作的任何修改、等同替换、改进等,均应包含在本申请的保护范围之内。

Claims (10)

1.一种加载页面样式的方法,其特征在于,包括:
获取页面中对应的多个外部样式信息;
根据预先设置的标签设定规则,将所述多个外部样式信息动态渲染到对应的页面特定样式标签中;
根据所述页面特定样式标签加载所述页面样式。
2.根据权利要求1所述的加载页面样式的方法,其特征在于,所述根据预先设置的标签注入规则,将所述多个外部样式信息动态渲染到对应的页面特定样式标签中,具体包括:
从所述多个外部样式信息中获取单个外部样式信息,检测所述单个外部样式信息的状态是否属于第一次动态注入;
确定所述单个外部样式信息的状态属于第一次动态注入,则动态追加到对应的所述页面特定样式标签;
确定所述单个外部样式信息的状态不属于第一次动态注入,则检测上一次追加的所述单个外部样式信息是否完成动态注入;
确定上一次追加的所述单个外部样式信息完成动态注入,则继续依次按序追加新的所述单个外部样式信息至所述页面特定样式标签中;
确定上一次追加的所述单个外部样式信息完未成动态注入,则停止动态按序追加新的所述单个外部样式信息至所述页面特定样式标签中。
3.根据权利要求2所述的加载页面样式的方法,其特征在于,所述停止动态按序追加新的所述单个外部样式信息之前,还包括:
启动所述标签注入规则中的轮循时间规则;
根据所述轮循时间规则中的循环时间设置循环询问频率;
根据所述循环询问频率,重复加载所述上一次追加的所述单个外部样式信息动态注入的过程;
所述上一次追加的所述单个外部样式信息完成动态注入,则停止运行所述轮循时间规则。
4.根据权利要求1所述的加载页面样式的方法,其特征在于,所述根据预先设置的标签注入规则,将所述多个外部样式信息文件动态渲染到对应的页面特定样式标签中,具体包括:
获取所述标签注入规则中的样式合并规则;
统计所述外部样式信息的总数;
从外部样式信息中遍历获取单个外部样式信息文件,对所述单个外部样式信息文件执行插入合并操作;
确定所有外部样式信息都完成所述插入合并操作,提取所述插入合并操作过程中设置的变量存储空间;
控制所述变量存储空间内存放的合并样式,动态渲染到所述对应的页面特定样式标签中。
5.根据权利要求4所述的加载页面样式的方法,其特征在于,所述从外部样式信息中遍历获取单个外部样式信息文件时,对所述单个外部样式信息文件执行插入合并操作,具体包括:
接收到所述插入合并操作发送的指令,将获取到所述单个外部样式信息暂存在所述变量存储空间内;
根据所述样式合并规则,控制所述变量存储空间内暂存的所述外部样式信息执行合并处理;
确定所述变量存储空间完成合并后,控制所述插入合并操作的次数递增阈值进行递增并标记。
6.根据权利要求4或5所述的加载页面样式的方法,其特征在于,所述确定所有外部样式信息都完成所述插入合并操作,具体包括:
确定所述合并操作的次数等于所述外部样式信息的总数,并停止所述插入合并操作。
7.根据权利要求2所述的加载页面样式的方法,其特征在于,所述根据预先设置的标签注入规则,将所述多个外部样式信息文件动态渲染到对应的页面特定样式标签中,还包括:
确定所述页面的外部链接标签与所述页面特定样式标签的总数超过预设阈值,则执行所述页面特定样式标签判定操作;
确定所述页面的外部链接标签与所述页面特定样式标签的总数未超过所述预设阈值,则执行外部链接标签引入操作。
8.根据权利要求7所述的加载页面样式的方法,其特征在于,所述执行所述页面特定样式标签判定操作,具体包括:
确定所述页面特定样式标签包含在所述加载页面,则进入所述从所述多个外部样式信息中获取所述单个外部样式信息,检测所述单个外部样式信息的状态是否属于第一次动态注入的步骤;或者
进入所述获取所述标签注入规则中的样式合并规则的步骤;
确定所述页面特定样式标签不包含在所述加载页面,则创建所述页面特定样式标签。
9.根据权利要求7所述的加载页面样式的方法,其特征在于,所述执行外部链接标签引入操作,具体包括:
控制所述外部链接标签引入对应的所述外部样式信息,以生成对应于单个所述外部样式信息的单个所述外部链接标签。
10.一种加载页面样式的装置,其特征在于,包括存储器和处理器,所述存储器中存储有计算机程序,所述处理器用于执行所述计算机程序时实现如权利要求1至9中任一项所述的加载页面样式的方法步骤。
CN201911400844.4A 2019-12-30 2019-12-30 加载页面样式的方法和加载页面样式的装置 Active CN111159603B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201911400844.4A CN111159603B (zh) 2019-12-30 2019-12-30 加载页面样式的方法和加载页面样式的装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201911400844.4A CN111159603B (zh) 2019-12-30 2019-12-30 加载页面样式的方法和加载页面样式的装置

Publications (2)

Publication Number Publication Date
CN111159603A true CN111159603A (zh) 2020-05-15
CN111159603B CN111159603B (zh) 2023-08-04

Family

ID=70559356

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201911400844.4A Active CN111159603B (zh) 2019-12-30 2019-12-30 加载页面样式的方法和加载页面样式的装置

Country Status (1)

Country Link
CN (1) CN111159603B (zh)

Citations (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US8615708B1 (en) * 2011-11-18 2013-12-24 Sencha, Inc. Techniques for live styling a web page
CN103546498A (zh) * 2012-07-09 2014-01-29 百度在线网络技术(北京)有限公司 一种为移动终端提供访问网页的方法与设备
CN104182547A (zh) * 2014-09-10 2014-12-03 北京浩瀚深度信息技术股份有限公司 一种服务器优化页面渲染的方法及web cache服务器
US20160162140A1 (en) * 2014-08-05 2016-06-09 Moxie Software, Inc. Element mapping and rule building systems and methods for contextual site visitor engagement
CN105824874A (zh) * 2016-02-01 2016-08-03 乐视移动智能信息技术(北京)有限公司 移动终端及其网页渲染方法、装置
CN107577509A (zh) * 2017-08-28 2018-01-12 深圳市金立通信设备有限公司 一种加载应用界面的方法、终端及计算机可读存储介质
CN109582899A (zh) * 2018-10-26 2019-04-05 平安科技(深圳)有限公司 页面加载方法、装置、计算机设备及存储介质
CN110309451A (zh) * 2018-03-02 2019-10-08 拉扎斯网络科技(上海)有限公司 一种web预加载页面的生成方法及装置

Patent Citations (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US8615708B1 (en) * 2011-11-18 2013-12-24 Sencha, Inc. Techniques for live styling a web page
CN103546498A (zh) * 2012-07-09 2014-01-29 百度在线网络技术(北京)有限公司 一种为移动终端提供访问网页的方法与设备
US20160162140A1 (en) * 2014-08-05 2016-06-09 Moxie Software, Inc. Element mapping and rule building systems and methods for contextual site visitor engagement
CN104182547A (zh) * 2014-09-10 2014-12-03 北京浩瀚深度信息技术股份有限公司 一种服务器优化页面渲染的方法及web cache服务器
CN105824874A (zh) * 2016-02-01 2016-08-03 乐视移动智能信息技术(北京)有限公司 移动终端及其网页渲染方法、装置
CN107577509A (zh) * 2017-08-28 2018-01-12 深圳市金立通信设备有限公司 一种加载应用界面的方法、终端及计算机可读存储介质
CN110309451A (zh) * 2018-03-02 2019-10-08 拉扎斯网络科技(上海)有限公司 一种web预加载页面的生成方法及装置
CN109582899A (zh) * 2018-10-26 2019-04-05 平安科技(深圳)有限公司 页面加载方法、装置、计算机设备及存储介质

Non-Patent Citations (2)

* Cited by examiner, † Cited by third party
Title
PRATIKSHA H. SHROFF;ET AL: "Critical rendering path optimizations to reduce the web page loading time", 《2017 2ND INTERNATIONAL CONFERENCE FOR CONVERGENCE IN TECHNOLOGY (I2CT)》 *
徐世武; 严玉姣: "Web页面加载方式研究分析与优化", 《计算机应用与软件》 *

Also Published As

Publication number Publication date
CN111159603B (zh) 2023-08-04

Similar Documents

Publication Publication Date Title
US7281205B2 (en) Hash compact XML parser
US5379373A (en) Document layout processing method and device for carrying out the same
CN102682098B (zh) 检测网页内容变更的方法及装置
CN103699585A (zh) 文件的元数据存储以及文件恢复的方法、装置和系统
EP2790111A1 (en) Method and device for acquiring structured information in layout file
CN106919624B (zh) 提高网页加载速度的方法及装置
CN106681901B (zh) 一种测试样本生成的方法和装置
CN1105348C (zh) 将字型从处理机下装到打印机的有效方法和设备
WO2015160351A1 (en) Cascading style sheet meta language performance
CN111159982A (zh) 文档编辑方法、装置、电子设备及计算机可读存储介质
CN112148343A (zh) 规则发布方法、装置及终端设备
CN111159603A (zh) 加载页面样式的方法和加载页面样式的装置
CN113094617B (zh) 一种web元素定位方法及其应用和存储介质
CN104516859A (zh) 一种文字修正方法及系统
CN109857740B (zh) 字符串的存储方法、匹配方法、电子设备及可读存储介质
JP4470913B2 (ja) 文字列検索装置およびプログラム
CN110795933B (zh) 一种网页正文的识别处理方法及装置
CN116306531A (zh) Html文档自动填充方法、装置、电子设备及存储介质
CN114528811B (zh) 文章内容抽取方法、装置、设备及存储介质
CN112230989B (zh) 网页频道导航栏提取方法、系统、电子设备及存储介质
US9430451B1 (en) Parsing author name groups in non-standardized format
CN109840080B (zh) 字符属性比较方法、装置、存储介质及电子设备
CN113434748A (zh) 基于模板标注的分布式爬虫方法、装置、计算机装置及计算机可读存储介质
CN115858208B (zh) 一种获取目标数据提取文本列表的方法
US11545997B2 (en) Device and method for processing a binary-coded structure document

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
TA01 Transfer of patent application right

Effective date of registration: 20230609

Address after: 3007, Hengqin international financial center building, No. 58, Huajin street, Hengqin new area, Zhuhai, Guangdong 519031

Applicant after: New founder holdings development Co.,Ltd.

Applicant after: BEIJING FOUNDER ELECTRONICS Co.,Ltd.

Address before: 100871, Beijing, Haidian District Cheng Fu Road 298, founder building, 9 floor

Applicant before: PEKING UNIVERSITY FOUNDER GROUP Co.,Ltd.

Applicant before: BEIJING FOUNDER ELECTRONICS Co.,Ltd.

TA01 Transfer of patent application right
GR01 Patent grant
GR01 Patent grant