資訊專欄INFORMATION COLUMN
摘要：沒有返回值，不進行跳轉點擊瀏覽器的地址欄也可以執行協議。瀏覽器的組成瀏覽器的核心是兩部分渲染引擎和解釋器又稱引擎。
1.代碼嵌入網頁的方法
1.1script 元素嵌入代碼
1.2script 元素加載外部腳本
1.3事件屬性
1.4URL 協議
2.script 元素
2.1工作原理
2.2defer 屬性 同步下載生成dom后執行按順序
2.3async 屬性 同步下載直接中斷開始執行不按順序
2.4腳本的動態加載 生成dom后不按順序執行 可以設async false后按順序執行
2.5加載使用的協議
3.瀏覽器的組成
3.1渲染引擎
3.2重流和重繪
3.3JavaScript 引擎
網頁中嵌入 JavaScript 代碼，主要有三種方法。
"
如果type屬性的值，瀏覽器不認識，那么它不會執行其中的代碼。但是，這個
"
如果腳本文件使用了非英語字符，還應該注明字符的編碼。
為了防止攻擊者篡改外部腳本，script標簽允許設置一個integrity屬性，寫入該外部腳本的 Hash 簽名，用來驗證腳本的一致性
"
"
網頁元素的事件屬性（比如onclick和onmouseover），可以寫入 JavaScript 代碼
"
URL 支持javascript:協議，即在 URL 的位置寫入代碼，使用這個 URL 的時候就會執行 JavaScript 代碼。沒有返回值，不進行跳轉
"
點擊
//瀏覽器的地址欄也可以執行javascript:協議。將javascript:console.log("Hello")放入地址欄，按回車鍵也會執行這段代碼。不進行跳轉
"
如果 JavaScript 代碼返回一個字符串，瀏覽器就會新建一個文檔，展示這個字符串的內容，原有文檔的內容都會消失。
點擊
上面代碼中，用戶點擊鏈接以后，會打開一個新文檔，里面有當前時間。
javascript:協議的常見用途是書簽腳本 Bookmarklet。由于瀏覽器的書簽保存的是一個網址，所以javascript:網址也可以保存在里面，用戶選擇這個書簽的時候，就會在當前頁面執行這個腳本。為了防止書簽替換掉當前文檔，可以在腳本前加上void，或者在腳本最后加上void 0。
"
點擊
點擊
"
Void執行 但不返回值
上面這兩種寫法，點擊鏈接后，執行代碼都不會網頁跳轉
1.html一邊下載一邊解析
2.遇到script標簽，停止解析，把網頁渲染的控制權轉交給 JavaScript 引擎
3.內部的js直接執行，外部的js下載和執行js代碼.多個js文件同時下載，按順序執行。如果有css，css在這之前下載解析，或者在js遇到css，停下后去解析css
3.執行完成后，繼續html下載解析。
加載外部腳本時，瀏覽器會暫停頁面渲染，等待腳本下載并執行完成后，再繼續渲染。原因是 JavaScript 代碼可以修改 DOM，所以必須把控制權讓給它，否則會導致復雜的線程競賽的問題。
解析和執行 CSS，也會產生阻塞。Firefox 瀏覽器會等到腳本前面的所有樣式表，都下載并解析完，再執行腳本；Webkit則是一旦發現腳本引用了樣式，就會暫停執行腳本，等到樣式表下載并解析完，再恢復執行。
此外，對于來自同一個域名的資源，比如腳本文件、樣式表文件、圖片文件等，瀏覽器一般有限制，同時最多下載6～20個資源，即最多同時打開的 TCP 連接有限制，這是為了防止對服務器造成太大壓力。如果是來自不同域名的資源，就沒有這個限制。所以，通常把靜態文件放在不同的域名之下，以加快下載速度。
解決js在dom結構生成之前調用報錯，可以把script標簽放在頁面最后。
另一種解決方法是設定DOMContentLoaded事件的回調函數。
‘
另一種解決方法是，使用
上面代碼中，指定DOMContentLoaded事件發生后，才開始執行相關代碼。DOMContentLoaded事件只有在 DOM 結構生成之后才會觸發
為了解決腳本文件下載阻塞網頁渲染的問題，有了defer和async屬性，區別在defer在dom加載完成以后按順序執行，async直接不按順序執行。
2.2defer 屬性defer屬性的運行流程如下。
瀏覽器開始解析 HTML 網頁。
1.解析過程中，發現帶有defer屬性的
根據頁面本身的協議來決定加載協議，這時可以采用下面的寫法。
瀏覽器的核心是兩部分：渲染引擎和 JavaScript 解釋器（又稱 JavaScript 引擎）。
3.1渲染引擎將網頁代碼渲染為用戶視覺可以感知的平面文檔
Firefox:gecko 引擎
safari：WebKit 引擎
Chrome：Blink 引擎
IE: Trident 引擎
Edge: EdgeHTML 引擎
渲染引擎處理網頁，通常分成四個階段
1.解析代碼：html解析dom css解析為cssom
2.對象合成：合成dom和cssom為渲染renderr tree
3.布局：計算渲染樹布局layout
4.繪制：將渲染樹繪制到屏幕
往往第一步還沒完成，第二步和第三步就已經開始
3.2重流和重繪渲染樹轉換為網頁布局，稱為“布局流”（flow）；布局顯示到頁面的這個過程，稱為“繪制”（paint）
作為開發者，應該盡量設法降低重繪的次數和成本。比如，盡量不要變動高層的 DOM 元素，而以底層 DOM 元素的變動代替；再比如，重繪table布局和flex布局，開銷都會比較大。
優化技巧。
讀取 DOM 或者寫入 DOM，盡量寫在一起，不要混雜。不要讀取一個 DOM 節點，然后立刻寫入，接著再讀取一個 DOM 節點。
緩存 DOM 信息。
不要一項一項地改變樣式，而是使用 CSS class 一次性改變樣式。
使用documentFragment操作 DOM
動畫使用absolute定位或fixed定位，這樣可以減少對其他元素的影響。
只在必要時才顯示隱藏元素。
使用window.requestAnimationFrame()，因為它可以把代碼推遲到下一次重流時執行，而不是立即要求頁面重流。
使用虛擬 DOM（virtual DOM）庫
下面是一個window.requestAnimationFrame()對比效果的例子。
"
// 重繪代價高
function doubleHeight(element) {
var currentHeight = element.clientHeight;
element.style.height = (currentHeight * 2) + "px";
}
all_my_elements.forEach(doubleHeight);
// 重繪代價低
function doubleHeight(element) {
var currentHeight = element.clientHeight;
window.requestAnimationFrame(function () {
element.style.height = (currentHeight * 2) + "px";
});
}
all_my_elements.forEach(doubleHeight);
"
上面的第一段代碼，每讀一次 DOM，就寫入新的值，會造成不停的重排和重流。第二段代碼把所有的寫操作，都累積在一起，從而 DOM 代碼變動的代價就最小化了
JavaScript 引擎的主要作用是，讀取網頁中的 JavaScript 代碼，對其處理后運行
不需要編譯，由解釋器實時運行。這樣的好處是運行和修改都比較方便，刷新頁面就可以重新解釋；缺點是每次運行都要調用解釋器，系統開銷較大，運行速度慢于編譯型語言
下面是目前最常見的一些 JavaScript 虛擬機：
Chakra (Microsoft Internet Explorer)
Nitro/JavaScript Core (Safari)
Carakan (Opera)
SpiderMonkey (Firefox)
V8 (Chrome, Chromium)
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106083.html
摘要：盒子模型就是在網頁設計中經常用到的技術所使用的一種思維模型。盒子模型是中一個重要的概念，理解了盒子模型才能更好的排版。標準盒子模型從上圖可以看到標準盒子模型的范圍包括，并且部分不包含其他部分。 概述 網頁設計中常聽的屬性名：內容(content)、填充(padding)、邊框(border)、邊界(margin)，CSS盒子模型都具備這些屬性，也主要是這些屬性。 這些屬性我們可以把它...
摘要：概述最近公司在做一個大型的應用，總結如下建模軟件建模自定義一套語義化的模型格式，并編寫模型格式轉化插件把建模軟件的模型格式轉成自定義格式。 概述 最近公司在做一個大型的webgl應用，總結如下: 1.建模軟件建模(3d Max revit) 2.自定義一套 語義化的模型格式，并編寫模型格式轉化插件,把建模軟件的模型格式轉成自定義格式。 為什么要自定義語義化的模型格式呢？ 因為，現在瀏覽...
摘要：引言盒模型是頁面布局中經常會使用到的一種思維模型，將等概念運用日常生活中的盒子來形容，因此稱之為盒模型。一什么是盒模型我們首先來看一下在中盒模型的樣子我們可以清楚的看出，盒模型由內容內邊距邊框外邊距組成。 引言 CSS盒模型是頁面布局中經常會使用到的一種思維模型，將margin、border、padding、content等概念運用日常生活中的盒子來形容，因此稱之為盒模型。 一、什么是...
摘要：引言盒模型是頁面布局中經常會使用到的一種思維模型，將等概念運用日常生活中的盒子來形容，因此稱之為盒模型。一什么是盒模型我們首先來看一下在中盒模型的樣子我們可以清楚的看出，盒模型由內容內邊距邊框外邊距組成。 引言 CSS盒模型是頁面布局中經常會使用到的一種思維模型，將margin、border、padding、content等概念運用日常生活中的盒子來形容，因此稱之為盒模型。 一、什么是...
閱讀 3469·2023-04-25 21:43
閱讀 3098·2019-08-29 17:04
閱讀 797·2019-08-29 16:32
閱讀 1533·2019-08-29 15:16
閱讀 2144·2019-08-29 14:09
閱讀 2732·2019-08-29 13:07
閱讀 1623·2019-08-26 13:32
閱讀 1320·2019-08-26 12:00
