整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
來了~歡迎轉發、收藏，記得點個贊唄。^_^
無論當前 JavaScript 代碼是內嵌還是在外鏈文件中，頁面的下載和渲染都必須停下來等待腳本執行完成。JavaScript 執行過程耗時越久，瀏覽器等待響應用戶輸入的時間就越長。瀏覽器在下載和執行腳本時出現阻塞的原因在于，腳本可能會改變頁面或 JavaScript 的命名空間，它們對后面頁面內容造成影響。一個典型的例子就是在頁面中使用document.write()。例如清單 1。
清單 1 JavaScript 代碼內嵌示例
當瀏覽器遇到<script>標簽時，當前 HTML 頁面無從獲知 JavaScript 是否會向<p> 標簽添加內容，或引入其他元素，或甚至移除該標簽。因此，這時瀏覽器會停止處理頁面，先執行 JavaScript代碼，然后再繼續解析和渲染頁面。同樣的情況也發生在使用 src 屬性加載 JavaScript的過程中，瀏覽器必須先花時間下載外鏈文件中的代碼，然后解析并執行它。在這個過程中，頁面渲染和用戶交互完全被阻塞了。
HTML 4 規范指出 <script> 標簽可以放在 HTML 文檔的<head>或<body>中，并允許出現多次。Web 開發人員一般習慣在 <head> 中加載外鏈的 JavaScript，接著用 <link> 標簽用來加載外鏈的 CSS 文件或者其他頁面信息。例如清單 2。
清單 2 低效率腳本位置示例
然而這種常規的做法卻隱藏著嚴重的性能問題。在清單 2 的示例中，當瀏覽器解析到 <script> 標簽（第 4 行）時，瀏覽器會停止解析其后的內容，而優先下載腳本文件，并執行其中的代碼，這意味著，其后的 styles.css 樣式文件和<body>標簽都無法被加載，由于<body>標簽無法被加載，那么頁面自然就無法渲染了。因此在該 JavaScript 代碼完全執行完之前，頁面都是一片空白。圖 1 描述了頁面加載過程中腳本和樣式文件的下載過程。
圖 1 JavaScript 文件的加載和執行阻塞其他文件的下載
我們可以發現一個有趣的現象：第一個 JavaScript 文件開始下載，與此同時阻塞了頁面其他文件的下載。此外，從 script1.js 下載完成到 script2.js 開始下載前存在一個延時，這段時間正好是 script1.js 文件的執行過程。每個文件必須等到前一個文件下載并執行完成才會開始下載。在這些文件逐個下載過程中，用戶看到的是一片空白的頁面。
從 IE 8、Firefox 3.5、Safari 4 和 Chrome 2 開始都允許并行下載 JavaScript 文件。這是個好消息，因為<script>標簽在下載外部資源時不會阻塞其他<script>標簽。遺憾的是，JavaScript 下載過程仍然會阻塞其他資源的下載，比如樣式文件和圖片。盡管腳本的下載過程不會互相影響，但頁面仍然必須等待所有 JavaScript 代碼下載并執行完成才能繼續。因此，盡管最新的瀏覽器通過允許并行下載提高了性能，但問題尚未完全解決，腳本阻塞仍然是一個問題。
由于腳本會阻塞頁面其他資源的下載，因此推薦將所有<script>標簽盡可能放到<body>標簽的底部，以盡量減少對整個頁面下載的影響。例如清單 3
清單 3 推薦的代碼放置位置示例
這段代碼展示了在 HTML 文檔中放置<script>標簽的推薦位置。盡管腳本下載會阻塞另一個腳本，但是頁面的大部分內容都已經下載完成并顯示給了用戶，因此頁面下載不會顯得太慢。
這是優化 JavaScript 的首要規則：將腳本放在底部。
由于每個<script>標簽初始下載時都會阻塞頁面渲染，所以減少頁面包含的<script>標簽數量有助于改善這一情況。這不僅針對外鏈腳本，內嵌腳本的數量同樣也要限制。瀏覽器在解析 HTML 頁面的過程中每遇到一個<script>標簽，都會因執行腳本而導致一定的延時，因此最小化延遲時間將會明顯改善頁面的總體性能。
這個問題在處理外鏈 JavaScript 文件時略有不同。考慮到 HTTP 請求會帶來額外的性能開銷，因此下載單個 100Kb 的文件將比下載 5 個 20Kb 的文件更快。也就是說，減少頁面中外鏈腳本的數量將會改善性能。
通常一個大型網站或應用需要依賴數個 JavaScript 文件。您可以把多個文件合并成一個，這樣只需要引用一個<script>標簽，就可以減少性能消耗。文件合并的工作可通過離線的打包工具或者一些實時的在線服務來實現。
需要特別提醒的是，把一段內嵌腳本放在引用外鏈樣式表的<link>之后會導致頁面阻塞去等待樣式表的下載。這樣做是為了確保內嵌腳本在執行時能獲得最精確的樣式信息。因此，建議不要把內嵌腳本緊跟在<link>標簽后面。
減少 JavaScript 文件大小并限制 HTTP 請求數在功能豐富的 Web 應用或大型網站上并不總是可行。Web 應用的功能越豐富，所需要的 JavaScript 代碼就越多，盡管下載單個較大的 JavaScript 文件只產生一次 HTTP 請求，卻會鎖死瀏覽器的一大段時間。為避免這種情況，需要通過一些特定的技術向頁面中逐步加載 JavaScript 文件，這樣做在某種程度上來說不會阻塞瀏覽器。
無阻塞腳本的秘訣在于，在頁面加載完成后才加載 JavaScript 代碼。這就意味著在 window 對象的 onload事件觸發后再下載腳本。有多種方式可以實現這一效果。
HTML 4 為<script>標簽定義了一個擴展屬性：defer。Defer 屬性指明本元素所含的腳本不會修改 DOM，因此代碼能安全地延遲執行。defer 屬性只被 IE 4 和 Firefox 3.5 更高版本的瀏覽器所支持，所以它不是一個理想的跨瀏覽器解決方案。在其他瀏覽器中，defer 屬性會被直接忽略，因此<script>標簽會以默認的方式處理，也就是說會造成阻塞。然而，如果您的目標瀏覽器支持的話，這仍然是個有用的解決方案。清單 4 是一個例子
清單 4 defer 屬性使用方法示例
<script type="text/javascript" src="script1.js" defer></script>
帶有 defer 屬性的<script>標簽可以放置在文檔的任何位置。對應的 JavaScript 文件將在頁面解析到<script>標簽時開始下載，但不會執行，直到 DOM 加載完成，即onload事件觸發前才會被執行。當一個帶有 defer 屬性的 JavaScript 文件下載時，它不會阻塞瀏覽器的其他進程，因此這類文件可以與其他資源文件一起并行下載。
任何帶有 defer 屬性的<script>元素在 DOM 完成加載之前都不會被執行，無論內嵌或者是外鏈腳本都是如此。清單 5 的例子展示了defer屬性如何影響腳本行為：
清單 5 defer 屬性對腳本行為的影響
這段代碼在頁面處理過程中彈出三次對話框。不支持 defer 屬性的瀏覽器的彈出順序是："defer"、"script"、"load"。而在支持 defer 屬性的瀏覽器上，彈出的順序則是："script"、"defer"、"load"。請注意，帶有 defer 屬性的<script>元素不是跟在第二個后面執行，而是在 onload 事件被觸發前被調用。
如果您的目標瀏覽器只包括 Internet Explorer 和 Firefox 3.5，那么 defer 腳本確實有用。如果您需要支持跨領域的多種瀏覽器，那么還有更一致的實現方式。
HTML 5 為<script>標簽定義了一個新的擴展屬性：async。它的作用和 defer 一樣，能夠異步地加載和執行腳本，不因為加載腳本而阻塞頁面的加載。但是有一點需要注意，在有 async 的情況下，JavaScript 腳本一旦下載好了就會執行，所以很有可能不是按照原本的順序來執行的。如果 JavaScript 腳本前后有依賴性，使用 async 就很有可能出現錯誤。
文檔對象模型（DOM）允許您使用 JavaScript 動態創建 HTML 的幾乎全部文檔內容。<script>元素與頁面其他元素一樣，可以非常容易地通過標準 DOM 函數創建：
清單 6 通過標準 DOM 函數創建<script>元素
新的<script>元素加載 script1.js 源文件。此文件當元素添加到頁面之后立刻開始下載。此技術的重點在于：無論在何處啟動下載，文件的下載和運行都不會阻塞其他頁面處理過程。您甚至可以將這些代碼放在<head>部分而不會對其余部分的頁面代碼造成影響（除了用于下載文件的 HTTP 連接）。
當文件使用動態腳本節點下載時，返回的代碼通常立即執行（除了 Firefox 和 Opera，他們將等待此前的所有動態腳本節點執行完畢）。當腳本是"自運行"類型時，這一機制運行正常，但是如果腳本只包含供頁面其他腳本調用調用的接口，則會帶來問題。這種情況下，您需要跟蹤腳本下載完成并是否準備妥善。可以使用動態 <script> 節點發出事件得到相關信息。
Firefox、Opera, Chorme 和 Safari 3+會在<script>節點接收完成之后發出一個 onload 事件。您可以監聽這一事件，以得到腳本準備好的通知：
清單 7 通過監聽 onload 事件加載 JavaScript 腳本
Internet Explorer 支持另一種實現方式，它發出一個 readystatechange 事件。<script>元素有一個 readyState 屬性，它的值隨著下載外部文件的過程而改變。readyState 有五種取值：
· "uninitialized"：默認狀態
· "loading"：下載開始
· "loaded"：下載完成
· "interactive"：下載完成但尚不可用
· "complete"：所有數據已經準備好
微軟文檔上說，在<script>元素的生命周期中，readyState 的這些取值不一定全部出現，但并沒有指出哪些取值總會被用到。實踐中，我們最感興趣的是"loaded"和"complete"狀態。Internet Explorer 對這兩個 readyState 值所表示的最終狀態并不一致，有時<script>元素會得到"loader"卻從不出現"complete"，但另外一些情況下出現"complete"而用不到"loaded"。最安全的辦法就是在 readystatechange 事件中檢查這兩種狀態，并且當其中一種狀態出現時，刪除 readystatechange 事件句柄（保證事件不會被處理兩次）：
清單 8 通過檢查 readyState 狀態加載 JavaScript 腳本
大多數情況下，您希望調用一個函數就可以實現 JavaScript 文件的動態加載。下面的函數封裝了標準實現和 IE 實現所需的功能：
清單 9 通過函數進行封裝
此函數接收兩個參數：JavaScript 文件的 URL，和一個當 JavaScript 接收完成時觸發的回調函數。屬性檢查用于決定監視哪種事件。最后一步，設置 src 屬性，并將<script>元素添加至頁面。此 loadScript() 函數使用方法如下：
清單 10 loadScript()函數使用方法
您可以在頁面中動態加載很多 JavaScript 文件，但要注意，瀏覽器不保證文件加載的順序。所有主流瀏覽器之中，只有 Firefox 和 Opera 保證腳本按照您指定的順序執行。其他瀏覽器將按照服務器返回它們的次序下載并運行不同的代碼文件。您可以將下載操作串聯在一起以保證他們的次序，如下：
清單 11 通過 loadScript()函數加載多個 JavaScript 腳本
此代碼等待 script1.js 可用之后才開始加載 script2.js，等 script2.js 可用之后才開始加載 script3.js。雖然此方法可行，但如果要下載和執行的文件很多，還是有些麻煩。如果多個文件的次序十分重要，更好的辦法是將這些文件按照正確的次序連接成一個文件。獨立文件可以一次性下載所有代碼（由于這是異步進行的，使用一個大文件并沒有什么損失）。
動態腳本加載是非阻塞 JavaScript 下載中最常用的模式，因為它可以跨瀏覽器，而且簡單易用。
此技術首先創建一個 XHR 對象，然后下載 JavaScript 文件，接著用一個動態 <script> 元素將 JavaScript 代碼注入頁面。清單 12 是一個簡單的例子：
清單 12 通過 XHR 對象加載 JavaScript 腳本
此代碼向服務器發送一個獲取 script1.js 文件的 GET 請求。onreadystatechange 事件處理函數檢查 readyState 是不是 4，然后檢查 HTTP 狀態碼是不是有效（2XX 表示有效的回應，304 表示一個緩存響應）。如果收到了一個有效的響應，那么就創建一個新的<script>元素，將它的文本屬性設置為從服務器接收到的 responseText 字符串。這樣做實際上會創建一個帶有內聯代碼的<script>元素。一旦新<script>元素被添加到文檔，代碼將被執行，并準備使用。
這種方法的主要優點是，您可以下載不立即執行的 JavaScript 代碼。由于代碼返回在<script>標簽之外（換句話說不受<script>標簽約束），它下載后不會自動執行，這使得您可以推遲執行，直到一切都準備好了。另一個優點是，同樣的代碼在所有現代瀏覽器中都不會引發異常。
此方法最主要的限制是：JavaScript 文件必須與頁面放置在同一個域內，不能從 CDN 下載（CDN 指"內容投遞網絡（Content Delivery Network）"，所以大型網頁通常不采用 XHR 腳本注入技術。
一般而言，減少 JavaScript 對性能的影響有以下幾種方法：
· A.將所有的<script>標簽放到頁面底部，也就是</body>閉合標簽之前，這能確保在腳本執行前頁面已經完成了渲染。
· B.盡可能地合并腳本。頁面中的<script>標簽越少，加載也就越快，響應也越迅速。無論是外鏈腳本還是內嵌腳本都是如此。
· C.采用無阻塞下載 JavaScript 腳本的方法：
· a-使用<script>標簽的 defer 屬性（僅適用于 IE 和 Firefox 3.5 以上版本）；
· b-使用動態創建的<script>元素來下載并執行代碼；
· c-使用 XHR 對象下載 JavaScript 代碼并注入頁面中。
通過以上策略，可以在很大程度上提高那些需要使用大量 JavaScript 的 Web 網站和應用的實際性能。
看完了，別忘了收藏、轉發、點個贊，更別忘了要關注本號！^_^
html概述
HTML是 HyperText Mark-up Language 的首字母簡寫，意思是超文本標記語言，超文本指的是超鏈接，標記指的是標簽，是一種用來制作網頁的語言，這種語言由一個個的標簽組成，用這種語言制作的文件保存的是一個文本文件，文件的擴展名為html或者htm，一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，可以用文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標簽描述內容將文件渲染成網頁，顯示的網頁可以從一個網頁鏈接跳轉到另外一個網頁。
html基本結構
一個html的基本結構如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>網頁標題</title> </head> <body> 網頁顯示內容 </body> </html>
第一行是文檔聲明，第二行“”標簽和最后一行“”定義html文檔的整體，“”標簽中的‘lang=“en”’定義網頁的語言為英文，定義成中文是’lang=“zh-CN”’,不定義也沒什么影響，它一般作為分析統計用。 “”標簽和“”標簽是它的第一層子元素，“”標簽里面負責對網頁進行一些設置以及定義標題，設置包括定義網頁的編碼格式，外鏈css樣式文件和javascript文件等，設置的內容不會顯示在網頁上，標題的內容會顯示在標題欄，“”內編寫網頁上顯示的內容。
HTML文檔類型
目前常用的兩種文檔類型是xhtml 1.0和html5
xhtml 1.0
xhtml 1.0 是html5之前的一個常用的版本，目前許多網站仍然使用此版本。
此版本文檔用sublime text創建方法： html:xt + tab
文檔示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title> xhtml 1.0 文檔類型 </title> </head> <body> </body> </html>
html5
pc端可以使用xhtml 1.0，也可以使用html5，html5是向下兼容的
此版本文檔用sublime text創建方法： html:5 + tab 或者 ! + tab
文檔示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> html5文檔類型 </title> </head> <body> </body> </html>
兩種文檔的區別
1、文檔聲明和編碼聲明
2、html5新增了標簽元素以及元素屬性
html注釋：
html文檔代碼中可以插入注釋，注釋是對代碼的說明和解釋，注釋的內容不會顯示在頁面上，html代碼中插入注釋的方法是：
<!-- 這是一段注釋 -->
通過
、
、
、
、
,標簽可以在網頁上定義6種級別的標題。6種級別的標題表示文檔的6級目錄層級關系，比如說：
，再其次是
，以此類推。搜索引擎會使用標題將網頁的結構和內容編制索引，所以網頁上使用標題是很重要的。
<h1>這是一級標題</h1> <h2>這是二級標題</h2> <h3>這是三級標題</h3>
html段落標簽
標簽定義一個文本段落，一個段落含有默認的上下間距，段落之間會用這種默認間距隔開，代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>段落</title> </head> <body> <p>HTML是 HyperText Mark-up Language 的首字母簡寫，意思是超文本標記語言，超 文本指的是超鏈接，標記指的是標簽，是一種用來制作網頁的語言，這種語言由一個個的 標簽組成，用這種語言制作的文件保存的是一個文本文件，文件的擴展名為html或者htm。 </p> <p>一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，可以用文本的方 式編輯它，如果用瀏覽器打開，瀏覽器會按照標簽描述內容將文件渲染成網頁，顯示的網 頁可以從一個網頁鏈接跳轉到另外一個網頁。</p> </body> </html>
html換行標簽
代碼中成段的文字，直接在代碼中回車換行，在渲染成網頁時候不認這種換行，如果真想換行，可以在代碼的段落中插入
來強制換行，代碼如下：
<p> 一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，可以用<br /> 文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標簽描述內容將文件<br /> 渲染成網頁，顯示的網頁可以從一個網頁鏈接跳轉到另外一個網頁。 </p>
html字符實體
代碼中成段的文字，如果文字間想空多個空格，在代碼中空多個空格，在渲染成網頁時只會顯示一個空格，如果想顯示多個空格，可以使用空格的字符實體,代碼如下：
<!-- 在段落前想縮進兩個文字的空格，使用空格的字符實體： --> <p> 一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，可以用<br /> 文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標簽描述內容將文件<br /> 渲染成網頁，顯示的網頁可以從一個網頁鏈接跳轉到另外一個網頁。</p>
在網頁上顯示 “<” 和 “>” 會誤認為是標簽，想在網頁上顯示“<”和“>”可以使用它們的字符實體，比如：
<!-- “<” 和 “>” 的字符實體為 < 和 > --> <p> 3 < 5 <br> 10 > 5 </p>
html塊標簽
1、
標簽 塊元素，表示一塊內容，沒有具體的語義。
2、 標簽 行內元素，表示一行中的一小段內容，沒有具體的語義。
含樣式和語義的標簽
1、 標簽 行內元素，表示語氣中的強調詞
2、 標簽 行內元素，表示專業詞匯
3、 標簽 行內元素，表示文檔中的關鍵字或者產品名
4、 標簽 行內元素，表示非常重要的內容
語義化的標簽
語義化的標簽，就是在布局的時候多使用有語義的標簽，搜索引擎在爬網的時候能認識這些標簽，理解文檔的結構，方便網站的收錄。比如：h1標簽是表示標題，p標簽是表示段落，ul、li標簽是表示列表，a標簽表示鏈接，dl、dt、dd表示定義列表等，語義化的標簽不多。
html圖像標簽
標簽可以在網頁上插入一張圖片，它是獨立使用的標簽，它的常用屬性有：
src屬性 定義圖片的引用地址
alt屬性 定義圖片加載失敗時顯示的文字，搜索引擎會使用這個文字收錄圖片、盲人讀屏軟件會讀取這個文字讓盲人識別圖片，所以此屬性非常重要。
<img src="images/pic.jpg" alt="產品圖片" />
絕對路徑和相對路徑
像網頁上插入圖片這種外部文件，需要定義文件的引用地址，引用外部文件還包括引用外部樣式表，javascript等等，引用地址分為絕對地址和相對地址。
絕對地址：相對于磁盤的位置去定位文件的地址
相對地址：相對于引用文件本身去定位被引用的文件地址
絕對地址在整體文件遷移時會因為磁盤和頂層目錄的改變而找不到文件，相對路徑就沒有這個問題。相對路徑的定義技巧：
“ ./ ” 表示當前文件所在目錄下，比如：“./pic.jpg” 表示當前目錄下的pic.jpg的圖片，這個使用時可以省略。
“ …/ ” 表示當前文件所在目錄下的上一級目錄，比如：“…/images/pic.jpg” 表示當前目錄下的上一級目錄下的images文件夾中的pic.jpg的圖片。
標簽可以在網頁上定義一個鏈接地址，它的常用屬性有：
href屬性 定義跳轉的地址
title屬性 定義鼠標懸停時彈出的提示文字框
target屬性 定義鏈接窗口打開的位置
target="_self" 缺省值，新頁面替換原來的頁面，在原來位置打開
target="_blank" 新頁面會在新開的一個瀏覽器窗口打開
什么是JavaScript
web開發領域一種功能強大的前端編程語言，用于開發交互式的web頁面。
Web頁面是由多個網頁組成的，網頁制作涉及的技術：HTML、CSS和JavaScript。
JavaScript的歷史
時間：1995年。
人物： Brendan Eich（布蘭登·艾奇）。
地點： Netscape（網景）公司，現在的Mozilla。
事件：在網景瀏覽器上首次設計出了JavaScript。
名稱： Netscape最初將這個腳本語言命名為LiveScript。
后來Netscape與Sun合作，因當時Java語言備受關注，Netscape為了營銷將其改JavaScript（其實跟JAVA語言沒任何關系）。
缺點：
JS一度遭人詬病：漂浮廣告，彈窗，竊取用戶網站信息，傳播病毒
重新流行：
當AJAX興起，瀏覽器可以和服務器異步交互，JS體驗得到極大提升，再度火熱，已不局限于瀏覽器前端使用了（Node.js使得開發人員可以服務器端編寫JS代碼）
JavaScript的特點
簡單地說就是一條條的文本命令，按照程序流程執行。
如常見的腳本語言：JavaScript、VBScript、Perl、PHP、Python；
而常見非腳本語言：C、C++、Java等。
腳本語言與非腳本語言的區別：
非腳本語言一般需要編譯、鏈接，生成獨立的可執行文件后才能運行。
腳本語言依賴于解釋器，只在被調用時自動進行解釋或編譯。
JavaScript語言不依賴操作系統，僅需要瀏覽器的支持。幾乎所有的瀏覽器，包括手機等各類移動設備都支持。
面向對象是軟件開發中的一種重要的編程思想，其優點非常多。
基于面向對象思想誕生了許多優秀的庫和框架，可以使JavaScript開發變得快捷和高效，降低了開發成本。舉例：除了經典的JavaScript庫，又誕生了Bootstrap、AngularJS、Vue.js、Backbone.js、React、Wwebpack等框架和工具。
JavaScript與ECMAScript的關系
ECMAScript指的是Ecma（歐洲計算機制造協會）發布的瀏覽器腳本語言的標準。
JavaScript是網景公司在Navigator 2.0瀏覽器中內置的腳本語言。
它們是實現與標準的關系。
瀏覽器--用于執行和調試JS代碼
代碼編輯器--開發JS工具
常用的文本編輯器Notepad++即可開發js程序；
這里推薦用IDE（集成開發環境）：HBuilder X，集開發和運行于一體（去官網下載APP開發版）。
案例：第一個JS程序（JS腳本代碼嵌入到宿主語言html中）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>網頁標題</title>
<script>
alert("第一個JavaScript程序");
</script>
</head>
</html>JavaScript引入方式
<script type="text/javascript">
JavaScript語句;
</script>JavaScript代碼保存到一個單獨的文件中，通常使用“js”作為文件的擴展名，然后使用<script>標簽的src屬性引入文件中：
HTML文件：
……
<script src="js/test.js"></script>
……
js/test.js文件：
……
alert('Hello');
……相比嵌入式，外鏈式的優勢：
將JavaScript代碼作為HTML標簽的屬性值使用。
e.g:
<a href="javascript：alert('Hello');">test</a>注：
存在的問題：引入JavaScript代碼時，頁面的下載和渲染都會暫停，等待腳本執行完成后才會繼續（內嵌式或外鏈式）。
解決的辦法1：對于不需要提前執行的代碼，將<script>標簽放在<body>標簽的底部，可以減少對整個頁面下載的影響。
解決的辦法2：可用HTML5為<script>標簽新增的兩個可選屬性：async和defer。
// 方式一：async
<script src="http://js.test/file.js" async></script>
// 方式二：defer
<script src="http://js.test/file.js" defer></script>
async異步加載，即先下載文件，不阻塞其他代碼執行，下載完成后再執行。
defer用于延后執行，即先下載文件，直到網頁加載完成后再執行。
共同點：即使文件下載失敗，也不會阻塞后面的JavaScript代碼執行。常用輸出語句
alert()：頁面彈出警告框
console.log()：瀏覽器控制臺日志輸出，不會顯示到html頁面
document.write()：html頁面輸出
注釋
數據與運算
函數
封裝一段功能單一的代碼實現復用
自定義函數
function sum(a, b) {
var c=a + b;
return c;
}
alert(sum(11,22));對象
對象用途：面向對象的編程
常用內置對象：
window， document， String
事件
指可以被JS偵測到的交互行為：在網頁中滑動，點擊鼠標，滾動屏幕。敲擊鍵盤等
事件綁定JS代碼，實現網頁交互效果：
<input type="button" onclick="alert("hello");" value="test">
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
