前端開發總結

頁面渲染

訪問 ： 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 標籤做用

<meta charset="utf-8">
        <!-- IE 支持經過特定的 <meta> 標籤來肯定繪製當前頁面所應該採用的 IE 版本。除非有強烈的特殊需求，不然最好是設置爲 edge mode，從而通知 IE 採用其所支持的最新的模式。-->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>         <!-- 上述3個meta標籤*必須*放在最前面，任何其餘內容都*必須*跟隨其後！ -->