js中性能优化的几大方法（页面级优化和代码级优化）

待我称王封你为后i 2022-10-27 13:50 201阅读 0赞

# js中性能优化 #

## 页面级优化 ##

页面级优化的方法有以下几种：

1.  **CSS Sprites—使用雪碧图**
    
    > 具体的使用方法可以自行百度  
    > [教你来使用雪碧图][Link 1]
2.  **使用CDN**
    
    > 下图用bootstrap来举例  
    > 使用bootstrap的时候，下载bootstrap文件比使用CDN性能差得多![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDczNTAxOA_size_16_color_FFFFFF_t_70]
3.  **压缩合并代码–使用webpack等打包工具压缩代码**
4.  **使用DNS预解析**

## 代码级别的优化 ##

代码级别的优化有以下几种：

1.  **减少DOM操作**  
    避免直接对DOM进行操作，例如如下操作

var lis=document.querySelectorAll('li');
    var len=lis.length;
     var ul=document.querySelector('ul');
    
     for(var i=0;i<len;i++){ 
         lis[i].onclick=function(){ 
    
         }
     }

在JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能，因为需要不断的与dom节点进行交互，访问dom的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间，这就是为什么性能优化的主要思想之一就是减少DOM操作的原因；

1.  **异步加载**  
    使用HTML5新增属性：async和defer属性

defer
    	 1. 解析html
    	 2. 遇到带defer属性的script标签，继续解析html，同时下载script引入的文件
    	 3. 浏览器完成解析HTML，然后执行下载的脚本（按书写顺序执行）
    
    async
           1. 解析html
           2. 遇到带async属性的script标签。继续解析html，同时下载script引入的文件
           3. js文件下载完毕，浏览器暂停解析html，开始执行js
           4. js执行完毕，浏览器接着解析html

1.  **事件代理**，也叫做事件委托  
    第一个for循环显然要对DOM进行操作，很费性能，但是我们又想把li里面的内容输出又该怎么做呢？  
    这是我们就可以看for循环下面的ul.onlick函数，将找li变为直接找ul，对DOM的操作减少了，性能也增加了这里就是事件委托。

<ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        
    var lis=document.querySelectorAll('li');
     var len=lis.length;
     var ul=document.querySelector('ul');
    
     for(var i=0;i<len;i++){ 
         lis[i].onclick=function(){ 
    
         }
     }
    
     ul.onclick=function(ev){ 
    
         if(ev.target.tagName.toLowerCase()=='li'){ 
             console.log(ev.target.innerHTML)
         }
     }

1.  **使用requestAnimationFrame来替代setTimeout和setInterval**

var box=document.getElementById('box');
    var timer=requestAnimationFrame(function fn(){ 
        box.style.width=box.offsetWidth+5+'px';
        box.innerHTML=box.offsetWidth/5+'%';
    
       // console.log(this);
    
        timer=requestAnimationFrame(fn);
    
        if(box.offsetWidth>=500){ 
            cancelAnimationFrame(timer);
        }
    });

1.  **图片懒加载**  
    什么是图片懒加载呢？  
    懒加载也就是延迟加载;当访问一个页面时,先将img标签中的src链接设为同一张图片(这样就只需请求一次,俗称占位图),将其真正的图片地址存储在img标签的自定义属性中(比如data-src);当js监听到该图片元素进入可视窗口时,即将自定义属性中的地址存储到src属性中,达到懒加载的效果;这样做能防止页面一次性向服务器响应大量请求导致服务器响应慢页面卡顿或崩溃等问题

懒加载的实现步骤  
1.首先,不要将图片地址放到src属性中,而是放到其它属性(data-src)中

2.页面加载完成后,根据scrollTop判断图片是否在用户的视野内,如果在,则将data-original属性中的值取出存放到src属性中

3.在滚动事件中重复判断图片是否进入视野;如果进入,则将data-original属性中的值取出存放到src属性中

代码实现（建议代码）

function getTopValue(obj){ 
        var top=0;
    
        while(obj.offsetParet){ 
            top+=obj.offsetTop;
    
            obj=obj.offsetParet;
        }
    }

[Link 1]: https://blog.csdn.net/allenyhy/article/details/81484642
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDczNTAxOA_size_16_color_FFFFFF_t_70]: /images/20221024/8b10074eeafa4f1f93f4fce37b394c41.png