在開發網頁時，javascript 是不可或缺的一部分，可以運用它實現許多復雜的交互效果。但是當我們在頁面加載javascript 加載動畫時，就會遇到阻塞不動的問題，這是一個很常見的問題，下面就來詳細介紹一下這個問題以及解決方法。 首先，讓我們來解釋一下“阻塞不動”這個問題。當我們在加載javascript 時，如果代碼很復雜且文件很大的話，就需要較長的時間才能加載完畢，期間我們所加載的動畫就會因為javascript 的加載而卡在原地無法繼續執行。這時候用戶就會感到非常不爽，而且容易導致用戶流失。 那么該如何解決這個問題呢？首先，我們可以使用異步加載的方式來解決。異步加載可以讓javascript 腳本在加載的同時不影響頁面的渲染，頁面可以同時加載其他元素，提高了用戶的交互體驗。下面是一段異步加載的代碼：

function loadScriptAsync(src) {
var script = document.createElement('script');
script.src = src;
script.async = true;
document.head.appendChild(script);
}
loadScriptAsync('https://www.example.com/script.js');

使用這個代碼可以實現異步加載javascript，其中async 屬性是關鍵，它表示這個腳本是否異步執行。如果async 屬性為 true，瀏覽器可以再加載完后立即執行腳本，而不會阻塞其他資源的加載和渲染。 除了異步加載，我們還可以使用defer 屬性來進行代碼的加載。與async 不同，defer 屬性表示代碼不會阻塞頁面的渲染和其他元素的加載，但是只會在所有元素都加載完畢之后才會執行。下面是一段defer 加載的代碼：

使用這個代碼，也可以避免javascript 阻塞其他資源的加載和渲染，提高了頁面的用戶體驗。 我們也可以使用其他一些工具，比如說現在越來越流行的webpack。webpack 提供了許多優化javascript 的工具，比如說代碼分塊、延遲加載和CDN 加速等等，這些工具都可以幫助我們解決javascript 阻塞的問題，同時也可以提高網頁的性能。 總結來說，javascript 加載動畫阻塞不動是一個非常常見的問題，但是通過異步加載、defer 加載和使用一些優化工具的方法，我們都可以輕松解決這個問題，提高網頁的性能和用戶的交互體驗。