細談在HTML中運用JavaScript

2023年5月2日 92次阅读 来源: pitaojin

媒介

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屬性的運轉流程：

  1. 瀏覽器最先剖析HTML網頁
  2. 剖析過程當中，發明帶有defer屬性的<script>元素
  3. 瀏覽器繼承往下剖析HTML網頁，同時并行下載<script>元素加載的外部劇本
  4. 瀏覽器完成剖析HTML網頁，此時再回過甚實行已下載完成的劇本

須要注重：

  • 異步加載資本
  • 根據遞次實行劇本
  • 運用defer加載的外部劇本不應該運用document.write要領

async屬性

<script src="a.js" async></script>
<script src="b.js" async></script>

async屬性的運轉流程：

  1. 瀏覽器最先剖析HTML網頁
  2. 剖析過程當中，發明帶有async屬性的<script>標籤
  3. 瀏覽器繼承往下剖析HTML網頁，同時并行下載<script>標籤中的外部劇本
  4. 劇本下載完成，瀏覽器停息剖析HTML網頁，最先實行下載的劇本
  5. 劇本實行終了，瀏覽器恢復剖析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實行完成后再實行

相干知識點總結

  1. 包含在<script>標籤內部的JavaScript代碼，將被從上到下一次剖析
  2. 不管以哪一種體式格局嵌入代碼，只需不存在defer和async屬性，瀏覽器都邑根據<Script>標籤在頁面中湧現的先後遞次對它們舉行剖析
  3. 加載外部劇本的長處：可維護性、可緩存、順應將來
  4. <script>放在底部的緣由1、防止“壅塞效應”。2、防止，在DOM構造天生之前挪用DOM節點，而發生毛病
    原文作者：pitaojin
    原文地址: https://segmentfault.com/a/1190000015019614
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞