草庐IT

javascript - 最佳服务器 API 和客户端 Javascript 交互方法？

coder 2024-04-13 原文

目前，我正在使用 setTimeout() 暂停一个巨大列表上的 for 循环，以便我可以向页面添加一些样式。例如，

例如:http://imdbnator.com/process?id=wtf&redirect=false

我使用 setTimeOut 的目的:

我使用 setTimeout() 添加图像、文本和 css 进度条 ( Why doesn't Progress Bar dynamically change unlike Text? 2 )。

很明显，如您所见，用户浏览页面并将鼠标悬停在几张图片上是非常痛苦的。它变得非常迟钝。有任何解决方法吗？

我的 FOR 循环:

每个 for 循环在后台向 PHP API 发出 ajax 请求。这肯定会降低我的效率，但所有其他网站如何以如此优雅的方式实现它？我的意思是，我看到网站在发出 API 请求时显示了一个漂亮的加载图像，没有用户干扰。当我尝试做类似的事情时，我每次都设置超时。

他们是否使用了更好的服务器-客户端交互语言，例如我听说过的 node.js？

此外，我想到了一些替代方案，但遇到了其他问题。如果您能就这些可能的替代方案中的每一个提供帮助，我将不胜感激。

方法一:

不是通过 jQuery 对我的 PHP API 进行 AJAX 调用，而是完全可以执行一个完整的服务器端脚本。但是，我遇到的问题是我无法制作一个好的客户端页面(如在我的当前页面中)，它会在处理列表中的每个元素后更新进度条并添加动态图像。或者这可能吗？

方法 2:(已编辑)

就像下面的一个有用答案一样，我认为最大的问题是服务器 API 和客户端交互。他建议的 Websockets 对我来说很有希望。它们一定是比 setTimeout 更好的修复方法吗？假设我将当前的 1000 个 AJAX 请求替换为 websocket，是否存在明显的时间差异？

此外，如果除了 websocket 之外还有比 AJAX 调用更好的东西，我将不胜感激。

专业网站如何处理流畅的服务器和客户端交互？

编辑 1:请解释专业网站(例如 http://www.cleartrip.com，当您请求航类详细信息时)如何在处理服务器端时提供顺畅的客户端。

编辑 2:正如@Syd 建议的那样。这就是我正在寻找的东西。我认为我当前的客户端和服务器交互有很多延迟。 Websockets 似乎可以解决这个问题。除了标准 AJAX 之外，改进服务器客户端交互的其他/最佳方法是什么？

最佳答案

你的第一个链接对我不起作用，但如果我理解你的整体问题，我会尝试解释一些可能对你有帮助的事情。

首先，同步调用需要在主 ui 线程中处理的大量数据是不好的，因为用户体验可能会受到很大影响。作为引用，您可能想看看“Is it feasible to do an AJAX request from a Web Worker?”

如果我理解正确，您想根据事件按需加载一些数据。 在这里您可能想坐下来思考什么是最适合您需要的事件，每隔一段时间发出一个 ajax 请求是完全不同的，尤其是当您有很多流量时。此外，您可能想在初始化下一个请求之前检查您之前的请求是否已完成(尽管在某些情况下可能不需要)。看看async.js如果您想创建链式异步代码执行，而无需面对 javascript 的“厄运金字塔”效应和困惑的代码。

此外，您可能希望在发出实际请求之前“验证 - 停止”事件。例如，假设用户触发了“mouseenter”，您不应该只触发 ajax 调用。屏住呼吸使用 setTimeout 并检查用户是否在接下来的 250 毫秒内没有触发任何其他“mouseenter”事件，这将使您的服务器可以呼吸。或者在基于滚动加载内容的实现中。如果用户像疯子一样滚动，你不应该触发事件。所以验证事件。

还有循环和迭代，我们都知道，如果该死的循环太长并且负担过重，您可能会遇到不想要的结果。因此，为了克服这个问题，您可能需要研究定时循环(查看下面的代码片段)。基本上是在 x 时间后中断并在一段时间后继续的循环。以下是一些帮助我完成 three.js 元素的引用资料。 “optimizing-three-dot-js-performance-simulating-tens-of-thousands-of-independent-moving-objects”和“Timed array processing in JavaScript”

//Copyright 2009 Nicholas C. Zakas. All rights reserved.
//MIT Licensed
function timedChunk(items, process, context, callback){
    var todo = items.concat();   //create a clone of the original

    setTimeout(function(){

        var start = +new Date();

        do {
             process.call(context, todo.shift());
        } while (todo.length > 0 && (+new Date() - start < 50));

        if (todo.length > 0){
            setTimeout(arguments.callee, 25);
        } else {
            callback(items);
        }
    }, 25);
}

cleartip.com 可能会使用其中的一些技术，据我所知，它所做的是在您访问该页面时获取一大块数据，然后在滚动时获取其他大块数据。这里的技巧是在用户到达页面底部之前稍微早一点触发请求，以提供流畅的体验。关于左侧过滤器，它们仅过滤掉浏览器中已有的数据，不再发出请求。因此，您获取并保留缓存之类的东西(在其他情况下，尽管实时数据提要等可能不需要缓存)。

最后，如果您有兴趣进一步阅读和减少数据交易的开销，您可能需要查看“WebSockets”。

关于javascript - 最佳服务器 API 和客户端 Javascript 交互方法？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30890901/

javascriptampstrongnoreferrerphpjquerycssajax

有关javascript - 最佳服务器 API 和客户端 Javascript 交互方法？的更多相关文章

  1. ruby - 如何使用 Nokogiri 的 xpath 和 at_xpath 方法 - 2

    我正在学习如何使用Nokogiri，根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div

  2. ruby - 如何从 ruby​​ 中的字符串运行任意对象方法？ - 2

    总的来说，我对ruby​​还比较陌生，我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础，我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用

  3. ruby - 为什么我可以在 Ruby 中使用 Object#send 访问私有(private)/ protected 方法？ - 2

    类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc

  4. ruby-on-rails - 使用 Ruby on Rails 进行自动化测试 - 最佳实践 - 2

    很好奇，就使用ruby​​onrails自动化单元测试而言，你们正在做什么？您是否创建了一个脚本来在cron中运行rake作业并将结果邮寄给您？git中的预提交Hook？只是手动调用？我完全理解测试，但想知道在错误发生之前捕获错误的最佳实践是什么。让我们理所当然地认为测试本身是完美无缺的，并且可以正常工作。下一步是什么以确保他们在正确的时间将可能有害的结果传达给您？ 最佳答案 不确定您到底想听什么，但是有几个级别的自动代码库控制:在处理某项功能时，您可以使用类似autotest的内容获得关于哪些有效，哪些无效的即时反馈。要确保您的提

  5. ruby - Facter::Util::Uptime:Module 的未定义方法 get_uptime (NoMethodError) - 2

    我正在尝试设置一个puppet节点，但ruby​​gems似乎不正常。如果我通过它自己的二进制文件(/usr/lib/ruby/gems/1.8/gems/facter-1.5.8/bin/facter)在cli上运行facter，它工作正常，但如果我通过由ruby​​gems(/usr/bin/facter)安装的二进制文件，它抛出:/usr/lib/ruby/1.8/facter/uptime.rb:11:undefinedmethod`get_uptime'forFacter::Util::Uptime:Module(NoMethodError)from/usr/lib/ruby

  6. ruby - 具有身份验证的私有(private) Ruby Gem 服务器 - 2

    我想安装一个带有一些身份验证的私有(private)Rubygem服务器。我希望能够使用公共(public)Ubuntu服务器托管内部gem。我读到了http://docs.rubygems.org/read/chapter/18.但是那个没有身份验证-如我所见。然后我读到了https://github.com/cwninja/geminabox.但是当我使用基本身份验证(他们在他们的Wiki中有)时，它会提示从我的服务器获取源。所以。如何制作带有身份验证的私有(private)Rubygem服务器？这是不可能的吗？谢谢。编辑:Geminabox问题。我尝试“捆绑”以安装新的gem..

  7. Ruby 方法() 方法 - 2

    我想了解Ruby方法methods()是如何工作的。我尝试使用“ruby方法”在Google上搜索，但这不是我需要的。我也看过ruby​​-doc.org，但我没有找到这种方法。你能详细解释一下它是如何工作的或者给我一个链接吗？更新我用methods()方法做了实验，得到了这样的结果:'labrat'代码classFirstdeffirst_instance_mymethodenddefself.first_class_mymethodendendclassSecond使用类#returnsavailablemethodslistforclassandancestorsputsSeco

  8. ruby - 解析 RDFa、微数据等的最佳方式是什么，使用统一的模式/词汇(例如 schema.org)存储和显示信息 - 2

    我主要使用Ruby来执行此操作，但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式，例如使用这个yaml文件，它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i

  9. ruby-on-rails - Rails 3.2.1 中 ActionMailer 中的未定义方法 'default_content_type=' - 2

    我在我的项目中添加了一个系统来重置用户密码并通过电子邮件将密码发送给他，以防他忘记密码。昨天它运行良好(当我实现它时)。当我今天尝试启动服务器时，出现以下错误。=>BootingWEBrick=>Rails3.2.1applicationstartingindevelopmentonhttp://0.0.0.0:3000=>Callwith-dtodetach=>Ctrl-CtoshutdownserverExiting/Users/vinayshenoy/.rvm/gems/ruby-1.9.3-p0/gems/actionmailer-3.2.1/lib/action_mailer

  10. ruby - Highline 询问方法不会使用同一行 - 2

    设置:狂欢ruby1.9.2高线(1.6.13)描述:我已经相当习惯在其他一些项目中使用highline，但已经有几个月没有使用它了。现在，在Ruby1.9.2上全新安装时，它似乎不允许在同一行回答提示。所以以前我会看到类似的东西:require"highline/import"ask"Whatisyourfavoritecolor?"并得到:Whatisyourfavoritecolor?|现在我看到类似的东西:Whatisyourfavoritecolor?|竖线(|)符号是我的终端光标。知道为什么会发生这种变化吗？ 最佳答案

随机推荐