前端開發總結

頁面渲染

訪問： https://coolshell.cn/articles/9666.html

1）瀏覽器會解析三個東西：
一個是HTML/SVG/XHTML，事實上，Webkit有三個C 的類對應這三類文件。解析這三種檔案會產生一個DOM Tree。
CSS，解析CSS會產生CSS規則樹。
Javascript，指令碼，主要是通過DOM API和CSSOM API來操作DOM Tree和CSS Rule Tree.

2）解析完成後，瀏覽器引擎會通過DOM Tree 和 CSS Rule Tree 來構造 Rendering Tree。注意：
Rendering Tree 渲染樹並不等同於DOM樹，因為一些像Header或display:none的東西就沒必要放在渲染樹中了。
CSS 的 Rule Tree主要是為了完成匹配並把CSS Rule附加上Rendering Tree上的每個Element。也就是DOM結點。也就是所謂的Frame。
然後，計算每個Frame（也就是每個Element）的位置，這又叫layout和reflow過程。

3）最後通過呼叫作業系統Native GUI的API繪製。

常見的瀏覽器核心引擎

Trident： IE瀏覽器；

Gecko： Firefox瀏覽器；

webkit： Safari，Google Chrome，遨遊3，獵豹，百度瀏覽器；

Presto：Opera的核心

CSS 相容性寫法：

-webkit- ，針對safari，chrome瀏覽器的核心CSS寫法
-moz-，針對firefox瀏覽器的核心CSS寫法
-ms-，針對ie核心的CSS寫法
-o-，針對Opera核心的CSS寫法

瀏覽器中多個標籤頁的通訊

可以利用 localStorage 或 cookie 進行通訊

// 兩種方法設定 localStorage
localStorage['location.href'] = location.href;
localStorage.setItem('location.href', location.href);
// 兩種方法獲取 localStorage
console.info(localStorage['location.href']);
console.info(localStorage.getItem('location.href'));

定義JQuery的作用域
(function ($) {
})(jQuery);

meta 標籤作用