优化DOM得从重绘和重排讲起,long long ago... 1.重绘和重排 1.1 重绘和重排是什么 重绘是指一些样式的修改,元素的位置和大小都没有改变: 重排是指元素的位置或尺寸发生了变化,浏览器需要重新计算渲染树,而新的渲染树建立后,浏览器会重新绘制受影响的元素. 1.2 浏览器渲染页面 去参加面试总会被问到一个问题,那就是"向浏览器输入一行url会发生什么?",这个问题的答案除了要回答网络方面的知识还牵扯到浏览器渲染页面问题.当我们的浏览器接收到从服务器响应的页面之后便开始逐…

最近在研读<高性能JavaScript>,在此做些简单记录.示例代码可在此处查看到. 一.DOM 1)DOM和JavaScript 文档对象模型(DOM)是一个独立于语言的,用于操作XML和HTML文档的程序接口(API). 浏览器通常会把DOM和JavaScript独立实现.例如Chrome中使用Webkit的WebCore库渲染页面,用V8作为JavaScript引擎. 访问DOM天生就慢,将DOM和JavaScript比喻为两个岛屿,两处同行要收过桥费,ECMAScript访问DOM的次…

如今主流浏览器都在比拼JavaScript引擎的执行速度,但最终都会达到一个理论极限,即无限接近编译后程序执行速度. 这种情况下决定程序速度的另一个重要因素就是代码本身. 在这里我们会分门别类的介绍JavaScript性能优化的技巧,并提供相应的测试用例,供大家在自己使用的浏览器上验证, 同时会对特定的JavaScript背景知识做一定的介绍. 目录 变量查找优化 变量声明带上var 慎用全局变量 缓存重复使用的全局变量 避免使用with 核心语法优化 通过原型优化方法定义 避开闭包陷阱 避免使…

 我觉得优化javascript是一门高深的学问,在这里也只能站在前人的肩膀上,说一些我浅显的认识,更希望的是抛钻引玉,如有不对,敬请斧正. 首先,要认识到是,优化js的关键之处在于,优化它的运行速度,以此为切入点. javascript的优化原则是:二八原则 满足考量大多数情况,而遇到极端情况,有能力则兼顾之,学会放弃,适当取舍: 原因是,影响用户的体验很重要的因素之一响应时间 0.1s: 用户觉得很流畅 1.0s: 用户的操作可能偶尔受到影响,并且用户已经能感觉到有些不流畅 10s : 对用…

repaint(重绘) ,repaint发生更改时,元素的外观被改变,且在没有改变布局的情况下发生,如改变outline,visibility,background color,不会影响到dom结构渲染. reflow(渲染),与repaint区别就是他会影响到dom的结构渲染,同时他会触发repaint,他会改变他本身与所有父辈元素(祖先),这种开销是非常昂贵的,导致性能下降是必然的,页面元素越多效果越明显. 何时发生: 1. DOM元素的添加.修改(内容).删除( Reflow + Repa…

原文地址:http://www.codeceo.com/article/javascript-performance-tips.html JavaScript的性能问题不容小觑,这就需要我们开发人员在编写JavaScript程序时多注意一些细节,本文非常详细的介绍了一下JavaScript性能优化方面的知识点,绝对是干货. 前言 一直在学习javascript,也有看过<犀利开发Jquery内核详解与实践>,对这本书的评价只有两个字犀利,可能是对javascript理解的还不够透彻异或是自己太…

DOM操作与交互要消耗大量时间,所以优化DOM交互有重大意义. 1.最小化现场更新 如果需要访问的DOM部分是已经显示的页面的一部分,那么这就是在进行一个现场更新.现场更新得越多,代码完成执行所需要的时间越多:完成一个操作所需要的 现场更新次数越少,则代码执行得越快. 下面是反模式例子: var list = document.getElementById("myList"), item, i; for(i=0;i<10;i++){ item = document.createE…

原文:javascript系列之DOM(一) DOM(document object moudle),文档对象模型.它是一个中立于语言的应用程序接口(API),允许程序访问并修改文档的结构,内容和样式.也就是一切语言(js,php 等)对web的操作是建立在DOM的基础之上的.行为的发生,首先必须获取文档中的一个对象作为其载体. DOM发展史 在漫长的互联网发展史上DOM一共经历了四个阶段.当前,我们正处在DOM 3阶段. DOM 0 :不是W3C规范,只是Netscape Navigator…

原文:javascript系列之DOM(二) 原生DOM扩展 我们接着第一部分来说,上文提到了两种常规的DOM操作:创建文档片段和遍历元素节点.我们知道那些雨后春笋般的库,有很大一部分工作就是提供了一些优秀 的DOM操作API.可见原生的一些方法和属性,还不能很灵活快捷的来完成我们所希望的操作.下面将总结出总结出几种很实用的扩展方法.包括 after()和before(), A:after()和before() function after(elem){ if(this.parentNode){…

原文出处: YouYaInsist   欢迎分享原创到伯乐头条 前言 一直在学习javascript,也有看过<犀利开发Jquery内核详解与实践>,对这本书的评价只有两个字犀利,可能是对javascript理解的还不够透彻异或是自己太笨,更多的是自己不擅于思考懒得思考以至于里面说的一些精髓都没有太深入的理解. 鉴于想让自己有一个提升,进不了一个更加广阔的天地,总得找一个属于自己的居所好好生存,所以平时会有意无意的去积累一些使用jQuerry的常用知识,特别是对于性能要求这一块,总是会想是不是…