前端----async非同步執行指令碼
阿新 • • 發佈：2018-11-09
在傳統模式下, 瀏覽器會按照從上到下的方式解析HTML元素 ,
解析到<script .../>一直到解析完成之前都不會解析處理<script .../>元素之後的內容
假設某<script .../>匯入的指令碼檔案非常耗時就會導致瀏覽器無法向下執行,
頁面將長時間顯示一片空白,這不是使用者希望看到的效果,
這時候就需要用到<script .../>的async屬性了
async屬性指定的<script .../>會啟動新執行緒, 非同步執行<script .../>元素匯入的指令碼檔案,
瀏覽器也會繼續向下解析, 處理頁面內容
舉個例子:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="async.js">
</script>
</head>
<body>
<div>測試!</div>
</body>
</html>var sum=0;
for(var i=0;i<100000000;i++)
sum+=i;
alert(sum);由於js指令碼要迴圈100000000次比較耗時, 在此之前頁面一片空白:
執行完js彈框時還沒有載入body裡的內容,如上
這時候給<script .../>加上async屬性:
<script type="text/javascript" src="defer.js" async >效果如下:
其實在彈框前body中的div就顯示出來了,
這就是非同步執行的效果, 不必等待js載入完再載入後面的內容!