click 事件的執(zhí)行順序和優(yōu)化問題

場景：

有100個li，點擊 button 時，給 li 添加一個 class，然后再執(zhí)行一個 for 循環(huán)

代碼

    <script>
        $('.btn').on('click', function () {
            $('li').addClass('add')
            for (var i = 0; i < 100000; i++) {
                console.log(i)
            }
        });
    </script>

問題

1、發(fā)現(xiàn)每次執(zhí)行這個 click 事件時，都必須要執(zhí)行完 for 后才能給 li 添加 class，這是為什么？

2、每次執(zhí)行 click 時，里面的循環(huán)是不可少的，如果優(yōu)化這個循環(huán)？

回答

編輯回答

避風港

jquery操作dom的動作是異步的，必須等到當前同步命令console全部執(zhí)行完才開始執(zhí)行。

若click內(nèi)的邏輯中，前面給li添加add的動作不受后面的循環(huán)的影響，那么可以用setTimeout將循環(huán)包起來，變成異步執(zhí)行。

  <script>
      $('.btn').on('click', function () {
          $('li').addClass('add');
          setTimeout(function() {
              for (var i = 0; i < 100000; i++) {
              console.log(i)
              }
          }, 0);

      });
  </script>

2018年7月28日 15:31

編輯回答

溫衫

首先你要明白，瀏覽器不是一個整體，它有幾大模塊，JS 運行時（V8），渲染引擎（blink），主線程（處理插件、自動更新等），所以你在 JS 里操作 DOM，并不會直接反應到 DOM 上，而是由 V8 通知 blink。

重新渲染很花時間，如果需要 relayout 和 repaint 就更花時間。所以，為了避免 a.classList.add('add') -> a.classList.remove('add') -> a.classList.add('add') -> a.classList.remove('add') -> .... 這樣反復循環(huán)浪費渲染效率，瀏覽器會緩存你對 DOM 的修改，在當前 JS 棧執(zhí)行完畢后，再一次性修改完，一次性 relayout + repaint。

所以你會看到，雖然你已經(jīng)在 JS 里給某個 DOM 節(jié)點加上了樣式，但實際你只修改了它在 V8 里的映像，它的本體其實還沒變。直到 JS 執(zhí)行完才變。

第二個問題，我覺得是你實現(xiàn)的問題。作為前端，很忌諱讓某個操作的時間能夠被用戶感知，如果這個操作需要很久，那么一方面你可以像樓上所說，通過 setTimeout 把它放到下個時間節(jié)點；另一方面，你應該好好考慮從算法的角度，是不是真有必要跑這么久的循環(huán)。

2018年1月21日 16:55