在大流量网站中使用 JQuery UI 主题好不好?

Posted

技术标签:

【中文标题】在大流量网站中使用 JQuery UI 主题好不好?【英文标题】:Is it good to use JQuery UI themes in a big high traffic website? 【发布时间】:2011-03-03 22:06:00 【问题描述】:

在实现高流量网站的同时使用 JQuery UI 主题是否是一种好方法。根据我的网站需求进行一些编辑和自定义是否容易?它有什么著名的问题吗?想听听你对它的想法,使用它是否安全,或者从头开始编写我所有的 CSS 更好。

请注意,我检查了那里的主题,发现那里很好,其中一些经过一些编辑后将适合我们的设计。

【问题讨论】:

【参考方案1】:

我不完全确定您在担心什么,但我认为这将阐明 JQuery UI 为您做什么和不做什么。

“准备好迎接黄金时段了吗?”

是的。 JQuery UI 主题已经存在了很长时间,并且没有尖叫到表面到破坏项目的问题。有一些已知问题,主要是高级 CSS3 问题。例如:除 IE6 之外的所有浏览器都具有来自 CSS3 的圆角支持。 JQuery UI 主题使用此功能。如果您想在 IE 中使用圆角,您将必须获得一个针对 IE 的额外插件,特别是。这很容易。

JQuery 主题的不显眼很容易确保,因为主题与您的大多数特定于站点的设计问题是分开的。由 UI 主题实现的类的意思是,“这就是 active 事物的样子。”您对这些一般概念所做的调整往往很小(“比以前浅 3 种粉红色”)并且通常不会改变尺寸(“为 active 事物添加一点额外的填充”) .另外,要做到这一切,您可以使用Themeroller。

使用 JQuery 主题

Filament Group 的好心人a nice write-up 了解如何使用 JQuery UI 主题设置样式。我不认为我可以为他们的演练添加太多内容,除了指出他们正在使用 both 一个花园式的 JQuery 主题 他们自己的布局 CSS。这完全是关于主题与布局的分离。

主题与网站设计

请务必记住,主题不是布局。它们之间存在巨大差异。 JQuery 主题很好地保持在该栅栏的一侧,并且凭借这一优点,它是无毒、易于更换的网站添加物。考虑:

布局非常困难,其中包括重要且特定于站点的风格决策。设计问题的示例包括:

那个按钮去哪儿了? 菜单按钮应该有多大? 这个表格应该居中吗? 我希望菜单按钮中的字体大小是多少?

基本上,您总是编写自己的设计。如果您已经下架了一个,那么您要么打算对其进行大量修改,要么正在构建一个非常千篇一律的网站。

主题,例如 JQuery 主题,为您的布局提供整体外观。它们可以独立换出、稍后添加或其他。在某种程度上,主题是 1) 好的界面或 2) 具有吸引力和一致性的好的界面之间的区别。主题问题包括:

可点击按钮通常看起来如何? 禁用按钮呢? 一般来说,一切都是什么颜色? 一般来说,盒子的角应该是多圆? 一般字体大小和颜色是多少?

因此,一旦您查看了一个网站上的主题,您可能会采用相同的主题并将其应用到您自己非常独特的网站设计中,只有很小的差异。它们应该是完全良性的。

【讨论】:

【参考方案2】:

你知道Googles CDN(内容分发网络)吗?

查看post 了解为什么使用 Google 为您托管 jQuery 是个好主意。基本上你会减少延迟,增加并行度和更好的缓存

查看post 了解如何使用 CDN 链接到 jquery ui 主题

我已经使用了这种技术并且没有发现任何问题。至于我从未遇到过的问题。我想知道自己是否有任何infamous 问题。

编辑 如果问题是“编辑 CSS 有多容易”,那么答案就有点复杂了你所看到的然后通过 CDN 使用所有这些,但是你暗示你想要稍微调整一下......

真正的答案不仅在于您希望从主题中获得什么,还在于您在 CSS 方面的表现如何?我的设计团队对 UI 主题 css 没有任何问题。

【讨论】:

我知道,但我问的是图书馆本身,它好吗?容易编辑吗? ... @Amr - 库(即 javascript)或它使用的 CSS/样式? @Amr - 那么是的,请参阅下面的答案以获取有关如何编辑的工具:) 有一个由 jQuery UI 团队提供的编辑主题的工具,这是一个非常重要的事情,可以忽略 IMO 的答案。 @nick,也许不是,这取决于谁在进行自定义,这个工具可能适合开发人员进行一些调整,而我的 css 大师喜欢亲眼目睹 CSS。但我同意主题滚轮应该在我的答案中。【参考方案3】:

jQuery UI 肯定比 jQuery 核心重,主题重吗?真的不比任何其他 CSS 更重要。是的,您可以自定义它们,use the ThemeRoller tool for this。

如果您打算使用大部分样式或jQuery UI library,那么您最好使用他们的 CSS,如果您打算使用其中的一小部分,请自行使用,因为其余的只是浪费的负载传递给每个访问者。

附带说明:如果您对其中一个默认主题感到满意,they're available on the Google CDN,但听起来您想要稍微调整一下,所以不确定它是否适用于此...如果流量是一个考虑因素,有一个选项。

【讨论】:

【参考方案4】:

我会四处走动并说:不。不要使用它。

首先,它有点肥。因此,如果您不需要 jQuery UI 提供的所有功能,最好使用较小的库,例如 jQuery Tools。甚至 John Resig(或类似 Resig 的人)也在 this post 中提出了这一点。他的评论:

只是为了限定提到的一点 上面和网站上:“ [jQuery Tools] 文件只有 2.5 Kb 时 缩小。将此与 jQuery 进行比较 您必须拥有的 UI 库 130 Kb 的压缩代码来获取标签 和手风琴工作。

其次,如果您的网站真的很大,您将需要更大的灵活性。以任何方式定制 jQuery UI——除了使用模板化的 ThemeRoller——都会变得丑陋。如果您希望您的设计特定于您的网站,并且如果您希望对网站中的设计元素保持精细控制,那么最好不要使用 UI 模板。

第三,我个人认为不应该使用 javascript 库来设计页面元素。或者,至少,它应该用于设计尽可能少的元素。使用 javascript 进行样式设置可能会导致一些奇怪的行为,例如页面加载和页面样式之间的延迟(如 here 所述)。此外,关闭脚本的用户(范围在one and three percent 的网络用户之间)肯定不会享受访问您网站的体验。

【讨论】:

【参考方案5】:

有两个因素可以回答这个问题。

1) 大有多大?或者换句话说,一次有多少用户会主动浏览,是否有很多交互,或者只是一个坐等类型的页面?

2) 是否旨在减少每秒请求数?基本上,如果每次点击都需要一个 ajax 调用来访问您的服务器,那么服务器可能会崩溃。但是如果你预加载很多,带宽将是问题,而不是服务器上的资源。

因此,基本上,如果网站真的非常庞大,您可能需要研究 Google CDN 和其他东西,以避免最终不得不处理它。如果它不会那么大,那么您必须确定下一个瓶颈在哪里。如果是带宽瓶颈,大量传输 jQuery 会受到伤害,否则是 ajax 调用会受到伤害。

您的目标是尽量减少服务器的工作量,并将其推送到客户端。所以设计它,使带宽不是瓶颈,你的服务器只在必要时处理客户端。

【讨论】:

嗯,这个答案与我的问题有关吗?我在询问 jquery 主题是否托管在我身上,我在询问它的质量,是否易于编辑,并且还想听听其他人的经验。 基本上无法说 jQuery 是否能满足您的需求。它应该是一个非常广泛使用的实用程序,除非您有特别的特殊需要,否则它会执行。我关注的是您问题的“大流量”部分,并讨论了您可能需要多少优化。【参考方案6】:

少量的 JQuery 绝对没问题。但是太多的流量会导致页面加载出现问题,因为它可能会有点慢。最好从头开始编写 CSS,因为它可以很好地为您的网站定制,您无需将您的网站融入其他内容。

【讨论】:

完全不同意。 “永远从头开始”无异于重新发明***。从可行的东西开始,随时更换。【参考方案7】:

我会发布这是一条评论,但还不能...

我已经在各种环境中广泛使用了 jQuery,并且考虑到所有因素,它是我使用过的网站中性能更好的方面之一。我认为我的经验是使用中高流量网站.像 fckEditor 或 TinyMCE 这样的 html 编辑控件的加载时间一直比我使用的大部分 jQueryUI 组件要长。

我完全同意 cmets 关于使用 CDN 的看法,但其中一些海报对 ThemeRoller 选项的看法是正确的。这将消除您使用开箱即用的 jQueryUI CDN 的能力,ThemeRoller 创建一个独特的包供您下载,包括 CSS。如果你走这条路,为你的 javascript 内容选择一个好的最小化/压缩技术,这也会有所帮助..

【讨论】:

以上是关于在大流量网站中使用 JQuery UI 主题好不好?的主要内容,如果未能解决你的问题,请参考以下文章

是否可以在 jquery 函数中为 JQuery UI 工具提示设置不同的 UI 主题

将 JQuery UI Datepicker 与来自 Jquery UI 主题的图标一起使用

如何应用多个 jQuery UI 主题

Jquery UI 菜单栏在 Cupertino 主题中显示白色文本

使用jQuery UI插件实现切换主题功能——经验小结

使用jQuery UI插件实现切换主题功能——经验小结