首页 > 代码库 > js 优化方面

js 优化方面

2024-09-06 09:48:39   217人阅读

根据网上查阅关于优化方面的问题，根据自己理解，进行简单整理。仅供大家在优化方面参考

 

一.在web开发中，通过dom 对浏览器进行操作，来实现js 与html 的交互，而DOM的操作是非常昂贵的，因为这会导致浏览器执行回流 （reflow）操作。但我们不可避免进行dom操作，所以选择尽可能的减少DOM操作来进行优化。 

　　回流（是指浏览器为了重新渲染部分或者全部的文档而重新计算文档中元素的位置和几何构造的过程。）所以通过操作引起元素位置的改变就会引起回流。

导致回流产生的情况：

　　 用户的操作，比如改变浏览器大小，改变浏览器的字体大小等

　　当你移动 DOM 的位置，或做动画的时候。

　　对DOM节点进行增删或者更改内容时。

　　当你修改 CSS 样式导致元素位置发生改变。注：更改background-color;color; 不会引起回流

　　当你修改网页的默认字体时。

　　动态设置样式等

解决方法：

　　1.dom 不适合table布局,不宜使用。

　　2.离线对dom 进行操作，修改完后再上线

　　　　2.1clone 一个 DOM 节点到内存里，，改完后，和在线的那个的交换一下。　 一次回流重绘

　　　　2.2 通过display:none ,可以任意修改，之后再显示出来。　　　　　　　　　引发回流重绘两次

　　　　2.3使用documentFragment或div等元素进行缓存操作，先把所有要添加到元素添加到1个div(这个div也是新加的)，

　　　　　　最后才把这个div append到body中。　　　　　　　　　　　　　　　　　只引发回流重绘一次　　　　

　　3.修改css 样式时尽量采用创建类，className里预先定义好样式，如果是动态改变, 应该一次写完（cssText）;

　　4.因为回流是自上而下的，所以下不及上，我们在最后面修改信息对全局影响越少。

　　（回流必将引起重绘，而重绘不一定会引起回流。一个元素的回流导致了其所有子元素以及DOM中紧随其后的祖先元素的随后的回流.）

　　

二.字符串的拼接 += 的效率低 ，创建一个数组 最后用 arr.join(‘‘)返回。

三.for循环中 先缓存数组，再放入局部变量中，可以减少计算机查询长度 for(i=0;len = x.length,i<len,i++) 

四.局部变量的访问要比全局变量快

五.尽量作用JSON格式来创建对象，而不是var obj=new Object()方法

六.循环很多次时，用setInterval() , 少用setTimeout(),这是因为setTimeout()每次运行都重新创建一个定时器.

七.对于大的JS对象，因为创建时时间和空间的开销都比较大，因此应该尽量考虑采用缓存。

八.优化js 文件 把不影响的js 放入一个文件中，减少请求。

九.压缩js 文件

十.减少页面重绘 ，通过创建数组，来存储，最后把数组添加到页面上去。虽然看起来写的多了，但性能提升许多。

<body>
<div id="demo"></div>
<input type="button" value="http://www.mamicode.com/效率低" onclick="func1()" />
<input type="button" value="http://www.mamicode.com/效率高" onclick="func2()" />

<script type="text/javascript">
var str = "<div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div>"
//运行完整个代码用时长，效率低
function func1() {
    var obj = document.getElementById("demo");
    for(var i = 0; i < 100; i++) {
        obj.innerHTML += str + i;
    }
}
//效率高的
function func2() {
    var obj = document.getElementById("demo");
    var start = new Date().getTime();
    var arr = [];
    for(var i = 0; i < 100; i++) {
        arr[i] = str + i;
    }
    obj.innerHTML = arr.join("");

}
</script>
</body>

 

　　

js 优化方面


联系
我们