技術標籤：面試題web前端javascripthtmlhtml5前端

js中效能優化

頁面級優化

頁面級優化的方法有以下幾種：

1. CSS Sprites—使用雪碧圖

   具體的使用方法可以自行百度
   教你來使用雪碧圖

2. 使用CDN

   下圖用bootstrap來舉例
   使用bootstrap的時候，下載bootstrap檔案比使用CDN效能差得多

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操作的原因；

2. 非同步載入
   使用HTML5新增屬性：async和defer屬性

    <script src="js/jquery-3.4.1.js" defer></script>
    <script src="js/jquery-3.4.1.min.js" async></script>

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
 

3. 事件代理，也叫做事件委託
   第一個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)
     }
 }

4. 使用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);
    }
});

5. 圖片懶載入
   什麼是圖片懶載入呢？
   懶載入也就是延遲載入;當訪問一個頁面時,先將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;
    }
}