为什么这段 Javascript 代码这么慢?

2023-12-19

我有这段 Javascript 代码,在 Internet Explorer 中每次调用大约需要 600 毫秒。在其他浏览器中花费的时间可以忽略不计。

var _nvs_currentTab;
var _nvs_zoomfield;
var _nvs_centerfield;
var _nvs_globsearch;
var _nvs_category;
var _nvs_favsonly;
var _nvs_wishonly;
var _nvs_friendfavsonly;
var _nvs_newitemsonly;
var _nvs_globsearchOld;
var _nvs_catOld;
var _nvs_favsonlyOld;
var _nvs_wishonlyOld;
var _nvs_friendFavsonlyOld;
var _nvs_newItemsOnlyOld;

function saveState()
{
    if (!_nvs_currentTab)
    {
        var f = document.getElementById;
        _nvs_currentTab = f('currentTab');
        _nvs_zoomfield = f('zoomfield');
        _nvs_centerfield = f('centerfield');
        _nvs_globsearch = f("globsearch");
        _nvs_category = f("category");
        _nvs_favsonly = f("favsonly");
        _nvs_wishonly = f("wishonly");
        _nvs_friendfavsonly = f("friendfavsonly");
        _nvs_newitemsonly = f("newitemsonly");
        _nvs_globsearchOld = f("globsearchOld");
        _nvs_catOld = f("categoryOld");
        _nvs_favsonlyOld = f("favsonlyOld");
        _nvs_wishonlyOld = f("wishonlyOld");
        _nvs_friendFavsonlyOld = f("friendFavsonlyOld");
        _nvs_newItemsOnlyOld = f("newItemsOnlyOld");
    }

    // get all state vars
    var navState= new Object();
    navState.page = currentPage;
    navState.currentTab = _nvs_currentTab.value;
    navState.zoomfield = _nvs_zoomfield.value;
    navState.centerfield = _nvs_centerfield.value;
    navState.globsearch = _nvs_globsearch.value;
    navState.category = _nvs_category.value;
    navState.favsonly = _nvs_favsonly.checked;
    navState.wishonly = _nvs_wishonly.checked;
    navState.friendfavsonly = _nvs_friendfavsonly.checked;
    navState.newitemsonly = _nvs_newitemsonly.checked;
    navState.globsearchOld = _nvs_globsearchOld.value;
    navState.catOld = _nvs_catOld.value;
    navState.favsonlyOld = _nvs_favsonlyOld.value;
    navState.wishonlyOld = _nvs_wishonlyOld.value;
    navState.friendFavsonlyOld = _nvs_friendFavsonlyOld.value;
    navState.newItemsOnlyOld = _nvs_newItemsOnlyOld.value;
    // build new url with state
    var url = new StringBuffer();
    url.append("#");
    for (var i in navState)
    {
        if (i != "page")
            url.append("&");
        url.append(i).append("=").append(navState[i]);
    }
    // set it
    window.location.href = url.toString();
}

这是 IE8 分析器中的调用树的样子:

saveState               1    615,00 ms
  f                    15      1,00 ms
  String.split          1      0,00 ms
    Array               1      0,00 ms
  Object                1      0,00 ms
  StringBuffer          1      0,00 ms
  append               64      0,00 ms
    Array.push         64      0,00 ms
  toString              1      0,00 ms
    Array.join          1      0,00 ms
  Object.valueOf       63      0,00 ms
  Function.toString    63      0,00 ms

我正在使用的 StringBuffer 实现:

function StringBuffer() { 
    this.buffer = []; 
} 

StringBuffer.prototype.append = function append(string) { 
    this.buffer.push(string); 
    return this; 
}; 

StringBuffer.prototype.toString = function toString() { 
    return this.buffer.join(""); 
}; 

Edit:更新了代码,平均运行时间为 397 毫秒。

var _nvs_currentTab;
var _nvs_zoomfield;
var _nvs_centerfield;
var _nvs_globsearch;
var _nvs_category;
var _nvs_favsonly;
var _nvs_wishonly;
var _nvs_friendfavsonly;
var _nvs_newitemsonly;
var _nvs_globsearchOld;
var _nvs_catOld;
var _nvs_favsonlyOld;
var _nvs_wishonlyOld;
var _nvs_friendFavsonlyOld;
var _nvs_newItemsOnlyOld;

function saveState()
{
    if (!_nvs_currentTab)
    {
        var _f = document.guideForm;
        _nvs_currentTab = _f.currentTab;
        _nvs_zoomfield = _f.zoomfield;
        _nvs_centerfield = _f.centerfield;
        _nvs_globsearch = _f.globsearch;
        _nvs_category = _f.category;
        _nvs_favsonly = _f.favsonly;
        _nvs_wishonly = _f.wishonly;
        _nvs_friendfavsonly = _f.friendfavsonly;
        _nvs_newitemsonly = _f.newitemsonly;
        _nvs_globsearchOld = _f.globsearchOld;
        _nvs_catOld = _f.categoryOld;
        _nvs_favsonlyOld = _f.favsonlyOld;
        _nvs_wishonlyOld = _f.wishonlyOld;
        _nvs_friendFavsonlyOld = _f.friendFavsonlyOld;
        _nvs_newItemsOnlyOld = _f.newItemsOnlyOld;
    }

    // build new url with state
    var url = new StringBuffer();
    url.append("#");
    url.append('currentPage=').append(currentPage);
    url.append('&currentTab=').append(_nvs_currentTab.value);
    url.append('&zoomfield=').append(_nvs_zoomfield.value);
    url.append('&centerfield=').append(_nvs_centerfield.value);
    url.append('&globsearch=').append(_nvs_globsearch.value);
    url.append('&category=').append(_nvs_category.value);
    url.append('&favsonly=').append(_nvs_favsonly.checked);
    url.append('&wishonly=').append(_nvs_wishonly.checked);
    url.append('&friendfavsonly=').append(_nvs_friendfavsonly.checked);
    url.append('&newitemsonly=').append(_nvs_newitemsonly.checked);
    url.append('&globsearchOld=').append(_nvs_globsearchOld.value);
    url.append('&catOld=').append(_nvs_catOld.value);
    url.append('&favsonlyOld=').append(_nvs_favsonlyOld.value);
    url.append('&wishonlyOld=').append(_nvs_wishonlyOld.value);
    url.append('&friendFavsonlyOld=').append(_nvs_friendFavsonlyOld.value);
    url.append('&newItemsOnlyOld=').append(_nvs_newItemsOnlyOld.value);
    // set it
    window.location.href = url.toString();
}

好吧,你不会相信这一点。我刚刚尝试删除以下行:

window.location.href = url.toString();

它将平均运行时间减少到三分之二毫秒。从分析中我知道 toString 调用非常快,因此显然设置 window.location.href 非常慢(几百毫秒!!!)。呸,我讨厌 IE。

注意:这是 Internet Explorer 的全新安装,并且没有任何会拖慢浏览器速度的疯狂工具栏。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

为什么这段 Javascript 代码这么慢? 的相关文章

  • WebGL iOS 渲染为浮点纹理

    我正在尝试在 iOS Safari 上的 WebGL 中渲染浮点纹理 而不是在本机应用程序中 我已经设法让 iOS 读取手动 例如从 JavaScript 创建的浮点纹理 但是当我创建浮点类型的帧缓冲区并使用 GPU 渲染到其中时 它不起作
  • moment.calendar() 没有时间

    我想使用不带时间的 moment calendar 选项 所以而不是 上周二下午 5 点 我想要 上周二 有人知道 Moment 现在是否有解决方案吗 我找到了这个小提琴http jsfiddle net nawxZ http jsfidd
  • 如何使用 AngularJS、Devise 和 UI Router 全局实现身份验证?

    我对 Angular 很陌生 所以这可能是一个新手问题 我正在尝试实现一个简单的任务管理器 只是一个练习 以 Rails 作为后端 以 Angular 作为前端 到目前为止 我遵循了教程 一切正常 现在我想在全球范围内实施身份验证 这意味着
  • 通过 AJAX 发送 XML

    我在 jQuery 中创建了一个 xml 文档 如下所示 var xmlDocument
  • 如何将元素的每个单词包装在span标签中?

    div date contents filter function return this nodeType 1 wrap span span 我是新手 认为代码可以解决问题 但它将所有内容都包含在 span 像这样 div class d
  • 通过搜索查找下一个文本并突出显示不起作用

    当在搜索框中搜索任何文本时 它可以找到并突出显示正确的文本 但是当搜索下一个 新文本时 它无法找到下一个 新文本 再次搜索时它不起作用 我无法找到问题 这JS below JS button search click function va
  • 标点符号加载“动画”,javascript?

    我正在寻找一种好方法来显示一些标点符号加载 动画 我想要的是这样的 This will display at second 1 Waiting for your input This will display at second 2 Wai
  • Javascript:如何根据 html 标签扩展用户选择?

    乐代码 http jsfiddle net frf7w 12 http jsfiddle net frf7w 12 所以现在 当前的方法将完全按照 选择的方式获取所选文本 并添加标签 以便在显示时页面不会爆炸 但我想做的是 就是说 当用户选
  • Angular - Safari 无法正确显示 DOM

    我是 Angular 的新手 使用 Angular 4 我尝试通过在关联的组件类文件中设置属性来更新特定元素 但是 除非我尝试强制重新绘制网页 通过调整窗口大小等 否则页面不会更新 我打开检查器 看到 DOM 已更改 但显示与元素检查器中的
  • zk 与 gwt zk 请求太多

    您好 我正在尝试比较 zk 和 gwt 的性能 在我的比较中 如果框架本身将一些代码转换为js 那么我自己无法编写任何javascript 如get 但我无法自己编写js 在以上述方式编写代码时 几乎所有在浏览器上完成的操作都会将请求发送到
  • JavaScript 逻辑赋值是如何工作的?

    在 javascript 中 如果我们有一些代码 例如 var a one var b q a alert b 逻辑 OR 运算符会将 a 的值分配给 b 并且警报将为 一 这仅限于作业还是我们可以在任何地方使用它 似乎空字符串被视为与未定
  • 如何按单个整数字段对 JSON 进行排序? [复制]

    这个问题在这里已经有答案了 我有以下 JSON title title order 0 order 9 order 2 JSON 包含很多字段 我如何根据字段对它们进行排序order field 我一直在寻找 Nodejs 中内置的东西 但
  • 如何在WebBrowser控件中注入Javascript?

    我试过这个 string newScript textBox1 Text HtmlElement head browserCtrl Document GetElementsByTagName head 0 HtmlElement scrip
  • 如何使用javascript隐藏div

    我想使用 Javascript 隐藏一个 div 下面是我的div div class ui dialog titlebar ui widget header ui corner all ui helper clearfix span cl
  • 从 url 角度加载模板并在 div 内编译

    由于我是 Angular JS 的新手 我想知道如何加载外部模板并将其与一些数据一起编译到目标中div 例如我有这个模板
  • Material.Angular.io mat-autocomplete [displayWith] 函数更新范围变量

    我遇到了一个问题 我可以在实例化 mat autocomplete 的组件控制器中访问本地声明的变量 我面临的问题是局部变量被困在这个范围内 我无法更新它们 有关更新 mat autocomplete 范围变量的任何想法或想法 最终我要做的
  • 我将 X Y Z 坐标转换为屏幕 X Y 坐标有什么问题吗?

    我正在制作 3D 空间中弹跳的球体的 HTML5 Canvas 演示 这非常简单 每个球都有 X Y 和 Z 坐标 然后 这些坐标将转换为我在此处阅读的屏幕 X 和 Y 坐标 http answers google com answers
  • 如何用时刻找到与给定时间最接近的时间?

    所以我有一个简单的代码 一个工作代码 它使用 moment 获取最接近给定时间的时间 Current time in millis const now moment 10 16 HH mm format x List of times co
  • 将 javascript 变量作为参数传递给 @url.Action()

    是否可以将javascript变量作为参数传递给 url Action 因为据我所知可能存在服务器和客户端问题 我的要求是我必须根据过滤器下载文件 并进行ajax调用不适用于下载文件 所以我对 url Action 进行了编码 但无法实现这
  • 如何在 ionic2 中 pop() 之后重新加载 ion-page

    我有2页Page1 and Page2 我用过this nav pop 在Page2中 它将弹出Page2 Page1将启用 但我想刷新Page1 先感谢您 您可以将父页面与导航推送一起传递 这样您就可以将父页面作为 navParamter

随机推荐

  • Owin SelfHost WebApi - 客户端在响应期间关闭连接会引发异常?

    我正在运行一个基于 Owin Selfhost 的 WebApi 其中我通过以下方式放入了 API 未处理的异常记录器 config Services Add typeof IExceptionLogger apiExceptionLogg
  • rake db:test:prepare 不创建所有表

    注意 使用 Rails 3 0 7 Postgresql 8 4 4 1 rake 0 8 7 尝试让 Rails 测试正常工作 命令 rake db test prepare 似乎工作正常 rake db test prepare t i
  • 如何在html中嵌入图像并通过msdb.dbo.sp_send_dbmail将html作为电子邮件发送?

    我可以使用 msdb dbo sp send dbmail 以 html 格式发送电子邮件 仅就格式而言 它对于文本来说非常好 例如 EXEC msdb dbo sp send dbmail recipients p recipients
  • 使用不同的编码和库解析 CSV 文件

    尽管有很多关于该主题的线程 但我在解析 CSV 时遇到了麻烦 它是从 Adwords 关键字规划器下载的 csv 文件 以前 Adwords 可以选择将数据导出为 纯 CSV 可以使用 Ruby CSV 库进行解析 现在可以选择 Adwor
  • 是否存在不应在 .pch 文件中添加所有导入的原因?

    我主要指的是应用程序级导入 而不是构建库时的导入 在这种情况下 很明显为什么应该避免导入 pch 文件内的标头 要点是 pch文件的优点是它可以预编译一次并且无需处理 如果您将所有应用程序标头导入 pch 每次更改其中任何一个标头时都必须重
  • 如何创建具有多个子行(嵌套表)的 jQuery 数据表?

    问题 我需要创建一个具有嵌套表格式的表 当用户单击加号按钮时 它应该显示嵌套表 如果他们点击减号按钮 它应该隐藏 我已经完成了jquery datatable 它工作正常 但我无法显示子表的多行 我已经尝试了很多次 但无法显示正确的格式 这
  • 如何在每个循环周期更新一步进度条? C#

    使用 C Windows 窗体创建 net 应用程序 如何在 100 个循环的每个循环中更新进度条 1 步 我正在循环中处理 Excel 工作表 进度条控件位于 UI 类中 该类连接到控制器类 该控制器类连接到自定义类 MVC 模式 循环位
  • XSLT:如何通过另一个节点查找该节点的值

    我不确定我是否正确地提出了这个问题 这就是为什么我在任何地方都找不到答案 但基本上我需要将一个节点与另一个节点进行匹配 并使用同级节点作为值 这是一个例子
  • Angular 6 中使用 Typescript 进行 Datalayer.push

    当我点击按钮时 我应该发送到数据层信息 但我不知道该怎么做 因为我使用的是 Angular 6 所以我需要使用 Typescript 和 window dataLayer push 不起作用 给我这个错误 Form
  • 如何检测 iOS 8 中 UITextField 上的删除键?

    我对 UITextField 进行了子类化 并实现了 UIKeyInput 协议的 deleteBackward 方法来检测按下的退格键 这在 iOS 7 上工作正常 但在 iOS 8 上不行 当我按退格键时 UITextField 上不再
  • 删除溢出的内联元素行之间的边距

    我正在创建一个基于图块的游戏 并使用块渲染来更新大量图块 我试图以最简单的方式做到这一点 所以我一直在尝试使用 HTML 的默认布局 现在我正在创建 内联块 省略元素之间的空白以避免它们之间的水平空间 但是当块溢出并创建新行时 会有一些垂直
  • 如何在 Swift 中更改 UIBezierPath 的颜色?

    我有一个实例UIBezierPath我想将描边的颜色更改为黑色以外的颜色 有谁知道如何在 Swift 中做到这一点 有了 Swift 5 UIColor has a setStroke https developer apple com d
  • 过滤 Chrome 控制台消息

    有没有办法在 Chrome 控制台中过滤消息 例如 我不想看到来自 包含 JQMIGRATE 的消息 您可以通过在前面添加来否定过滤器 例如 JQMIGRATE将排除包含字符串 JQMIGRATE 的消息 正则表达式过滤器也可以通过这种方式
  • 自动装配依赖项注入失败

    我在 Java EE 应用程序中使用 Spring 和 Hibernate 该项目托管于这个 GitHub 存储库 http github com whirlwin niths 我通过服务使用 Autowired 时遇到问题 如下所示 pa
  • Django 信号 - kwargs['update_fields'] 在通过 django admin 进行模型更新时始终为 None

    我的 django 应用程序中有一个信号 我想检查模型中的某个字段是否已更新 以便我可以继续执行某些操作 我的模型看起来像这样 class Product models Model name models CharField max len
  • Auth::attempt() 在 Laravel 5.5 中不起作用

    我的注册表单正在运行 它将用户存储到数据库 但是当用户登录时 Auth attempt 返回 false 这是我的登录代码 我将密码以 sha1 加密形式存储在 db 中 Route post login function creds ar
  • 将 Pip 包传输到 conda

    我目前正在使用一台共享的 Ubuntu 机器 其中有蟒蛇2 7以及通过安装的多个软件包pip python version Python 2 7 12 pip version pip 18 0 from usr local lib pyth
  • 验证十进制数

    我正在阅读一些 csv 文件 其中包含表示十进制数的字符串 我的麻烦是 很多时候我接收使用不同区域设置的文件写入 例如 file1 csv的price列的值为129 13 是小数点分隔符 file1 csv的price列值为129 13 为
  • 如何计算密码学中的对数?

    我正在尝试对字节执行非线性函数来实现 SAFER 该算法需要计算字节的以 45 为底的对数 我不明白如何做到这一点 log45 201 1 39316393 当我将其分配给一个字节时 该值被截断为 1 并且我无法恢复确切的结果 我该怎么处理
  • 为什么这段 Javascript 代码这么慢?

    我有这段 Javascript 代码 在 Internet Explorer 中每次调用大约需要 600 毫秒 在其他浏览器中花费的时间可以忽略不计 var nvs currentTab var nvs zoomfield var nvs