媒介
JavaScript是瀏覽器的內置劇本語言。當網頁中嵌入了JavaScript劇本,瀏覽器加載網頁時,就會實行劇本,從而操縱瀏覽器,完成種種動態效果
JavaScript代碼嵌入網頁的要領
1、<script>
元素直接嵌入代碼
<script type="text/javascript">
function sayHello() {
alert("hello!");
}
</script>
2、<script>
元素加載外部劇本
<script type="text/javascript" src="example.js"></script>
<script>
標籤相干屬性
type屬性
-
<script>
標籤默許就是JavaScript代碼,嵌入javascript劇本時,type屬性能夠省略 - 假如type屬性的值,瀏覽器不認識,就不會實行个中的代碼,所以能夠在
<script>
標籤中嵌入恣意的文本內容,只需加上一個瀏覽器不認識的type屬性就行,瀏覽器不會實行也不會顯現它的內容,然則這個<script>
節點依舊存在於DOM當中,能夠運用<script>
節點的text屬性讀取它的內容
defer屬性
<script src="a.js" defer></script>
<script src="b.js" defer></script>
defer屬性的運轉流程:
- 瀏覽器最先剖析HTML網頁
- 剖析過程當中,發明帶有defer屬性的
<script>
元素 - 瀏覽器繼承往下剖析HTML網頁,同時并行下載
<script>
元素加載的外部劇本 - 瀏覽器完成剖析HTML網頁,此時再回過甚實行已下載完成的劇本
須要注重:
- 異步加載資本
- 根據遞次實行劇本
- 運用defer加載的外部劇本不應該運用document.write要領
async屬性
<script src="a.js" async></script>
<script src="b.js" async></script>
async屬性的運轉流程:
- 瀏覽器最先剖析HTML網頁
- 剖析過程當中,發明帶有async屬性的
<script>
標籤 - 瀏覽器繼承往下剖析HTML網頁,同時并行下載
<script>
標籤中的外部劇本 - 劇本下載完成,瀏覽器停息剖析HTML網頁,最先實行下載的劇本
- 劇本實行終了,瀏覽器恢復剖析HTML網頁
須要注重:
- 異步加載資本
- 並不會根據遞次實行JS,誰先下載完,誰就先實行
- 運用async加載的外部劇本不應該運用document.write要領
async和defer屬性歸結
- 都能處理“壅塞效應”
- 都是異步加載資本,但實行遞次不一樣
- 假如劇本之間沒有依靠關聯,就運用async屬性,假如劇本之間有依靠關聯,就運用defer屬性
Load事宜
- 瀏覽器已加載了一切依靠的資本,包含圖片樣式表等
- 能夠在load事宜觸發時取得圖片的大小
- 綁定到window,
window.addEventListener("load",ready);
DOMContentLoaded事宜
- 瀏覽器已完整加載了HTML,DOM樹已構建終了
- JS能夠接見一切DOM節點,然則圖片和樣式表等外部資本能夠沒有下載終了
- 綁定到document:
document.addEventListener("DOMContentLoaded",ready);
涉及到async的知識點
- 異步async劇本肯定會在頁面load事宜之前實行
- 異步async劇本能夠會在DOMContentLoaded事宜觸發之前或許以後實行
動態天生劇本
['a.js', 'b.js'].forEach(src => {
const script = document.createElement('script');
script.src = src;
script.async = false;
document.head.appendChild(script);
});
- 不會壅塞頁面襯着
- async設置為false能夠保證b.js在a.js背面實行
- 在這段代碼背面加載的劇本文件,會等在b.ja實行完成后再實行
相干知識點總結
- 包含在
<script>
標籤內部的JavaScript代碼,將被從上到下一次剖析 - 不管以哪一種體式格局嵌入代碼,只需不存在defer和async屬性,瀏覽器都邑根據
<Script>
標籤在頁面中湧現的先後遞次對它們舉行剖析 - 加載外部劇本的長處:可維護性、可緩存、順應將來
-
<script>
放在底部的緣由1、防止“壅塞效應”。2、防止,在DOM構造天生之前挪用DOM節點,而發生毛病