CN102741811A - 改善基于模板的JavaScript小部件的性能 - Google Patents

Abstract

包括了方法、制造品和设备，其用于将通用脚本对象嵌入到用于呈现网页的编程代码、将通用脚本对象转换为JavaScript、且在接收到对网页的请求时将转换和嵌入的脚本对象发送给请求者。通用脚本对象可从HTML或某种其他语言转换。

Description

改善基于模板的JavaScript小部件的性能

技术领域

发明领域涉及基于客户端的通用脚本对象解释和呈现（rendering）。更具体地，实施例涉及解释或转换从跨平台通用脚本对象模板库提取的字符串（string）表示并在解析或运行代码前将字符串表示嵌入到代码中，以由客户端应用显示。

背景技术

通常来讲，Web设计者可使用预先写好的模板和语言，以加快开发复杂网站所需的时间和努力。预先写好的模板用于减少特定网络应用程序所需的自定义编码的量。预先写好的模板和语言可以在远离程序员位置的库中找到。当需要时，该语言可以被直接插入到程序员正在写的代码中，以加快编程过程。库中可用的预先写好的代码可包括用户界面（IU）项目，诸如按钮和下拉菜单、组织结构图（organization chart）、网格（grid），以及通常并一般在网页中找到的其他项目。

当使用预先写好的模板来写代码时，HTML代码可以被插入到代码中。在代码在运行时被使用之前，HTML代码被客户端应用所解析。然后，在解析后，程序员所写的代码和从库中插入的HTML代码都可以被客户端应用运行。于是，当借助使用代码库来写web应用程序时，客户端应用在运行时承担了解析来自库的HTML代码以合适地呈现网页的压力。

在特定的情况中，当Web应用设计者使用模板框架DOJO来构建动态创建的基于JavaScript的UI时，他们实际上通过减少自制编码量来加快开发复杂的网站。一个折衷（trade-off）是代码在运行时的低性能。特别地，性能在客户端机器上受损，因为每个通常被称为小部件（widget）的用户界面元素包括在运行时必须被客户端机器解析的DHTML模板。页面上的小部件越多，解析该代码所需的处理也越多。

发明内容

如在此所述的，本发明可以体现为不同的形式，包括系统、装置、方法和制造品。这里提供的实施例是示例性的而不是限制性的，并可以部分或组合地适应性修改，所有这些都在本发明的精神和范围内。

在实施例中，在代码和对象被客户端执行前，来自库的通用脚本对象可以和非库代码组合。通用脚本对象可以在解析代码之前被处理或解释，它在运行时被插入到该代码中。由于该处理或解释，当代码被客户端在运行时执行时，插入的对象不需要与其所嵌入的代码分开来解析。

实施例可以包括网络设备、系统、方法和计算机可读媒介。每个可以包括用于微处理器的指令，其在被微处理器执行时，使得微处理器在客户端执行最终要运行的代码之前处理或解释通用的脚本对象。在实施例中，在客户端在运行时解析最终代码之前，解释或转换来自库的嵌入代码的指令可以在服务器或其他地方运行。

附图说明

图1是示出在根据实施例的处理之前和之后的编程代码和通用脚本对象的框图。

图2是示出根据实施例的服务器和客户端计算机之间的示例性代码流的框图。

图3是根据实施例耦合到远程应用和脚本库的微处理器的框图。

图4是体现本发明的示例性方法的框图。

具体实施方式

这里提供了解释和呈现通用脚本对象的各种实施例。本发明可以反映在这些实施例、这些实施例的部分、这些实施例的组合以及其他实施例中。

通用脚本对象可以被存储并从网络可访问的代码库中获取。通用脚本对象可表示预先配置的混入（drop-in），其经常被网页程序员所使用。这些包括用户界面、下拉菜单、网站地图、网格以及其他可经常重复的Web图像。

在编码时，程序员可将这些通用脚本对象插入到代码中，以减少编程所需的时间，并提高所写代码的准确性，因为通用脚本对象可能已经被审核过准确性和完备性。

实施例包括在最终代码被客户端解析并运行之前处理通用脚本对象。该处理可以包括将要被客户端运行的代码中嵌入的通用脚本对象转换或解释为可以被客户端执行、而与客户端所运行的周围代码相比不需要额外处理的形式。换句话说，如果对于被呈现的大部分代码，客户端需要解析并运行JavaScript，则通用脚本对象也将使用JavaScript来转换、解析并运行。通用脚本对象处理可以被Web服务器或在其他地方执行，且该处理的结果可被Web服务器或在其他地方存储，以用于被要运行的代码的立即使用或者以后使用。处理可以用来缩短在客户端处解析并运行代码以及在客户端处呈现代码所反映的任何网页所需要的时间。

在实施例中，基于JavaScript的UI可以在客户端处最终运行时之前被处理。将网页（包括UI模板）发送到客户端的服务器可以以在运行时之前不需要被解析的形式来发送它们。在某些实施例中，客户端可以在接收时、但在网页的解析和运行时之前来处理网页和UI模板。在每种情况下，UI不需要在运行时被客户端转换为JavaScript。该方法的益处可包括客户端在运行时可以有较高的性能。例如，当涉及到大量UI或其他通用脚本对象时，运行时性能的提高可以是30%-50%量级的提升。但是，该提升范围不需要落入本发明的精神和范围内。

图1是在根据本发明的实施例组合之前和之后的编程代码和通用脚本对象的模块框图。编程代码在框110中示出，通用脚本对象在框120中示出，且组合的编程代码110和通用脚本对象120在框130中示出。如图1所示，编程代码可以与通用脚本对象120组合，然后被处理或转换为框130所示的可执行形式。

框110中的编程代码示出了程序员所写的用于特定Web应用的对象类通用脚本对象。所写的代码包括模板路径和执行该模板路径作为编程的一部分的呈现。通用脚本对象120可以在程序员完成的编程期间被插入到编程代码中。可以用HTML来编写的该UI模板可以包括模板字符串，其指示创建按钮或其他用户界面。该模板字符串不需要由程序员来编写，而可以从通用脚本对象库获取。在该实施例中，框130不仅表示编程代码110和通用脚本对象120的组合，还表示可以在运行时之前在客户端应用中所反映的被处理或转换的对象类。箭头125反映了通用脚本对象120可以在与组合的通用脚本对象130一起考虑之前被打包或嵌入到编程代码110中。

可以看到，在该例子中被处理或转换的对象类130，即用JavaScript编写的按钮类，可以同时包括呈现以及其关联的呈现函数调用，以及其他代码。在实施例中，呈现函数调用，在被客户端或服务器转换或处理之后但是在运行时之前，不仅可包括UI模板字符串，而且该字符串以在运行时可以被客户端容易执行的方式被处理或转换。

图2示出了服务器210、客户端230、HTML代码220以及编译按钮类代码240。模板HTML和编译按钮类240可以被打包在一起，然后在客户端230上运行之前被解释。该打包和解释可以在服务器210上或其他地方完成，并且在客户端执行并运行组合的代码之前被最好地完成。如果解释和处理是由客户端执行的，客户端可以存储该信息，从而在使用被编译的按钮类和JavaScript的网页的运行时的随后解析不需要被解释和处理。如图2所示，编译按钮类可以包括指向DOM代码的呈现函数。

图3示出了与远程应用320和脚本管理库330通信的微处理器310。微处理器310可以包括输入/输出311、存储器312、存储器316、处理器315和传感器314。微处理器310可以从脚本管理库330接收通用脚本对象，并可以接收用于远程应用320的Web应用。在实施例中，微处理器310可以组合、呈现并执行这些文件。微处理器310可以位于客户端应用、服务器应用以及其他设备中。要存储在微处理器310的存储器316中的指令可以通过输入输出311从便携式存储媒介及通过其他方式输入到存储器中。如本文各处所述的，微处理器可以将小部件的HTML代码解释或处理为可以在运行时被客户端运行的JavaScript，由此减少与执行UI小部件相关的负担和开销。

图4示出了根据实施例的方法。如410处所示，HTML页面可以被提供，其中用于该页面的Web服务器可以包含对脚本库例如dojo、Yahoo或Google的引用，并可以包含用于构建小部件的HTML。420示出了在实施例中，脚本库管理器可以用来插入用于页面的代码，并实例化小部件对象，例如digit.form.button。接下来，430示出了该小部件实例可以被用来在页面的DOM树上呈现自己。呈现函数可以使用JavaScript为小部件构建DOM子树。其他构建协议也可以被使用。在任何情况中，在运行时在客户端会涉及很少或没有字符串解析和替换。最后，在440，新的小部件或其他通用脚本对象用户界面可以在客户端运行时被呈现在浏览器的页面上。这里，在呈现网页时，UI小部件可以与其他被解析的代码一致地在运行时被解析。

在实施例中，除了上述之外，与从服务器下载的用户界面元素关联的JavaScript的处理可以使用HTML代码来生成，所述HTML代码用于界面元素，并用于在客户端位置的呈现。该生成的HTML代码可以被存储在客户端和/或对客户端可访问的存储位置，从而可以完成运行时由客户端提升性能以及网页的呈现。在实施例中，所述方法可以包括预处理用于用户界面元素的模板，以及将用户界面元素嵌入到代码形式中，以用于动态创建的基于JavaScript的用户界面。在编译时，不是仅将HTML模板复制到编译的类中的字符串，而是可将HTML模板转换为构建模板的DOM节点的JavaScript代码。换句话说，用于通用脚本对象的HTML模板不是仅仅简单地被复制，而是被转换为可运行代码，以在模板的DOM节点上使用。

在运行时，HTML页面可以由Web服务器来提供。该页面可以引用dojo脚本库，并可以包含HTML来构建按钮小部件。Dojo可以评估（evaluate）页面，并且基于按钮标签的dojo类型属性，dojo可以实例化小部件对象，例如其为digit.form.Button类型。该按钮实例可以被警告（alarm）或指示，以在页面的DOM树上呈现自己。呈现函数可以使用Java和JavaScript来为小部件构建DOM子树。在这样做时，在客户端上在运行时可涉及很少或没有字符串解析。最后，新的小部件可以被呈现在浏览器的页面上。

在实施例中完成的dojo呈现可以根据网络能力和负载条件在服务器或客户端上进行。当在客户端上进行时，客户端可以保留或保存DOM树结构及其他信息，以用于浏览器页面的后续呈现。其他信息也可以根据需要在客户端上存储，以用于客户端解释、客户端解析和客户端呈现。已经提到，dojo之外的小部件工具包包括Yahoo！UI小部件工具包和Google小部件工具包。

如本领域技术人员所理解的，本发明可以体现为系统、方法或计算机程序产品。因此，本发明可采取完全的硬件实施例、完全的软件实施例（包括固件、驻留软件、微代码等）或结合了软件部分和硬件部分的实施例的形式，所述软件部分和硬件部分在此被统称为“电路”、“模块”或“系统”。而且，本发明可以采取有形表达介质中的计算机程序产品的形式，在介质中包含有计算机可用程序代码。

可以使用一个或多个计算机可用的或计算机可读的介质的任何组合。计算机可用的或计算机可读的介质例如可以是—但不限于—电的、磁的、光的、电磁的、红外线的、或半导体的系统、装置、设备或传播介质。计算机可读介质的更具体的例子（非穷举的列表）包括以下：有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机存取存储器（RAM）、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式光盘只读存储器(CD-ROM)、光存储器件、诸如支持因特网或内部网的传输介质、或者磁存储器件。注意，计算机可用或计算机可读的介质甚至可以是纸张或在其上印有程序的其他合适的介质，因为程序可以通过例如对纸张或其他媒介的光扫描被电子地捕获，然后在需要时被编译、解释或者以其他合适的方式来处理，然后被存储在计算机存储器中。在本文档的语境中，计算机可用或计算机可读介质可以是任何含有或存储供指令执行系统、装置或设备使用的或与指令执行系统、装置或设备相联系地使用的有形介质。计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。计算机可用的程序代码可使用任意合适的介质，包括但不限于无线、有线、光缆、RF等。

可以以一种或多种程序设计语言或其组合来编写用于执行本发明操作的计算机程序代码，所述程序设计语言包括面向对象的程序设计语言—诸如Java、Smalltalk、C++，还包括常规的过程式程序设计语言—诸如”C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络——包括局域网(LAN)或广域网(WAN)—连接到用户计算机，或者，可以连接到外部计算机（例如利用因特网服务提供商来通过因特网连接）。

参照本发明实施例的方法、装置（系统）和计算机程序产品的流程图和/或框图描述了本发明。应当理解，流程图和/或框图的每个方框以及流程图和/或框图中各方框的组合，都可以由计算机程序指令实现。这些计算机程序指令可以提供给通用计算机、专用计算机或其他可编程数据处理装置的处理器，从而生产出一种机器，这些计算机程序指令通过计算机或其他可编程数据处理装置执行，产生了实现流程图和/或框图中的方框中规定的功能/操作的装置。

也可以把这些计算机程序指令存储在能使得计算机或其他可编程数据处理装置以特定方式工作的计算机可读介质中，这样，存储在计算机可读介质中的指令就产生出一个包括实现流程图和/或框图中的方框中规定的功能/操作的指令装置(instruction  means)的制造品（manufacture）。

也可以把计算机程序指令加载到计算机或其他可编程数据处理装置上，使得在计算机、其他可编程数据处理装置或其他设备上执行一系列操作步骤，以产生计算机实现的过程，从而使得在计算机或其他可编程装置上执行的指令能够提供实现流程图和/或框图中的方框中规定的功能/操作的过程。

附图中的流程图和框图显示了根据本发明的多个实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

此处使用的术语仅是为了描述特定实施例，而不旨在限制本发明。如在此使用的，单数形式的“一”、“一个”和“该”也旨在包括多数形式，除非上下文另有清楚的规定。还将理解，术语“包括”和/或“包含”，当在本说明中使用时，明确说明存在所陈述的特点、整体、步骤、操作、元件和/或组件，但不排除一个或多个其他的特点、整体、步骤、操作、元件、组件和/或其组的存在或添加。

权利要求中的所有装置或步骤加功能元件的相应的结构、材料、操作和等价物旨在包括用于结合在权利要求中特意声明的其他元件而执行功能的任何结构、材料或操作。本发明的说明已出于解释和描述的目的被展示，但不旨在将本发明限制在公开的形式。许多修改和变化对于本领域普通技术人员来说是明显的，且不脱离本发明的精神和范围。选择并描述实施例是为了最好地解释本发明的原理和实际应用，且使得本领域普通技术人员能理解本发明的具有适用于所打算的特定用户的各种修改的各种实施例。

Claims (19)

1.一种在客户端呈现网页的方法，该方法包括：

在服务器上，将用于用户界面且来自远程库的通用脚本对象嵌入到用于呈现网页的编程代码；

在服务器上，将该通用脚本对象转换为JavaScript；以及

在接收到对网页的请求时，将转换和嵌入的通用脚本对象发送给请求者。

2.如权利要求1所述的方法，其中，所述通用脚本对象是图形用户界面。

3.如权利要求1所述的方法，其中，所述通用脚本对象用HTML编码。

4.如权利要求1所述的方法，其中，所述编程代码是JavaScript。

5.如权利要求1所述的方法，还包括：

在将通用脚本对象嵌入到编程代码之前，从小部件库中提取该通用脚本对象。

6.如权利要求1所述的方法，还包括：

提供指令，以在缓存的网页的DOM页面上呈现小部件。

7.如权利要求1所述的方法，其中，在服务器上嵌入和在服务器上转换是在不同的服务器上进行的。

8.一种计算机设备，包括：

微处理器；

耦合到该微处理器的存储器；

该存储器包含指令，其在被执行时，使得该微处理器将通用脚本对象嵌入到用于呈现网页的编程代码，该通用脚本对象用于用户界面并来自远程库，

将通用脚本对象转换为JavaScript；以及

在接收到网页请求时，将转换和嵌入的通用脚本对象发输送给请求者。

9.如权利要求8所述的计算设备，其中，所述通用脚本对象是图形用户界面。

10.如权利要求8所述的计算设备，其中，所述通用脚本对象用HTML编码。

11.如权利要求8所述的计算设备，其中，所述编程代码是JavaScript。

12.如权利要求8所述的计算设备，其中，所述指令还提供

在将通用脚本对象嵌入到编程代码之前，从小部件库中提取该通用脚本对象。

13.如权利要求12所述的计算设备，其中所述指令还提供

在缓存的网页的DOM页面上呈现所述小部件。

14.一种制造品，包括：

计算机可读存储媒介，该存储媒介包括指令，其在被执行时，使得微处理器

将通用脚本对象嵌入到用于呈现网页的编程代码中，该通用脚本对象用于用户界面且来自远程库，

将通用脚本对象转换为JavaScript；以及

在接收到对网页的请求时，将转换和嵌入的通用脚本对象发送给请求者。

15.如权利要求14所述的制造品，其中，所述通用脚本对象是图形用户界面。

16.如权利要求14所述的制造品，其中，所述通用脚本对象用HTML编码。

17.如权利要求14所述的制造品，其中，所述编程代码是JavaScript。

18.如权利要求14所述的制造品，其中，所述指令还提供

在将通用脚本对象嵌入到编程代码之前，从小部件库中提取该通用脚本对象。

19.如权利要求18所述的制造品，其中，所述指令还提供在缓存的网页的DOM页面上呈现小部件。

Images