DOM优化

DOM与浏览器

  重排:改变页面内容

  重绘:浏览器显示内容

  1、添加顺序:

    --尽量在appendChild前添加操作

  2、合并DOM操作:

    --利用cssText

  3、缓存布局信息:

  4、文档碎片:

    --createDocumentFragment()

DOM与Javascript

  1、浏览器会把DOM与js独立实现

    --像两个独立的小岛

  2、js操作DOM

    --从一个岛到另一个岛

  3、DOM性能

    --岛与岛之间的桥,每次通过收取“过桥费”

    --尽量减少过桥次数

时间: 2024-10-24 10:17:02

DOM优化的相关文章

javascript之DOM优化

DOM访问和操作是现代网页应用中很重要的一部分.但每次你通过“桥梁”从ECMAScript到DOM时,都会被收取“过路费”.为减少DOM编程中的性能损失,具体要注意的有: 一.最小化DOM访问,在javascript端做尽可能多的事. Js代码   function innerHTMLLoop() { for (var count = 0; count < 15000; count++) { document.getElementById('here').innerHTML += 'a'; }

JS性能DOM优化

什么是DOM?  用于操作XML和HTML文档的应用程序 Dom节点  2. Dom树   3.Dom API DOM优化 浏览器会把js和dom独立实现,js每次操作dom,都会增加一次耗时,为了提高dom性能,就要尽可能减少js对dom的操作, 以下是两个测试 1 <script> 2 window.onload=function(){ 3 var div=document.getElementById('div'); 4 var str=''; 5 console.time('test1

js DOM优化相关探索

我在这尝试两个方面:-->DOM与js -->DOM与浏览器 (最近在秒味视频上学到不少,哈哈哈) 一.DOM与js 1.js与dom的交互问题 频繁的与dom交互,是一件浪费时间与金钱的事情,这就需要我们尽量改进自己的代码,让我们想做的事情尽量在js中做的差不多了在去跟dom打交道. 下面的小例子就说明了问题: 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charse

Dom 优化

核心问题 当解析的html文件很大时,生成DOM树占用内存较大,同时遍历(不更新)元素耗时也更长.但这都不是重点,DOM的核心问题是:DOM修改导致的页面重绘.重新排版!重新排版是用户阻塞的操作,同时,如果频繁重排,CPU使用率也会猛涨! DOM操作会导致一系列的重绘(repaint).重新排版(reflow)操作.为了确保执行结果的准确性,所有的修改操作是按顺序同步执行的.大部分浏览器都不会在JavaScript的执行过程中更新DOM.相应的,这些浏览器将对对 DOM的操作放进一个队列,并在J

【DOM】1.DOM优化

1.JS include :DOM BOM ECMA 2.Browser 分别独立实现dom & JS as if two isolated islands 3.JS操作DOM from the island to the other one 4.DOM性能 The bridges between islands,charge everytime passing by 尽量减少过桥次数 5.innerHTML vs dom method webkit:eg, chrome, dom>inne

DOM的相关优化

为什么要进行DOM优化? DOM对象本身也是一个js对象,所以严格来说,并不是操作这个对象慢,而是说操作了这个对象后,会触发一些浏览器行为,比如布局(layout)和绘制(paint). 首先先说一些浏览器是怎么样把一个页面呈现出来的: 一个浏览器有许多模块,其中负责呈现页面的是渲染引擎模块. 这个过程大致如下: ·解析HTML,并生成一棵DOM tree ·解析各种样式并结合DOM tree生成一棵Render tree(渲染树) ·对Render tree的各个节点计算布局信息,比如box的

一些JavaScript中的DOM的优化小技巧

在进行DOM优化时需要关注的问题有:修改DOM的时候,会引起页面的重排,重绘.因为JS是单线程执行的,那么在重排重绘的过程中可能会阻塞用户的操作.为了更好的用户体验,必须要严格控制这些操作. 一.对象集合 NodeList 当我们调用:getElementsByTagName,getElementsByName,getElementsByClassName的时候,返回的结果是一个NodeList,这个NodeList是实时的.如果你修改对应的html,那么NodeList中也会得到修改. 而且,

React虚拟DOM浅析

转帖: http://www.alloyteam.com/2015/10/react-virtual-analysis-of-the-dom/?hmsr=toutiao.io&bsh_bid=928783684 在Web开发中,需要将数据的变化实时反映到UI上,这时就需要对DOM进行操作,但是复杂或频繁的DOM操作通常是性能瓶颈产生的原因,为此,React引入了虚拟DOM(Virtual DOM)的机制. 什么是虚拟DOM? 虚拟DOM VS 直接操作原生DOM? 虚拟DOM VS MVVM?

Js极客之路 - 优化操作(性能优化)

1.因为每次For循环都会计算一次arr.length,所以有必要存储数组长度以减少计算.针对这篇文章(http://www.crimx.com/2015/04/21/should-array-length-be-cached-or-not/),V8引擎好像已经帮我们做了不变数据的缓存,不过个人认为还是很有必要的,像他说的,假若只有V8引擎做了此事(V8开发者有这样说吗?),我们做缓存,对于V8就当帮它咯,对于其他就是优化咯. //bad var arr=[1,2,3,...]; for(var