CN106933640B - 在移动终端的浏览器内加载Web页面的方法及系统 - Google Patents

在移动终端的浏览器内加载Web页面的方法及系统 Download PDF

Info

Publication number
CN106933640B
CN106933640B CN201710282542.6A CN201710282542A CN106933640B CN 106933640 B CN106933640 B CN 106933640B CN 201710282542 A CN201710282542 A CN 201710282542A CN 106933640 B CN106933640 B CN 106933640B
Authority
CN
China
Prior art keywords
web page
web
loading
page
web server
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.)
Active
Application number
CN201710282542.6A
Other languages
English (en)
Other versions
CN106933640A (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.)
Ctrip Travel Network Technology Shanghai Co Ltd
Original Assignee
Ctrip Travel Network Technology Shanghai 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 Ctrip Travel Network Technology Shanghai Co Ltd filed Critical Ctrip Travel Network Technology Shanghai Co Ltd
Priority to CN201710282542.6A priority Critical patent/CN106933640B/zh
Publication of CN106933640A publication Critical patent/CN106933640A/zh
Application granted granted Critical
Publication of CN106933640B publication Critical patent/CN106933640B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/445—Program loading or initiating
    • G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
    • G06F9/44526—Plug-ins; Add-ons
    • 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
    • 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]

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Databases & Information Systems (AREA)
  • Data Mining & Analysis (AREA)
  • Human Computer Interaction (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

本发明公开了一种在移动终端的浏览器内加载Web页面的方法及系统，所述方法包括以下步骤：将构成目标Web页面的不同元素封装进多个组件中，并将所述组件存储于Web服务器；从所述Web服务器获取预设的组件，并加载包括所述预设的组件的初始Web页面；根据访问Web页面的不同操作，从所述Web服务器获取与所述操作相对应的目标组件，并加载包括所述目标组件的Web页面。与现有技术相比，本发明利用单页Web框架技术，使得用户在任务操作过程中不会被页面跳转干扰，大大降低了移动终端Web页面间跳转出现的卡顿问题，整个任务流程在一个页面内完成，有效提升了人机交互的效率和舒适度。

Description

在移动终端的浏览器内加载Web页面的方法及系统
技术领域
本发明涉及计算机技术领域，特别涉及一种在移动终端的浏览器内加载Web(World Wide Web，万维网)页面的方法及系统。
背景技术
目前，OTA(Online Travel Agent，在线旅行社)移动端网站一般采用传统的分页面加载形式，用户从表达搜索意向、浏览搜索结果、选择意向订单以及填写订单信息，每一步流程都需要跳转新的页面，每个页面对应独立的URL(Uniform Resource Locator，统一资源定位符)。window.location对象用于获得当前页面的地址(URL)，并把浏览器重定向到新的页面。
通过分页面加载形式在WebApp(基于Web的系统和应用)中切换页面时，一方面，由于不同机型、不同浏览器的渲染技术差异，很容易出现白屏卡顿等不流畅的现象，严重影响用户体验；另一方面，用户切换到下一个页面时，可能会因为网络问题加载时间过长造成用户的流失，导致页面的跳失率变高。其中，跳失率是指显示顾客通过相应入口进入，只访问了一个页面就离开的访问次数占该页面总访问次数的比例。
发明内容
本发明要解决的技术问题是为了克服现有技术中window.location页面跳转时存在卡顿、不流畅以及加载时间过长等的缺陷，提供一种在移动终端的浏览器内加载Web页面的方法及系统。
本发明是通过下述技术方案来解决上述技术问题的：
一方面，本发明提供一种在移动终端的浏览器内加载Web页面的方法，其特点在于，包括以下步骤：
将构成目标Web页面的不同元素封装进多个组件中，并将所述组件存储于Web服务器；
从所述Web服务器获取预设的组件，并加载包括所述预设的组件的初始Web页面；
根据访问Web页面的不同操作，从所述Web服务器获取与所述操作相对应的目标组件，并加载包括所述目标组件的Web页面。
较佳地，通过Ajax异步加载技术从所述Web服务器获取组件。
较佳地，加载Web页面的步骤包括：
按照所述浏览器的模板对获取的组件进行渲染；
加载包括渲染后的组件的Web页面。
较佳地，所述方法还包括：记录访问Web页面的路径，并根据所述路径从所述Web服务器获取目标组件。
较佳地，所述操作的类型包括点击和/或手势。
另一方面，本发明还提供一种在移动终端的浏览器内加载Web页面的系统，其特点在于，包括：
封装模块，用于将构成目标Web页面的不同元素封装进多个组件中，并将所述组件存储于Web服务器；
初始化模块，用于从所述Web服务器获取预设的组件，并加载包括所述预设的组件的初始Web页面；
处理模块，用于根据访问Web页面的不同操作，从所述Web服务器获取与所述操作相对应的目标组件，并加载包括所述目标组件的Web页面。
较佳地，所述初始化模块和所述处理模块均用于通过Ajax异步加载技术从所述Web服务器获取组件。
较佳地，所述初始化模块和所述处理模块均用于通过以下方式加载Web页面：
按照所述浏览器的模板对获取的组件进行渲染；
加载包括渲染后的组件的Web页面。
较佳地，所述系统还包括记录模块，用于记录访问Web页面的路径；
所述处理模块还用于根据所述路径从所述Web服务器获取目标组件。
较佳地，所述操作的类型包括点击和/或手势。
在符合本领域常识的基础上，上述各优选条件，可任意组合，即得本发明各较佳实例。
本发明的积极进步效果在于：与现有技术相比，本发明利用单页Web框架技术，以组件为单位，将不同元素封装进不同组件，从而在用户进入任务页时只加载最基本的元素，节约流量，提升了移动终端的响应速度；以及根据用户访问Web页面的不同操作，通过在Web页面中加载不同的元素，使得用户在任务操作过程中不会被页面跳转干扰，大大降低了移动终端Web页面间跳转出现的卡顿问题，整个任务流程在一个页面内完成，有效提升了人机交互的效率和舒适度。
附图说明
图1为本发明实施例的在移动终端的浏览器内加载Web页面的方法流程图。
图2为本发明实施例的手机中加载的初始机票搜索页面的示意图。
图3为本发明实施例的手机中加载的搜索结果页面的示意图。
图4为本发明实施例的手机中加载的搜索结果页面的另一示意图。
图5为本发明实施例的在移动终端的浏览器内加载Web页面的系统的结构框图。
具体实施方式
下面通过实施例的方式进一步说明本发明，但并不因此将本发明限制在所述的实施例范围之中。
本实施例提供一种在移动终端的浏览器内加载Web页面的方法，如图1所示，包括以下步骤：
步骤101、将构成目标Web页面的不同元素封装进多个组件中，并将所述组件存储于Web服务器。本实施例中的Web服务器是指通过特定的接口和服务能够与前端完成数据交互功能的服务器。通过存储代码的方式将组件存储于Web服务器中。
另外，本发明中的元素和组件均是Web应用的不同维度，类似后端开发中的接口和类，举个例子，若将导航条看作是一个组件的话，导航条中的每个项目即为元素。需要说明的是，本发明中不对元素和组件的划分进行限制，例如，对于导航条来说，也可以将其看作是一个元素。
在可选的一种实施方式中，利用mocha框架(一种JavaScript测试框架)对代码进行自动化测试和单元测试的覆盖。单元测试即在编码时同时编写测试用例，每写好一个组件则对该组件进行对应功能的测试和UI测试。
步骤102、从所述Web服务器获取预设的组件，并加载包括所述预设的组件的初始Web页面。其中，预设的组件中包含构成初始Web页面的最基本的元素。举个例子，用户希望利用手机中的浏览器搜索机票，当用户进入机票搜索页时，加载的初始机票搜索页面20如图2中所示，只加载了最基本的一些元素，例如始发地、目的地、去程时间、搜索按钮以及一些查询选项(包括我的订单、航班动态、在线选座和发现低价)等。用户可以在图2的初始机票搜索页面中表达机票的搜索意向，例如可以通过选择始发地、目的地和去程时间的方式表达机票的搜索意向。
步骤103、根据访问Web页面的不同操作，从所述Web服务器获取与所述操作相对应的目标组件，并加载包括所述目标组件的Web页面。其中，所述操作的类型可以为点击，例如单击和双击，也可以为手势，例如向上滑动、向下滑动、向左滑动和向右滑动等。
举个例子，当用户单击图2中的搜索按钮之后，加载的搜索结果页面30如图3所示，共有95条搜索结果，其中，当前页面只显示了3条搜索结果。用户可以通过单击返回按钮31的方式返回到图2中。
在另一个例子中，当用户单击图2中的搜索按钮之后，加载的搜索结果页面40如图4所示，用户可以通过向下滑动的手势41返回到图2中。
在上述例子中，采用本实施例提供的方法可以将包括用户表达机票搜索意向、浏览机票搜索结果、选择意向订单以及填写订单信息的所有流程都整合在一个独立的Web页面中实现，具体地，通过用户对Web页面的不同操作，加载包括不同元素或组件的Web页面，这样用户在任务操作过程中不会被页面跳转所干扰。
在可选的一种实施方式中，通过Ajax异步加载技术从所述Web服务器获取预设的组件。
在可选的一种实施方式中，加载Web页面(包括初始Web页面)的步骤包括：
按照所述浏览器的模板对获取的组件进行渲染；
加载包括渲染后的组件的Web页面。
在上述步骤101中，从Web服务器获取的组件的代码可能是源码，也可能是渲染后的html代码。若为源码，则需要按照移动终端中浏览器的模板对源码进行渲染，即将源码编译成html代码，以使其在移动终端的浏览器内显示。通过在浏览器端请求服务加载数据后根据模板渲染成浏览器元素，减轻了Web服务器端的渲染能力，增大了吞吐量。
传统的Web应用开发都是前后端融合的，逻辑和表现没有分离，后端直接在网页模板中插值传入数据最终渲染成页面。在本发明可选的一种实施方式中，与RESTful api结合使用，实现了移动终端与Web服务器的分离，具体地，基于RESTful api的技术使得后端代码只考虑如何跟数据库交互把对应的值取出来传输给前端，前端通过组件化的方式将数据和表现分离，把从后端拿到的数据插入到对应的组件模板中，并渲染成最终页面。
在可选的一种实施方式中，上述方法还包括：记录访问Web页面的路径，并根据所述路径从所述Web服务器获取目标组件。具体地，可以利用浏览器history api来记录用户访问Web页面的路径，以路由为逻辑，在移动终端记录用户浏览轨迹，写入路由链路，从而可以实现用户访问过程中的前进、后退以及跳转等逻辑，扩展了原有浏览器的导航能力。
本实施例还提供一种在移动终端的浏览器内加载Web页面的系统50，如图5所示，包括封装模块51、初始化模块52以及处理模块53。下面对各个模块的功能进行详细介绍。
封装模块用于将构成目标Web页面的不同元素封装进多个组件中，并将所述组件存储于Web服务器。
初始化模块用于从所述Web服务器获取预设的组件，并加载包括所述预设的组件的初始Web页面。
处理模块用于根据访问Web页面的不同操作，从所述Web服务器获取与所述操作相对应的目标组件，并加载包括所述目标组件的Web页面。其中，所述操作的类型可以为点击，例如单击和双击，也可以为手势，例如向上滑动、向下滑动、向左滑动和向右滑动等。
在可选的一种实施方式中，所述初始化模块和所述处理模块均用于通过Ajax异步加载技术从所述Web服务器获取组件。
在可选的一种实施方式中，所述初始化模块和所述处理模块均用于通过以下方式加载Web页面：
按照所述浏览器的模板对获取的组件进行渲染；
加载包括渲染后的组件的Web页面。
在可选的一种实施方式中，上述在移动终端的浏览器内加载Web页面的系统还包括记录模块，用于记录访问Web页面的路径。其中，所述处理模块还用于根据所述路径从所述Web服务器获取目标组件。
在本发明提供的在移动终端的浏览器内加载Web页面的方法及系统中，极大程度地利用了移动终端的本地存储和缓存能力，将数据和资源缓存在移动终端中，较好地避免了资源重复请求，提升了移动终端的整体速度。与传统的window.location页面跳转相比，本发明利用单页Web框架技术，以组件为单位，将不同元素封装进不同组件，从而在用户进入任务页时只加载最基本的元素，节约流量，提升了移动终端的响应速度；以及根据用户访问Web页面的不同操作，通过在Web页面中加载不同的元素，使得用户在任务操作过程中不会被页面跳转干扰，大大降低了移动终端Web页面间跳转出现的卡顿问题，整个任务流程在一个页面内完成，有效提升了人机交互的效率和舒适度。
虽然以上描述了本发明的具体实施方式，但是本领域的技术人员应当理解，这些仅是举例说明，本发明的保护范围是由所附权利要求书限定的。本领域的技术人员在不背离本发明的原理和实质的前提下，可以对这些实施方式做出多种变更或修改，但这些变更和修改均落入本发明的保护范围。

Claims (8)

1.一种在移动终端的浏览器内加载Web页面的方法，其特征在于，包括以下步骤：
将构成目标Web页面的不同元素封装进多个组件中，并将所述组件存储于Web服务器；
从所述Web服务器获取预设的组件，并加载包括所述预设的组件的初始Web页面；
根据访问Web页面的不同操作，从所述Web服务器获取与所述操作相对应的目标组件，并加载包括所述目标组件的Web页面；
所述方法还包括：记录访问Web页面的路径，并根据所述路径从所述Web服务器获取目标组件。
2.如权利要求1所述的方法，其特征在于，通过Ajax异步加载技术从所述Web服务器获取组件。
3.如权利要求1所述的方法，其特征在于，加载Web页面的步骤包括：
按照所述浏览器的模板对获取的组件进行渲染；
加载包括渲染后的组件的Web页面。
4.如权利要求1-3中任一项所述的方法，其特征在于，所述操作的类型包括点击和/或手势。
5.一种在移动终端的浏览器内加载Web页面的系统，其特征在于，包括：
封装模块，用于将构成目标Web页面的不同元素封装进多个组件中，并将所述组件存储于Web服务器；
初始化模块，用于从所述Web服务器获取预设的组件，并加载包括所述预设的组件的初始Web页面；
处理模块，用于根据访问Web页面的不同操作，从所述Web服务器获取与所述操作相对应的目标组件，并加载包括所述目标组件的Web页面；
所述系统还包括记录模块，用于记录访问Web页面的路径；
所述处理模块还用于根据所述路径从所述Web服务器获取目标组件。
6.如权利要求5所述的系统，其特征在于，所述初始化模块和所述处理模块均用于通过Ajax异步加载技术从所述Web服务器获取组件。
7.如权利要求5所述的系统，其特征在于，所述初始化模块和所述处理模块均用于通过以下方式加载Web页面：
按照所述浏览器的模板对获取的组件进行渲染；
加载包括渲染后的组件的Web页面。
8.如权利要求5-7中任一项所述的系统，其特征在于，所述操作的类型包括点击和/或手势。
CN201710282542.6A 2017-04-26 2017-04-26 在移动终端的浏览器内加载Web页面的方法及系统 Active CN106933640B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201710282542.6A CN106933640B (zh) 2017-04-26 2017-04-26 在移动终端的浏览器内加载Web页面的方法及系统

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201710282542.6A CN106933640B (zh) 2017-04-26 2017-04-26 在移动终端的浏览器内加载Web页面的方法及系统

Publications (2)

Publication Number Publication Date
CN106933640A CN106933640A (zh) 2017-07-07
CN106933640B true CN106933640B (zh) 2020-12-25

Family

ID=59436981

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201710282542.6A Active CN106933640B (zh) 2017-04-26 2017-04-26 在移动终端的浏览器内加载Web页面的方法及系统

Country Status (1)

Country Link
CN (1) CN106933640B (zh)

Families Citing this family (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109582295B (zh) * 2017-09-28 2022-06-21 北京国双科技有限公司 一种数据处理方法、装置、存储介质及处理器
CN109857473A (zh) * 2017-11-29 2019-06-07 北京京东尚科信息技术有限公司 一种页面数据的加载方法和装置
CN110059278A (zh) * 2019-03-12 2019-07-26 平安普惠企业管理有限公司 Web页面配置方法、服务器及计算机可读存储介质
CN110209967B (zh) * 2019-04-17 2022-05-03 北京奇艺世纪科技有限公司 页面加载方法、装置、终端设备和计算机可读介质
CN110189199B (zh) * 2019-05-23 2022-04-19 携程计算机技术（上海）有限公司 酒店订单事件任务处理的双屏互动方法及系统
CN110442815B (zh) * 2019-06-24 2022-04-01 北京奇艺世纪科技有限公司 页面生成方法、系统、装置及计算机可读存储介质
CN113449227B (zh) * 2020-03-24 2023-09-19 北京新氧科技有限公司 一种页面信息处理方法及终端设备
CN113282295B (zh) * 2021-05-25 2024-02-23 青岛海尔科技有限公司 阻塞处理方法及装置、存储介质及电子装置
CN114518912B (zh) * 2022-02-21 2023-04-25 度小满科技(北京)有限公司 一种页面加载方法、装置、设备及可读存储介质

Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106155708A (zh) * 2015-03-24 2016-11-23 Tcl集团股份有限公司 一种动态加载和更新页面内容的方法及系统
CN107250981A (zh) * 2014-10-06 2017-10-13 邻客音公司 单页应用中的路由动态加载

Family Cites Families (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US7917840B2 (en) * 2007-06-05 2011-03-29 Aol Inc. Dynamic aggregation and display of contextually relevant content
CN101551819B (zh) * 2009-04-30 2011-12-07 用友软件股份有限公司 渲染大型Web页面的方法
CN102591943B (zh) * 2011-12-27 2017-02-08 厦门雅迅网络股份有限公司 一种移动终端的页面数据处理方法
CN102663003B (zh) * 2012-03-16 2015-07-22 掌中帷幄（北京）科技有限公司 移动终端多web页面应用中的页面切换方法及系统
CN106302557A (zh) * 2015-05-11 2017-01-04 阿里巴巴集团控股有限公司 页面加载方法及相关设备、系统
CN106484741B (zh) * 2015-09-01 2019-06-18 北京国双科技有限公司 一种单页应用访问数据收集和发送的方法及装置

Patent Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107250981A (zh) * 2014-10-06 2017-10-13 邻客音公司 单页应用中的路由动态加载
CN106155708A (zh) * 2015-03-24 2016-11-23 Tcl集团股份有限公司 一种动态加载和更新页面内容的方法及系统

Also Published As

Publication number Publication date
CN106933640A (zh) 2017-07-07

Similar Documents

Publication Publication Date Title
CN106933640B (zh) 在移动终端的浏览器内加载Web页面的方法及系统
US20190251143A1 (en) Web page rendering method and related device
US10021001B2 (en) Providing visualizations of event sequence data
US9594485B1 (en) Online information system with selectable items for continuous scrolling
CN109684575A (zh) 网页数据的处理方法及装置、存储介质、计算机设备
CN106611032A (zh) 一种网页预加载的方法及装置
CN104052809B (zh) 一种网站测试的分流控制方法和装置
US20160132611A1 (en) System and method for providing business objecct information on web pages
CN101986252A (zh) web浏览方法和web浏览设备
CA2817554A1 (en) Mobile content management system
US8650474B2 (en) Methods for web content optimization in single page display environments and systems thereof
CN104238897A (zh) 一种菜单项显示方法及装置
CN107526592B (zh) 一种页面适配方法和装置
CN101930456A (zh) 通过浏览器创建聚合LinkUGC的方法和系统
CN107229760B (zh) 存储介质、电子装置、网页内容的显示方法和装置
US11190563B2 (en) Parallel execution of request tracking and resource delivery
CN105955714A (zh) 混合开发前端mvc框架实现方法和系统
CN105808221A (zh) 一种卡片式桌面的实现方法和装置
CN105630893B (zh) 一种组图标题的显示方法和装置
CN108664191B (zh) 系统访问方法及装置
US20140337709A1 (en) Method and apparatus for displaying web page
CN113204401A (zh) 浏览器渲染方法，终端及存储介质
EP2754040B1 (en) Visualization and editing of composite layouts
CN110569460B (zh) 推送信息展示方法、装置及存储介质
CN111539186A (zh) 一种应用于html5的大数据树组件实现方法及系统

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
GR01 Patent grant
GR01 Patent grant