使用innerHTML替换子节点可能会导致浏览器的内存占用问题,尤其是在IE中,问题更加明显.在删除带有时间处理程序或引用了其他js对象子树是,就有可能导致内存占用问题.假设某个元素有一个事件处理程序,在使用前某个属性将该该元素从文档树种删除后,元素与时间处理程序之间的绑定关系在内存中并没有一并删除.如果这种情况频繁出现,页面占用的内存数量就会明显增加.因此在使用innerHTML时,最好先手工删除要被替换的元素的所有事件处理程序. 不过,使用innerHTML这个属性,仍然还是可以为我们提供很

浅析 innerHTML 性能优化的原理 博客分类: web前端 IEAndroidwebkit浏览器UI  昨天看了 lveyo老兄的"innerHTML的性能问题" 一文 http://lveyo.iteye.com/blog/182891 该文介绍了一篇老外的关于提高innerHTML性能的文章. 老外的方法非常的怪异且神奇. 很多朋友在惊叹之余 对于背后的原理非常感兴趣. 受hax的提醒, 我看了一下webkit的代码.在这里我将分析的结果分享出来 说的不一定对 还请大家多多拍

Bullshit 本来想每天都更新下博客的,可是近期要考试,还有就是自己还是停留在暗自窃喜中吧(这样的想法要改变). 事实上近期总在想.自己要怎么去管理自己的数据,每天的生活都是对自己的数据的增删查改.昨天把自己的电脑重装了,确实非常多软件的存放要改地方了,之前不知道怎么去管理软件安装,所以放得乱七八糟的. 说好一大堆废话之后.我最后再说一遍.管好自己的时间.数据真的比你学习东西重要. Method 本文代码约定 1 el: 指的是添加直接点的DOM节点 2 totalNum: 为100000(

为了引入Dgls,我们从创建Dom节点说起. 用JS创建Dom节点 var div = document.createElement('div'); div.className = 'gdls'; var test = document.createTextNode('zhe'); div = div.appendChild(test); 看到没,我们仅仅为了创建<div class="dgls">zhe</div>竟然写了四行代码,而且用了那么多无用的字符.

一.访问与修改DOM DOM和JS 相当于两个岛屿,访问操作的次数越多,要交的过路费越多,对性能产生很大影响. 减少访问DOM的次数,把运算尽量留在JS端操作. 二.innerHTML 对比 DOM 方法 1.对于原生的DOM方法和innerHTML比较,性能相差无几. 2.对于大量操作,针对不同浏览器,性能不一样,因此取决于经常用的浏览器. 3.建议从可读性.稳定性.编码习惯来决定使用哪种方式.在对字符串经过优化后,innerHTML性能可以得到大幅提升. 三.操作上的优化 1.节点克隆 例如

function killerrors() { return true; } window.onerror = killerrors; //检查浏览器类型 function checkBrowser() { function loginfo() { this.alert = function (string) { if (false) { alert(string); } } } var log = new loginfo(); var browser = navigator.appName;

来源:GBin1.com 我们的浏览器执行越来越多的特性,并且网络逐渐向移动设备转移,使我们的前端代码更加紧凑,如何优化,就变得越来越重要了.前端给力的地方是可以有 许多种简单的策略和代码习惯让我们可以保证最理想的前端性能.我们这个系列的主题就是要告诉你9种代码小技巧,只需要一分钟,就可以优化你现有的代码. 使用DocumentFragments或者innerHTML代替复杂的元素注入 DOM操作在浏览器上是要付税的.尽管性能提升是在浏览器,DOM很慢,如果你没有注意到,你可能会察觉浏览器运行非

看到一遍文章When innerHTML isn’t Fast Enough,反应了innerHTML在操作量大了以后的性能下降的问题. 并且给出了一个replaceHTML的函数 function replaceHtml(el, html) { var oldEl = typeof el === "string" ? document.getElementById(el) : el; /*@cc_on // Pure innerHTML is slightly faster in I

目测innerHTML比appendChild好了3到4倍, 但是界面渲染还是很慢啊:  chrome结果 /** *chrome浏览器; * innerHTML appendChild * 1千条的情况下:3MS 11MS * 1万条的情况下:25MS(14MS) 111MS(52MS) * 10万的情况下:276MS(145MS) 672MS(480S) * 100万界面卡死了 * */ FF火狐浏览器,电脑没卡死,太好了,chrome果然是内存大户啊: /** *FF浏览器; * inne

一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运行平台还存在差异.屏幕分辨率不一样,大小不一样,比例不一样.兼容性主要考虑三方面: 1).CSS兼容2).JavaScript兼容3).HTML兼容 这三类也是前端的主要组成部分,都存在一定的兼容性问题,知己知彼,百战百胜,我们先了解浏览器的发动机—内核. 多年前我们一直为IE6兼容烦恼,为它没少加

artTemplate能够将数据与View视图的分离,充分利用 javascript 引擎特性,使得其性能无论在前端还是后端都有极其出色的表现. 在 chrome 下渲染效率测试中分别是知名引擎 Mustache 与 micro tmpl 的 25 . 32 倍. 一.简洁编写模板 1.(采用script标签并带有属性id和type="text/html") <script id="test" type="text/html"> {{

用脚本进行DOM操作的代价很昂贵,它是富Web应用中最常见的性能瓶颈. 浏览器中的DOM:天生就慢 DOM(文档对象模型)是独立于语言的,但在浏览器中的接口是用JavaScript实现的.两个相互独立的功能只要通过接口彼此连接,就会产生消耗. 访问DOM元素是有代价的,修改元素则更甚. function innerHTMLLoop(){ for(var count = 0; count < 15000; count++){ document.getElementById('here').inne

作为一个前端,不能不考虑性能问题.对于大多数前端来说,性能优化的方法可能包括以下这些: 减少HTTP请求(合并css.js,雪碧图/base64图片) 压缩(css.js.图片皆可压缩) 样式表放头部,脚本放底部 使用CDN(这部分,不少前端都不用考虑,负责发布的兄弟可能会负责搞好) 缓存…… 等等…… 有兴趣的同学,可以自行搜索雅虎关于前端优化的十四条规则.但这些规则当中,有多少是需要前端工程师付诸实践的?就我来说,CDN.缓存的设置,就是不需要我去关心的(作为一个苦逼外包,是没有权限去生产环

卤煮在前面已经向大家介绍了Chrome开发者工具的一些功能面板,其中包括Elements.Network.Resources基础功能部分和Sources进阶功能部分,对于一般的网站项目来说,其实就是需要这几个面板功能就可以了(再加上console面板这个万精油).它们的作用大多数情况下是帮助你进行功能开发的.然而在你开发应用级别的网站项目的时候,随着代码的增加,功能的增加,性能会逐渐成为你需要关注的部分.那么网站的性能问题具体是指什么呢?在卤煮看来,一个网站的性能主要关乎两项,一是加载性能.二是

很多时候,我们经常听见有人说jquery有多快多快.在这个各种类库满天飞的时候,不得不说的是,能有原生JS快吗? 是的,明显原生JS要更快,因为诸如JQuery这样的库必须要兼容各种浏览器和低版本和许多其他的东西,考虑通用性必然会导致性能的损耗. 当然,我不是提倡写代码纯用原生JS实现,我记得淘宝玉伯曾经说的一句话“框架能够让我们走的更快,但只有了解原生的JS才能让我们走的更远”. 一些感(fei)想(hua): 原生的js,好比全真教的武功,一步步从基础开始(先练气再御剑),很长一段时间内和j

一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运行平台还存在差异.屏幕分辨率不一样,大小不一样,比例不一样.兼容性主要可以分类为: 1).CSS兼容2).JavaScript兼容3).HTML兼容 这三类也是前端的主要组成部分,都存在一定的兼容性问题,知己知彼,百战百胜,我们先了解浏览器的发动机—内核. 多年前我们一直为IE6兼容烦恼,为它没少加

BigRender 当一个网站越来越庞大,加载速度越来越慢的时候,开发者们不得不对其进行优化,谁愿意访问一个需要等待 10 秒,20 秒才能出现的网页呢? 常见的也是相对简单易行的一个优化方案是 图片的延迟加载.一个庞大的页面,有时我们并不会滚动去看下面的内容,这样就浪费了非首屏部分的渲染,而这些无用的渲染,不仅包括图片,还包括其他的 DOM 元素,甚至一些 js/css(某些js/css 是根据模块请求的,比如一些 ajax),理论上,每增加一个 DOM,都会增加渲染的时间.有没有办法能使得

第24章 最佳实践 1.性能 1.避免全局查找 将在一个函数中会用到多次的全局对象保存在局部变量.比如多次使用document.getElement...,可以首先var doc=document,把document对象保存在本地的doc变量中. 2.避免with语句. with会创建自己的作用域,需要额外的作用域链查找 3.避免不必要的属性查找 如果需要多次用到对象属性,应该将其存储在局部变量中. 4.优化循环 减值迭代更快,优化循环体 5.展开循环 循环次数确定时,消除循环更快.Duff装置

js性能优化-事件委托 考虑一个列表,在li的数量非常少的时候,为每一个li添加事件侦听当然不会存在太多性能方面的问题,但是当列表非常的长,长到上百上千甚至上万的时候(当然只是一个解释,实际工作中很少遇到这么多li的情况),为每个li添加事件侦听就会对页面性能产生很大的影响. 就像下面这段代码: <!DOCTYPE HTML><html><head><meta charset="utf-8" /><title>js性能优化&l

腾讯Bugly特约作者:贺辉超 1 H5 缓存机制介绍 H5,即 HTML5,是新一代的 HTML 标准,加入很多新的特性.离线存储(也可称为缓存机制)是其中一个非常重要的特性.H5 引入的离线存储,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问. H5 应用程序缓存为应用带来三个优势: 离线浏览 用户可在应用离线时使用它们 速度 已缓存资源加载得更快 减少服务器负载 浏览器将只从服务器下载更新过或更改过的资源. 根据标准,到目前为止,H5 一共有6种缓存机制,有些是之前已有,