搜尋
首頁web前端js教程JavaScript的理解與用法

JavaScript的理解與用法

Jun 26, 2017 am 11:25 AM
javascriptjs深入理解

(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>元素<strong></script>

<script>元素的六個屬性:<p>  1. async:非同步載入屬性,可選。只對外部腳本有效,表示立即下載腳本,但不妨礙頁面<p>           的其他操作。 <p>  2. charset:字元編碼屬性,可選。預設是utf-8編碼,主要表示透過src屬性指定的<p>            代碼的字元集,而大多數瀏覽器會忽略它的值,所以不必使用。 <p>  3.defer:腳本延遲屬性,可選。用來延遲腳本的執行時間,直到HTML文件已經全<p>         部在解析及顯示後執行,且只對外部腳本文件有效。 <p>  4.language:腳本類型屬性,不是標準組成的一部分,<p>已廢棄<span style="background-color: #ff0000;">。大多數瀏覽器              則會忽略此屬性,且已沒必要使用。 <p>  5.src:連結外部檔案屬性,可選。表示包含要執行程式碼的外部檔案。請注意,<p>        一旦設定src屬性,script元素中所寫的JavaScript程式碼就可能無效。 <p>  6. type:腳本類型屬性,必須。預設值為text/javascript可以看成language<p>          的替代屬性,以表示編寫程式碼所使用的內容類型(也稱為mime類型)。 <p><p>注意事項:程式碼中的任何地方都不要出現</script>
#3.2 標籤位置
<script>放置位置有兩個:(1)<head>中(2)<body>中</script>
(1):一般慣例放在中
#(2):放在中時瀏覽器必須將js程式下載解析完畢後才會呈現頁面內容,造成一定的延遲(遇 才顯示頁面內容)。故而web程式將js程式碼放入中
 
#3.3 延遲腳本
##defer 標籤:加入defer 這個js程式會在整個頁面都下載解析完成後才開始執行
 
#注意:
#3.4文件模式
 
#建議使用:
 
3.5
 
nbsp;html>


    <meta>
    <title></title>


<noscript>
    <p>本浏览器不支持script</p>
</noscript>


触发条件:1.浏览器不支持脚本
      2.浏览器支持脚本,但是脚本被禁用
 

以上是JavaScript的理解與用法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
JavaScript在行動中:現實世界中的示例和項目JavaScript在行動中:現實世界中的示例和項目Apr 19, 2025 am 12:13 AM

JavaScript在現實世界中的應用包括前端和後端開發。 1)通過構建TODO列表應用展示前端應用,涉及DOM操作和事件處理。 2)通過Node.js和Express構建RESTfulAPI展示後端應用。

JavaScript和Web:核心功能和用例JavaScript和Web:核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互;2)在用戶提交數據前進行客戶端驗證,提高用戶體驗;3)通過AJAX技術實現與服務器的無刷新通信。

了解JavaScript引擎:實施詳細信息了解JavaScript引擎:實施詳細信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎內部工作原理對開發者重要,因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段;2)執行過程中,引擎會進行動態優化,如內聯緩存和隱藏類;3)最佳實踐包括避免全局變量、優化循環、使用const和let,以及避免過度使用閉包。

Python vs. JavaScript:學習曲線和易用性Python vs. JavaScript:學習曲線和易用性Apr 16, 2025 am 12:12 AM

Python更適合初學者,學習曲線平緩,語法簡潔;JavaScript適合前端開發,學習曲線較陡,語法靈活。 1.Python語法直觀,適用於數據科學和後端開發。 2.JavaScript靈活,廣泛用於前端和服務器端編程。

Python vs. JavaScript:社區,圖書館和資源Python vs. JavaScript:社區,圖書館和資源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好,適合初學者,但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大,JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富,但Python適合從官方文檔開始,JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。

從C/C到JavaScript:所有工作方式從C/C到JavaScript:所有工作方式Apr 14, 2025 am 12:05 AM

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1)C/C 是靜態類型語言,需手動管理內存,而JavaScript是動態類型,垃圾回收自動處理。 2)C/C 需編譯成機器碼,JavaScript則為解釋型語言。 3)JavaScript引入閉包、原型鍊和Promise等概念,增強了靈活性和異步編程能力。

JavaScript引擎:比較實施JavaScript引擎:比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時,效果會有所不同,因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析:將源碼轉換為詞法單元。 2.語法分析:生成抽象語法樹。 3.優化和編譯:通過JIT編譯器生成機器碼。 4.執行:運行機器碼。 V8引擎通過即時編譯和隱藏類優化,SpiderMonkey使用類型推斷系統,導致在相同代碼上的性能表現不同。

超越瀏覽器:現實世界中的JavaScript超越瀏覽器:現實世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制:1.通過Node.js實現服務器端編程,適用於高並發請求處理。 2.通過ReactNative進行移動應用開發,支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制,適用於硬件交互。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )專業的PHP整合開發工具

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

WebStorm Mac版

WebStorm Mac版

好用的JavaScript開發工具

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。