點擊下載
本文文檔

當前位置：首頁 - 科技 - 知識百科 - 正文

JavaScript的理解與用法

來源：懂視網責編：小采時間：2020-11-27 20:20:12

JavaScript的理解與用法

JavaScript的理解與用法:（1）什么是JavaScriptJavaScript是一種專為與網頁交互而設計的腳本語言，由三個部分組成：（1）.ECMAScript ：提供核心語言功能。（2）.文檔對象模型（DOM）：提供訪問和操作網頁內容的方法與接口（3）.瀏覽器對象模型（BOM）：提供與瀏覽器的交互的方法

推薦度：

點擊下載本文 文檔為doc格式

導讀JavaScript的理解與用法:（1）什么是JavaScriptJavaScript是一種專為與網頁交互而設計的腳本語言，由三個部分組成：（1）.ECMAScript ：提供核心語言功能。（2）.文檔對象模型（DOM）：提供訪問和操作網頁內容的方法與接口（3）.瀏覽器對象模型（BOM）：提供與瀏覽器的交互的方法

（1）什么是JavaScript?

JavaScript是一種專為與網頁交互而設計的腳本語言，由三個部分組成：（1）.ECMAScript ：提供核心語言功能。（2）.文檔對象模型（DOM）：提供訪問和操作網頁內容的方法與接口（3）.瀏覽器對象模型（BOM）：提供與瀏覽器的交互的方法與接口

(2)HTML 代碼執行情況

(現代瀏覽器原理)

　　作者：錢多多
鏈接：
來源：知乎
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

1. html下載與執行是同步的嗎?

結論：分情況。

html執行這個描述不準確，所謂的執行包括parseHTML、layout、paint幾個階段。download、parseHTML/parseCSS/executeJS、layout、paint都在不同進程中。

parseHTML/parseCSS并行，共同完成后layout生成渲染樹，進而paint渲染。執行JS會重新回到layout階段。

A.如果網速足夠快，內容很快傳送完畢，那parse+layout+paint會靠后執行。

B.如果弱網環境下，針對網速很慢的情況現代瀏覽器是有優化的，會嘗試提前渲染已收到的內容，也就造成了pc上會看到頁面一塊一塊展現的狀況。

C.chunk原理類似，每個chunk斷點都有可能觸發解析渲染。

D.有些瀏覽器還會做首屏優化，下載過程中不斷嘗試parse+layout，如果layout計算出內容超過首屏就paint這些內容，讓用戶優先看到首屏內容。

大部分進程因為是并行的，會相對復雜，分情況討論意義不大，不如從原理上理解。

2. css文件的下載和渲染是同步的嗎? 還是先下載完, 再渲染?

不確定下載過程中是否同步做詞法分析parseCss，但是可能性很大，畢竟是種無損失的優化方案，

但是最終肯定需要下載完再layout生成渲染樹，進而渲染。

3. css文件的下載&執行和 html文件的下載&執行同步嗎?

并行的。但是需要注意一些限制，比如一個域名下最大并發6個請求，再多就得串行。

4. 圖形的加載和 html文件的下載/執行同步嗎, 音視頻呢, 別的資源呢?

同上。

5. js文件的下載&執行和html文件的下載&執行同步還是異步?如果帶有async和defer呢?

下載，但不executeJS

6. 有沒有可能出現html文件/圖片/css文件/js文件同時下載的情況?

常態。

7. 有沒有可能出現html/css文件/js文件同時執行的情況?

你讀了上面文章就能理解了：html parse和css parse是并行的，兩者完成后才會layout、paint，新的css掛載會延遲layout、paint。js parse會阻塞html parse ，所以后面的layout、paint一定不會同時執行。

（3）.在html 中使用JavaScript

3.1<script>元素

1. async：異步加載屬性，可選。只對外部腳本有效，表示立即下載腳本，但不妨礙頁面

的其他操作。

2. charset：字符編碼屬性，可選。默認是utf-8編碼，主要表示通過src屬性指定的

代碼的字符集，大多瀏覽器會忽略它的值，所以不必使用。

3.defer：腳本延遲屬性，可選。用來延遲腳本的執行時間，直到HTML文檔已經全

部被解析和顯示之后再執行，只對外部腳本文件有效。

4.language：腳本類型屬性，不是標準組成的一部分，已廢棄。大多數瀏覽器

會忽略這個屬性，已沒必要使用。

5.src：鏈接外部文件屬性，可選。表示包含要執行代碼的外部文件。注意，

一旦設置src屬性，script元素中編寫的JavaScript代碼就可能無效。

6. type：腳本類型屬性，必須。默認值為text/javascript可以看成language

的替代屬性，表示編寫代碼所使用的內容類型（也叫mime類型）。

注意事項：代碼中的任何地方都不要出現</script>

3.2 標簽位置
<script>放置位置有兩個：（1）<head>中（2）<body>中（1）<head>：一般慣例放在<head>中（2）<body>：放在<head>中時瀏覽器必須將js程序下載解析完畢后才會呈現頁面內容，造成一定的延時（遇到<body> 才顯示頁面內容）。故而web程序將js代碼放入<body>中 3.3 延遲腳本defer 標簽：加入defer 該js程序會在整個頁面都下載解析完成后才開始執行注意：< 符號在xhtml 中為< 3.4文檔模式建議使用：<!DOCTYPE html> 3.5 <noscript>元素

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
</head>
<body>
<noscript>
 <p>本瀏覽器不支持script</p>
</noscript>
</body>
</html>
觸發條件：1.瀏覽器不支持腳本
　　　　　　2.瀏覽器支持腳本，但是腳本被禁用

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

JavaScript的理解與用法

推薦度：

點擊下載本文 文檔為doc格式

標簽：使用用法 js

熱門焦點

JavaScript的理解與用法

JavaScript的理解與用法

JavaScript的理解與用法

最新推薦

猜你喜歡

熱門推薦