摘要：沒有返回值，不進(jìn)行跳轉(zhuǎn)點(diǎn)擊瀏覽器的地址欄也可以執(zhí)行協(xié)議。瀏覽器的組成瀏覽器的核心是兩部分渲染引擎和解釋器又稱引擎。

1.代碼嵌入網(wǎng)頁的方法
1.1script 元素嵌入代碼
1.2script 元素加載外部腳本
1.3事件屬性
1.4URL 協(xié)議
2.script 元素
2.1工作原理
2.2defer 屬性 同步下載生成dom后執(zhí)行按順序
2.3async 屬性 同步下載直接中斷開始執(zhí)行不按順序
2.4腳本的動(dòng)態(tài)加載 生成dom后不按順序執(zhí)行 可以設(shè)async false后按順序執(zhí)行
2.5加載使用的協(xié)議
3.瀏覽器的組成
3.1渲染引擎
3.2重流和重繪
3.3JavaScript 引擎

網(wǎng)頁中嵌入 JavaScript 代碼，主要有三種方法。

"

如果type屬性的值，瀏覽器不認(rèn)識，那么它不會(huì)執(zhí)行其中的代碼。但是，這個(gè)
"

如果腳本文件使用了非英語字符，還應(yīng)該注明字符的編碼。
為了防止攻擊者篡改外部腳本，script標(biāo)簽允許設(shè)置一個(gè)integrity屬性，寫入該外部腳本的 Hash 簽名，用來驗(yàn)證腳本的一致性
"

"

網(wǎng)頁元素的事件屬性（比如onclick和onmouseover），可以寫入 JavaScript 代碼
"
點(diǎn)擊"

1.4URL 協(xié)議

URL 支持javascript:協(xié)議，即在 URL 的位置寫入代碼，使用這個(gè) URL 的時(shí)候就會(huì)執(zhí)行 JavaScript 代碼。沒有返回值，不進(jìn)行跳轉(zhuǎn)
"
點(diǎn)擊
//瀏覽器的地址欄也可以執(zhí)行javascript:協(xié)議。將javascript:console.log("Hello")放入地址欄，按回車鍵也會(huì)執(zhí)行這段代碼。不進(jìn)行跳轉(zhuǎn)
"

如果 JavaScript 代碼返回一個(gè)字符串，瀏覽器就會(huì)新建一個(gè)文檔，展示這個(gè)字符串的內(nèi)容，原有文檔的內(nèi)容都會(huì)消失。

點(diǎn)擊
上面代碼中，用戶點(diǎn)擊鏈接以后，會(huì)打開一個(gè)新文檔，里面有當(dāng)前時(shí)間。

javascript:協(xié)議的常見用途是書簽?zāi)_本 Bookmarklet。由于瀏覽器的書簽保存的是一個(gè)網(wǎng)址，所以javascript:網(wǎng)址也可以保存在里面，用戶選擇這個(gè)書簽的時(shí)候，就會(huì)在當(dāng)前頁面執(zhí)行這個(gè)腳本。為了防止書簽替換掉當(dāng)前文檔，可以在腳本前加上void，或者在腳本最后加上void 0。
"
點(diǎn)擊
點(diǎn)擊
"

Void執(zhí)行 但不返回值
上面這兩種寫法，點(diǎn)擊鏈接后，執(zhí)行代碼都不會(huì)網(wǎng)頁跳轉(zhuǎn)

2.script 元素 2.1工作原理

1.html一邊下載一邊解析
2.遇到script標(biāo)簽，停止解析，把網(wǎng)頁渲染的控制權(quán)轉(zhuǎn)交給 JavaScript 引擎
3.內(nèi)部的js直接執(zhí)行，外部的js下載和執(zhí)行js代碼.多個(gè)js文件同時(shí)下載，按順序執(zhí)行。如果有css，css在這之前下載解析，或者在js遇到css，停下后去解析css
3.執(zhí)行完成后，繼續(xù)html下載解析。

加載外部腳本時(shí)，瀏覽器會(huì)暫停頁面渲染，等待腳本下載并執(zhí)行完成后，再繼續(xù)渲染。原因是 JavaScript 代碼可以修改 DOM，所以必須把控制權(quán)讓給它，否則會(huì)導(dǎo)致復(fù)雜的線程競賽的問題。

解析和執(zhí)行 CSS，也會(huì)產(chǎn)生阻塞。Firefox 瀏覽器會(huì)等到腳本前面的所有樣式表，都下載并解析完，再執(zhí)行腳本；Webkit則是一旦發(fā)現(xiàn)腳本引用了樣式，就會(huì)暫停執(zhí)行腳本，等到樣式表下載并解析完，再恢復(fù)執(zhí)行。

此外，對于來自同一個(gè)域名的資源，比如腳本文件、樣式表文件、圖片文件等，瀏覽器一般有限制，同時(shí)最多下載6～20個(gè)資源，即最多同時(shí)打開的 TCP 連接有限制，這是為了防止對服務(wù)器造成太大壓力。如果是來自不同域名的資源，就沒有這個(gè)限制。所以，通常把靜態(tài)文件放在不同的域名之下，以加快下載速度。

解決js在dom結(jié)構(gòu)生成之前調(diào)用報(bào)錯(cuò)，可以把script標(biāo)簽放在頁面最后。

另一種解決方法是設(shè)定DOMContentLoaded事件的回調(diào)函數(shù)。
‘



‘

另一種解決方法是，使用
上面代碼中，指定DOMContentLoaded事件發(fā)生后，才開始執(zhí)行相關(guān)代碼。DOMContentLoaded事件只有在 DOM 結(jié)構(gòu)生成之后才會(huì)觸發(fā)

為了解決腳本文件下載阻塞網(wǎng)頁渲染的問題，有了defer和async屬性，區(qū)別在defer在dom加載完成以后按順序執(zhí)行，async直接不按順序執(zhí)行。

2.2defer 屬性

defer屬性的運(yùn)行流程如下。

瀏覽器開始解析 HTML 網(wǎng)頁。
1.解析過程中，發(fā)現(xiàn)帶有defer屬性的
根據(jù)頁面本身的協(xié)議來決定加載協(xié)議，這時(shí)可以采用下面的寫法。

3.瀏覽器的組成

瀏覽器的核心是兩部分：渲染引擎和 JavaScript 解釋器（又稱 JavaScript 引擎）。

3.1渲染引擎

將網(wǎng)頁代碼渲染為用戶視覺可以感知的平面文檔

Firefox:gecko 引擎
safari：WebKit 引擎
Chrome：Blink 引擎
IE: Trident 引擎
Edge: EdgeHTML 引擎

渲染引擎處理網(wǎng)頁，通常分成四個(gè)階段
1.解析代碼：html解析dom css解析為cssom
2.對象合成：合成dom和cssom為渲染renderr tree
3.布局：計(jì)算渲染樹布局layout
4.繪制：將渲染樹繪制到屏幕

往往第一步還沒完成，第二步和第三步就已經(jīng)開始

3.2重流和重繪

渲染樹轉(zhuǎn)換為網(wǎng)頁布局，稱為“布局流”（flow）；布局顯示到頁面的這個(gè)過程，稱為“繪制”（paint）

作為開發(fā)者，應(yīng)該盡量設(shè)法降低重繪的次數(shù)和成本。比如，盡量不要變動(dòng)高層的 DOM 元素，而以底層 DOM 元素的變動(dòng)代替；再比如，重繪table布局和flex布局，開銷都會(huì)比較大。

優(yōu)化技巧。

讀取 DOM 或者寫入 DOM，盡量寫在一起，不要混雜。不要讀取一個(gè) DOM 節(jié)點(diǎn)，然后立刻寫入，接著再讀取一個(gè) DOM 節(jié)點(diǎn)。
緩存 DOM 信息。
不要一項(xiàng)一項(xiàng)地改變樣式，而是使用 CSS class 一次性改變樣式。
使用documentFragment操作 DOM
動(dòng)畫使用absolute定位或fixed定位，這樣可以減少對其他元素的影響。
只在必要時(shí)才顯示隱藏元素。
使用window.requestAnimationFrame()，因?yàn)樗梢园汛a推遲到下一次重流時(shí)執(zhí)行，而不是立即要求頁面重流。
使用虛擬 DOM（virtual DOM）庫
下面是一個(gè)window.requestAnimationFrame()對比效果的例子。
"
// 重繪代價(jià)高
function doubleHeight(element) {
var currentHeight = element.clientHeight;
element.style.height = (currentHeight * 2) + "px";
}

all_my_elements.forEach(doubleHeight);

// 重繪代價(jià)低
function doubleHeight(element) {
var currentHeight = element.clientHeight;

window.requestAnimationFrame(function () {

element.style.height = (currentHeight * 2) + "px";

});
}

all_my_elements.forEach(doubleHeight);

"
上面的第一段代碼，每讀一次 DOM，就寫入新的值，會(huì)造成不停的重排和重流。第二段代碼把所有的寫操作，都累積在一起，從而 DOM 代碼變動(dòng)的代價(jià)就最小化了

3.3JavaScript 引擎

JavaScript 引擎的主要作用是，讀取網(wǎng)頁中的 JavaScript 代碼，對其處理后運(yùn)行

不需要編譯，由解釋器實(shí)時(shí)運(yùn)行。這樣的好處是運(yùn)行和修改都比較方便，刷新頁面就可以重新解釋；缺點(diǎn)是每次運(yùn)行都要調(diào)用解釋器，系統(tǒng)開銷較大，運(yùn)行速度慢于編譯型語言
下面是目前最常見的一些 JavaScript 虛擬機(jī)：

Chakra (Microsoft Internet Explorer)
Nitro/JavaScript Core (Safari)
Carakan (Opera)
SpiderMonkey (Firefox)
V8 (Chrome, Chromium)