通过 Dom 方法提高 innerHTML 性能

代码如下:

function replaceHtml(el, html) {
    var oldEl = typeof el === "string" ? document.getElementById(el) : el;
    /*@cc_on // 原始的 innerHTML 在 IE 中的性能好一点
        oldEl.innerHTML = html;
        return oldEl;
    @*/
    var newEl = oldEl.cloneNode(false);
    newEl.innerHTML = html;
    oldEl.parentNode.replaceChild(newEl, oldEl);
    /* 一旦我们从 DOM 上移除老的元素，则返回新的元素引用。*/
    return newEl;
};

对于 Opera 也依然有性能提高，只是提高幅度没有上面两种浏览器惊人而已，
唯在 IE 中，则原始的 innerHTML 的方法更效率点。

赞 (0)

相关推荐

  • 通过 Dom 方法提高 innerHTML 性能

    复制代码 代码如下: function replaceHtml(el, html) {     var oldEl = typeof el === "string" ? document.getElementById(el) : el;     /*@cc_on // 原始的 innerHTML 在 IE 中的性能好一点         oldEl.innerHTML = html;         return oldEl;     @*/     var newEl = oldEl

  • Web 前端设计模式--Dom重构 提高显示性能

    Web 前端设计模式--Dom重构 提高显示性能

    1. 设计场景 首页那边有一个产品浏览的版块在延迟载入的时候,将我所有的隐藏帧的项都显示出来(如图,我本意是显示两行图片,可是在载入卡住,将下面一些隐藏元素都显示出来了),整体画面粗糙凌乱,整个网页完全载入并顺利运行的时间延迟超过5秒,在这种交互性极强的在线印刷网站是非常致命的,这给用户一种极其糟糕的Web体验,并归结为网站的不稳定... 此时不能责怪公司的服务器烂,网速卡之类的,那样很可能会导致老大对我一顿胖揍甚至扣奖金... 所以只能从网站性能方面进行改良... 2.设计目标 减少页面载入时

  • 充分利用ASP.NET的三种缓存提高站点性能的注意方法

    ASP.NET提供三种主要形式的缓存:页面级输出缓存.用户控件级输出缓存(或称为片段缓存)和缓存API. 尽早缓存:经常缓存  您应该在应用程序的每一层都实现缓存.向数据层.业务逻辑层.UI或输出层添加缓存支持.内存现在非常便宜-因此,通过以智能的方式在整个应用程序中实现缓存,可以获得很大的性能提高. 页面级输出缓存 最简单的缓存形式,只是在内存中保留为响应请求而发送的HTML的副本. 要实现页面输出缓存,只要将一条OutputCache指令添加到页面即可. <%@ OutputCache Du

  • SQL Server 聚焦存储过程性能优化、数据压缩和页压缩提高IO性能方法（一）

    SQL Server 聚焦存储过程性能优化、数据压缩和页压缩提高IO性能方法（一）

    前言 关于SQL Server基础系列尚未结束,还剩下最后一点内容未写,后面会继续.有园友询问我什么时候开始写SQL Server性能系列,估计还得等一段时间,最近工作也比较忙,但是会陆陆续续的更新SQL Server性能系列,本篇作为性能系列的基本引导,让大家尝尝鲜.在涉及到SQL Server性能优化时,我看到的有些文章就是一上来列出SQL Server的性能优化条例,根本没有弄清楚为什么这么做,当然也有可能是自己弄懂了,只是作为备忘录,但是到了我这里,我会遵循不仅仅是备忘录,还要让各位园友

  • 浅谈DOM的操作以及性能优化问题-重绘重排

    浅谈DOM的操作以及性能优化问题-重绘重排

    写在前面: 大家都知道DOM的操作很昂贵. 然后贵在什么地方呢? 一.访问DOM元素 二.修改DOM引起的重绘重排 一.访问DOM 像书上的比喻:把DOM和JavaScript(这里指ECMScript)各自想象为一个岛屿,它们之间用收费桥梁连接,ECMAScript每次访问DOM,都要途径这座桥,并交纳"过桥费",访问DOM的次数越多,费用也就越高.因此,推荐的做法是尽量减少过桥的次数,努力待在ECMAScript岛上.我们不可能不用DOM的接口,那么,怎样才能提高程序的效率? 既然

  • 提高代码性能技巧谈—以创建千行表格为例

    微软的开发周期中很重要的一块是调整产品的性能.性能调整也是开发者应当留心的关键部分之一. 经过多年发展,业界对于如何优化Win32程序性能已经有非常多的了解. 现在开发者遇到的问题之一是不太清楚是什么导致DTHML和HTML页面运行快或者慢.当然,有一些很简单的方法--比如不要使用2MB大的图片.我们曾经使用过另外一些有趣的技巧提高了DHTML页面的性能,希望它们能帮助你改善自己的页面性能. 这里我使用了一个建立Table的程序例子.其中用document.createElement()和ele

  • 提高jQuery性能优化的技巧

    下面把提高jQuery性能优化技巧给大家分享如下: 缓存变量 DOM遍历是昂贵的,所以尽量将会重用的元素缓存. 复制代码 代码如下: // 糟糕 h = $('#element').height(); $('#element').css('height',h-20); // 建议 $element = $('#element'); h = $element.height(); $element.css('height',h-20); 避免全局变量 jQuery与javascript一样,一般来说

  • JavaScript提高网站性能优化的建议(二)

    在javascript关于提高网站性能的几点建议(一)中,从HTTP请求到页面渲染几个方面对提高网站性能提出了几点建议,本文是学习Steve Sounders的另外一本书<高性能网站建设进阶指南>之后,从JavaScript性能的角度进行总结概括,诸君共勉. JavaScript性能是实现高性能Web应用程序的关键 --Steve Sounders 1 利用js作用域链 作用域链(scope chain) 当执行一段JavaScript代码(全局代码或函数)时,JavaScript引擎会创建为

  • 在DB2中提高INSERT性能的技巧(1)

    正在看的db2教程是:在DB2中提高INSERT性能的技巧(1). INSERT 处理过程概述 首先让我们快速地看看插入一行时的处理步骤.这些步骤中的每一步都有优化的潜力,对此我们在后面会一一讨论. 在客户机准备 语句.对于动态 SQL,在语句执行前就要做这一步,此处的性能是很重要的:对于静态 SQL,这一步的性能实际上关系不大,因为语句的准备是事先完成的. 在客户机,将要插入的行的各个 列值组装起来,发送到 DB2 服务器. DB2 服务器确定将这一行插入到哪一页中. DB2 在 用于该页的缓

  • js加载之使用DOM方法动态加载Javascript文件

    js加载之使用DOM方法动态加载Javascript文件

    传统上,加载Javascript文件都是使用<script>标签. 就像下面这样: <script type="text/javascript" src="example.js"></script> <script>标签很方便,只要加入网页,浏览器就会读取并运行.但是,它存在一些严重的缺陷. (1)严格的读取顺序.由于浏览器按照<script>在网页中出现的顺序,读取Javascript文件,然后立即运行,

随机推荐