區分defer和async
阿新 • • 發佈：2018-06-18
def 腳本 text view 腳本文件 節日快樂 就是 html5 ext
今天要介紹的讓腳本延遲加載，讓腳本延遲加載的方式有多種，最簡單粗暴的方法就是將 <script> 標簽放在 <body> 標簽的最下面，這樣就可以按照先後順序依次執行了，但是你有些情況還是想放在 <head> 標簽的下面，但是這個時候就要讓腳本延遲執行，因為頁面要先解析DOM再執行腳本。
方法一：使用HTML4.01為 <script> 標簽定義的 defer 屬性，IE4~7支持
方法二： 使用HTML5為 <script> 定義的 async 屬性，IE8己以上支持
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script type="text/javascript" defer="defer" src="example1.js"></script> <script type="text/javascript" defer="defer" src="example2.js"></script> </head> <body> <div>hello world</div> </body> </html>
註意上面兩個腳本都使用了 defer 屬性，但是這兩個腳本文件執行的先後順序是不確定，所以一個頁面最好只使用一個腳本延遲，除非他們沒有依賴關系才會這麽用。 async 屬性也同樣存在這樣的問題，他們兩唯一的區別就是兼容性問題了。如果想安先後順序依次執行，唯一的辦法就是放在 body 裏面才是更好的選擇。
今天是父親節，祝天下所有的父親節日快樂·！
區分defer和async