`
javacoo
  • 浏览: 65492 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

jawr提升EXT加载速度

阅读更多

大家平时在用EXT作开发时,或多或少会对EXT效率不满,其实最主要的原因是进入主应用时,需加载EXT核心库文件及相关业务JS文件时非常耗时,造成长时间等待,在WEB应用中这个问题就更为突出,所以提速是关键。
    网上有很多开源的解决方案,我这里选择的是jawr,下面介绍一下我在自己的项目(www.javacoo.org)中如何运用jawr的.配置如下:
1:web.xml
<servlet>
        <servlet-name>JavascriptServlet</servlet-name>
    <servlet-class>net.jawr.web.servlet.JawrServlet</servlet-class>
        <init-param>
            <param-name>configLocation</param-name>
            <param-value>/jawr.properties</param-value>
        </init-param>
        <init-param>
            <param-name>mapping</param-name>
            <param-value>/jsJawrPath/</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>

    <servlet>
        <servlet-name>CSSServlet</servlet-name>
        <servlet-class>net.jawr.web.servlet.JawrServlet</servlet-class>
        <init-param>
            <param-name>configLocation</param-name>
            <param-value>/jawr.properties</param-value>
        </init-param>
        <init-param>
            <param-name>type</param-name>
            <param-value>css</param-value>
        </init-param>
        <init-param>
            <param-name>mapping</param-name>
            <param-value>/cssJawrPath/</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>

<servlet-mapping>
        <servlet-name>JavascriptServlet</servlet-name>
        <url-pattern>/jsJawrPath/*</url-pattern>
    </servlet-mapping>

    <servlet-mapping>
        <servlet-name>CSSServlet</servlet-name>
        <url-pattern>/cssJawrPath/*</url-pattern>
    </servlet-mapping>
2: jawr.properties

# Common properties
jawr.debug.on=false
jawr.gzip.on=true
jawr.gzip.ie6.on=false
jawr.charset.name=UTF-8

jawr.js.bundle.names= desktop
jawr.css.bundle.names=style

# desktop
jawr.js.bundle.desktop.order=1
jawr.js.bundle.desktop.id=/bundles/desktop.js
jawr.js.bundle.desktop.mappings=/client/App.js,/client/Desktop.js,/client/Module.js,/client/Notification.js,/client/Shortcut.js,/client/StartMenu.js,/client/TaskBar.js

# systemCss bundle
jawr.css.bundle.style.order=1
jawr.css.bundle.style.id=/bundles/system-styles.css
jawr.css.bundle.style.mappings=/js/ext/resources/css/ext-all-notheme.css,/resources/css/desktop.css,/js/framework/component/css/button.css,/js/framework/component/css/tip.css,/resources/css/system.css

3:index.jsp

<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="http://jawr.net/tags" prefix="jwr" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <title>春雨过后,万物芳菲-----雨菲个人记账理财管理系统-V1.0</title>
    <meta http-equiv="keywords" content="记账,理财,个人记账理财, www.javacoo.org">
    <meta http-equiv="description" content="雨菲个人记账理财管理系统, www.javacoo.org">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta http-equiv="PRAGMA" content="NO-CACHE">
    <meta http-equiv="CACHE-CONTROL" content="NO-CACHE">
    <meta http-equiv="EXPIRES" content="-1">
    <link rel="shortcut icon" href="favicon.ico" />
    <link rel="icon" href="/resources/images/animated_favicon.gif" type="image/gif" />
 
    <style type="text/css">
            #loading-mask {
                background-color: white;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                z-index: 20000;
            }
           
            #loading {
                height: auto;
                position: absolute;
                left: 45%;
                top: 40%;
                padding: 2px;
                z-index: 20001;
            }
           
            #loading a {
                color: #225588;
            }
           
            #loading .loading-indicator {
                background: white;
                color: #444;
                font: bold 13px Helvetica, Arial, sans-serif;
                height: auto;
                margin: 0;
                padding: 10px;
            }
           
            #loading-msg {
                font-size: 10px;
                font-weight: normal;
                font: 12px "sans-serif", "Arial", "Verdana";
            }
            </style>
</head>
 
  <body scroll="no" >
    <div id="loading-mask" style=""></div>
    <div id="loading">
        <div class="loading-indicator"><img src="/js/ext/resources/images/extanim32.gif" width="32" height="32" style="margin-right:8px;float:left;vertical-align:top;"/>春雨过后,万物芳菲- <a href="http://www.javacoo.org">javacoo.org</a><br /><span id="loading-msg">系统初始化...</span></div>
    </div>
    <div class="init" id="sysInitDiv">
        <!-- Base JS -->
        <script type="text/javascript">document.getElementById('loading-msg').innerHTML = '加载系统基础API...';</script>
        <jwr:script src="/bundles/bases.js"/>
        <!-- jQuery JS LIBRARY -->
        <script type="text/javascript">document.getElementById('loading-msg').innerHTML = '加载系统EXT API...';</script>
        <jwr:script src="/bundles/libs.js"/>
        <!-- EXT JS LIBRARY -->
        <script type="text/javascript">document.getElementById('loading-msg').innerHTML = '加载系统EXT API...';</script>
        <jwr:script src="/bundles/utils.js"/>
        <jwr:script src="/bundles/components.js"/>
        <!-- DESKTOP CSS -->
        <script type="text/javascript">document.getElementById('loading-msg').innerHTML = '加载系统核心CSS样式...';</script>
        <jwr:style src="/bundles/system-styles.css"/>
        <!-- MODULES CSS-->
        <script type="text/javascript">document.getElementById('loading-msg').innerHTML = '加载系统模块CSS样式...';</script>
        <jwr:style src="/bundles/modules-styles.css"/>
        <!-- CORE -->
        <script type="text/javascript">document.getElementById('loading-msg').innerHTML = '加载系统DESKTOP核心模块...';</script>
        <jwr:script src="/bundles/desktop.js"/>
        <!-- QoDesk -->
        <script type="text/javascript">document.getElementById('loading-msg').innerHTML = '加载系统首页...';</script>
        <script type="text/javascript" src="/modules/Index.js"></script>
        <script type="text/javascript">document.getElementById('loading-msg').innerHTML = '加载完毕,初始化配置信息,请稍后...';</script>
     </div>
  </body>
</html>

所需jar包见附件jawr-3.3.3.jar

1
1
分享到:
评论

相关推荐

    简单的EXT加载数据的例子

    本示例将详细介绍如何在EXT中加载数据,特别是通过EXT的Treepanel来呈现一个生成的树形结构。 首先,我们要理解EXT Treepanel。Treepanel是EXT中用于展示层次结构数据的组件,它可以用于创建多级目录、组织结构图等...

    Ext4 动态加载js例子

    这样做的好处是,可以降低初始页面的体积,提高页面的加载速度,同时也有利于模块化的代码组织。在 Ext4 中,`Ext.Loader` 提供了这样的功能,使得开发者可以灵活地控制哪些类或文件应该在何时被加载。 下面我们将...

    Ext下多tab的延迟加载问题.docx

    因此,实现延迟加载能够显著提升用户体验,只在用户实际需要时加载相应标签页的内容。 在上述文档中,作者提出了一个解决ExtJS下多标签延迟加载问题的方法。这个解决方案通过自定义一个名为`Ext.ux.tab....

    ext 异步加载树完整版

    在IT行业中,异步加载是一种优化用户体验的...总的来说,"ext 异步加载树完整版"涉及的是EXT JS框架中Tree Panel的异步数据加载机制,这是构建大规模数据树形结构时非常实用的技术,能够提升用户体验并优化资源使用。

    ext扩展 延时加载

    在IT行业中,"ext扩展 延时加载"是一个关于前端开发的重要概念,特别是对于使用Ext JS框架的应用程序。Ext JS是一个强大的JavaScript库,用于构建数据驱动的富客户端应用程序。延时加载(Lazy Loading)是一种优化...

    Ext的gridpanel控件二次加载问题

    总之,解决Ext的gridpanel控件二次加载时丢失的问题需要对Ext JS的生命周期管理有深入的理解,并结合实际应用场景选择合适的策略。无论是使用全局变量还是优化加载机制,关键在于确保GridPanel实例和数据的正确管理...

    Ext-tree加载

    Ext-tree加载Ext-tree加载Ext-tree加载Ext-tree加载Ext-tree加载Ext-tree加载Ext-tree加载Ext-tree加载Ext-tree加载Ext-tree加载Ext-tree加载Ext-tree加载Ext-tree加载

    Ext 动态加载表单数据

    在Ext JS这个强大的JavaScript框架中,动态加载表单数据是一种常见的功能需求,特别是在构建数据驱动的应用程序时。本文将深入探讨如何使用JSON格式的数据来实现这一功能,以便于灵活地更新和显示表单内容。 首先,...

    Ext列表特效(远程加载数据)

    1、Ext版本:3.2.1; 2、运行环境:VS 2008 以上; 3、远程加载数据,数据在程序中生成,无需连接数据库或XML文件; 4、运用Viewport管理页面布局 5、GridPanel的各种功能和特效

    grid插件加载速度测试

    尽管功能强大,但因为其庞大的库大小,Ext JS grid的加载速度可能会相对较慢。测试中需注意初始化时间、内存占用和动态加载性能。 4. **dhtmlxGrid**: dhtmlxGrid是DHTMLX Suite的一部分,是一个轻量级且功能丰富...

    Ext.ux.tree.treegrid异步加载

    ### Ext.ux.tree.TreeGrid 异步加载知识点详解 #### 一、Ext.ux.tree.TreeGrid简介 在ExtJS框架中,`Ext.ux.tree.TreeGrid`组件是一种结合了树形结构与表格显示特性的控件,适用于展示具有层级关系的数据。通过...

    ext下载包,ext,ext包,ext下载

    然而,由于其体积较大,对于性能和加载速度有一定的要求,因此在使用时需要权衡其优势和可能的性能影响。同时,学习EXT也需要一定的JavaScript基础和时间投入,但一旦掌握,可以大大提高开发效率。

    EXT安装包4.2.1-1

    10. **性能优化**:EXT通过延迟加载、按需渲染和组件缓存等策略,提升了大型应用的性能和加载速度。 压缩包中的"extJS安装包-4.2.1"可能包含了以下文件和目录: - `ext-all.js`:EXT的核心库文件,包含了所有组件和...

    EXT2.3+EXT2.0教程

    另外,EXT2.3在AJAX请求处理上进行了优化,提高了数据加载速度,并且对触摸设备的支持也有所增强,预示着EXT开始考虑移动设备的适配。 "EXT 中文手册.pdf"是EXT组件库的中文版文档,对于初学者来说是一份宝贵的参考...

    ext教程、ext核心API 、ext中文教程

    EXT,全称EXT JS,是一款基于JavaScript的开源前端框架,由Sencha公司开发,主要用于构建富客户端Web...在实际项目中,EXT常常被用于企业级应用的开发,因此熟悉并精通EXT技术,对于提升个人职业竞争力具有显著效果。

    ext.jsb工具文件

    这些工具对于理解和优化EXT应用的性能至关重要,因为它们可以帮助开发者减少JavaScript的运行时间,提高应用程序的加载速度和运行效率。 1. Ext框架:Ext是一个开源的JavaScript库,主要用于构建富客户端Web应用。...

    ext3.jar ext使用非常多

    EXT3是EXT发展中的一个重要阶段,它引入了许多新特性,如改进的数据绑定、新的布局管理器、增强的图表功能等,极大地提升了开发效率和用户体验。 在EXT3中,一个显著的变化是EXT3.0的发布,这个版本带来了许多性能...

    fp40ext.dll无法加载安装程序库

    标题 "fp40ext.dll无法加载安装程序库" 描述了一个常见的系统错误,涉及的是一个动态链接库(DLL)文件fp40ext.dll在尝试执行或加载时出现问题。DLL文件是Windows操作系统中的一种共享库,它包含了一系列可供多个...

    Windows读取Ext4分区的工具 Ext2Read

    EXT4是目前Linux发行版广泛采用的文件系统,其特点是速度快、支持大文件和大量文件。 2. **查看与复制**: 用户可以像在Windows资源管理器中一样,浏览EXT分区中的文件和目录结构,预览文件内容(对于文本文件),并...

    ext4.0动态加载示例

    在“ext4.0动态加载示例”中,我们主要关注的是如何利用Ext JS 4.0的特性实现数据的动态加载。动态加载是一种优化应用性能和用户体验的技术,允许应用程序根据需要只加载必要的数据,而不是一次性加载所有数据,这样...

Global site tag (gtag.js) - Google Analytics