jQuery 添加 css 游标类型以形成提交/链接。网站性能/速度的影响？知道 "side effects"吗？

Question

我在一家大型网站工作(每月 5 多万次独立点击，大约 55-60 百万次页面浏览/印象)。

我们目前正在更新我们的可用性(tabindex、标签等)。

我正在使用一个 css 类和 jQuery(见下面的代码)在表单提交(以及与 ajax 相关的部分页面刷新/更新等)上将光标类型更改为“进度”，以便用户立即知道“某事”正在发生，通过类名“loadWait。

 //css class
   body.wait *, body.wait {
    cursor:progress !important;
   }

   //jQuery
   $(document).ready(function() { 
      $('.loadWait').click(function(){
         progerssCursor();
      });
   });
   function progerssCursor(){
    $('body').addClass('wait');
   }
   function removeProgerssCursor(){
    $('body').removeClass('wait');
   }

   //example html   
   <input type="sumbit" class="loadWait" />
   <a href="..." class="loadWait" />

   //in ajax requests by calling functions "progressCursor()" and 
"removeProgressCursor" at the appropriate time/place

所以问题是:

1. 这种方法是否有任何已知的“副作用”？ (广泛搜索但找不到任何让我相信不是的东西)。

2. 我们正在讨论是否也应该将 class="loadWait"附加到我们所有的链接(显然不是带有 target="_blank"的链接，因为我们不希望光标在这种情况下发生变化)。你怎么看？我们的理由是，有时，无论出于何种原因(服务器负载高、互联网连接速度慢等)，用户“链接点击”和实际页面开始呈现之间可能会有几秒钟的奇怪滞后，这样用户会立即知道“某事”正在发生(我们知道选项卡中的加载图标在那里，但用户经常会错过)。你怎么看？对我们所有的链接都这样做是不是太过分了？ (这里不谈工时)。

3. 有谁知道这会增加什么样的额外页面加载时间(如果有的话)？ ($('.loadWait').click(function(){... 是如何工作的？jQuery 是在页面加载时检查整个 DOM 的“点击”事件，还是在“逐个点击”的基础上检查匹配类名？)。

4. 对此还有其他想法吗？

注意:我们已经在 IE6-9、FF3.6、FF11、FF12、Opera、Safari (windows)、Chrome 等平台上测试了此代码，没有已知/明显的错误/问题。

Answer 1

我会在 #: 之前回答您的问题

1. 您正在做的事情没有直接的副作用。但是，有些情况您是无能为力的，例如禁用了 JavaScript 的用户。话虽这么说，我知道 Chrome(至少是较新的版本)会在页面加载时自动将光标更改为加载图标，因此 Chrome 浏览器不需要这段额外的 JavaScript。但是，对于运行 JavaScript 的高流量站点，您不必担心(请参阅 #2)，除非该 JS 是面向 ajax 的。
2. 如果您尝试在链接点击时添加自定义加载指示器，那么向每个链接添加点击处理程序将是合适的方法。 JavaScript 的好处在于它是纯粹的客户端。因此，尽管加载页面需要多长时间，但第二次用户单击“loadWait”链接时，它将首先触发 JavaScript，然后等待页面加载。因此，根据您所描述的服务器负载，这对实际点击链接的操作没有影响，因为您的作品都是客户端。
3. 只要您的 JavaScript 位于正文的底部(应该如此)，页面加载时间就不会受到影响，因为在执行任何 JavaScript 之前，所有 HTML 元素都已经加载完毕。但是，如果您真的担心单击事件不是一个非常费力的 jQuery 函数，它就像任何 jQuery 函数一样，如果过度使用会导致最小的延迟。不过我怀疑这会是个问题，所以我想说，不要担心，只要确保您的 JS 位于页面底部即可。
4. 简要回到 #1:确保查看所有浏览器的固有功能，以便确定哪些浏览器(如 Chrome)已经提供此功能。

祝您好运，希望对您有所帮助!

编辑:还有一件事我忘了提。如果您在页面上有任何动态加载的 JavaScript，.click 事件将不会注册到该动态 JavaScript 中的任何链接。这是假设您的代码片段在 $(document).ready 中触发。如果您要将它移动到 $(window).load 会更合适。然而，更好的解决方案是利用 jQuery 的 .on 函数(以前是 .live)。 on 函数将允许动态 JavaScript 也被绑定(bind)，但要注意:如果定期有很多动态 JavaScript，这可能会影响该 JavaScript 的性能。