`

关于UI组件加载策略的思考

阅读更多
    1.YUI的延迟加载策略是否适用于我们的网站?
    1)如果组件负责布局样式的话,组件样式的延迟加载会造成布局的错乱,这会延迟用户获取有用信息的时间,降低用户体验。
    2)延迟加载会增加组件升级的成本。如果对组件进行重构的话其它适用该组件库的项目也需要同步重构,这个过程极有可能造成bug。
    3)延迟加载会造成服务器请求数量过多,增加服务器负担。通常解决办法是使用combo的方式整合代码后再发布,这个过程在发布前进行,要修改html中资源文件的引用,很可能因为疏忽引入不必要的bug。
    4)延迟加载会造成页面元素加载完成后部分功能暂时不可用,如果是用户一上来就想用的功能,譬如说导航,必然会造成用户使用的不便。

    2.整合加载策略的不足:
   1)一次性加载的js和css资源增多,不能做到每个页面的按需加载。不过由于我们的组件库不大,而且浏览器会很好的缓存资源文件,所以我估计最终文件压缩后不会超过20k,网速正常的情况下,对于用户等待时间的增加不会超过一秒。
    2)需要一个附加工具,这个工具能够通过设置好的组件依赖关系生成整合后的JS、css、图片文件,并能自动设置整合后的css引用路径

   
   2.整合加载策略优势:
    1)引入方便,只需引入一个JS和css文件
    2)因为css只有一个,因而更容易通过脚本实现结构和颜色样式分离,从而轻松的制作多皮肤组件
分享到:
评论

相关推荐

    Vue组件化开发思考

    - 利用Vue的异步组件和动态导入,可以优化应用的加载性能,同时保持组件的模块化。 综上所述,Vue组件化开发的核心在于创建高度内聚、低耦合的组件,通过分治策略优化代码结构,而不是简单追求代码复用。同时,...

    游戏框架思考,以及规则约定1

    本文将深入探讨“游戏框架思考”以及“规则约定”,并着重分析如何通过插件化设计来优化游戏核心库和外部功能。 首先,游戏的核心库是整个游戏系统的基础,包含了游戏运行所必需的组件和服务。为了降低复杂性和提高...

    关于微信小程序设计与开发的若干思考.zip

    利用懒加载策略,只在需要时加载图片。 - 代码分割:按需加载模块,避免一次性加载大量代码,减小启动时的包体积。 - 利用微信提供的API优化:例如,使用wx.requestAnimationFrame代替setTimeout,提高性能。 5. ...

    js树控件们截图.rar

    1. **基础概念**:树控件(Tree View)是一种图形用户界面组件,由节点(Node)组成,节点之间存在层级关系,可以通过展开和折叠来显示或隐藏子节点。JavaScript作为一种客户端脚本语言,可以动态创建和操作DOM元素...

    自制的android指派小游戏

    这些逻辑通常用Java或Kotlin等Android开发语言实现,并与UI组件交互,更新界面状态。 此外,游戏的状态管理也是一大重点。游戏可能包含多个状态,如开始、进行中、胜利、失败等。开发者需要设计一个游戏状态机来...

    《捕鱼达人》源码.zip

    源码可能会包含关于资源加载、延迟加载(Lazy Loading)、资源池(Pooling)等内容,以优化性能和内存占用。 9. **音频管理**:游戏音效和背景音乐对游戏体验有很大影响。Unity的AudioMixer可以实现复杂的音频混合...

    2048_cocos_lua

    8. **UI组件**:游戏的得分、提示信息等通常通过Label、Button等UI组件呈现。Cocos2d-x的UI系统支持自定义布局和样式,方便构建各种界面元素。 总结来说,"2048_cocos_lua"项目结合了Cocos2d-x的跨平台游戏开发能力...

    食神摇摇反编译的 布局文件

    2. **组件使用**:布局文件会展示应用中使用了哪些UI组件,例如TextView、EditText、ImageView、RecyclerView等,以及它们的交互方式。 3. **事件处理**:XML文件中可能包含onClick属性或其他事件监听器,揭示了...

    前端(RN和小程序实训)笔记

    1. JSX语法:RN采用JSX(JavaScript XML)混合语法,使得HTML和JavaScript可以无缝集成,方便编写UI组件。 2. 组件化开发:RN基于组件的架构,每个组件都有独立的样式和逻辑,可复用性强。 3. Native模块:RN允许与...

    (二)网易新闻框架——撑不起肚子,别撑梦想了_by_CJJ

    【标题】"网易新闻框架——撑不起肚子,别撑梦想了_by_CJJ"指的是一个关于网易新闻客户端架构设计的文章,作者CJJ分享了他在开发过程中的一些思考和经验。这篇文章可能是针对Android平台,因为标签中提到了"android...

    仿UCWEB界面源码

    8. **性能优化**:考虑到移动设备的资源限制,源码可能包含内存管理、图片优化、异步加载等性能优化策略。 9. **版本控制**:作为一个开源项目,源码可能采用了Git进行版本控制,这对于学习代码版本管理和协作也...

    【ASP.NET编程知识】.Net页面局部更新引发的思考.docx

    【ASP.NET编程知识】.Net页面局部更新引发的思考 在ASP.NET开发中,局部更新是一种常见的技术,它能够提高用户体验,避免整个页面在交互时的全页面刷新。本文主要探讨了两种实现局部更新的方法:UpdatePanel和Ajax...

    Android应用源码之左右翻页翻书-IT计算机-毕业设计.zip

    因此,可以采用懒加载策略,只加载当前及相邻的页面,同时利用`Bitmap`的复用和缓存机制减少内存占用。 8. **UI设计** 考虑到用户体验,UI设计应简洁明了,与真实的书籍相似,如添加阴影、折痕等细节,使翻页效果...

    HTML5页面无缝闪开的问题及解决方案

    为了解决这个问题,提出了一个新的思考方向——以空间换时间,即避免重复加载和解析HTML。 容器化方案是针对这个问题提出的解决方案。它的核心思想是保持Webview常驻,而不是在页面关闭后销毁。这样,当切换页面时...

    Unity3D的五子棋源码

    5. **用户交互**:Unity3D提供了丰富的UI组件和事件系统,用于处理用户的输入。例如,当用户点击棋盘时,会触发一个事件,然后由对应的事件处理器函数处理落子逻辑。 6. **网络同步**:如果五子棋是多人在线对战,...

    cocos2d-x魔塔游戏源码

    【魔塔】是一种策略类的固定数值角色扮演游戏,通常包含复杂的计算和精心设计的关卡,玩家需要通过策略思考来解决各种难题。在这款游戏中,玩家通常扮演勇者,通过与怪物战斗、购买装备、升级属性等方式,逐步探索并...

    Android简单的五子棋代码

    为了防止人机对战时的UI卡顿,AI的思考过程应在一个单独的线程中进行。可以使用`AsyncTask`或者`Handler`来实现异步操作,确保UI线程不被阻塞。当AI计算完成,通过回调或者消息机制更新棋盘状态。 6. **游戏状态...

    ExtJS 轻松搞定

    提出了一个互动问题,鼓励读者思考和列举ExtJS中可用的表单组件。 #### 二、表单组件关系图 提供了一个图表,清晰地展示了不同表单组件之间的关系和层级结构。 #### 三、组件配置选项介绍 详细解释了每个表单组件...

    Android工程师面试资料

    - UI组件:如TextView、EditText、Button、ListView、RecyclerView等的使用。 2. **编程能力**: - Java基础:包括面向对象编程、异常处理、集合框架、多线程、IO流等。 - Kotlin语言特性:如空安全、数据类、...

Global site tag (gtag.js) - Google Analytics