2013年12月1日 星期日
JS 非同步
在HTML5中,script標籤多了許多屬性,async 就是其中之一。
async屬性可以讓javascript進行非同步的載入跟執行,而不會停止網頁其他部分的載入與解析。
這種讓外部js擋在背景載入與執行的方法,大大的提升了網頁載入與執行的效能。
雖然只適用於外部js檔,但實用性相當高,以後網頁要添加一些小工具,像是月曆之類的。
也就不用過於害怕添加太多而導致網頁載入被拖垮了。
async 屬性 與 defer屬性合用會有下列幾種:
1.async與defer屬性皆不存在:
同步下載與執行,這種作法會讓瀏覽器停止對網頁的解析,直到js檔執行完畢為止,
對網頁效能有顯著的負面影響。
2.async屬性存在:
非同步下載與執行,程式碼在下載完後會立即執行。下載與執行都在背景執行,
不影響網頁本身的解析。有顯著的效能提升。
3.defer屬性存在:
js檔會在背景下載,並在網頁解析完成後才開始執行。
4.async與defer皆存在:
優先使用ansyc,而忽略defer,如果瀏覽器對ansyc不支援,那會使用defer屬性。
上面我都用 "存在" 這字眼,原因之一是HTML5的原文是使用 " present" ,
另外一個原因是因為,IE並不理會HTML5中ansyc與defer皆是boolean值的規定。
只要有ansyc字眼出現,他就認為是要非同步下載執行。
所以說下面幾個寫法對IE而言都是一樣的。
相關文章中還有一些關於HTML5的發展消息,可以參考一下。
async屬性可以讓javascript進行非同步的載入跟執行,而不會停止網頁其他部分的載入與解析。
這種讓外部js擋在背景載入與執行的方法,大大的提升了網頁載入與執行的效能。
雖然只適用於外部js檔,但實用性相當高,以後網頁要添加一些小工具,像是月曆之類的。
也就不用過於害怕添加太多而導致網頁載入被拖垮了。
async 屬性 與 defer屬性合用會有下列幾種:
1.async與defer屬性皆不存在:
同步下載與執行,這種作法會讓瀏覽器停止對網頁的解析,直到js檔執行完畢為止,
對網頁效能有顯著的負面影響。
2.async屬性存在:
非同步下載與執行,程式碼在下載完後會立即執行。下載與執行都在背景執行,
不影響網頁本身的解析。有顯著的效能提升。
3.defer屬性存在:
js檔會在背景下載,並在網頁解析完成後才開始執行。
4.async與defer皆存在:
優先使用ansyc,而忽略defer,如果瀏覽器對ansyc不支援,那會使用defer屬性。
上面我都用 "存在" 這字眼,原因之一是HTML5的原文是使用 " present" ,
另外一個原因是因為,IE並不理會HTML5中ansyc與defer皆是boolean值的規定。
只要有ansyc字眼出現,他就認為是要非同步下載執行。
所以說下面幾個寫法對IE而言都是一樣的。
訂閱:
文章 (Atom)