一种网站页面浏览器端极速渲染的实现方法技术

一种网站页面浏览器端极速渲染的实现方法，涉及web开发技术领域，其包括以下步骤：步骤S1.依据代码的重要级别对前端代码进行优先级划分；步骤S2.重构网站页面代码，只加入对最高优先级前端代码的引用；步骤S3.网站页面完全载入完毕后，按照优先级顺序动态加载剩余的前端代码。本发明专利技术能够尽快的让用户看到页面，尤其在网速慢、代码量大时，能够避免用户长时间等待，提高了用户体验。

【技术实现步骤摘要】

本专利技术涉及冊13开发
，具体来讲是。
技术介绍
随着冊1^0时代的到来和中国互联网用户的井喷式增长，各种网站如雨后春笋般在互联网中生根发芽，网站在很多方面的便利也让用户对网站也越来越依赖。很多网站在用户量逐渐扩大的过程中，网站功能也逐渐增多。网站功能丰富直接导致网站页面代码的复杂，这体现在网站页面需要加载的了8^716 311661:8，式层叠表或简称样式表)代码越来越多，越来越大，从而导致页面等待时间也越来越长，而长久地等待会让用户对网站的体验直线下降。 ? ！—样式表一? 〈1111 垃 1:7？6 =088^1-01 = 〃8七716811661:〃111~6；？ = ^8^7161- 088^/^ 〈1111 垃 1:7？6 =088^1-01 = 〃8七716811661:〃111~6；？ = ^8^7162.088^/^ 〈1111 垃 1:7？6 =088^1-01 = 〃8七716811661:〃111~6；？ = ^8^7163.088^/^ ... ? ！ —^^8801-11)1:脚本文件一? 1:7？6 == 1:7？6 = = 801-1^1:) ^801-11)1: 1:7？6 =^^8801-11)1:^81-0 = ^^^8801-11)1:3.801-1^1:) 上面所示为传统网站页面前端代码放置模型，这种模型下，由于所有前端代码文件顺序排列，会让浏览器一直处于加载状态直到所有的前端代码文件加载完毕，当浏览器加载页面的时候，这些代码就会阻塞浏览器渲染网站页面，尤其在网速慢、代码量大时，这些前端代码的加载会非常耗时，用户则需要一直等待，造成用户体验差。
技术实现思路
针对现有技术中存在的缺陷，本专利技术的目的在于提供，本专利技术能够尽快的让用户看到页面，尤其在网速慢、代码量大时，能够避免用户长时间等待，提闻了用户体验。 为达到以上目的，本专利技术采取的技术方案是:，包括以下步骤:步骤31.依据代码的重要级别对前端代码进行优先级划分；步骤82.重构网站页面代码，只加入对最高优先级前端代码的引用；步骤33.网站页面完全载入完毕后，按照优先级顺序动态加载剩余的前端代码。 在上述技术方案的基础上，所述前端代码包括拓^3(^1讨和033。 在上述技术方案的基础上，步骤51中，依据代码的重要级别对前端代码进行优先级划分，依次划分为第一优先级前端代码、第二优先级前端代码、第三优先级前端代码；其中，第一优先级前端代码表示网站页面一旦显示出来就能够和用户交互所用到的代码；第二优先级前端代码表示网站页面和用户交互的过程中需要进一步交互所用到的代码；第三优先级前端代码表示其它网站页面用到的不同于当前网站页面的代码。 在上述技术方案的基础上，步骤33中，当前网站页面完全载入完毕后，按照优先级顺序动态加载第二优先级前端代码；当前网站页面需要的代码加载完毕后，加载第三优先级前端代码。 在上述技术方案的基础上，步骤32中，利用压缩工具压缩前端代码，缩减加载时间。 在上述技术方案的基础上，所述压缩工具为 在上述技术方案的基础上，步骤32中，若最高优先级前端代码有两个以上的文件，则将所述两个以上的文件合并为一个单独的文件，以降低请求数。 在上述技术方案的基础上，步骤33中，网站页面触发01^021(1事件时网站页面完全载入完毕。 本专利技术的有益效果在于: 1、由于本专利技术加载页面时，只加载最高优先级前端代码文件，等网站页面触发加载完毕事件时，再按照优先级顺序动态加载剩余的前端代码文件，因此能够尽快的让用户看到页面，尤其在网速慢、代码量大时，能够避免用户长时间等待，提高了用户体验。 2、由于本专利技术中，用户开始浏览网站页面的时候，后台动态加载剩余的前端代码文件，等用户操作需要这部分代码的时候，代码已经加载完毕或者只需要让用户等待很短的时间即可加载完毕，进一步的提高了用户体验。 【附图说明】 图1为本专利技术实施例中网站页面浏览器端极速渲染的实现方法流程图。 【具体实施方式】 在本专利技术中涉及的相关技术术语，作如下说明: 的，是一种浏览器内置的脚本语言，用于对页面元素编程产生各种效果。 2.(:33,用于更改页面元素外观(颜色，大小，边框等等)。 3.前端代码，泛指]033文件。 4.网站页面，由网站服务器返回的一段文本，包含!代码以及对了讨文件和(:％文件的引用。 5.页面元素，一段代码的表现形式，如一段文字，一张图片，一个超链接等。 以下结合附图及实施例对本专利技术作进一步详细说明。 参见图1所示，，包括以下步骤: 步骤51.依据代码的重要级别对前端代码进行优先级划分；所述前端代码包括 和“3。优选的，依据代码的重要级别对前端代码进行优先级划分，依次划分为第一优先级前端代码、第二优先级前端代码、第三优先级前端代码；其中，第一优先级前端代码表示网站页面一旦显示出来就能够和用户交互所用到的代码；第二优先级前端代码表示网站页面和用户交互的过程中需要进一步交互所用到的代码；第三优先级前端代码表示其它网站页面用到的不同于当前网站页面的代码。 步骤32.重构网站页面代码，只加入对最高优先级前端代码的引用；优选的，若最高优先级前端代码有两个以上的文件，则将所述两个以上的文件合并为一个单独的文件，以降低请求数。利用压缩工具压缩前端代码，缩减加载时间，优选的，所述压缩工具为 7111-001111)^6550^0 步骤33.网站页面完全载入完毕后，按照优先级顺序动态加载剩余的前端代码。具体的，网站页面触发0111X^(1事件时网站页面完全载入完毕。优选的，当前网站页面完全载入完毕后，按照优先级顺序动态加载第二优先级前端代码；当前网站页面需要的代码加载完毕后，加载第三优先级前端代码。 为方便理解，下面结合具体的实例对本专利技术作进一步说明: ? ！—合并，压缩必需样式后的样式表文件一? 〈1111 垃 1:7？6 =088^1-01 = 〃8七716811661:〃111~6；？ = ^8^7161- 088^/^ ... ? ！—可以动态加载其它脚本的』脚本文件一? 1:7？6 == 上面所示为本专利技术改进后的网站页面前端代码放置模型，这种模型下，只加载最高优先级的样式表文件和拓^3(^1的文件，等网站页面触发加载完毕事件时，再按照优先级顺序动态加载剩余的前端代码文件。以登陆页面为例，登陆页面和第一优先级前端代码加载完毕之后，用户需要输入用户名和密码，在用户登陆成功之前，可以利用这些时间去加载剩余的第二优先级前端代码和第三优先级前端代码，这样等用户成功登陆后，前端页面会迅速的显示出来，避免的因等待造成的用户体验差。 本专利技术不局限于上述实施方式，对于本
的普通技术人员来说，在不脱离本专利技术原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也视为本专利技术的保护范围之内。本说明书中未作详细描述的内容属于本领域专业技术人员公知的现有技术。本文档来自技高网...

【技术保护点】
一种网站页面浏览器端极速渲染的实现方法，其特征在于，包括以下步骤：步骤S1.依据代码的重要级别对前端代码进行优先级划分；步骤S2.重构网站页面代码，只加入对最高优先级前端代码的引用；步骤S3.网站页面完全载入完毕后，按照优先级顺序动态加载剩余的前端代码。

【技术特征摘要】
1.一种网站页面浏览器端极速渲染的实现方法，其特征在于，包括以下步骤: 步骤S1.依据代码的重要级别对前端代码进行优先级划分； 步骤S2.重构网站页面代码，只加入对最高优先级前端代码的引用； 步骤S3.网站页面完全载入完毕后，按照优先级顺序动态加载剩余的前端代码。2.如权利要求1所述的网站页面浏览器端极速渲染的实现方法，其特征在于:所述前端代码包括JavaScript和CSS。3.如权利要求1所述的网站页面浏览器端极速渲染的实现方法，其特征在于，步骤SI中，依据代码的重要级别对前端代码进行优先级划分，依次划分为第一优先级前端代码、第二优先级前端代码、第三优先级前端代码； 其中，第一优先级前端代码表示网站页面一旦显示出来就能够和用户交互所用到的代码； 第二优先级前端代码表示网站页面和用户交互的过程中需要进一步交互所用到的代码； 第三优先级前端代码表示其它网站页面用到...

【专利技术属性】
技术研发人员：张垚，
申请(专利权)人：武汉噢易云计算有限公司，
类型：发明
国别省市：湖北;42