作者:zccst
1,Javascript语音与DOM操作就像孤岛。他们之间的通行是要借助船的,而使用船是有很大成本的。
所以,要先做完一个再做另一个,最好不要交替进行。
如:添加1000个li时,先用一个字符串拼接好,最后一次追加到父节点,而不是向父节点追加1000次,一次追加一个。
var lis = "";
for(var i = 0; i < 1000; i++){
lis += "<li>"+i+"</li>";
}
oUl.appendChild(lis);
而不是:
for(var i = 0; i < 1000; i++){
oUl.appendChild("<li>"+i+"</li>");
}
2,减少重排和重绘
(1)先放到一个碎片中
如:添加1000个li时,先放到fragment,再添加到UL中
(2)合并css,减少重回次数
style="height:200px;width:200px;background:red;";
而不是
obj.style.height = 200 + "px";
obj.style.width = 200 + "px";
obj.style.background = 200 + "px";
如果您觉得本文的内容对您的学习有所帮助,您可以微信:
分享到:
相关推荐
前端性能优化实践# 知识体系与小册格局 ## 写给读者 提起性能优化,大家现在脑海里第一时间会映射出什么内容呢? 可能是类似[“雅虎军规”](https://developer.yahoo.com/performance/rules.html?guccounter=1)和...
学习前端的知识
DOM性能瓶颈与Javascript性能优化
影响DOM平面精度的因素众多,其中数字高程模型(DEM)的精度是影响DOM生产的关键因素,也是较...文中通过对满足DOM精度要求的DEM优化的研究,结合航测成图的生产试验与实践,形成一套满足不同比例尺DOM的DEM生产流程和方案。
DOM是一种独立于语言和平台的XML解析模型。给出了支持DOM核心模型和多种DOM扩展规范的XML编辑器...描述了ONCEXMLEditor的体系结构及其实现核心算法,同时给出了XML文档有效性验证和装载及序列化的性能优化策略。
在我们实际的项目之中,相信有很多的朋友直接使用了以下的格式创建DOM元素。
利用Javascript DOM创建并优化网页图片库.pdf
之前,我们减少字节数和请求次数以及加载顺序以使页面加载的更快。如今,我们越来越多的注意到...使用 jQuery和其他JavaScript框架,使节点选择和DOM操作变得越来越容易,如果使用不当,有可能影响整个网页的响应速度。
主要介绍了javascript性能优化之DOM交互操作技巧,结合实例形式总结分析了JavaScript针对DOM操作过程中的各种常见优化操作技巧,需要的朋友可以参考下
1.1 资源文件加载 1.2 懒加载和预加载 1.3 重排与重绘 2.1 减少 DOM 操作方式 1 2.2 减少 DOM 操作方式 2:使用节点克隆
DOM到PDF 提供HTML代码段的PDF输出。图书馆使用HTML2Canvas,jsPDF和jQuery。局限性从画布生成图像时,图像质量降低。
了解VirtualDOM 优化javascript 常用的JS概念 函数防抖与节流 React下ECharts的数据驱动探索 TS下使用react-loadable 从Highlight浅谈webpack按需加载 Vue知识点相关 Vue原型的初始化 面试可能提问关键的几个函数 ...
代码级别的优化,例如 Javascript中的DOM 操作优化、CSS选择符优化、图片优化以及 HTML结构优化等等来讲述前端性能优化的多个方式。 目录结构如下: 一、WEB性能优化相关理论 二、前端性能优化的目的 三、前端性能...
JavaScript+DOM-Core实现的 性能优化后的 精美照片展示框
避免频繁的DOM操作:DOM操作是一项相对耗时的操作,频繁的DOM操作会导致性能下降,应该尽量减少DOM操作的次数,可以通过缓存DOM元素、批量操作等方式来提高性能。 使用事件委托:事件委托可以将事件绑定到父元素上,...
在Web开发中,需要将数据的变化实时反映到UI上,这时就需要对DOM进行操作,但是复杂或频繁的DOM操作通常是性能瓶颈产生的原因,为此,React引入了虚拟DOM(Virtual DOM)的机制。 一、什么是虚拟DOM? 在React中,...
网页性能优化->尽量少操作DOM 2..虚拟DOM(Virtual DOM) VS js直接操作原生DOM(innerHTML) function Raw() { var data = _buildData(), html = ; ... for(var i=0; i<data.length; i++) { var render = ...
目标是使用智能差异算法和性能优化来创建非常简单,轻便和快速的虚拟DOM库。 Javascript不应该痛苦 该库使您不必关心DOM和DOM更新,只使用数据就可以使用DOM。每个DOM更改都是通过外科手术完成的,每个虚拟节点都钩...
下文主要通过一个例子带你 分析DOM事件的传递、事件处理 ,然后在此基础上再 深入总结对事件监听的优化方案 ,最终总结下DOM事件机制 在开源框架中的实战应用 。 一、从实例看事件传递 以下面这个普通的html...