CN111339455B - 浏览器应用加载页面首屏的方法和装置 - Google Patents

浏览器应用加载页面首屏的方法和装置 Download PDF

Info

Publication number
CN111339455B
CN111339455B CN201811550197.0A CN201811550197A CN111339455B CN 111339455 B CN111339455 B CN 111339455B CN 201811550197 A CN201811550197 A CN 201811550197A CN 111339455 B CN111339455 B CN 111339455B
Authority
CN
China
Prior art keywords
page
screen
information
target page
rendering
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
CN201811550197.0A
Other languages
English (en)
Other versions
CN111339455A (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.)
Alibaba Group Holding Ltd
Original Assignee
Alibaba Group Holding 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 Alibaba Group Holding Ltd filed Critical Alibaba Group Holding Ltd
Priority to CN201811550197.0A priority Critical patent/CN111339455B/zh
Priority to PCT/US2019/066656 priority patent/WO2020131756A1/en
Priority to US16/716,336 priority patent/US11134118B2/en
Publication of CN111339455A publication Critical patent/CN111339455A/zh
Application granted granted Critical
Publication of CN111339455B publication Critical patent/CN111339455B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
    • H04L67/00—Network arrangements or protocols for supporting network services or applications
    • H04L67/01—Protocols
    • H04L67/04—Protocols specially adapted for terminals or networks with limited capabilities; specially adapted for terminal portability
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/12—Use of codes for handling textual entities
    • G06F40/14—Tree-structured documents
    • G06F40/143—Markup, e.g. Standard Generalized Markup Language [SGML] or Document Type Definition [DTD]
    • 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/9574—Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
    • 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/955—Retrieval from the web using information identifiers, e.g. uniform resource locators [URL]
    • 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/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G06F16/986—Document structures and storage, e.g. HTML extensions
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
    • H04L67/00—Network arrangements or protocols for supporting network services or applications
    • H04L67/01—Protocols
    • H04L67/02—Protocols based on web technology, e.g. hypertext transfer protocol [HTTP]
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04M—TELEPHONIC COMMUNICATION
    • H04M1/00—Substation equipment, e.g. for use by subscribers
    • H04M1/72—Mobile telephones; Cordless telephones, i.e. devices for establishing wireless links to base stations without route selection
    • H04M1/724—User interfaces specially adapted for cordless or mobile telephones
    • H04M1/72403—User interfaces specially adapted for cordless or mobile telephones with means for local support of applications that increase the functionality
    • H04M1/72445—User interfaces specially adapted for cordless or mobile telephones with means for local support of applications that increase the functionality for supporting Internet browser applications
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/20—Natural language analysis
    • G06F40/205—Parsing

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Signal Processing (AREA)
  • Computer Networks & Wireless Communication (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Physics & Mathematics (AREA)
  • Data Mining & Analysis (AREA)
  • Health & Medical Sciences (AREA)
  • Artificial Intelligence (AREA)
  • Audiology, Speech & Language Pathology (AREA)
  • Computational Linguistics (AREA)
  • General Health & Medical Sciences (AREA)
  • Human Computer Interaction (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

提出了一种浏览器应用加载页面首屏的方法，包括：响应于用户加载目标页面的请求，在本地存储中存储了待显示的所述目标页面的页面信息的情况下，从本地存储中获取所述页面信息以进行渲染，并且网络请求所述目标页面的首屏信息；将网络请求得到的所述首屏信息与存储的所述目标页面信息相比较；以及在首屏信息存在更新的情况下，浏览器内核使用更新的首屏信息继续对所述目标页面首屏的渲染并显示渲染完成的目标页面首屏。由此，本发明通过前端主动缓存页面关键信息，将基于缓存信息的页面渲染与上述关键信息的异步更新和差异处理并行化，从而在保证页面动态特性的情况下，极大地提升了页面首屏的加载性能，优化了用户的使用体验。

Description

浏览器应用加载页面首屏的方法和装置
技术领域
本发明涉及网络前端，尤其涉及一种浏览器应用加载页面首屏的方法和装置。
背景技术
随着互联网技术的发展和移动终端的普及，人们越来越习惯于从网络上获取各类信息。在这其中，浏览器应用，尤其是安装在移动终端上的各类浏览器APP或是带有浏览器功能的APP，成为了人们获取资讯的常用工具。
在浏览器应用打开Web页面的过程中，尤其是使用显示区域受限的移动终端(例如，智能手机)上安装的浏览器APP打开一个页面时，其页面性能是由页面首屏的渲染速度决定的。由前端渲染的页面需要下载首屏数据，执行JavaScript脚本来解析首屏数据，再将解析出各种标签，插入到页面HTML文档里。浏览器内核接着解析排版HTML文档，并发起首屏图片请求，对加载回的图片进行解码，渲染页面，由此用户能够看到页面首屏。
由于动态数据需要经由网络下载，因此通常耗时需要600ms以上。执行JavaScript脚本渲染首屏也比较耗时。在JavaScript的解析和运行性能较差的中低端智能手机上，JavaScript解析速度约为1M/s，而首屏的JavaScript一般都会超过300K，这使得首屏渲染时间通常需要300ms以上。由此，会使得用户在每次打开一个新的页面时都会经历长时间的等待过程，严重影响用户的使用体验。
为此，需要一种能够提升首屏性能的方案。
发明内容
为了解决如上至少一个问题，本发明通过前端主动缓存页面关键信息，将基于缓存信息的页面渲染与上述关键信息的异步更新和差异处理并行化，使得在保证页面动态特性的情况下，极大地提升了页面首屏的加载性能，从而优化了用户的使用体验。
在本发明的一个方面，提出了一种浏览器应用加载页面首屏的方法，包括：响应于用户加载目标页面的请求，在本地存储中存储了待显示的所述目标页面的页面信息的情况下，从本地存储中获取所述页面信息以进行渲染，并且网络请求所述目标页面的首屏信息；将网络请求得到的所述首屏信息与存储的所述目标页面信息相比较；以及在所述首屏信息存在更新的情况下，浏览器内核使用更新的所述首屏信息继续对所述目标页面首屏的渲染并显示渲染完成的目标页面首屏。由此，通过在基于本地存储的页面信息进行渲染的同时，网络获取首屏信息并在需要时进行更新，能够保证页面的动态特性并且大大缩短首屏显示所需的时间。
优选地，网络请求所述目标页面的首屏信息包括：网络请求所述目标页面的首屏动态数据。由此在网址没有改变的情况下，页面动态更新的通常仅包括页面内容，而非页面框架，因此动态数据就足以涵盖首屏的全部变化，由此避免不必要的网络流量并提升首屏显示速度。
优选地，所述首屏动态数据可以是json格式的数据，从而方便后续的比较处理。
优选地，将网络请求得到的所述首屏信息与存储的所述目标页面信息相比较包括：对网络请求得到的所述首屏信息与存储的所述目标页面信息进行dom-diff处理以找出更新的DOM树节点。由此，通过dom-diff机制实现页面变更的快速比对。
优选地，在首屏信息存在更新的情况下，浏览器内核使用所述首屏信息继续对所述目标页面首屏的渲染并显示渲染完成的目标页面首屏包括：基于所述首屏动态数据找出更新的DOM树节点并加以修改；渲染修改的DOM树节点；以及显示渲染完成的目标页面首屏。由此，直接在DOM树阶段实现修改更新，进一步缩短由页面存在更新导致的耗时。
优选地，本发明的加载方法还可以包括：响应于用户加载目标页面的请求，在本地存储中未存储待显示的所述目标页面的页面信息的情况下，获取所述目标页面的完整页面信息，进行渲染和显示，并在所述本地存储中存储所述完整页面信息。由此，通过首次访问页面时的缓存，提升后续页面访问时的页面加载效率。
优选地，本发明的加载方法还可以包括：浏览器内核在确认所述首屏信息不存在更新的情况下，显示使用所述页面信息渲染完成的目标页面首屏。换句话说，浏览器内核需要首先确定无更新才进行页面显示，由此确保对页面动态部分的正确显示。
可以适用于本发明的目标页面不仅可以是前端渲染页面，还可以包括服务器端渲染页面，以及至少部分同构页面。另外，本发明所使用的本地存储是所述浏览器应用专门开辟的本地存储，而非前端无法控制的HttpCache。
在本发明的另一个方面，提出了一种浏览器应用加载页面首屏的装置，包括：页面显示单元，用于响应于用户加载目标页面的请求，在本地存储中存储了待显示的所述目标页面的页面信息的情况下，从本地存储中获取所述页面信息以进行渲染；信息请求单元，用于响应于用户加载目标页面的请求，在本地存储中存储了待显示的所述目标页面的页面信息的情况下，网络请求所述目标页面的首屏信息；信息比较单元，用于将网络请求得到的所述首屏信息与存储的所述目标页面信息相比较；以及在所述首屏信息存在更新的情况下，所述页面显示单元使用更新的所述首屏信息继续对所述目标页面首屏的渲染并显示渲染完成的目标页面首屏。
优选地，所述首屏信息请求单元网络请求所述目标页面的首屏动态数据。优选地，所述首屏信息请求单元网络请求的所述首屏动态数据是json格式的数据。
优选地，所述信息比较单元可以用于：对网络请求得到的所述首屏信息与存储的所述目标页面信息进行dom-diff处理以找出更新的DOM树节点。
优选地，在所述首屏信息存在更新的情况下，所述页面显示单元可以用于：基于所述首屏动态数据找出更新的DOM树节点并加以修改；渲染修改的DOM树节点；以及显示渲染完成的目标页面首屏。
响应于用户加载目标页面的请求，在本地存储中未存储待显示的所述目标页面的页面信息的情况下，所述信息请求单元获取所述目标页面的完整页面信息，所述页面显示单元基于所述完整页面信息进行渲染和显示，并在所述本地存储中存储所述完整页面信息。
优选地，所述页面显示单元在确认所述首屏信息不存在更新的情况下，显示使用所述页面信息渲染完成的目标页面首屏。
所述目标页面可以是如下的至少一项：前端渲染页面；服务器端渲染页面；以及至少部分同构页面。另外，所述本地存储是所述浏览器应用专门开辟的本地存储。
在本发明的另一个方面，提出了一种计算设备，包括：处理器；以及存储器，其上存储有可执行代码，当所述可执行代码被所述处理器执行时，使所述处理器执行如上所述的浏览器应用加载页面首屏的方法。
在本发明的另一个方面，提出了一种非暂时性机器可读存储介质，其上存储有可执行代码，当所述可执行代码被电子设备的处理器执行时，使所述处理器执行如上所述的浏览器应用加载页面首屏的方法。
由此，本发明通过前端主动缓存页面关键信息，并进行差异化更新显示，能够更为自由地提升页面显示，尤其是首屏加载的效率，从而降低用户等待时间，提升用户的使用体验。
附图说明
通过结合附图对本公开示例性实施方式进行更详细的描述，本公开的上述以及其它目的、特征和优势将变得更加明显，其中，在本公开示例性实施方式中，相同的参考标号通常代表相同部件。
图1示出了具有Webkit内核的计算机的结构。
图2是浏览器进行页面显示的常规流程示意图的一个例子。
图3是目前浏览器的渲染实现流程图的一个例子。
图4示出了根据本发明一个实施例的浏览器页面加载页面首屏的方法的示意性流程图。
图5A和5B示出了根据本发明优选实施例的首次访问和后续访问目标页面的操作例。
图6示出了根据本发明一个实施例的浏览器页面加载页面首屏的装置的示意图。
具体实施方式
下面将参照附图更详细地描述本公开的优选实施方式。虽然附图中显示了本公开的优选实施方式，然而应该理解，可以以各种形式实现本公开而不应被这里阐述的实施方式所限制。相反，提供这些实施方式是为了使本公开更加透彻和完整，并且能够将本公开的范围完整地传达给本领域的技术人员。
现如今，浏览器应用，尤其是安装在移动终端上的各类浏览器APP或是带有浏览器功能的APP，成为了人们获取资讯的常用工具。在此，使用“浏览器应用”或“浏览器”指代专用的浏览器以及具备Web页面显示功能的其他应用，例如安装在移动终端(例如，智能手机)上的各类浏览器APP和其他带有浏览和页面渲染功能的APP。
在使用显示区域受限的移动终端(例如，智能手机)上安装的浏览器APP打开一个页面时，其页面性能是由页面首屏的渲染速度决定的。由前端渲染的页面需要下载首屏数据，执行JavaScript脚本来解析首屏数据，再将解析出各种标签，插入到页面HTML文档里。浏览器内核接着解析排版HTML文档，并发起首屏图片请求，对加载的图片进行解码，渲染页面，由此用户能够看到页面首屏。
由于动态数据需要经由网络下载，因此通常耗时需要600ms以上。执行JavaScript脚本渲染首屏也比较耗时。在JavaScript的解析和运行性能较差的中低端智能手机上，JavaScript解析速度约为1M/s，而首屏的JavaScript一般都会超过300K，这使得首屏渲染时间通常需要300ms以上。由此，会使得用户在每次打开一个新的页面时都会经历长时间的等待过程，严重影响用户的使用体验。为此，本发明提出了一种能够提升首屏性能的方案，其通过前端对页面内容主动且灵活的缓存，并结合动态更新机制，并发地实现页面渲染和内容更新，由此在保证页面正确显示的同时，大幅提升首屏性能。
为了方便对本发明的发明原理的理解，先对浏览器渲染的相关背景进行介绍。
浏览器从架构上可以分为两个部分，即内核和外壳。浏览器内核负责对网页语法的解释(如HTML、JavaScript)并渲染(显示)网页，即浏览器通过内核对网页进行解析和渲染。浏览器外壳主要处理浏览器外观界面、操控体验。
浏览器内核是浏览器核心部分。通常，浏览器内核也被称为渲染引擎。渲染引擎用于将HTML/CSS/JavaScript文本及其相应的资源文件转换成图像结果进行显示。
由于目前大多数浏览器的内核均采用Webkit作为内核，下面对具有Webkit内核的计算机结构进行详细介绍。但应理解的是，Webkit的基本工作原理也大致适用于其他浏览器内核，尤其是从其发展而来的Blink内核。基于其他浏览器内核的浏览器也可以利用本发明的首屏加载方案。
图1示出了具有Webkit内核的计算机的结构。计算机可以实施为各种类型的计算机装置，例如台式机、便携式计算机、平板电脑、智能手机、个人数据助理(PDA)，或者其他类型的计算机装置，但是不限于任何特定形式。计算机可以包括处理模块100，存储子系统200，输入装置300、显示器400、网络接口500，以及总线600。
处理模块100可以是一个多核的处理器，也可以包含多个处理器。在一些实施例中，处理模块100可以包含一个通用的主处理器以及一个或多个特殊的协处理器，例如图形处理器(GPU)、数字信号处理器(DSP)等等。在一些实施例中，处理器100可以使用定制的电路实现，例如特定用途集成电路(ASIC)或者现场可编程逻辑门阵列(FPGA)。在一些实施方式中，处理模块100可以是类似的电路执行存储在自身上的可执行指令。在另外一些实施方式中，处理模块100可以执行存储在存储子系统200上的可执行指令。在图1示出的实施方式中，处理模块100设有操作系统110和运行在操作系统110上的浏览器120。浏览器120包括Webkit内核123、嵌入式接口122和一些通过所述嵌入式接口122与Webkit内核123交互的浏览器插件121。WebKit内核123(即渲染引擎)又可以包括排版引擎(Webcore)1231、JS引擎1232和WebKit Ports移植部分1233。
在图1示出的结构中，排版引擎1231又包括三个模块：解析模块，排版模块和渲染模块。其中，解析模块又可以包含HTML解析器和CSS解析器。HTML解析器包括标记生成器和树构造器。标记生成器用于将输入的网页内容(通常是XML文档格式)解析成多个HTML标记。HTML标记包括起始标记、结束标记、属性名称和属性值。标记生成器用于识别这些标记，并传递给树构造器，然后接收下一个字符以识别下一个标记；如此反复直到输入的结束。
JS引擎1232用于解析Javascript语言，通过执行Javascript语言来实现网页的动态效果。JS引擎可以是JavaScripCore引擎或V8引擎，JavaScripCore引擎是webkit中的默认JS引擎。在Google的Chromium开源项目中，JavaScripCore引擎被替换为V8引擎，V8引擎是由美国Google开发的开源JavaScript引擎。
WebKit Ports移植部分1233包括网络栈、硬件加速、视频、文字、图片解码、加载模块(网络栈)和其他功能模块。webkit的资源加载由各个移植来实现，所以每个移植的网络实现方式可能会不一样。
存储子系统200可以包括各种类型的存储单元，例如系统内存、只读存储器(ROM)，和永久存储装置。其中，ROM可以存储处理模块100或者计算机的其他模块需要的静态数据或者指令。永久存储装置可以是可读写的存储装置。永久存储装置可以是即使计算机断电后也不会失去存储的指令和数据的非易失性存储设备。在一些实施方式中，永久性存储装置采用大容量存储装置(例如磁或光盘、闪存)作为永久存储装置。另外一些实施方式中，永久性存储装置可以是可移除的存储设备(例如软盘、光驱)。系统内存可以是可读写存储设备或者易失性可读写存储设备，例如动态随机访问内存。系统内存可以存储一些或者所有处理器在运行时需要的指令和数据。此外，存储子系统200可以包括任意计算机可读存储媒介的组合，包括各种类型的半导体存储芯片(DRAM，SRAM，SDRAM，闪存，可编程只读存储器)，磁盘和/或光盘也可以采用。在一些实施方式中，存储子系统200可以包括可读和/或写的可移除的存储设备，例如激光唱片(CD)、只读数字多功能光盘(例如DVD-ROM，双层DVD-ROM)、只读蓝光光盘、超密度光盘、闪存卡(例如SD卡、min SD卡、Micro-SD卡等等)、磁性软盘等等。计算机可读存储媒介不包含载波和通过无线或有线传输的瞬间电子信号。在一些实施方式中，存储子系统200能够存储一个或多个能被处理模块100执行的软件程序或需要调用的资源文件，资源文件可以包含一些第三方库，包括但不限于音频库、视频库、2D图形库、3D图形库。
用户界面可以由一个或多个用户输入装置300、显示器400，和/或一个或多个其他用户输出设备提供。输入装置300可以包括用户向计算机输入信号的装置，计算机可以解释这些信号包含有特定的用户请求或信息。在一些实施方式中，可以通过键盘向用户界面输入网址，要求浏览器120通过用户界面显示输入网址对应的网页内容。在一些实施方式中，输入装置300可以包含一些或所有的键盘按钮、触摸屏、鼠标或其他定点设备、滚轮、点击轮、转盘、按键、开关、小型键盘、麦克风等等。
显示器400可以显示由计算机生成的图像，可以包括各种类型的图像设备，例如阴极射线管(CRT)、液晶显示器(LCD)、发光二极管(LED)(包括有机发光二极管(OLED))、投射系统等等与其他支持电子装置(例如DAC、ADC、信号处理器等等)的集合。在一些实施方式中，也可能额外提供其他用户输出设备，或者取代显示器400，例如信号灯、扬声器、触觉传感器、打印机等。
在一些实施方式中，用户界面可以通过图形用户界面提供。在显示器400中的某些区域定义一些可视的图形元素作为用户通过输入装置300选择的交互对象或者控制对象。例如，用户可以操作用户输入装置300移动屏幕上的指定位置输入网址，控制浏览器在显示器400上显示该网址对应的网页内容。在一些实施方式中，可以识别用户手势的触摸设备作为输入设备，这些手势可以但不是必须与显示器300上的阵列相联系。
网络接口500为计算机提供声音和/或数据通讯功能。在一些实施方式中，网络接口500可以包括射频收发器来传递声音和/或数据(例如使用蜂窝式电话技术，例如3G、4G或EDGE、WIFI的数据网络技术)、GPS接受模块和/或其他模块。在一些实施方式中，网络接口500可以提供额外的无线网络连接或替代无线接口。网络接口500可以是硬件(例如天线、调制解调器、编解码器以及其他模拟和/或数字信号处理电路)和软件模块的结合。
总线600可以包括各种连接计算机内部各部件的系统、外部设备和芯片总线。例如总线600将处理装置100和存储子系统200连接，还可以连接输入装置300和显示器400。总线600也可以使得计算机通过网络接口500与网络连接。在这种情况下，计算机可以作为多个联网计算机设备的一部分。计算机的任意或所有部件都可以在本发明的实施方式中协调使用。
一些实施方式中包含电子元件，例如微处理器、在计算机可读存储媒介中存储有计算机指令和数据的存储器。在具体实施方式部分描述的许多特征都可以通过执行存储在计算机可读存储媒介上的计算机指令的方法步骤实现。当这些计算机指令被执行，计算机处理单元完成指令的各种功能。程序指令或计算机编码的实施方式可以是机器码，例如使用计算机、电子元件或待解析器的微处理器编译其他高级语言得到的代码。
通过适当的编程，处理装置100为计算机可以实现多种类型的功能。例如，处理装置100通过网络接口500从服务器下载网页内容至存储子系统200。然后，处理装置100从存储子系统200中读取网页文件至排版引擎1231。排版引擎1231的解析模块对网页进行解析后构建成一棵DOM树。当DOM树建立的时候，排版引擎1231的排版模块接收CSS解析器的样式信息，构建一个新的内部绘图模型(RenderObject Tree,渲染对象树，又叫排版树)，并由排版模块计算模型内各个元素的位置和大小，然后由渲染模块完成从模型到图形的绘制。在上述网页内容的显示过程中，处理模块100还有可能通过总线从存储子系统200的第三方库的音频库中读取音频文件和/或从视频库中读取视频文件和/或从2D图形库和/或3D图形库中读取2D图形和/或3D图形，然后绘制成最终图像，在显示器400上显示。
需要理解的是，计算机是示意性的。计算机可以具有其他没有具体描述的功能(例如移动通话、GPS、电源管理，一个或多个摄像头、各种用于连接外部设备的连接端口或附件等等)。进一步，此处对计算机100涉及的特定功能模块进行了描述，这些功能模块的描述是为了便于描述，而且也不意味着对功能部件特定的物理配置。而且，这些功能模块不需要与物理模块一一对应。模块可以被配置成用来完成各种操作，例如通过编程或设置合适的控制电路，模块也可能会根据初始设置重新被配置。本发明的实施例可以在各种设备包括电子设备中，通过使用硬件和软件的结合来实现。
在图1示出的实施方式中，浏览器的主要作用是用于显示网页。目前，网页是一种使用HTML语言撰写的文档。随着技术的发展，现在网页的样式更为丰富，使用CSS样式语言和JavaScript语言对网页显示特性进行控制。其中，CSS用于描述网页的显示信息，而JS代码用于控制网页的内部逻辑。
CSS(Cascading Style Sheet，式级联样式表)是一种样式表语言，其中定义了一系列作用在各个元素上的样式规则，用于描述元素的显示信息，控制网页的显示风格。CSS的解析过程是指从CSS字符串经过CSS解析器处理后变成渲染引擎的内部规则表示的过程。当需要解析CSS内容时，Webkit调用解析器对CSS样式进行解析，并将创建好的结果存储起来。
上面介绍了具有Webkit内核的计算机结构和网页结构。浏览器显示网页内容的过程包括加载、解析、排版、渲染显示。
参见图2，图2是浏览器进行页面显示的常规流程示意图的一个例子。在图2示出的步骤中：首先加载模块根据输入的网址请求网页内容，将其输入解析模块(步骤S201)；解析模块对网页内容进行解析得到DOM树和相关节点的CSS信息(步骤S202)。
在步骤S202中，当加载模块将网页内容输入到解析模块中的HTML解析器，HTML解析器一边解析一边构建DOM树，DOM树是HTML文档的对象表示，同时也是外部内容(例如JavaScript)与HTML元素之间的接口。这期间，如果遇到JS代码则交给JS引擎去处理，将JS引擎的处理结果再返回给解析模块解析。如果网页中含有CSS代码，则交给CSS解析器去解析。通过对XML文档的分析，把整个文档转化成一棵DOM树存放在内存中。应用程序可以随时对DOM树中的任何一个部分进行访问与操作，没有访问和操作次数的限制，并且可以通过修改文档树，进而修改XML文档。
在JS引擎解析脚本的过程中，HTML解析器将停止对XML文档的解析，直到脚本解析完毕。如果脚本是外部的，还需要从网络同步抓取外部脚本资源解析完毕后对XML文档解析。当然，在一些实施例中，也可以将XML文档中的脚本标注为“defer”，这样它就不会停止文档解析，而是等到解析结束才执行。目前，在HTML5增加了一个选项，可将脚本标记为异步，以便由其他线程解析和执行。
在步骤S203，对网页进行排版。完成解析后，排版模块根据解析模块的解析结果(DOM树和相关节点的CSS信息)构建一个新的内部绘图模型(即渲染对象树)，并计算内部绘图模型各个元素的位置和大小信息。
随后在步骤S204，渲染模块将内部绘图模型(渲染对象树)绘制成图像。WebKit在渲染页面时，渲染模块从根节点开始遍历渲染图层树，访问每一个渲染图层树中的每个图层，直至叶子节点，再遍历从属于这个图层的渲染对象，将每一个渲染对象绘制出来。渲染图层树决定了网页绘制的层次顺序，而从属于渲染图层的渲染对象决定了这个图层的内容，所有渲染图层和渲染对象一起就决定了网页在屏幕上最终呈现出来的内容。
每个渲染图层的对象可以想象成图像中的一个层，各个层一同构成了一个图像。每个层对应网页中的一个或者一些可视元素，这些元素都绘制内容到该层上。这一过程称为绘图操作(paint)。
浏览器本身并不能直接改变屏幕的像素输出，它需要通过系统本身的图形用户界面工具包完成(GUIToolkit)。所以，一般来说浏览器会将一个要显示的网页包装成一个用户界面组件(UI组件)，通常叫做网络视图(WebView)，然后通过将网络视图放置于应用的用户界面组件上，将网页显示在屏幕上。
在以前的浏览器内核的渲染架构中没有使用合成器，浏览器内核直接将网页内容(渲染图层(RenderLayer)，渲染对象(RenderObject))绘制到窗口缓存上。目前的浏览器内核的渲染架构中引入了合成器。在理想的情况下，每个图层都有个绘制的存储区域，这个存储区域用来保存绘图的结果，最后，需要将这些层的内容合并到同一个图像之中，称之为合成，使用了合成技术的渲染成为合成化渲染。浏览器内核先将网页内容生成内容快照，然后由合成器将该内容快照进行光栅化，再将光栅化化后的缓存合成到窗口缓存上，如果合成是使用GPU，我们就称为硬件加速。因此，目前渲染的实现方式上，包括软件渲染、硬件渲染。
参见图3，图3是目前浏览器的渲染实现流程图的一个例子。
步骤S301：渲染引擎遍历渲染图层树(RenderLayer树)的每个节点产生一个内容快照(Webkit层和CPU完成)。
步骤S302：光栅化(Rasterization)。内容快照在合成器里面进行光栅化，由适配层或CPU将内容快照转换成离屏缓存器(buffer)，它使用一些绘图指令转换成真正的像素颜色值。
步骤S303：合成(Composite)，它负责缓存的拷贝，同时还可能包括位移(Translation)，缩放(Scale)，旋转(Rotation)，Alpha混合等操作。合成器负责将内部缓存即离屏缓存(buffer)拷贝到窗口缓存上(由适配层和GPU完成)，同时还可能包括位移(Translation)，缩放(Scale)，旋转(Rotation)，Alpha混合等操作。
步骤S303中合成的耗时通常远远小于网页内容绘制的耗时，后者即使在移动设备上一般也就在几个毫秒以内，而大部分时候，只需要绘制一块很小的区域而不需要绘制一个完整WebView大小的区域，这样就有效地减少了绘制这一步的开销。
步骤S304：显示在网络视图(Webview)所在的窗口。渲染器进程例如可以将渲染好的内存位图放入共享内存中，然后通过IPC消息通知浏览器进程进行界面更新，浏览器进程收到IPC通知后，使用操作系统API，将内存位图绘制到标签对应的webview上。
如上已经结合图1-图3描述了浏览器应用进行页面显示的大致流程。由上可知，在浏览器应用显示Web页面的过程中，首先需要经由网络获取页面内容，例如HTML文档。获取的页面内容通常需要经过JS执行，资源请求，解析排版渲染等流程才能完成渲染并加以显示，这使得在页面内容被完全显示之前，用户需要长时间的等待(例如，看到白屏)。在网络传输不佳，或是终端设备资源占用率较高的情况下，首屏内容显示前的等待时间会相当的长，严重影响用户的使用体验。
为此，本发明通过前端主动缓存页面关键信息，并进行差异化更新显示，能够更为自由地提升页面显示，尤其是首屏加载的效率，从而降低用户等待时间，提升用户的使用体验。
图4示出了根据本发明一个实施例的浏览器应用页面首屏加载方法的流程图。应该理解的是，该方法可以是在浏览器应用或是包含浏览功能的应用中实现的，尤其可由安装在移动终端(例如，安装有Android系统的智能手机)上的浏览器APP实现。
在步骤S401，响应于用户加载目标页面的请求，在本地存储中存储了待显示的所述目标页面的页面信息的情况下，从本地存储中获取所述页面信息以进行渲染，并且网络请求所述目标页面的首屏信息。
在此，用户加载目标页面的请求，可以包括用户以任何直接或间接的方式输入目标页面的网址(例如URL)的动作。例如，用户可以在地址栏里输入目标网页的URL地址，点击书签或是导航页上的对应按钮等。无论用户进行了何种具体操作，其相应的动作都可使得浏览器应用获知用户想要访问该URL所对应的该目标页面。于是，浏览器应用可以查找本地存储中是否存储有该目标页面的页面信息(例如，同样是基于该目标页面的URL)。如果有，则从本地存储中获取所述页面信息并立即进行图2所示的页面显示流程(例如，包括解析、排版、渲染和显示)。与此同时，浏览器应用还基于上述URL进行真实的网络访问，以至少获取目标页面的首屏信息。
在步骤S402，浏览器应用将网络请求得到的首屏信息与存储的所述目标页面信息相比较。随后，在首屏信息存在更新的情况下(即，当前获取的首屏信息相比于在前缓存的页面信息有所不同的情况下)，在步骤S403，浏览器内核使用更新的首屏信息继续对目标页面首屏的渲染并显示渲染完成的目标页面首屏。
由此，通过在基于本地存储的页面信息进行渲染的同时，网络获取首屏信息并在需要时进行更新，能够保证页面的动态特性并且大大缩短首屏显示所需的时间。换句话说，在本发明的缓存方案中，基于缓存信息的常规页面显示流程与动态数据的获取与比较流程是同时进行的，并且在当前获取的动态数据存在更新的情况下，基于上述动态数据的流程并入常规的页面显示流程。
在此，“首屏”指的是页面在终端设备的屏幕上第一屏所显示的内容。由于终端设备(通常是智能手机)的显示屏幕尺寸和分辨率各有不同，因此真正获取的“首屏数据”通常不是严格的第一屏数据，而是会比当前终端一个屏能显示的内容要更多一些的内容，例如，一屏半的数据。换句话说，“首屏数据”可以按照本领域技术人员的理解而被相对自由的规定，本发明在此不做限制。
由于用户通常需要一段的时间来进行首屏阅读，使得浏览器应用有着更为充裕的时间来进行后续屏的加载和显示，因此首屏本身的显示速度对于用户体验至关重要。为此，在步骤S401中，浏览器应用本地获取用于进行渲染和显示的页面数据可以也是对应于首屏的数据，由此提升该数据本身的渲染效率。
另外，为了提升动态数据获取和比较分支的处理效率，在步骤S401中网络请求的首屏信息可以仅仅包括目标页面的首屏动态数据。在网址没有改变的情况下，页面动态更新的通常仅包括页面内容，而非页面框架，因此动态数据就足以涵盖首屏的全部变化，由此避免不必要的网络流量，并使得浏览器应用能够更快速的获取到所需的全部首屏信息，从而提升首屏显示速度。
在一个实施例中，首屏动态数据可以是json格式的数据，从而方便后续的比较处理。相应地，步骤S402可以包括：对网络请求得到的所述首屏信息与存储的所述目标页面信息进行dom-diff处理以找出更新的DOM树节点。由此，通过dom-diff机制实现页面变更的快速比对。在此，json格式的数据能够进一步提升数据的比对速度。
在一个实施例中，上述比较处理的动作是由前端JavaScript发起，并在浏览器内核的js引擎中执行。可以将比较指令写入页面的JavaScript代码，由此能够通过dom-diff处理来比较在前存储和当前获取的两份json数据，找出属性差异，再将这些属性重新插入到DOM树里。随后，浏览器内核可以对如上更新的DOM数据进行排版和渲染，并显示与其对应的页面。
例如，在在前存储(数据A)和后续更新(数据B)的json数据中：
数据A：{"backgroundImage":"https://example.com/image_a.png"}
数据B：{"backgroundImage":"https://example.com/image_b.png"}
比较上述两份json数据，可知(背景图像)backgroundImage变更为了image_b.png，为此就可以将上述变更反映到对应的DOM树节点上。
在一个实施例中，步骤S403可以包括基于所述首屏动态数据找出更新的DOM树节点并加以修改；渲染修改的DOM树节点；以及显示渲染完成的目标页面首屏。由此，直接在DOM树阶段实现修改更新，进一步缩短由页面存在更新导致的耗时。
本发明的上述快速加载方案需要浏览器应用在首次访问页面时的相关操作进行支持。于是，在一个实施例中，本发明的加载方法还可以包括：响应于用户加载目标页面的请求，在本地存储中未存储待显示的所述目标页面的页面信息的情况下，获取所述目标页面的完整页面信息，进行渲染和显示，并在所述本地存储中存储所述完整页面信息。由此，通过首次访问页面时的缓存，提升后续页面访问时的页面加载效率。
另外，本发明的加载方法还可以包括：浏览器内核在确认所述首屏信息不存在更新的情况下，显示使用所述页面信息渲染完成的目标页面首屏。换句话说，浏览器内核需要首先确定无更新才进行页面显示，由此确保对页面动态部分的正确显示。但由于动态信息的获取和比较所需的时间通常与页面显示流程所需时间相近或者更短，因此在首屏信息无更新的情况下，上述动态信息的获取和比较流程也不会对首屏的显示时间造成很大的影响。
本发明的加载方案尤其适用于前端渲染页面。在此，前端渲染页面是指页面的HTML内容是通过前端执行JS动态插入生成的，这种类型的页面有非常大的灵活性。进一步地，本发明的加载方案也可以适用于服务器端渲染页面，以及至少部分同构页面。服务器端渲染页面是指页面的HTML内容完全由服务器生成，用户请求得到的就是完整的HTML文档。服务器端渲染页面通常需要与HTML文档可缓存机制结合使用。HTML文档可缓存机制是指文档可缓存在HttpCache，但文档在HttpCache的存储形式以及存储时间无法由前端控制，这样就很难保证文档得到及时更新。
为此。本发明所使用的本地存储是所述浏览器应用专门开辟的专用本地存储(例如，专用于执行本发明的首屏加载方案的本地存储)，而非前端无法控制的HttpCache。由此，使得前端(即，浏览器应用)能够更为灵活地控制网页内容的加载和获取，从而提供完全可由前端实现的首屏快速加载。
图5A和5B示出了根据本发明优选实施例的首次访问和后续访问目标页面的操作例。
如图5A所示，在首次访问某一目标页面，为了完成首屏显示，需要下载首屏数据(基础HTML)，执行JS处理首屏数据，解析出首屏标签，插入到HTML文档里，最终生成完整的HTML文档(完成的HTML)，并且将HTML文档缓存到本地存储里面。
随后如图5B所示，在后续访问该目标页面时，可以直接从本地存储读取出HTML文档内容，浏览器就可以直接解析排版HTML文档，加载图片，图片解码和渲染，最终渲染出页面。
与此同时，为了保证用户看到页面最新的内容，渲染本地缓存的页面的同时，还需要去请求新的首屏数据(新HTML)。在获取到请求的数据之后，进行dom-diff处理，找出更新的节点，并重新修改页面相应节点，让页面继续渲染变化的节点。由此可以保证用户能够尽快看到正确的首屏内容。
如上已经参考图4和图5A-B描述本发明的浏览器应用加载页面首屏的方法。本发明通过前端主动缓存页面关键信息，将基于缓存信息的页面渲染与上述关键信息的异步更新和差异处理并行化，使得在保证页面动态特性的情况下，极大地提升了页面首屏的加载性能，从而优化了用户的使用体验。应该理解的是，本发明的首屏加载方法可以是浏览器应用完整页面加载流程的一部分，浏览器应用在首屏渲染完成并显示之后，可以继续进行后续屏内容的渲染和显示。
本发明的首屏加载方案还可以实现为一种首屏加载装置。图6示出了根据本发明一个实施例的浏览器应用加载页面首屏的装置的示意图。如图6所示，首屏加载装置600可以包括页面显示单元601、信息请求单元602和信息比较单元603。
页面显示单元601可以用于响应于用户加载目标页面的请求，在本地存储中存储了待显示的所述目标页面的页面信息的情况下，从本地存储中获取所述页面信息以进行渲染。信息请求单元602则可用于响应于用户加载目标页面的请求，在本地存储中存储了待显示的所述目标页面的页面信息的情况下，网络请求所述目标页面的首屏信息。信息比较单元603可以用于将网络请求得到的所述首屏信息与存储的所述目标页面信息相比较。随后，在所述首屏信息存在更新的情况下，页面显示单元601可以使用更新的所述首屏信息继续对所述目标页面首屏的渲染并显示渲染完成的目标页面首屏。
首屏信息请求单元网络请求的目标页面的首屏数据可以是首屏动态数据，例如，json格式的数据。
在一个实施例中，信息比较单元603可以用于对网络请求得到的所述首屏信息与存储的所述目标页面信息进行dom-diff处理以找出更新的DOM树节点。
在一个实施例中，在所述首屏信息存在更新的情况下，页面显示单元601可以用于：基于所述首屏动态数据找出更新的DOM树节点并加以修改；渲染修改的DOM树节点；以及显示渲染完成的目标页面首屏。
响应于用户加载目标页面的请求，在本地存储中未存储待显示的所述目标页面的页面信息的情况下，信息请求单元602可以获取所述目标页面的完整页面信息，所述页面显示单元基于所述完整页面信息进行渲染和显示，并在所述本地存储中存储所述完整页面信息。
在一个实施例中，页面显示单元601在确认所述首屏信息不存在更新的情况下，显示使用所述页面信息渲染完成的目标页面首屏。
类似地，目标页面可以是如下的至少一项：前端渲染页面；服务器端渲染页面；以及至少部分同构页面。另外，所述本地存储是所述浏览器应用专门开辟的本地存储。
可以理解的是，上述首屏加载装置600及其组成单元可以实现为浏览器应用的功能模块。例如，页面显示单元601和信息请求单元602可以是浏览器应用现有的功能模块，而信息比较单元603可以是现有功能外附加的功能模块。
另外，图1所示的计算设备也可以用于实现本发明的首屏加载方案。具体地，一种计算设备可以包括：处理器；以及存储器，其上存储有可执行代码，当所述可执行代码被所述处理器执行时，使所述处理器执行如上所述的页面呈现方法或显示方法。
上文中已经参考附图详细描述了根据本发明的浏览器应用加载页面首屏的方案。该方案通过设置一个前端完全可控的本地存储，并在上述本地存储中缓存页面的首屏数据，使得在后续访问该页面时，可以在对缓存的内容进行渲染的同时获取动态数据并进行比较更新，由此实现对首屏内容的及时更新和快速显示。
此外，根据本发明的方法还可以实现为一种计算机程序或计算机程序产品，该计算机程序或计算机程序产品包括用于执行本发明的上述方法中限定的上述各步骤的计算机程序代码指令。
或者，本发明还可以实施为一种非暂时性机器可读存储介质(或计算机可读存储介质、或机器可读存储介质)，其上存储有可执行代码(或计算机程序、或计算机指令代码)，当所述可执行代码(或计算机程序、或计算机指令代码)被电子设备(或计算设备、服务器等)的处理器执行时，使所述处理器执行根据本发明的上述方法的各个步骤。
本领域技术人员还将明白的是，结合这里的公开所描述的各种示例性逻辑块、模块、电路和算法步骤可以被实现为电子硬件、计算机软件或两者的组合。
附图中的流程图和框图显示了根据本发明的多个实施例的系统和方法的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标记的功能也可以以不同于附图中所标记的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。
以上已经描述了本发明的各实施例，上述说明是示例性的，并非穷尽性的，并且也不限于所披露的各实施例。在不偏离所说明的各实施例的范围和精神的情况下，对于本技术领域的普通技术人员来说许多修改和变更都是显而易见的。本文中所用术语的选择，旨在最好地解释各实施例的原理、实际应用或对市场中的技术的改进，或者使本技术领域的其它普通技术人员能理解本文披露的各实施例。

Claims (16)

1.一种浏览器应用加载页面首屏的方法，包括：
响应于用户加载目标页面的请求，在本地存储中存储了待显示的所述目标页面的页面信息的情况下，从本地存储中获取所述页面信息以进行渲染，并且网络请求所述目标页面的首屏动态数据；
将网络请求得到的所述首屏动态数据与存储的所述目标页面信息相比较；以及
在所述首屏动态数据存在更新的情况下，浏览器内核使用更新的所述首屏动态数据继续对所述目标页面首屏的渲染并显示渲染完成的目标页面首屏，并且包括：
基于所述首屏动态数据找出更新的DOM树节点并加以修改；
渲染修改的DOM树节点；以及
显示渲染完成的目标页面首屏。
2.如权利要求1所述的方法，其中，所述首屏动态数据是json格式的数据。
3.如权利要求1所述的方法，其中，将网络请求得到的所述首屏动态数据与存储的所述目标页面信息相比较包括：
对网络请求得到的所述首屏动态数据与存储的所述目标页面信息进行dom-diff处理以找出更新的DOM树节点。
4.如权利要求1所述的方法，还包括：
响应于用户加载目标页面的请求，在本地存储中未存储待显示的所述目标页面的页面信息的情况下，获取所述目标页面的完整页面信息，进行渲染和显示，并在所述本地存储中存储所述完整页面信息。
5.如权利要求1所述的方法，还包括：
浏览器内核在确认所述首屏动态数据不存在更新的情况下，显示使用所述页面信息渲染完成的目标页面首屏。
6.如权利要求1所述的方法，其中，所述目标页面是如下的至少一项：
前端渲染页面；
服务器端渲染页面；以及
至少部分同构页面。
7.如权利要求1所述的方法，其中，所述本地存储是所述浏览器应用专门开辟的本地存储。
8.一种浏览器应用加载页面首屏的装置，包括：
页面显示单元，用于响应于用户加载目标页面的请求，在本地存储中存储了待显示的所述目标页面的页面信息的情况下，从本地存储中获取所述页面信息以进行渲染；
信息请求单元，用于响应于用户加载目标页面的请求，在本地存储中存储了待显示的所述目标页面的页面信息的情况下，网络请求所述目标页面的首屏动态数据；
信息比较单元，用于将网络请求得到的所述首屏动态数据与存储的所述目标页面信息相比较；以及
在所述首屏信息存在更新的情况下，所述页面显示单元使用更新的所述首屏动态数据继续对所述目标页面首屏的渲染并显示渲染完成的目标页面首屏，并且用于：
基于所述首屏动态数据找出更新的DOM树节点并加以修改；
渲染修改的DOM树节点；以及
显示渲染完成的目标页面首屏。
9.如权利要求8所述的装置，其中，所述首屏信息请求单元网络请求的所述首屏动态数据是json格式的数据。
10.如权利要求8所述的装置，其中，所述信息比较单元用于：
对网络请求得到的所述首屏动态数据与存储的所述目标页面信息进行dom-diff处理以找出更新的DOM树节点。
11.如权利要求8所述的装置，其中，响应于用户加载目标页面的请求，在本地存储中未存储待显示的所述目标页面的页面信息的情况下，所述信息请求单元获取所述目标页面的完整页面信息，所述页面显示单元基于所述完整页面信息进行渲染和显示，并在所述本地存储中存储所述完整页面信息。
12.如权利要求8所述的装置，其中，
所述页面显示单元在确认所述首屏动态数据不存在更新的情况下，显示使用所述页面信息渲染完成的目标页面首屏。
13.如权利要求8所述的装置，其中，所述目标页面是如下的至少一项：
前端渲染页面；
服务器端渲染页面；以及
至少部分同构页面。
14.如权利要求8所述的装置，其中，所述本地存储是所述浏览器应用专门开辟的本地存储。
15.一种计算设备，包括：
处理器；以及
存储器，其上存储有可执行代码，当所述可执行代码被所述处理器执行时，使所述处理器执行如权利要求1-7中任一项所述的方法。
16.一种非暂时性机器可读存储介质，其上存储有可执行代码，当所述可执行代码被电子设备的处理器执行时，使所述处理器执行如权利要求1-7中任一项所述的方法。
CN201811550197.0A 2018-12-18 2018-12-18 浏览器应用加载页面首屏的方法和装置 Active CN111339455B (zh)

Priority Applications (3)

Application Number Priority Date Filing Date Title
CN201811550197.0A CN111339455B (zh) 2018-12-18 2018-12-18 浏览器应用加载页面首屏的方法和装置
PCT/US2019/066656 WO2020131756A1 (en) 2018-12-18 2019-12-16 Method and apparatus for browser application to load first screen of web page
US16/716,336 US11134118B2 (en) 2018-12-18 2019-12-16 Method and apparatus for browser application to load first screen of web page

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201811550197.0A CN111339455B (zh) 2018-12-18 2018-12-18 浏览器应用加载页面首屏的方法和装置

Publications (2)

Publication Number Publication Date
CN111339455A CN111339455A (zh) 2020-06-26
CN111339455B true CN111339455B (zh) 2024-02-23

Family

ID=71071977

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201811550197.0A Active CN111339455B (zh) 2018-12-18 2018-12-18 浏览器应用加载页面首屏的方法和装置

Country Status (3)

Country Link
US (1) US11134118B2 (zh)
CN (1) CN111339455B (zh)
WO (1) WO2020131756A1 (zh)

Families Citing this family (24)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US11055113B1 (en) * 2020-02-26 2021-07-06 The Toronto-Dominion Bank Data rendering for applications
CN111857928A (zh) * 2020-07-23 2020-10-30 北京达佳互联信息技术有限公司 页面任务接入方法、装置、系统、电子设备及存储介质
CN111898053A (zh) * 2020-07-31 2020-11-06 平安普惠企业管理有限公司 页面浏览方法、装置、设备以及计算机可读存储介质
CN112015415B (zh) * 2020-08-27 2022-12-06 罗普特科技集团股份有限公司 一种屏幕页面配置和展示方法和装置
CN112100543B (zh) * 2020-08-31 2023-10-27 东软集团股份有限公司 渲染网页的方法、装置、存储介质及电子设备和服务器
CN112291799B (zh) * 2020-10-23 2024-04-09 北京小米移动软件有限公司 下载网速确定方法及装置、用户设备及存储介质
CN112231610A (zh) * 2020-11-05 2021-01-15 南京焦点领动云计算技术有限公司 一种提取网页首屏css样式的方法
CN112445599A (zh) * 2020-12-14 2021-03-05 招商局金融科技有限公司 浏览器内核自动切换方法、装置、设备及存储介质
CN112800359A (zh) * 2020-12-18 2021-05-14 成都泛微网络科技有限公司 一种数据处理方法及相关设备
CN112559924B (zh) * 2020-12-22 2021-09-17 北京云思畅想科技有限公司 一种移动端网页折叠屏通用适配方法
CN112596838B (zh) * 2020-12-24 2024-01-19 广州虎牙科技有限公司 通用Web页面的显示方法、装置、设备及存储介质
CN113268239B (zh) * 2021-06-04 2023-08-11 平安科技（深圳）有限公司 桌面应用的视图构建方法、装置、设备及存储介质
CN113312036B (zh) * 2021-06-15 2023-08-18 曙光信息产业(北京)有限公司 Web页面的大屏显示方法、装置、设备及存储介质
CN113343154B (zh) * 2021-06-29 2023-09-26 中国平安财产保险股份有限公司 页面加载方法、装置、电子设备及存储介质
CN113420249A (zh) * 2021-06-30 2021-09-21 北京达佳互联信息技术有限公司 网页显示方法、装置、电子设备及存储介质
CN113536185B (zh) * 2021-07-28 2024-01-02 平安科技（深圳）有限公司 应用页面的加载方法、存储介质、及其相关设备
CN113761442B (zh) * 2021-08-10 2024-01-19 远光软件股份有限公司 一种页面内容审核方法、装置、设备以及存储介质
CN113885962B (zh) * 2021-10-11 2024-04-09 上海淇玥信息技术有限公司 一种长屏页面加载方法、装置和电子设备
CN114237781A (zh) * 2021-10-25 2022-03-25 北京三快在线科技有限公司 页面加载的方法、装置、设备及存储介质
CN113825008B (zh) * 2021-11-24 2022-03-01 飞狐信息技术（天津）有限公司 活动页面的展现方法和装置
CN114237744A (zh) * 2021-12-15 2022-03-25 携程旅游网络技术（上海）有限公司 组件懒加载方法、系统、设备及存储介质
CN114840162A (zh) * 2022-05-10 2022-08-02 北京字跳网络技术有限公司 首屏页面呈现方法、装置、电子设备和存储介质
CN115268720B (zh) * 2022-08-16 2024-06-11 北京尽微致广信息技术有限公司 一种页面渲染方法、装置、设备及可读存储介质
CN117707453A (zh) * 2023-08-15 2024-03-15 荣耀终端有限公司 一种节点信息的读取方法、设备及存储介质

Citations (12)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR20110097300A (ko) * 2010-02-25 2011-08-31 삼성에스디에스 주식회사 모바일 웹 브라우저를 이용한 웹 브라우징 시스템 및 방법과 이에 사용되는 모바일 단말기
CN103853716A (zh) * 2012-11-28 2014-06-11 纽海信息技术（上海）有限公司 网页显示系统及方法
CN105205157A (zh) * 2015-09-28 2015-12-30 北京奇艺世纪科技有限公司 一种页面加载的方法、装置及系统
CN106339414A (zh) * 2016-08-12 2017-01-18 合网络技术（北京）有限公司 网页渲染方法及装置
CN106446174A (zh) * 2016-09-28 2017-02-22 江西博瑞彤芸科技有限公司 应用中页面加载的方法
CN106855870A (zh) * 2015-12-09 2017-06-16 阿里巴巴集团控股有限公司 一种网页显示方法和装置
CN107391664A (zh) * 2017-07-19 2017-11-24 广州华多网络科技有限公司 基于web的页面数据处理方法和系统
WO2017206626A1 (zh) * 2016-06-01 2017-12-07 广州市动景计算机科技有限公司 网络资源访问设备、混合设备及方法
CN107526751A (zh) * 2016-06-22 2017-12-29 广州市动景计算机科技有限公司 网页的加载方法、客户端、网页服务器及可编程设备
CN107807934A (zh) * 2016-09-09 2018-03-16 广州市动景计算机科技有限公司 页面显示方法和装置以及计算设备
CN108334562A (zh) * 2018-01-09 2018-07-27 阿里巴巴集团控股有限公司 一种页面显示方法和装置
CN108804707A (zh) * 2018-06-21 2018-11-13 腾讯科技（深圳）有限公司 一种页面处理方法、装置以及相关设备

Family Cites Families (23)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US9171097B2 (en) * 2009-03-31 2015-10-27 Qualcomm Incorporated Memoizing web-browsing computation with DOM-based isomorphism
US9311425B2 (en) * 2009-03-31 2016-04-12 Qualcomm Incorporated Rendering a page using a previously stored DOM associated with a different page
US8977653B1 (en) 2010-06-17 2015-03-10 Google Inc. Modifying web pages to reduce retrieval latency
US10296653B2 (en) 2010-09-07 2019-05-21 F5 Networks, Inc. Systems and methods for accelerating web page loading
US8782214B1 (en) 2011-03-17 2014-07-15 Amazon Technologies, Inc. Limiting site latencies and page weights
US9208135B1 (en) 2011-03-17 2015-12-08 Amazon Technologies, Inc. Tools to increase site performance
US9064264B2 (en) 2012-07-11 2015-06-23 Google Inc. Predicting visibility of content items
US9846893B2 (en) 2012-07-18 2017-12-19 Google Llc Systems and methods of serving parameter-dependent content to a resource
US20140053056A1 (en) * 2012-08-16 2014-02-20 Qualcomm Incorporated Pre-processing of scripts in web browsers
CN103679487B (zh) * 2012-09-05 2017-07-07 阿里巴巴集团控股有限公司 广告展示的监控方法和设备
US9773182B1 (en) 2012-09-13 2017-09-26 Amazon Technologies, Inc. Document data classification using a noise-to-content ratio
CN104798094B (zh) 2012-09-20 2019-02-19 谷歌有限责任公司 确定内容项目显示环境的配置
US8965880B2 (en) 2012-10-05 2015-02-24 Google Inc. Transcoding and serving resources
US9164966B1 (en) 2012-10-24 2015-10-20 Google Inc. Determining sizes of content items
US9942299B2 (en) 2013-03-15 2018-04-10 Yottaa Inc. System and method for managing multiple variants of an HTTP object
US9760964B2 (en) 2013-04-11 2017-09-12 Facebook, Inc. Application-tailored object re-use and recycling
US9207986B2 (en) 2013-04-11 2015-12-08 Facebook, Inc. Identifying a next window of idle time to perform pre-generation tasks of content portions outside of the displayable region stored in a message queue
CA2816781C (en) * 2013-05-28 2022-07-05 Ibm Canada Limited - Ibm Canada Limitee Identifying client states
US9875121B2 (en) * 2014-09-17 2018-01-23 International Business Machines Corporation API server
US10244270B2 (en) 2015-03-25 2019-03-26 Amazon Technologies, Inc. Determining initial bit rate for adaptive bit rate video playback
CN107368487B (zh) * 2016-05-12 2020-09-29 阿里巴巴集团控股有限公司 一种页面组件动态布局方法、装置及客户端
US11003727B2 (en) 2018-02-28 2021-05-11 Grubhub Holdings, Inc. Real-time distribution and adjustment of content placement
US10846356B2 (en) 2018-06-13 2020-11-24 At&T Intellectual Property I, L.P. Scalable whittled proxy execution for low-latency web over cellular networks

Patent Citations (12)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR20110097300A (ko) * 2010-02-25 2011-08-31 삼성에스디에스 주식회사 모바일 웹 브라우저를 이용한 웹 브라우징 시스템 및 방법과 이에 사용되는 모바일 단말기
CN103853716A (zh) * 2012-11-28 2014-06-11 纽海信息技术（上海）有限公司 网页显示系统及方法
CN105205157A (zh) * 2015-09-28 2015-12-30 北京奇艺世纪科技有限公司 一种页面加载的方法、装置及系统
CN106855870A (zh) * 2015-12-09 2017-06-16 阿里巴巴集团控股有限公司 一种网页显示方法和装置
WO2017206626A1 (zh) * 2016-06-01 2017-12-07 广州市动景计算机科技有限公司 网络资源访问设备、混合设备及方法
CN107526751A (zh) * 2016-06-22 2017-12-29 广州市动景计算机科技有限公司 网页的加载方法、客户端、网页服务器及可编程设备
CN106339414A (zh) * 2016-08-12 2017-01-18 合网络技术（北京）有限公司 网页渲染方法及装置
CN107807934A (zh) * 2016-09-09 2018-03-16 广州市动景计算机科技有限公司 页面显示方法和装置以及计算设备
CN106446174A (zh) * 2016-09-28 2017-02-22 江西博瑞彤芸科技有限公司 应用中页面加载的方法
CN107391664A (zh) * 2017-07-19 2017-11-24 广州华多网络科技有限公司 基于web的页面数据处理方法和系统
CN108334562A (zh) * 2018-01-09 2018-07-27 阿里巴巴集团控股有限公司 一种页面显示方法和装置
CN108804707A (zh) * 2018-06-21 2018-11-13 腾讯科技（深圳）有限公司 一种页面处理方法、装置以及相关设备

Non-Patent Citations (2)

* Cited by examiner, † Cited by third party
Title
Scalable web-embedded volume rendering;Mohammad R.等;2017 IEEE 7th Symposium on Large Data Analysis and Visualization (LDAV);全文 *
基于完全渲染的网页首屏性能测量设计;吴清扬;赵栋;;电子制作(第16期);全文 *

Also Published As

Publication number Publication date
US20200195705A1 (en) 2020-06-18
US11134118B2 (en) 2021-09-28
WO2020131756A1 (en) 2020-06-25
CN111339455A (zh) 2020-06-26

Similar Documents

Publication Publication Date Title
CN111339455B (zh) 浏览器应用加载页面首屏的方法和装置
CN111339458B (zh) 页面呈现方法和装置
US9857959B2 (en) Supporting webpage design and revision irrespective of webpage framework
KR101099272B1 (ko) 외부 프로그램 테마를 사용하는 웹페이지 렌더링을 위한 테마 적용 방법
US9311425B2 (en) Rendering a page using a previously stored DOM associated with a different page
US9448977B2 (en) Website blueprint generation and display algorithms to reduce perceived web-page loading time
RU2459238C2 (ru) Управляемая среда выполнения для организации взаимодействия между программными приложениями
US9069723B2 (en) Computer-implemented methods and systems for dynamically compiling and serving electronic content
US9066019B2 (en) Camera preview via video tag
JP2022525831A (ja) ページプリレンダリング方法、装置、電子機器、コンピュータプログラム及び記憶媒体
US9766860B2 (en) Dynamic source code formatting
WO2020048189A1 (zh) 图片生成
CN107179920B (zh) 网络引擎启动方法及装置
CN111221596B (zh) 字体渲染方法、装置及计算机可读存储介质
WO2018072388A1 (zh) 网页预读方法、网页访问方法、设备及可编程设备
CN106874023A (zh) 动态页面加载方法和装置
CN111880813B (zh) 实现安卓卡片ui的方法、存储介质
US20120105454A1 (en) Font file with graphic images
CN111460342B (zh) 页面的渲染展示方法、装置、电子设备及计算机存储介质
CN111352665A (zh) 页面加载方法、装置、设备及其存储介质
CN114756797A (zh) 一种页面处理方法、装置、电子设备和存储介质
US10013406B2 (en) Flip-to-edit container
AU2016266083A1 (en) Method, system and apparatus for displaying an electronic document
CN113468454A (zh) 渲染html页面的方法和装置
CN112130811A (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
GR01 Patent grant
GR01 Patent grant