我正在使用jQuery前端用RoR编写的BIG项目。我添加了具有智能依赖注入的AngularJS,但我想知道的是在页面变得非常慢之前我可以在页面上放多少javascript?每个浏览器的具体限制是什么?
假设我的代码被很好地分解并且所有操作都在恒定时间内运行,那么在浏览器达到限制之前我可以在javascript中分配多少函数,对象和其他东西(必须有一个,因为任何计算机都有一定数量的RAM和磁盘空间(尽管磁盘空间是用javascript命中的一个雄心勃勃的限制)
我已经在网上查了一下,但我只看到有人询问他们可以加载多少资产的问题,即我可以加载多少兆字节等等。我想知道是否有实际的计算限制设置浏览器以及它们之间的差异
- 编辑 -
对于高度批评,我想更好的问题是
现代Web浏览器如何确定分配给页面的资源限制?允许使用的网页内存量是多少?页面可以使用多少磁盘空间?
显然我使用AJAX,我知道有关渲染优化的相当数量。这不是一个问题,我怎样才能让我的网页更快,而是我的资源限制是什么?
答案 0 :(得分:2)
虽然从技术上来说,达到客户机器的极限听起来是一项艰巨的任务,但实际上很容易通过意外循环达到这些限制。每个人至少做过一次!
它很容易测试,编写一个使用大量内存的JS循环,你会发现你的PC的内存使用量会挂掉并且确实会占用你的虚拟内存,之前浏览器将会崩溃。
我说,根据经验,即使你没有达到你所谈论的技术限制,你的访客/用户的耐心极限也会在资源耗尽之前耗尽
如果加载时间成为一个问题,或许值得关注AJAX解决方案,以便一次加载页面的相关部分。
答案 1 :(得分:1)
通常,您希望缩小和打包您的javascript以尽可能减少初始页面请求。完成后,您的Web应用程序应该主要由一个javascript文件组成,但由于某些插件可能与您的依赖关系管理框架不兼容,因此并不总是可行。
我认为单个页面应用程序在初始页面加载(关闭缓存)时开始超过3mb或60个请求开始变得太大且不守规矩。您将要开始寻找将复制粘贴代码提取为可扩展,可重用对象的方法,并可能将一个大型应用程序划分为一组较小的应用程序,这些应用程序都使用相同的模型,集合和视图库他们所有人。如果使用RequireJS(我使用的是),如果该构建中包含的任何依赖项发生了变化,那么在启动任何代码之前,最终将需要编译不同的构建。
现在,关于应用程序的“速度”,请查看所选框架的渲染优化教程。像添加到集合中一样逐个附加模型视图的技巧会导致更快的渲染页面,然后尝试同时附加大量的html。小心内存泄漏。确保在单页应用程序的页面之间切换时关闭对视图的引用。在视图中创建一个'onClose'方法,确保在视图本身关闭时销毁所有子视图和附加数据引用,并且垃圾收集将完成剩下的工作。使用全局变量存储集合和模型。像window.app.data = {}
这样的东西。使用全局视图控制器在应用程序的主要部分之间导航,这将有助于您有效地关闭视图链。尽可能使用延迟加载。使用“基础”模型,集合和视图并扩展它们。这样做可以在以后为您提供更多选项来控制这些事物的全局行为。
这是您从经验中学习的所有内容,但如果采取足够的谨慎措施,您可以在第一次尝试时创建运行良好的单页应用程序。您可能会更频繁地发现应用程序设计的问题,因此请准备好在出现这些问题时重构代码。
答案 2 :(得分:0)
它在很大程度上取决于计算机而不是浏览器 - CPU速度慢且RAM数量有限的计算机将比强大的桌面更快地降低速度。
一个很好的代理可能是在几个不同的智能手机上测试网站。
此外,较慢的设备有时运行过时和/或功能较少的浏览器,因此您可以在客户端上执行一些基本的用户代理嗅探或功能检测,然后回退到服务器渲染的平面HTML。